4 files changed, 157 insertions, 24 deletions

diff --git a/frontend/site/projects/museum/views/home.css b/frontend/site/projects/museum/views/home.css
index 597c66b..188840b 100644
--- a/frontend/site/projects/museum/views/home.css
+++ b/frontend/site/projects/museum/views/home.css
@@ -113,3 +113,15 @@ html {
 .home.open .home-byline {
   opacity: 0;
 }
+
+.curtain {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  background: #111111;
+  transition: opacity 0.2s;
+  opacity: 1.0;
+}
+.curtain.hidden {
+  opacity: 0;
+}
\ No newline at end of file
diff --git a/frontend/site/projects/museum/views/home.js b/frontend/site/projects/museum/views/home.js
index e3c44d5..1520c11 100644
--- a/frontend/site/projects/museum/views/home.js
+++ b/frontend/site/projects/museum/views/home.js
@@ -1,22 +1,27 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 
 import actions from 'site/actions'
 
 import "./home.css"
 
-export default class Home extends Component {
-  state = {
-    open: false,
-  }
-
+class Home extends Component {
   constructor(props) {
     super(props)
     this.handleClick = this.handleClick.bind(this)
+    this.state = {
+      open: false,
+      hidden: this.props.interactive,
+      showCurtain: true,
+    }
   }
 
   componentDidMount() {
     const roadblock = document.querySelector('.roadblock')
     if (roadblock) roadblock.style.display = "none"
+    setTimeout(() => {
+      this.setState({ showCurtain: false })
+    }, 100)
   }
 
   handleClick(e) {
@@ -44,13 +49,20 @@ export default class Home extends Component {
         <div className="home-artists artists-right">
           CHARLES STANKIEVECH<br />
           JAKRAWAL NILTHAMRONG<br />
-          ZOHRA OPOKO
+          ZOHRA OPOKU
         </div>
         <div className="home-byline byline-bottom">CURATED BY NADIM SAMMAN</div>
         <div className="home-message">
           Lorem ipsum dolor sit amet, pro ea errem nonumes, gubergren deterruisset sit eu. Quo nostrud definitiones ex, sea dicant accommodare ei, te vix habeo minim voluptatum.
         </div>
+        <div className={this.state.showCurtain ? "curtain" : "curtain hidden"} />
       </div>
     )
   }
 }
+
+const mapStateToProps = state => ({
+  interactive: state.site.interactive,
+})
+
+export default connect(mapStateToProps)(Home)
diff --git a/frontend/site/projects/museum/views/nav.css b/frontend/site/projects/museum/views/nav.css
index 2b6d75a..a44758f 100644
--- a/frontend/site/projects/museum/views/nav.css
+++ b/frontend/site/projects/museum/views/nav.css
@@ -1,13 +1,80 @@
+.museum-nav .home-link {
+  position: fixed;
+  top: 0; left: 0;
+  padding: 1rem;
+  color: rgba(255, 121, 13, 1.0);
+  font-family: 'Helvetica', sans-serif;
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+
+/* footer */
+
 .footer {
   position: fixed;
   bottom: 0;
   width: 100%;
-  background: linear-gradient(90deg, rgba(255, 121, 13, 0.0), rgba(255, 121, 13, 1.0));
+  height: 5rem;
+  color: black;
+}
+.footer-gradient {
+  position: absolute;
+  bottom: 0rem;
+  width: 100%;
+  height: 5rem;
+  background: linear-gradient(180deg, rgba(255, 121, 13, 0.0), rgba(255, 121, 13, 1.0) 70%);
+  transform: translateY(2rem);
+  transition: transform 0.15s;
+}
+.footer .arrow {
+  position: absolute;
+  bottom: 0;
+  height: 3rem;
+  width: 4rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: transform 0.15s;
+  transform: translateY(3rem);
+}
+.footer .arrow-left {
+  left: 0;
+}
+.footer .arrow-right {
+  right: 0;
+}
+.footer .artist-desc {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  white-space: nowrap;
+  text-align: center;
+  padding-bottom: 0.5rem;
+  transition: transform 0.15s;
+  transform: translateY(3rem);
 }
 .footer .artist-name {
   font-family: "Druk Wide";
   font-style: italic;
+  text-transform: uppercase;
+  margin-right: 1rem;
+  font-size: 28px;
+  line-height: 28px;
+  cursor: default;
 }
 .footer .artist-location {
   font-family: "Helvetica", sans-serif;
-}
\ No newline at end of file
+  font-size: 21px;
+  line-height: 21px;
+  cursor: default;
+}
+
+.footer.with-artist:hover .arrow,
+.footer.with-artist:hover .artist-desc {
+  transform: translateY(0);
+}
+.footer.with-artist:hover .footer-gradient {
+  transform: translateY(0);
+}
diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index 36af7db..ed6a0f5 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -4,7 +4,9 @@ import actions from 'site/actions'
 
 import "./nav.css"
 
-import { ARTISTS } from "site/projects/museum/constants"
+import { ARTISTS, ARTIST_ORDER } from "site/projects/museum/constants"
+import { ArrowLeft, ArrowRight } from "site/projects/museum/icons"
+import { history } from "site/store"
 
 export default class NavOverlay extends Component {
   state = {
@@ -16,58 +18,98 @@ export default class NavOverlay extends Component {
 
   constructor(props) {
     super(props)
+    this.previousArtist = this.previousArtist.bind(this)
+    this.nextArtist = this.nextArtist.bind(this)
+    this.goHome = this.goHome.bind(this)
   }
 
   componentDidMount() {
     this.load()
   }
-  componentDidUpdate() {
+
+  componentDidUpdate(prevProps) {
+    // console.log(this.props.location.pathname, prevProps.location.pathname)
     if (this.props.location.pathname !== prevProps.location.pathname) {
       this.load()
     }
   }
 
   load() {
-    const { pathname } = this.props.location
-    const pathPartz = pathname.split("-")
+    const { page_name } = this.props.match.params
+    const pathPartz = page_name.split("-")
     const pathkey = pathPartz[0]
+    // console.log(pathkey)
     if (pathkey === 'start') {
       this.setState({
         showFooter: true,
         showArtist: false,
-        artist: {}
+        currentArtist: null,
+        artist: {},
       })
     } else if (pathkey in ARTISTS) {
       this.setState({
+        showHome: true,
         showFooter: true,
         showArtist: true,
-        artist: ARTISTS[pathkey]
+        currentArtist: pathkey,
+        artist: ARTISTS[pathkey],
       })
     } else {
       this.setState({
         showFooter: false,
         showArtist: false,
-        artist: {}
+        currentArtist: null,
+        artist: {},
       })
     }
   }
 
+  previousArtist() {
+    this.go(-1)
+  }
+
+  nextArtist() {
+    this.go(1)
+  }
+
+  go(step) {
+    if (!this.state.currentArtist) return
+    const index = ARTIST_ORDER.indexOf(this.state.currentArtist)
+    const nextIndex = (index + step + ARTIST_ORDER.length) % ARTIST_ORDER.length
+    const currentArtist = ARTIST_ORDER[nextIndex]
+    const artist = ARTISTS[currentArtist]
+    this.setState({ currentArtist, artist })
+    history.push(`/last-museum/${artist.start}`)
+  }
+
+  goHome() {
+    history.push(`/last-museum/`)
+  }
+
   render() {
-    const { showArtist, showHome, artist } = this.state
+    const { showArtist, showHome, showFooter, artist } = this.state
     return (
       <div className="museum-nav">
+        {showHome && (
+          <div className="home-link" onClick={this.goHome}>
+            Home
+          </div>
+        )}
         {showFooter && (
           showArtist ? (
-            <div className="footer">
-              <span className="arrow-left">{ArrowLeft}</span>
-              <span className="artist-name">{artist.name}</span>
-              <span className="artist-location">{artist.location}</span>
-              <span className="arrow-right">{ArrowRight}</span>
+            <div className="footer with-artist">
+              <div className="footer-gradient" />
+              <div className="artist-desc">
+                <span className="artist-name">{artist.name}</span>
+                <span className="artist-location">{artist.location}</span>
+              </div>
+              <div className="arrow arrow-left" onClick={this.previousArtist}>{ArrowLeft}</div>
+              <div className="arrow arrow-right" onClick={this.nextArtist}>{ArrowRight}</div>
             </div>
-          } : (
-            <div className="footer" />
+          ) : (
+            <div className="footer no-artist" />
           )
-        ))}
+        )}
       </div>
     )
   }