7 files changed, 206 insertions, 34 deletions

diff --git a/frontend/site/projects/museum/app.js b/frontend/site/projects/museum/app.js
index 12dab41..44070b7 100644
--- a/frontend/site/projects/museum/app.js
+++ b/frontend/site/projects/museum/app.js
@@ -1,27 +1,30 @@
 import React, { Component } from 'react'
 import { ConnectedRouter } from 'connected-react-router'
 import { Route } from 'react-router'
+import { connect } from 'react-redux'
 
 import ViewerContainer from 'site/viewer/viewer.container'
 import Home from './views/home'
 import NavOverlay from './views/nav.overlay'
-import actions from 'site/actions'
 
-export default class App extends Component {
+import { loadMuseum } from './museum.actions'
+
+class App extends Component {
   componentDidMount() {
-    const path_partz = window.location.pathname.split('/')
-    const graph_name = path_partz[1]
-    actions.site.loadSite(graph_name)
+    loadMuseum()
   }
   
   render() {
+    if (!this.props.ready) {
+      return <div />
+    }
     return (
       <ConnectedRouter history={this.props.history}>
         <div className='app'>
           <Route path={'/last-museum/:page_name'} component={ViewerContainer} exact />
           <Route path={'/last-museum/start'} component={Home} exact />
           <Route path={'/last-museum/:page_name'} component={NavOverlay} exact />
-          <Route exact key='root' path='/last-museum/' render={() => {
+          <Route path='/last-museum/' exact render={() => {
             setTimeout(() => this.props.history.push('/last-museum/start'), 10)
             return null
           }} />
@@ -30,3 +33,9 @@ export default class App extends Component {
     )
   }
 }
+
+const mapStateToProps = state => ({
+  ready: state.site.ready,
+})
+
+export default connect(mapStateToProps)(App)
diff --git a/frontend/site/projects/museum/constants.js b/frontend/site/projects/museum/constants.js
index 0bb98ba..3676f2b 100644
--- a/frontend/site/projects/museum/constants.js
+++ b/frontend/site/projects/museum/constants.js
@@ -2,26 +2,35 @@ export const ARTISTS = {
   nora: {
     name: "Nora Al-Badri",
     location: "C-Base, Berlin, Germany",
+    start: "nora-1",
   },
   leite: {
     name: "Juliana Cerqueria Leite",
     location: "Santa Ifigênia, São Paolo, Brazil",
+    start: "leite-chapter-1",
   },
   foreshew: {
     name: "Nicole Foreshew",
     location: "Australia",
+    start: "foreshew-1",
   },
-  stankievich: {
-    name: "Charles Stankievich",
+  stankievech: {
+    name: "Charles Stankievech",
     location: "Canada",
+    start: "stankievech-1",
   },
   nilthamrong: {
     name: "Jakrawal Nilthamrong",
     location: "Thailand",
+    start: "nilthamrong-home",
   },
-  opoko: {
-    name: "Zohra Opoko",
+  opoku: {
+    name: "Zohra Opoku",
     location: "Mortuary (Unfinished), Accra, Ghana",
+    start: "opoku-1-hail-to-you",
   }
 }
 
+export const ARTIST_ORDER = [
+  "nora", "foreshew", "leite", "opoku", "nilthamrong", "stankievech",
+]
\ No newline at end of file
diff --git a/frontend/site/projects/museum/museum.actions.js b/frontend/site/projects/museum/museum.actions.js
new file mode 100644
index 0000000..7f9867a
--- /dev/null
+++ b/frontend/site/projects/museum/museum.actions.js
@@ -0,0 +1,21 @@
+import * as types from 'site/types'
+import FontFaceObserver from 'fontfaceobserver'
+import actions from 'site/actions'
+import { dispatch } from 'site/store'
+
+export const loadMuseum = () => {
+  Promise.all([
+    loadFonts,
+    actions.site.loadGraph('last-museum'),
+  ])
+  .then(() => dispatch({ type: types.site.load_site }))
+}
+
+const loadFonts = () => {
+  const fonts = [
+    new FontFaceObserver('Gruk'),
+    new FontFaceObserver('Gruk Wide', { style: 'italic' }),
+    new FontFaceObserver('Gruk Medium'),
+  ]
+  return Promise.all(fonts.map(font => font.load()))
+}
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>
     )
   }