last changes to petros

1 files changed, 14 insertions, 5 deletions

diff --git a/frontend/site/projects/museum/views/petros.nav.js b/frontend/site/projects/museum/views/petros.nav.js
index 7cf82f5..4eb6d5e 100644
--- a/frontend/site/projects/museum/views/petros.nav.js
+++ b/frontend/site/projects/museum/views/petros.nav.js
@@ -17,6 +17,7 @@ import PetrosText from "./petros.text"
 const RESET_STATE = {
   ready: false,
   hovering: null,
+  textPrep: false,
   textActive: false,
   textDone: false,
   textOpacity: 0.0,
@@ -112,7 +113,7 @@ class PetrosNav extends Component {
     preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}-White.png`)
     preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}.png`)
     preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/NavBW${index}.png`)
-    preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/NavB${index}.png`)
+    preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/Loading Animation ${index}.png`)
     this.setState({
       ...RESET_STATE,
       index
@@ -156,6 +157,7 @@ class PetrosNav extends Component {
   handleClickText() {
     if (this.state.textActive || this.state.text) return
     this.setState({
+      textPrep: false,
       textActive: true,
       textDone: false,
       hovering: false,
@@ -164,7 +166,7 @@ class PetrosNav extends Component {
     })
 
     // Fetch the subtitles
-    const subtitle_index = 1
+    const subtitle_index = this.state.index
     const subtitle_choice = pad(randint(SUBTITLE_COUNT) + 1, 3)
     fetch(`/thelastmuseum/static/media/last-museum/petros-moris/texts/Oracle${subtitle_index}/Oracle${subtitle_index}-${subtitle_choice}.txt`, {
       method: 'GET',
@@ -172,6 +174,13 @@ class PetrosNav extends Component {
     .then(res => res.text())
     .then(text => this.setState({ text: text.trim() }))
 
+    // Brief delay before showing the loader
+    setTimeout(() => {
+      this.setState({
+        textPrep: true,
+      })
+    }, 1000)
+
     this.textTimeout = setTimeout(() => {
       // Turn off the glyph
       // Prep the text component
@@ -249,7 +258,7 @@ class PetrosNav extends Component {
     const {
       index, ready,
       hovering, iconFade,
-      textActive, textDone, textOpacity, text,
+      textPrep, textActive, textDone, textOpacity, text,
       glyphTransform,
     } = this.state
     if (!this.props.interactive || (!index)) return null
@@ -258,10 +267,10 @@ class PetrosNav extends Component {
     return (
       <div>
         <img
-          className={textActive ? "petros-loader visible" : "petros-loader"}
+          className={(textPrep && textActive) ? "petros-loader visible" : "petros-loader"}
           style={glyphTransform}
           src={
-            "/thelastmuseum/static/media/last-museum/petros-moris/NEWLoopingAnimation.png"
+            `/thelastmuseum/static/media/last-museum/petros-moris/Loading Animation ${index}.png`
           }
         />