interactions working

1 files changed, 60 insertions, 31 deletions

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)