new glyph order and some interaction changes

1 files changed, 65 insertions, 17 deletions

diff --git a/frontend/site/projects/museum/views/petros.nav.js b/frontend/site/projects/museum/views/petros.nav.js
index 232e1d0..db7737b 100644
--- a/frontend/site/projects/museum/views/petros.nav.js
+++ b/frontend/site/projects/museum/views/petros.nav.js
@@ -10,6 +10,7 @@ import './petros.nav.css'
 import { history } from "site/store"
 import { preloadImage } from "app/utils"
 import actions from "site/actions"
+import { generateTransform } from 'app/views/tile/tile.utils'
 
 const RESET_STATE = {
   ready: false,
@@ -21,6 +22,17 @@ const RESET_STATE = {
   text: null,
 }
 
+const NAV_GLYPH = {
+  0: { left: 6, right: 1 },
+  1: { left: 6, right: 1 },
+  2: { left: 2, right: 3 },
+  3: { left: 1, right: 5 },
+  4: { left: 3, right: 4 },
+  5: { left: 5, right: 7 },
+  6: { left: 4, right: 6 },
+  7: { left: 7, right: 2 },
+}
+
 const MOVEMENT = "movement"
 const LOOP = "loop"
 
@@ -34,17 +46,21 @@ const INITIAL_VIEW = {
   7: LOOP,
 }
 
-const LOOP_TIMEOUT = 20
-const MOVEMENT_TIMEOUT = 40000
-const TEXT_LOAD_TIMEOUT = 15000
+// set this to 0.1 in development, 1.0 otherwise :)
+const FASTFORWARD = 0.1
+
+const LOOP_TIMEOUT = 6000 * FASTFORWARD
+const MOVEMENT_TIMEOUT = 40000 * FASTFORWARD
+const TEXT_LOAD_TIMEOUT = 15000 * FASTFORWARD
 const TEXT_SHOW_TIMEOUT = 20
-const TEXT_HIDE_TIMEOUT = 15000
+const TEXT_HIDE_TIMEOUT = 15000 *FASTFORWARD
 
 const SUBTITLE_COUNT = 12
 
 class PetrosNav extends Component {
   state = {
-    ...RESET_STATE
+    ...RESET_STATE,
+    glyphTransform: {},
   }
 
   constructor(props) {
@@ -68,6 +84,9 @@ class PetrosNav extends Component {
     ) {
       this.load(prevProps.match && prevProps.match.params)
     }
+    if (this.props.page && this.props.page !== prevProps.page && this.props.page.path.match("petros-")) {
+      this.findGlyphPosition()
+    }
   }
 
   load(lastParams) {
@@ -81,6 +100,7 @@ class PetrosNav extends Component {
       clearTimeout(this.textTimeout)
       this.setState({
         ...RESET_STATE,
+        index: 0, // setting this unloads the component
       })
       return      
     }
@@ -99,6 +119,26 @@ class PetrosNav extends Component {
     }, INITIAL_VIEW[index] === MOVEMENT ? MOVEMENT_TIMEOUT : LOOP_TIMEOUT)
   }
 
+  findGlyphPosition() {
+    const { page } = this.props
+    const bounds = { width: window.innerWidth, height: window.innerHeight }
+    const videoBounds = {
+      width: page.tiles[0].settings.width,
+      height: page.tiles[0].settings.height,
+    }
+    page.tiles.some(tile => {
+      if (tile.settings.popup_group === "glyph") {
+        let transform = generateTransform(tile, null, bounds, videoBounds)
+        transform = transform.replace(/scale(\d+\.\d+)/g, "")
+        this.setState({
+          glyphTransform: {
+            transform
+          }
+        })
+      }
+    })
+  }
+
   handleEnter(event) {
     const side = event.target.className.match(/-(\w+)/)[1]
     this.setState({ hovering: side })
@@ -116,11 +156,14 @@ class PetrosNav extends Component {
       textOpacity: 0.0,
       text: null
     })
+
     // Turn on the glyph
-    actions.site.setPopups({
-      ...this.props.popups,
-      glyph: true,
-    })
+    setTimeout(() => {
+      actions.site.setPopups({
+        ...this.props.popups,
+        glyph: true,
+      })
+    }, 500)
 
     // Fetch the subtitles
     const subtitle_index = 1
@@ -130,7 +173,6 @@ class PetrosNav extends Component {
     })
     .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({
@@ -163,7 +205,6 @@ class PetrosNav extends Component {
     if (textActive) return
     const side = event.target.className.match(/-(\w+)/)[1]
     // if navigating to the left, just navigate.
-    console.log(side, index)
     if (side === "left") {
       if (index !== leftIndex) {
         history.push(`/thelastmuseum/petros-${leftIndex}`)
@@ -171,13 +212,13 @@ class PetrosNav extends Component {
     } else if (side === "right") {
       // if this page starts with the loop, switch to movement
       // this will autoadvance when the video is done (set in tile settings)
-      console.log(INITIAL_VIEW[index])
       if (INITIAL_VIEW[index] === LOOP) {
         actions.site.setPopups({
           ...this.props.popups,
           movement: true,
         })
-        this.setState({ ready: false })
+        this.setState({ ready: false, iconFade: false, textOpacity: 0 })
+        clearTimeout(this.textTimeout)
       } else {
         // otherwise, just advance immediately.
         history.push(`/thelastmuseum/petros-${rightIndex}`)
@@ -186,14 +227,20 @@ class PetrosNav extends Component {
   }
 
   render() {
-    const { index, ready, hovering, textActive, textDone, textOpacity, iconFade, text } = this.state
+    const {
+      index, ready,
+      hovering, iconFade,
+      textActive, textDone, textOpacity, text,
+      glyphTransform,
+    } = this.state
     if (!this.props.interactive || (!index)) return null
-    const leftIndex = Math.max(1, index - 1)
-    const rightIndex = Math.min(7, index + 1)
+    const leftIndex = NAV_GLYPH[index].left
+    const rightIndex = NAV_GLYPH[index].right
     return (
       <div>
         <img
-          className={ready ? "petros-text visible" : "petros-text"}
+          className={(ready && !(textActive || textDone)) ? "petros-text visible" : "petros-text"}
+          style={glyphTransform}
           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`
@@ -243,6 +290,7 @@ const randint = n => Math.floor(Math.random() * n)
 const mapStateToProps = state => ({
   interactive: state.site.interactive,
   popups: state.site.popups,
+  page: state.site.page,
 })