diff options
Diffstat (limited to 'frontend/site/projects/museum')
| -rw-r--r-- | frontend/site/projects/museum/app/roadblock.css | 4 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/home.css | 8 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/petros.nav.css | 42 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/petros.nav.js | 91 |
4 files changed, 104 insertions, 41 deletions
diff --git a/frontend/site/projects/museum/app/roadblock.css b/frontend/site/projects/museum/app/roadblock.css index d6796d3..e0de3d2 100644 --- a/frontend/site/projects/museum/app/roadblock.css +++ b/frontend/site/projects/museum/app/roadblock.css @@ -16,7 +16,7 @@ cursor: pointer; } .roadblock-byline { - font-family: "Druk Wide"; + font-family: "Druk Wide", sans-serif; opacity: 1; white-space: nowrap; transition: opacity 0.2s; @@ -27,7 +27,7 @@ cursor: pointer; } .roadblock-title { - font-family: "Druk"; + font-family: "Druk", sans-serif; font-weight: 900; font-style: italic; white-space: nowrap; diff --git a/frontend/site/projects/museum/views/home.css b/frontend/site/projects/museum/views/home.css index c537ec9..bad8e4f 100644 --- a/frontend/site/projects/museum/views/home.css +++ b/frontend/site/projects/museum/views/home.css @@ -61,7 +61,7 @@ html { /* home styling */ .home-byline { - font-family: "Druk Wide"; + font-family: "Druk Wide", sans-serif; opacity: 1; white-space: nowrap; transition: opacity 0.2s; @@ -71,7 +71,7 @@ html { position: absolute; } .home-title { - font-family: "Druk"; + font-family: "Druk", sans-serif; font-weight: 900; font-style: italic; white-space: nowrap; @@ -84,7 +84,7 @@ html { transition: top 0.2s cubic-bezier(0,0,0,1); } .home-artists { - font-family: "Druk Wide"; + font-family: "Druk Wide", sans-serif; opacity: 1; white-space: nowrap; transition: opacity 0.2s; @@ -95,7 +95,7 @@ html { bottom: 6vh; } .home-message { - font-family: "Druk Wide"; + font-family: "Druk Wide", sans-serif; opacity: 0.0; transition: opacity 0.2s; width: 140vh; diff --git a/frontend/site/projects/museum/views/petros.nav.css b/frontend/site/projects/museum/views/petros.nav.css index e59d85d..554d690 100644 --- a/frontend/site/projects/museum/views/petros.nav.css +++ b/frontend/site/projects/museum/views/petros.nav.css @@ -1,15 +1,49 @@ .petros-left { position: absolute; bottom: 70px; - left: 30px; + left: 40px; + cursor: pointer; + opacity: 0.0; + transition: opacity 0.2s; + pointer-events: none; } .petros-right { position: absolute; bottom: 70px; - right: 30px; + right: 40px; + cursor: pointer; + opacity: 0.0; + transition: opacity 0.2s; + pointer-events: none; } .petros-text { position: absolute; - top: 20px; - right: 20px; + top: 40px; + right: 40px; + cursor: pointer; + opacity: 0.0; + transition: opacity 0.2s; + pointer-events: none; +} + +.petros-left.visible, +.petros-right.visible, +.petros-text.visible { + opacity: 1.0; + pointer-events: auto; +} + +.petros-subtitle { + position: absolute; + bottom: 70px; + left: 50%; + transform: translateX(-50%); + max-width: calc(100vw - 400px); + text-align: center; + font-family: 'Druk Wide', sans-serif; + font-size: 2vw; + pointer-events: none; + color: #fff; + text-shadow: 0 0 3px #fff; + transition: opacity 0.2s; } diff --git a/frontend/site/projects/museum/views/petros.nav.js b/frontend/site/projects/museum/views/petros.nav.js index 9ccfdff..232e1d0 100644 --- a/frontend/site/projects/museum/views/petros.nav.js +++ b/frontend/site/projects/museum/views/petros.nav.js @@ -12,9 +12,13 @@ import { preloadImage } from "app/utils" import actions from "site/actions" const RESET_STATE = { + ready: false, + hovering: null, textActive: false, textDone: false, - ready: false, + textOpacity: 0.0, + iconFade: false, + text: null, } const MOVEMENT = "movement" @@ -30,9 +34,13 @@ const INITIAL_VIEW = { 7: LOOP, } -const LOOP_TIMEOUT = 100 +const LOOP_TIMEOUT = 20 const MOVEMENT_TIMEOUT = 40000 const TEXT_LOAD_TIMEOUT = 15000 +const TEXT_SHOW_TIMEOUT = 20 +const TEXT_HIDE_TIMEOUT = 15000 + +const SUBTITLE_COUNT = 12 class PetrosNav extends Component { state = { @@ -70,6 +78,7 @@ class PetrosNav extends Component { if (!isPetros) { clearTimeout(this.readyTimeout) + clearTimeout(this.textTimeout) this.setState({ ...RESET_STATE, }) @@ -91,7 +100,7 @@ class PetrosNav extends Component { } handleEnter(event) { - const side = event.target.className.split('-') + const side = event.target.className.match(/-(\w+)/)[1] this.setState({ hovering: side }) } handleLeave(event) { @@ -100,21 +109,34 @@ class PetrosNav extends Component { /** Start text generation sequence */ handleClickText() { - if (this.state.textActive) return + if (this.state.textActive || this.state.text) return this.setState({ textActive: true, - hovering: false + hovering: false, + textOpacity: 0.0, + text: null }) // Turn on the glyph actions.site.setPopups({ ...this.props.popups, glyph: true, }) + // Fetch the subtitles + const subtitle_index = 1 + const subtitle_choice = randint(SUBTITLE_COUNT) + 1 + fetch(`/thelastmuseum/static/media/last-museum/petros-moris/texts/${subtitle_index}/${subtitle_choice}.txt`, { + method: 'GET', + }) + .then(res => res.text()) + .then(text => this.setState({ text: text.trim() })) + .catch(err => this.setState({ text: "Flowing into the atmosphere through the cracks,\nthe fluid rock creates mountains that look alike the skin of serpents" })) + this.textTimeout = setTimeout(() => { this.setState({ textActive: false, textDone: true, + textOpacity: 0.0, }) // Turn off the glyph @@ -122,6 +144,14 @@ class PetrosNav extends Component { ...this.props.popups, glyph: false, }) + + this.textTimeout = setTimeout(() => { + this.setState({ textOpacity: 1.0, iconFade: true }) + this.textTimeout = setTimeout(() => { + this.setState({ textOpacity: 0.0 }) + }, TEXT_HIDE_TIMEOUT) + }, TEXT_SHOW_TIMEOUT) + }, TEXT_LOAD_TIMEOUT) } @@ -131,7 +161,7 @@ class PetrosNav extends Component { const leftIndex = Math.max(1, index - 1) const rightIndex = Math.min(7, index + 1) if (textActive) return - const side = event.target.className.split('-') + const side = event.target.className.match(/-(\w+)/)[1] // if navigating to the left, just navigate. console.log(side, index) if (side === "left") { @@ -156,65 +186,64 @@ class PetrosNav extends Component { } render() { - const { index, ready, hovering, textActive, textDone } = this.state + const { index, ready, hovering, textActive, textDone, textOpacity, iconFade, text } = this.state if (!this.props.interactive || (!index)) return null const leftIndex = Math.max(1, index - 1) const rightIndex = Math.min(7, index + 1) return ( <div> + <img + className={ready ? "petros-text visible" : "petros-text"} + src={(hovering === "text" || textActive || textDone) + ? `/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}-White.png` + : `/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}.png` + } + onMouseEnter={this.handleEnter} + onMouseLeave={this.handleLeave} + onClick={this.handleClickText} + /> + {ready && ( <img - className="petros-text" - src={(hovering === "text" || textActive) - ? `/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}-White.png` - : `/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}.png` - } - style={{ - cursor: `url(/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}-White.png), pointer` - }} - onMouseEnter={this.handleEnter} - onMouseLeave={this.handleLeave} - onClick={this.handleClickText} - /> - )} - {ready && textDone && ( - <img - className="petros-left" + className={(textDone && iconFade) ? "petros-left visible" : "petros-left"} src={(hovering === "left" || textActive || index === leftIndex) ? `/thelastmuseum/static/media/last-museum/petros-moris/NavBW${leftIndex}.png` : `/thelastmuseum/static/media/last-museum/petros-moris/NavB${leftIndex}.png` } - style={{ - cursor: `url(/thelastmuseum/static/media/last-museum/petros-moris/NavBW${leftIndex}-White.png), pointer` - }} onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave} onClick={this.navigate} /> )} - {ready && textDone && ( + {ready && ( <img - className="petros-right" + className={(textDone && iconFade) ? "petros-right visible" : "petros-right"} src={(hovering === "right" || textActive) ? `/thelastmuseum/static/media/last-museum/petros-moris/NavBW${rightIndex}.png` : `/thelastmuseum/static/media/last-museum/petros-moris/NavB${rightIndex}.png` } - style={{ - cursor: `url(/thelastmuseum/static/media/last-museum/petros-moris/NavBW${rightIndex}-White.png), pointer` - }} onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave} onClick={this.navigate} /> )} + {!textActive && text && ( + <div className="petros-subtitle" style={{ opacity: textOpacity }}> + {text} + </div> + )} </div> ) } } + +const randint = n => Math.floor(Math.random() * n) + const mapStateToProps = state => ({ interactive: state.site.interactive, popups: state.site.popups, }) + export default connect(mapStateToProps)(PetrosNav) |