1 files changed, 39 insertions, 6 deletions

diff --git a/frontend/site/projects/museum/views/titles.overlay.js b/frontend/site/projects/museum/views/titles.overlay.js
index a772559..b3d41e4 100644
--- a/frontend/site/projects/museum/views/titles.overlay.js
+++ b/frontend/site/projects/museum/views/titles.overlay.js
@@ -5,6 +5,8 @@ import { SUBTITLES } from '../subtitles.js'
 
 import './titles.css'
 
+import { history } from "site/store"
+
 const HEADPHONES_SHOW_DELAY = 500
 const HEADPHONES_HIDE_DELAY = 3000
 const TITLE_SHOW_DELAY = 1000
@@ -16,6 +18,8 @@ const LAST_SUBTITLE_DELAY = 5000
 class TitlesOverlay extends Component {
   state = {
     content: null,
+    showText: false,
+        beating: false,
   }
 
   constructor(props) {
@@ -23,6 +27,7 @@ class TitlesOverlay extends Component {
     this.titleRef = React.createRef()
     this.showTitle = this.showTitle.bind(this)
     this.showHeadphones = this.showHeadphones.bind(this)
+    this.advance = this.advance.bind(this)
   }
 
   componentDidMount() {
@@ -42,9 +47,12 @@ class TitlesOverlay extends Component {
       this.props.popups !== prevProps.popups
       && this.state.content
       && this.state.content.popup
-      && this.props.popups[this.state.content.popup]
     ) {
-      this.startHeartbeat()
+      if (this.props.popups[this.state.content.popup]) {
+        this.startHeartbeat()
+      } else if (this.state.beating) {
+        this.setState({ showText: true })
+      }
     }
   }
 
@@ -55,13 +63,15 @@ class TitlesOverlay extends Component {
     if (SUBTITLES[page_name]) {
       this.setState({
         content: SUBTITLES[page_name],
-        open: false,
+        showText: false,
+        beating: false,
       })
       setTimeout(SUBTITLES[page_name].headphones ? this.showHeadphones : this.showTitle, 0)
     } else {
       this.setState({
         content: null,
-        open: false,
+        showText: false,
+        beating: false,
       })
     }
   }
@@ -73,6 +83,7 @@ class TitlesOverlay extends Component {
         id: "text-overlay",
         url: this.state.content.audio_url,
       })
+      this.setState({ beating: true })
     }
   }
 
@@ -103,8 +114,12 @@ class TitlesOverlay extends Component {
     }, TITLE_SHOW_DELAY)
   }
 
+  advance(){
+    history.push(`/last-museum/${this.state.content.next}/`)
+  }
+
   render() {
-    const { content } = this.state
+    const { content, showText } = this.state
     const { popups, interactive } = this.props
     if (!interactive || !content) return null
     return (
@@ -112,7 +127,25 @@ class TitlesOverlay extends Component {
         <div
           ref={this.titleRef}
           className="chapter-title"
-        >{this.state.content.title}
+        >
+          {this.state.content.title}
+        </div>
+        <div
+          className={showText ? "charles-text visible" : "charles-text"}
+          style={{
+            cursor: `url(${this.state.content.cursor}) 50 50, pointer`
+          }}
+          onClick={this.advance}
+        >
+          {showText && (
+            <span>
+              <i>{this.state.content.title}</i>
+              <br/><br/>
+              {this.state.content.text}
+              <br/><br/>
+              {this.state.content.credit}
+            </span>
+          )}
         </div>
       </div>
     )