adding texts. start nav

3 files changed, 118 insertions, 0 deletions

diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index 921f751..ab62941 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -19,6 +19,7 @@ import LandscapeWarning from './landscape.warning'
 
 import TextOverlay from './text.overlay'
 import JakrawalLinks from './jakrawal.links'
+import PetrosNav from './petros.nav'
 import TitlesOverlay from './titles.overlay'
 import Flash from './flash'
 import Marquee from './marquee'
@@ -266,6 +267,7 @@ class NavOverlay extends Component {
     return (
       <div className="museum-nav">
         <JakrawalLinks location={this.props.location} match={this.props.match} />
+        <PetrosNav location={this.props.location} match={this.props.match} />
         {showCounter && <Counter />}
         <TextOverlay location={this.props.location} match={this.props.match} />
         {showFooter && (
diff --git a/frontend/site/projects/museum/views/petros.nav.css b/frontend/site/projects/museum/views/petros.nav.css
new file mode 100644
index 0000000..2cd6271
--- /dev/null
+++ b/frontend/site/projects/museum/views/petros.nav.css
@@ -0,0 +1,15 @@
+.petros-left {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+}
+.petros-right {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+}
+.petros-text {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
diff --git a/frontend/site/projects/museum/views/petros.nav.js b/frontend/site/projects/museum/views/petros.nav.js
new file mode 100644
index 0000000..ebabf51
--- /dev/null
+++ b/frontend/site/projects/museum/views/petros.nav.js
@@ -0,0 +1,101 @@
+/**
+ * Navigation for Petros Moris "Oracle"
+ */
+
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import './petros.nav.css'
+
+import { history } from "site/store"
+import { preloadImage } from 'app/utils'
+
+const RESET_STATE = {
+}
+
+const LOADING_TIMEOUT = 15000
+const ADVANCE_TIMEOUT = 40000
+
+class PetrosNav extends Component {
+  state = {
+    ...RESET_STATE
+  }
+
+  constructor(props) {
+    super(props)
+    this.handleEnter = this.handleEnter.bind(this)
+    this.handleLeave = this.handleLeave.bind(this)
+  }
+
+  componentDidMount() {
+    if (this.props.interactive) {
+      this.load()
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      (this.props.interactive && this.props.interactive !== prevProps.interactive)
+      || this.props.location.pathname !== prevProps.location.pathname
+    ) {
+      this.load(prevProps.match && prevProps.match.params)
+    }
+  }
+
+  load(lastParams) {
+    const { page_name } = this.props.match.params
+    const page_partz = page_name.split("-")
+    const isPetros = page_partz[0] === 'petros'
+    const index = parseInt(page_partz[1])
+
+    if (!isPetros) {
+      clearTimeout(this.autoadvanceTimeout)
+      clearTimeout(this.timeout)
+      this.setState({
+        ...RESET_STATE,
+      })
+      return      
+    }
+    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`)
+    this.setState({
+      ...RESET_STATE,
+      index
+    })
+  }
+
+  handleEnter(event) {
+    const side = event.target.className.split('-')
+    this.setState({ hovering: side })
+  }
+  handleLeave(event) {
+    this.setState({ hovering: side })
+  }
+  handleClickText() {
+
+  }
+  navigate() {
+    // history.push(`/thelastmuseum/nilthamrong-${this.state.lateralLink}`)
+  }
+
+  render() {
+    const { index } = this.state
+    if (!this.props.interactive || (!index)) return null
+    return (
+      <div>
+        <img className="petros-text" onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave} onClick={this.handleClickText} />
+        <img className="petros-left" onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave} onClick={this.navigate} />
+        <img className="petros-right" onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave} onClick={this.navigate} />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  interactive: state.site.interactive,
+  popups: state.site.popups,
+})
+
+export default connect(mapStateToProps)(PetrosNav)