From 4f490f77a615b1c816cbeb8b42bbfee2345a8d11 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 9 Sep 2021 16:29:25 +0200
Subject: adding a little fade i guess

---
 frontend/site/projects/museum/views/petros.nav.js | 56 +++++++++++++++--------
 1 file changed, 36 insertions(+), 20 deletions(-)

(limited to 'frontend/site/projects/museum/views/petros.nav.js')

diff --git a/frontend/site/projects/museum/views/petros.nav.js b/frontend/site/projects/museum/views/petros.nav.js
index fda1bb8..d7236ac 100644
--- a/frontend/site/projects/museum/views/petros.nav.js
+++ b/frontend/site/projects/museum/views/petros.nav.js
@@ -52,10 +52,10 @@ const INITIAL_VIEW = {
 const FASTFORWARD = 0.1
 
 const LOOP_TIMEOUT = 6000 * FASTFORWARD
-const MOVEMENT_TIMEOUT = 40000 * FASTFORWARD
+const MOVEMENT_TIMEOUT = 40500 * FASTFORWARD
 const TEXT_LOAD_TIMEOUT = 15000 * FASTFORWARD
-const TEXT_SHOW_TIMEOUT = 20
-const TEXT_HIDE_TIMEOUT = 15000 *FASTFORWARD
+const SHOW_NAV_TIMEOUT = 10000 * FASTFORWARD
+const TEXT_HIDE_TIMEOUT = 20000 * FASTFORWARD
 
 const SUBTITLE_COUNT = 12
 
@@ -72,7 +72,7 @@ class PetrosNav extends Component {
     this.handleEnter = this.handleEnter.bind(this)
     this.handleLeave = this.handleLeave.bind(this)
     this.handleClickText = this.handleClickText.bind(this)
-    this.textComplete = this.textComplete.bind(this)
+    this.handleTextComplete = this.handleTextComplete.bind(this)
     this.navigate = this.navigate.bind(this)
   }
 
@@ -157,6 +157,7 @@ class PetrosNav extends Component {
     if (this.state.textActive || this.state.text) return
     this.setState({
       textActive: true,
+      textDone: false,
       hovering: false,
       textOpacity: 0.0,
       text: null
@@ -180,28 +181,40 @@ class PetrosNav extends Component {
     .then(text => this.setState({ text: text.trim() }))
 
     this.textTimeout = setTimeout(() => {
-      this.setState({
-        textActive: false,
-        textDone: true,
-        textOpacity: 0.0,
-      })
-
       // Turn off the glyph
       actions.site.setPopups({
         ...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)
+      // Prep the text component
+      this.setState({
+        textActive: false,
+        textDone: true,
+      })
 
+      // Start displaying the words after a brief delay
+      this.textTimeout = setTimeout(() => {
+        this.setState({
+          textActive: false,
+          textOpacity: 1.0,
+        })
+      }, 200)
     }, TEXT_LOAD_TIMEOUT)
   }
 
+  /** Called once the text is done displaying */
+  handleTextComplete() {
+    this.textTimeout = setTimeout(() => {
+      // After a delay, show the nav buttons
+      this.setState({ iconFade: true })
+      // After a longer delay, hide the text
+      this.textTimeout = setTimeout(() => {
+        this.setState({ textOpacity: 0.0 })
+      }, TEXT_HIDE_TIMEOUT)
+    }, SHOW_NAV_TIMEOUT)
+  }
+
   /** Navigate using the links at the bottom */
   navigate() {
     const { index, textActive } = this.state
@@ -222,7 +235,11 @@ class PetrosNav extends Component {
           ...this.props.popups,
           movement: true,
         })
-        this.setState({ ready: false, iconFade: false, textOpacity: 0 })
+        this.setState({
+          ready: false,
+          iconFade: false,
+          textOpacity: 0.0,
+        })
         clearTimeout(this.textTimeout)
       } else {
         // otherwise, just advance immediately.
@@ -258,7 +275,7 @@ class PetrosNav extends Component {
         {ready && (
           <img
             className={(textDone && iconFade) ? "petros-left visible" : "petros-left"}
-            src={(hovering === "left" || textActive || index === leftIndex)
+            src={(hovering === "left" || textActive || index === 1)
               ? `/thelastmuseum/static/media/last-museum/petros-moris/NavBW${leftIndex}.png`
               : `/thelastmuseum/static/media/last-museum/petros-moris/NavB${leftIndex}.png`
             }
@@ -281,7 +298,7 @@ class PetrosNav extends Component {
         )}
         {!textActive && text && (
           <div className="petros-subtitle" style={{ opacity: textOpacity }}>
-            <PetrosText ready={textOpacity} text={text} timePerWord={TIME_PER_WORD} onComplete={this.textComplete} />
+            <PetrosText ready={!!textOpacity} text={text} timePerWord={TIME_PER_WORD} onComplete={this.handleTextComplete} />
           </div>
         )}
       </div>
@@ -289,7 +306,6 @@ class PetrosNav extends Component {
   }
 }
 
-
 const randint = n => Math.floor(Math.random() * n)
 
 const mapStateToProps = state => ({
-- 
cgit v1.2.3-70-g09d2