interactions working

4 files changed, 104 insertions, 41 deletions

diff --git a/frontend/site/projects/museum/app/roadblock.css b/frontend/site/projects/museum/app/roadblock.css
index d6796d3..e0de3d2 100644
--- a/frontend/site/projects/museum/app/roadblock.css
+++ b/frontend/site/projects/museum/app/roadblock.css
@@ -16,7 +16,7 @@
   cursor: pointer;
 }
 .roadblock-byline {
-  font-family: "Druk Wide";
+  font-family: "Druk Wide", sans-serif;
   opacity: 1;
   white-space: nowrap;
   transition: opacity 0.2s;
@@ -27,7 +27,7 @@
   cursor: pointer;
 }
 .roadblock-title {
-  font-family: "Druk";
+  font-family: "Druk", sans-serif;
   font-weight: 900;
   font-style: italic;
   white-space: nowrap;
diff --git a/frontend/site/projects/museum/views/home.css b/frontend/site/projects/museum/views/home.css
index c537ec9..bad8e4f 100644
--- a/frontend/site/projects/museum/views/home.css
+++ b/frontend/site/projects/museum/views/home.css
@@ -61,7 +61,7 @@ html {
 /* home styling */
 
 .home-byline {
-  font-family: "Druk Wide";
+  font-family: "Druk Wide", sans-serif;
   opacity: 1;
   white-space: nowrap;
   transition: opacity 0.2s;
@@ -71,7 +71,7 @@ html {
   position: absolute;
 }
 .home-title {
-  font-family: "Druk";
+  font-family: "Druk", sans-serif;
   font-weight: 900;
   font-style: italic;
   white-space: nowrap;
@@ -84,7 +84,7 @@ html {
   transition: top 0.2s cubic-bezier(0,0,0,1);
 }
 .home-artists {
-  font-family: "Druk Wide";
+  font-family: "Druk Wide", sans-serif;
   opacity: 1;
   white-space: nowrap;
   transition: opacity 0.2s;
@@ -95,7 +95,7 @@ html {
   bottom: 6vh;
 }
 .home-message {
-  font-family: "Druk Wide";
+  font-family: "Druk Wide", sans-serif;
   opacity: 0.0;
   transition: opacity 0.2s;
   width: 140vh;
diff --git a/frontend/site/projects/museum/views/petros.nav.css b/frontend/site/projects/museum/views/petros.nav.css
index e59d85d..554d690 100644
--- a/frontend/site/projects/museum/views/petros.nav.css
+++ b/frontend/site/projects/museum/views/petros.nav.css
@@ -1,15 +1,49 @@
 .petros-left {
   position: absolute;
   bottom: 70px;
-  left: 30px;
+  left: 40px;
+  cursor: pointer;
+  opacity: 0.0;
+  transition: opacity 0.2s;
+  pointer-events: none;
 }
 .petros-right {
   position: absolute;
   bottom: 70px;
-  right: 30px;
+  right: 40px;
+  cursor: pointer;
+  opacity: 0.0;
+  transition: opacity 0.2s;
+  pointer-events: none;
 }
 .petros-text {
   position: absolute;
-  top: 20px;
-  right: 20px;
+  top: 40px;
+  right: 40px;
+  cursor: pointer;
+  opacity: 0.0;
+  transition: opacity 0.2s;
+  pointer-events: none;
+}
+
+.petros-left.visible,
+.petros-right.visible,
+.petros-text.visible {
+  opacity: 1.0;
+  pointer-events: auto;
+}
+
+.petros-subtitle {
+  position: absolute;
+  bottom: 70px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: calc(100vw - 400px);
+  text-align: center;
+  font-family: 'Druk Wide', sans-serif;
+  font-size: 2vw;
+  pointer-events: none;
+  color: #fff;
+  text-shadow: 0 0 3px #fff;
+  transition: opacity 0.2s;
 }
diff --git a/frontend/site/projects/museum/views/petros.nav.js b/frontend/site/projects/museum/views/petros.nav.js
index 9ccfdff..232e1d0 100644
--- a/frontend/site/projects/museum/views/petros.nav.js
+++ b/frontend/site/projects/museum/views/petros.nav.js
@@ -12,9 +12,13 @@ import { preloadImage } from "app/utils"
 import actions from "site/actions"
 
 const RESET_STATE = {
+  ready: false,
+  hovering: null,
   textActive: false,
   textDone: false,
-  ready: false,
+  textOpacity: 0.0,
+  iconFade: false,
+  text: null,
 }
 
 const MOVEMENT = "movement"
@@ -30,9 +34,13 @@ const INITIAL_VIEW = {
   7: LOOP,
 }
 
-const LOOP_TIMEOUT = 100
+const LOOP_TIMEOUT = 20
 const MOVEMENT_TIMEOUT = 40000
 const TEXT_LOAD_TIMEOUT = 15000
+const TEXT_SHOW_TIMEOUT = 20
+const TEXT_HIDE_TIMEOUT = 15000
+
+const SUBTITLE_COUNT = 12
 
 class PetrosNav extends Component {
   state = {
@@ -70,6 +78,7 @@ class PetrosNav extends Component {
 
     if (!isPetros) {
       clearTimeout(this.readyTimeout)
+      clearTimeout(this.textTimeout)
       this.setState({
         ...RESET_STATE,
       })
@@ -91,7 +100,7 @@ class PetrosNav extends Component {
   }
 
   handleEnter(event) {
-    const side = event.target.className.split('-')
+    const side = event.target.className.match(/-(\w+)/)[1]
     this.setState({ hovering: side })
   }
   handleLeave(event) {
@@ -100,21 +109,34 @@ class PetrosNav extends Component {
 
   /** Start text generation sequence */
   handleClickText() {
-    if (this.state.textActive) return
+    if (this.state.textActive || this.state.text) return
     this.setState({
       textActive: true,
-      hovering: false
+      hovering: false,
+      textOpacity: 0.0,
+      text: null
     })
     // Turn on the glyph
     actions.site.setPopups({
       ...this.props.popups,
       glyph: true,
     })
+
     // Fetch the subtitles
+    const subtitle_index = 1
+    const subtitle_choice = randint(SUBTITLE_COUNT) + 1
+    fetch(`/thelastmuseum/static/media/last-museum/petros-moris/texts/${subtitle_index}/${subtitle_choice}.txt`, {
+      method: 'GET',
+    })
+    .then(res => res.text())
+    .then(text => this.setState({ text: text.trim() }))
+    .catch(err => this.setState({ text: "Flowing into the atmosphere through the cracks,\nthe fluid rock creates mountains that look alike the skin of serpents" }))
+
     this.textTimeout = setTimeout(() => {
       this.setState({
         textActive: false,
         textDone: true,
+        textOpacity: 0.0,
       })
 
       // Turn off the glyph
@@ -122,6 +144,14 @@ class PetrosNav extends Component {
         ...this.props.popups,
         glyph: false,
       })
+
+      this.textTimeout = setTimeout(() => {
+        this.setState({ textOpacity: 1.0, iconFade: true })
+        this.textTimeout = setTimeout(() => {
+          this.setState({ textOpacity: 0.0 })
+        }, TEXT_HIDE_TIMEOUT)
+      }, TEXT_SHOW_TIMEOUT)
+
     }, TEXT_LOAD_TIMEOUT)
   }
 
@@ -131,7 +161,7 @@ class PetrosNav extends Component {
     const leftIndex = Math.max(1, index - 1)
     const rightIndex = Math.min(7, index + 1)
     if (textActive) return
-    const side = event.target.className.split('-')
+    const side = event.target.className.match(/-(\w+)/)[1]
     // if navigating to the left, just navigate.
     console.log(side, index)
     if (side === "left") {
@@ -156,65 +186,64 @@ class PetrosNav extends Component {
   }
 
   render() {
-    const { index, ready, hovering, textActive, textDone } = this.state
+    const { index, ready, hovering, textActive, textDone, textOpacity, iconFade, text } = this.state
     if (!this.props.interactive || (!index)) return null
     const leftIndex = Math.max(1, index - 1)
     const rightIndex = Math.min(7, index + 1)
     return (
       <div>
+        <img
+          className={ready ? "petros-text visible" : "petros-text"}
+          src={(hovering === "text" || textActive || textDone)
+            ? `/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}-White.png`
+            : `/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}.png`
+          }
+          onMouseEnter={this.handleEnter}
+          onMouseLeave={this.handleLeave}
+          onClick={this.handleClickText}
+        />
+
         {ready && (
           <img
-            className="petros-text"
-            src={(hovering === "text" || textActive)
-              ? `/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}-White.png`
-              : `/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}.png`
-            }
-            style={{
-              cursor: `url(/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}-White.png), pointer`
-            }}
-            onMouseEnter={this.handleEnter}
-            onMouseLeave={this.handleLeave}
-            onClick={this.handleClickText}
-          />
-        )}
-        {ready && textDone && (
-          <img
-            className="petros-left"
+            className={(textDone && iconFade) ? "petros-left visible" : "petros-left"}
             src={(hovering === "left" || textActive || index === leftIndex)
               ? `/thelastmuseum/static/media/last-museum/petros-moris/NavBW${leftIndex}.png`
               : `/thelastmuseum/static/media/last-museum/petros-moris/NavB${leftIndex}.png`
             }
-            style={{
-              cursor: `url(/thelastmuseum/static/media/last-museum/petros-moris/NavBW${leftIndex}-White.png), pointer`
-            }}
             onMouseEnter={this.handleEnter}
             onMouseLeave={this.handleLeave}
             onClick={this.navigate}
           />
         )}
-        {ready && textDone && (
+        {ready && (
           <img
-            className="petros-right"
+            className={(textDone && iconFade) ? "petros-right visible" : "petros-right"}
             src={(hovering === "right" || textActive)
               ? `/thelastmuseum/static/media/last-museum/petros-moris/NavBW${rightIndex}.png`
               : `/thelastmuseum/static/media/last-museum/petros-moris/NavB${rightIndex}.png`
             }
-            style={{
-              cursor: `url(/thelastmuseum/static/media/last-museum/petros-moris/NavBW${rightIndex}-White.png), pointer`
-            }}
             onMouseEnter={this.handleEnter}
             onMouseLeave={this.handleLeave}
             onClick={this.navigate}
           />
         )}
+        {!textActive && text && (
+          <div className="petros-subtitle" style={{ opacity: textOpacity }}>
+            {text}
+          </div>
+        )}
       </div>
     )
   }
 }
 
+
+const randint = n => Math.floor(Math.random() * n)
+
 const mapStateToProps = state => ({
   interactive: state.site.interactive,
   popups: state.site.popups,
 })
 
+
 export default connect(mapStateToProps)(PetrosNav)