inserting texts

8 files changed, 241 insertions, 84 deletions

diff --git a/frontend/site/projects/museum/views/counter.js b/frontend/site/projects/museum/views/counter.js
index 270e61f..f930b85 100644
--- a/frontend/site/projects/museum/views/counter.js
+++ b/frontend/site/projects/museum/views/counter.js
@@ -66,3 +66,14 @@ const commatize = (n, radix) => {
   while (n)
   return nums.join("")
 }
+
+const JAKRAWAL_TEXTS = [
+  "Wildfires occur frequently during the dry season in northern Thailand’s high mountains. The source of fire is not natural but arson.",
+  "In the past it was hypothesized that local people set the fires to clear land for agricultural use, or for hunting.",
+  "There were efforts to solve the problem at the community level, but the fires only became more severe.",
+  "Strangely, the blazes often occurred in the national park—an area difficult for villagers to access.",
+  "During the wildfire suppression efforts of May 2020, a group of scholars and volunteers discovered important evidence that would change the original hypothesis: They found several instances of improvised devices made of clothes pegs connected to a small battery by a power cable.",
+  "Combustion was triggered by a small clod of clay positioned in the middle between the pegs, acting as a timer—after melting in the heat the wires attached to the batteries would ignite.",
+  "Villagers who were interviewed said that this was not a technique that they were familiar with.",
+  "Although we cannot know the intention of the burners, it is likely that the park’s natural resources are being used to benefit some group of people. And the poor have always been condemned.",
+]
diff --git a/frontend/site/projects/museum/views/credits.css b/frontend/site/projects/museum/views/credits.css
index 8f9bec5..92b1017 100644
--- a/frontend/site/projects/museum/views/credits.css
+++ b/frontend/site/projects/museum/views/credits.css
@@ -12,6 +12,7 @@
 .page a {
   color: #FF790D;
   text-decoration: none;
+  font-weight: bold;
 }
 .page-title {
   font-family: 'Druk';
@@ -36,29 +37,45 @@
 /* credits */
 
 .page-left {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 66%;
-  height: 100%;
+  width: 33%;
 }
 .page-right {
-  width: 33%;
+  width: 66%;
 }
-.page-subtitle,
-.page-credits .curated-by,
-.page-credits-artists div {
+.page-subtitle {
   text-align: center;
   font-family: 'Druk Wide', sans-serif;
   text-transform: uppercase;
   font-size: 2vw;
 }
-.build-credits {
+
+
+.page-credits .page-subtitle {
+  margin-bottom: 1rem;
+}
+
+.columns {
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
-  padding: 1vw 0;
 }
+
+.credits-rows {
+  margin-bottom: 1.1rem;
+}
+.credits-rows > div {
+  display: flex;
+  flex-direction: row;
+}
+.credits-rows > div > div:first-child {
+  width: 100px;
+}
+.page-right .column {
+  width: calc(66% - 0.5rem);
+}
+.page-right .column:first-child {
+  margin-right: 1rem;
+}
+
 .build-credits div {
   width: 20vw;
 }
@@ -66,13 +83,18 @@
   font-weight: bold;
 }
 .page-credits .icons {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
   padding: 1vw 0;
   text-align: center;
 }
-.page-credits .icons svg {
-  height: 4vmax;
-  margin-right: 2vmax;
+.page-credits .icons img {
+  height: 2.7rem;
+  margin-right: 2rem;
 }
-.page-credits .curated-by {
-  margin-top: 1vw;
+.page-credits .icons img.pcai {
+  height: 4rem;
 }
+
diff --git a/frontend/site/projects/museum/views/credits.js b/frontend/site/projects/museum/views/credits.js
index 1a0a553..9a19fcf 100644
--- a/frontend/site/projects/museum/views/credits.js
+++ b/frontend/site/projects/museum/views/credits.js
@@ -3,8 +3,7 @@ import actions from 'site/actions'
 
 import "./credits.css"
 
-import { BerlinIcon, HatjeCantz, ATB } from "site/projects/museum/icons"
-import { ARTISTS, ARTIST_ORDER } from "site/projects/museum/constants"
+import { ArteLogo } from "site/projects/museum/icons"
 
 export default class Credits extends Component {
   constructor(props) {
@@ -28,56 +27,94 @@ export default class Credits extends Component {
         <div className="page-title">The L<span>ast Museum</span></div>
         <div className="page-content">
           <div className="page-left">
-            <div className="page-credits-artists">
-              {ARTIST_ORDER.map(key => (
-                <div key={key}>
-                  {ARTISTS[key].name}
-                </div>
-              ))}
-            </div>
-            <div className="build-credits">
+            <div className="page-subtitle">CREDITS</div>
+          </div>
+          <div className="page-right">
+            <div className="page-subtitle">ARTWORK CREDITS</div>
+          </div>
+        </div>
+
+        <div className="page-content">
+          <div className="page-left">
+            <div className="credits-rows">
               <div>
-                Designed by<br/>
-                <a href="https://sometimes-always.com/">Sometimes Always</a>
+                <div>Curator:</div> <a href="http://nadimsamman.com/">Nadim Samman</a>
               </div>
               <div>
-                Developed by<br/>
-                <a href="https://asdf.us/">Jules LaPlace</a>
+                <div>Design:</div> <a href="https://sometimes-always.com/">Sometimes Always</a>
+              </div>
+              <div>
+                <div>Developer:</div> <a href="https://asdf.us/">Jules LaPlace</a>
               </div>
             </div>
-            <div className="icons">
-              {BerlinIcon}
-              {HatjeCantz}
-              {ATB}
+            <div>
+              Commissioned by:<br/>
+              <b>KW Institute for Contemporary Art</b><br/>
+              Auguststraße 69<br/>
+              10117 Berlin<br/>
+              Tel. +49 30 243459-0<br/>
+              Fax +49 30 243459-99<br/>
+              <a href="mailto:info@kw-berlin.de?subject=The+Last+Museum">info@kw-berlin.de</a><br/>
+              <br/>
+              KW Institute for Contemporary Art is institutionally supported by the Senate Department for Culture and Europe, Berlin.<br/>
+              <br/>
+              The Last Museum is produced in collaboration with Polyeco Contemporary Art Initiative (PCAI), Athens<br/>
+              <br/>
+              <b>Press Enquiries:</b><br/>
+              Natanja von Stosch<br/>
+              Tel. +49 30 243459 41<br/>
+              <a href="mailto:nvs@kw-berlin.de?subject=The+Last+Museum">nvs@kw-berlin.de</a><br/>
+              <b>Press Releases and Image Material:</b><br/>
+              <a href="https://kw-berlin.de/en/press">kw-berlin.de/en/press</a>
             </div>
-            <div className="curated-by">
-              CURATED BY NADIM SAMMAN
+            <div className="icons">
+              <img src="/last-museum/static/media/last-museum/arte-logo.png" />
+              <img src="/last-museum/static/media/last-museum/pcai-logo.png" className='pcai' />
             </div>
           </div>
-          <div className="page-right">
-            <b>KW Institute for Contemporary Art</b><br/>
-            KUNST-WERKE BERLIN e. V.<br/>
-            Auguststraße 69<br/>
-            10117 Berlin<br/>
-            Tel. +49 30 243459-0<br/>
-            Fax +49 30 243459-99<br/>
-            <a href="mailto:info@kw-berlin.de?subject=The+Last+Museum">info@kw-berlin.de</a><br/>
-            <br/>
-            Director: Krist Gruijthuijsen<br/>
-            Chairman: Olafur Eliasson<br/>
-            Register Court: Amtsgericht Charlottenburg<br/>
-            Responsible for Content in Accordance with § 10 Section 3 MDStV:<br/>
-            Krist Gruijthuijsen (Address see above)<br/>
-            <br/>
-            <b>Press Contact:</b><br/>
-            Natanja von Stosch<br/>
-            KW Institute for Contemporary Art<br/>
-            Tel. +49 30 243459 41<br/>
-            <a href="mailto:nvs@kw-berlin.de?subject=The+Last+Museum">nvs@kw-berlin.de</a><br/>
-            <br/>
-            <b>Press Releases and Image Material:</b><br/>
-            <a href="https://kw-berlin.de/en/press">kw-berlin.de/en/press</a>
+
+          <div className="page-right columns">
+            <div className="column">
+              <b>Charles Stankievech</b><br/>
+              <i>The Glass Key</i><br/>
+              Location: Cosmic Ray Research Station, Canadian Rocky Mountains (winter solstice)<br/>
+              Videography & Sound design: Charles Stankievech<br/>
+              <br/>
+              <b>Nora Al-Badri</b><br/>
+              <i>This Is Not A Hacker Space</i><br/>
+              Location: C-Base, Berlin, Germany<br/>
+              Videography: Siska<br/>
+              Soundtrack mix: Shamsa<br/>
+              Track mixed in: Cadans - No Connection (Broken Mix)<br/>
+              Melodic Acapella female sound: Lynn Adib<br/>
+              poem: Nikki Giovanni ‘Ego Tripping’<br/>
+              الأمل<br/>
+              Al-Amal/ Hope Mars Mission (via YouTube)<br/>
+              Special thanks to the Norberta, Gregor and the spaceship crew in Berlin-Mitte; Andy and CCC.<br/>
+              <br/>
+              <b>Juliana Cerqueira Leite</b><br/>
+              <i>Untitled</i><br/>
+              Location: Santa Ifigênia, São Paulo, Brasil<br/>
+              Videography & Sound design: Juliana Cerqueira Leite 
+            </div>
+            <div className="column">
+              <b>Zohra Opoku</b><br/>
+              <i>The Myths of Eternal Life</i><br/>
+              Videography & Sound Design: Zohra Opoko<br/>
+              Location: Unfinished mortuary, Accra, Ghana.<br/> 
+              <br/>
+              <b>Nicole Foreshew</b><br/>
+              <i>Dhurany Yanggu</i> 
(message song of running water)<br/>
+              Location: Gumbaynggirr Country, Northern Tablelands and Northern Rivers districts of New South Wales, Australia.<br/>
+              Videography & Sound Design: Nicole Foreshew<br/>
+              <br/>
+              <b>Jakrawal Nilthamrong</b><br/>
+              <i>Barn Burner</i> <br/>
+              Location: Chiang Mai, Thailand. <br/>
+              Videography & Sound Design: Jakrawal Nilthamrong
+            </div>
           </div>
+
         </div>
       </div>
     )
diff --git a/frontend/site/projects/museum/views/home.css b/frontend/site/projects/museum/views/home.css
index 188840b..c8a55c9 100644
--- a/frontend/site/projects/museum/views/home.css
+++ b/frontend/site/projects/museum/views/home.css
@@ -3,8 +3,9 @@ html {
 }
 .app > div.home {
   display: block;
-  background: #111111;
+/*
   transition: opacity 0.4s;
+*/
   opacity: 1.0;
   cursor: pointer;
   position: fixed;
@@ -15,13 +16,51 @@ html {
 }
 .app > div.home.hidden {
   opacity: 0.0;
-  pointer-events: none;
+  cursor: pointer;
+  /*pointer-events: none;*/
 }
 
-.home-byline {
-  font-family: "Druk Wide";
+/* intro animation */
+
+.app > div.home.intro {
+  background-color: #111111;
+  background-image: url(/last-museum/static/media/last-museum/homepage.jpg);
+  background-size: cover;
+  background-position: center bottom;
+}
+
+.app > div.home.orange-bg {
+  background-color: #FF790D;
+}
+.app > div.home.white-bg {
+  background-color: #ffffff;
+}
+.app > div.home.black-bg {
+  background-color: #111111;
+}
+
+.home.white-text div {
+  color: #ffffff;
+  text-shadow: 0px 0px 10px #ffffff;
+}
+.home.white-text div.home-artists,
+.home.white-text div.home-message {
+  text-shadow: 0px 0px 5px #ffffff;
+}
+
+.home.orange-text div {
   color: #FF790D;
+  text-shadow: 0px 0px 10px #FF790D;
+}
+.home.orange-text div.home-artists,
+.home.orange-text div.home-message {
   text-shadow: 0px 0px 5px #FF790D;
+}
+
+/* home styling */
+
+.home-byline {
+  font-family: "Druk Wide";
   opacity: 1;
   white-space: nowrap;
   transition: opacity 0.2s;
@@ -34,9 +73,7 @@ html {
   font-family: "Druk";
   font-weight: 900;
   font-style: italic;
-  color: #FF790D;
   white-space: nowrap;
-  text-shadow: 0px 0px 10px #FF790D;
   font-size: 49vh;
   position: absolute;
   left: 0;
@@ -47,8 +84,6 @@ html {
 }
 .home-artists {
   font-family: "Druk Wide";
-  color: #FF790D;
-  text-shadow: 0px 0px 5px #FF790D;
   opacity: 1;
   white-space: nowrap;
   transition: opacity 0.2s;
@@ -60,13 +95,11 @@ html {
 }
 .home-message {
   font-family: "Druk Wide";
-  color: #FF790D;
-  text-shadow: 0px 0px 5px #ff790d;
   opacity: 0.0;
   transition: opacity 0.2s;
   width: 140vh;
-  font-size: 4vh;
-  line-height: 1.2;
+  font-size: 3.5vh;
+  line-height: 1.1;
   position: absolute;
   top: 40vh;
   text-align: center;
diff --git a/frontend/site/projects/museum/views/home.js b/frontend/site/projects/museum/views/home.js
index 1520c11..7c42ef9 100644
--- a/frontend/site/projects/museum/views/home.js
+++ b/frontend/site/projects/museum/views/home.js
@@ -1,13 +1,18 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
+import { history } from 'site/store'
 import actions from 'site/actions'
 
 import "./home.css"
 
+let clicked = false
+let started = false
+
 class Home extends Component {
   constructor(props) {
     super(props)
+    this.ref = React.createRef()
     this.handleClick = this.handleClick.bind(this)
     this.state = {
       open: false,
@@ -26,18 +31,54 @@ class Home extends Component {
 
   handleClick(e) {
     e && e.preventDefault()
-    if (this.state.open) {
-      actions.site.interact()
-      this.setState({ hidden: true })
+    actions.site.interact()
+
+    this.index = 0
+    const FLASH_TIME = 150
+    const order = [
+      ["home orange-text intro", FLASH_TIME],
+      ["home white-text orange-bg", FLASH_TIME],
+      ["home orange-text white-bg", FLASH_TIME],
+      ["home white-text orange-bg", FLASH_TIME],
+      ["home orange-text white-bg", FLASH_TIME],
+      ["home white-text orange-bg", FLASH_TIME],
+    ]
+
+    const go = () => {
+      clearTimeout(this.timeout)
+      const item = order[this.index]
+      if (item) {
+        this.ref.current.className = item[0]
+        this.index += 1
+        this.timeout = setTimeout(go, item[1])
+      } else {
+        this.ref.current.className = "home orange-text intro hidden"
+        clicked = true
+      }
     }
-    else {
-      this.setState({ open: true })
+
+    if (!clicked) {
+      go()
+    } else if (!started) {
+      this.ref.current.className = "home orange-text black-bg open"
+      setTimeout(() => {
+        started = true
+      }, 200)
+    } else {
+      this.ref.current.className = "home orange-text orange-bg open"
+      setTimeout(() => {
+        history.push("/last-museum/stankievech-1")
+      }, FLASH_TIME)
     }
   }
 
   render() {
     return (
-      <div className={this.state.hidden ? "home hidden open" : this.state.open ? "home open" : "home"} onClick={this.handleClick}>
+      <div
+        ref={this.ref}
+        className="home orange-text intro"
+        onClick={this.handleClick}
+      >
         <div className="home-byline byline-top">KW PRESENTS</div>
         <div className="home-title title-1">THE L<span>AST</span></div>
         <div className="home-title title-2">MUSEUM</div>
@@ -53,7 +94,7 @@ class Home extends Component {
         </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.
+          The Last Museum hovers somewhere between life and death, lockdown and escape. Spanning six continents and too many screens, it is home to new muses - born of encounters between digital space and facts on the ground. It is web-site-specific. You are already here.
         </div>
         <div className={this.state.showCurtain ? "curtain" : "curtain hidden"} />
       </div>
diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index b8813f0..dc059f5 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -43,10 +43,21 @@ export default class NavOverlay extends Component {
     const { page_name } = this.props.match.params
     const pathPartz = page_name.split("-")
     const pathkey = pathPartz[0]
+    const path_chapter = pathPartz[1]
     // console.log(pathkey)
     if (pathkey === 'start') {
       this.setState({
         showHome: false,
+        showFooter: false,
+        showArtist: false,
+        showCounter: false,
+        currentArtist: null,
+        artist: {},
+      })
+    }
+    else if (pathkey === 'home') {
+      this.setState({
+        showHome: false,
         showFooter: true,
         showArtist: false,
         showCounter: false,
@@ -68,7 +79,7 @@ export default class NavOverlay extends Component {
         showHome: true,
         showFooter: true,
         showArtist: true,
-        showCounter: pathkey === 'nilthamrong',
+        showCounter: pathkey === 'nilthamrong' && path_chapter !== "home",
         currentArtist: pathkey,
         artist: ARTISTS[pathkey],
       }, () => shouldShowFooter && this.quicklyShowFooter())
@@ -112,7 +123,7 @@ export default class NavOverlay extends Component {
   }
 
   goHome() {
-    history.push(`/last-museum/`)
+    history.push(`/last-museum/home/`)
   }
 
   render() {
@@ -140,7 +151,9 @@ export default class NavOverlay extends Component {
             <div className="footer no-artist" ref={this.footerRef} />
           )
         )}
+        <TextOverlay location={this.props.location} match={this.props.match} />
       </div>
     )
   }
 }
+
diff --git a/frontend/site/projects/museum/views/overlay.css b/frontend/site/projects/museum/views/overlay.css
index 6483b28..48e8480 100644
--- a/frontend/site/projects/museum/views/overlay.css
+++ b/frontend/site/projects/museum/views/overlay.css
@@ -8,7 +8,7 @@
   padding: 1rem;
   font-size: 1rem;
   font-family: 'Helvetica', sans-serif;
-  cursor: url(/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-33.png) 50 50, pointer;
+  cursor: url(/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-72.png) 50 50, pointer;
   color: #000;
 }
 .text-overlay::-webkit-scrollbar {
diff --git a/frontend/site/projects/museum/views/text.overlay.js b/frontend/site/projects/museum/views/text.overlay.js
index cb141e7..fb634e2 100644
--- a/frontend/site/projects/museum/views/text.overlay.js
+++ b/frontend/site/projects/museum/views/text.overlay.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
-import { TEXT_OVERLAYS, DEFAULT_ICON } from '../text-overlays.js'
+import { TEXT_OVERLAYS, DEFAULT_CLOSED_ICON, DEFAULT_ICON } from '../text-overlays.js'
 
 import './overlay.css'
 
@@ -72,7 +72,7 @@ class TextOverlay extends Component {
           style={content.style}
           onClick={this.toggle}
         >
-          <img src={content.icon || DEFAULT_ICON} />
+          <img src={content.icon || (open ? DEFAULT_CLOSED_ICON : DEFAULT_ICON)} />
         </div>
       )
     }