basic slides

Author: kenwheeler

demo/game/index.js

@@ -51,12 +51,12 @@ export default class Game extends Component {
     Matter.World.addBody(engine.world, rightWall);
   }
 
-  handleEnterBuilding = () => {
+  handleEnterBuilding = (index) => {
     this.setState({
       fade: true,
     });
     setTimeout(() => {
-      this.props.onLeave();
+      this.props.onLeave(index);
     }, 500);
   }
 
@@ -68,7 +68,7 @@ export default class Game extends Component {
     };
     this.keyListener = new KeyListener();
     window.AudioContext = window.AudioContext || window.webkitAudioContext;
-    window.context = new AudioContext();
+    window.context = window.context || new AudioContext();
   }
 
   componentDidMount() {

demo/presentation.js

@@ -18,9 +18,10 @@ export default class Presentation extends Component {
     });
   };
 
-  handleLeave = () => {
+  handleLeave = (index) => {
     this.setState({
       mode: 3,
+      slideIndex: index,
     });
   };
 
@@ -29,6 +30,7 @@ export default class Presentation extends Component {
 
     this.state = {
       mode: 0,
+      slideIndex: 0,
     };
   }
   render() {
@@ -43,7 +45,7 @@ export default class Presentation extends Component {
       break;
     }
     case 3: {
-      componentToRender = <Slides onDone={this.handleDone} />;
+      componentToRender = <Slides onDone={this.handleDone} index={this.state.slideIndex} />;
       break;
     }
     }

demo/slides/basics.js

@@ -0,0 +1,15 @@
+/* eslint-disable react/jsx-key */
+import React from 'react';
+
+import Slide from './slide';
+
+export default {
+  slides: [
+    <Slide>
+      <h1>test</h1>
+    </Slide>,
+    <Slide>
+      <h1>test2</h1>
+    </Slide>,
+  ],
+};

demo/slides/index.js

@@ -1,33 +1,92 @@
 import React, { Component, PropTypes } from 'react';
 import Gamepad from 'html5-gamepad';
 
-import Slide from './slide';
+import Basics from './basics';
+
+const slides = [Basics];
 
 const gamepad = new Gamepad();
 
 export default class Slides extends Component {
 
   static propTypes = {
+    index: PropTypes.number,
     onDone: PropTypes.func,
   };
 
+  restartLoop = () => {
+    setTimeout(() => {
+      this.startUpdate();
+    }, 300);
+  }
+
   startUpdate = () => {
     gamepad.update();
     if (gamepad.button(0, 'y')) {
       this.props.onDone();
       return;
     }
+
+    if (gamepad.button(0, 'button 14')) {
+      this.handlePrev();
+      return;
+    }
+
+    if (gamepad.button(0, 'button 15')) {
+      this.handleNext();
+      return;
+    }
+
     this.animationFrame = requestAnimationFrame(this.startUpdate);
   }
 
   handleKeyPress = (e) => {
     if (e.keyCode === 27) {
       this.props.onDone();
     }
+
+    if (e.keyCode === 37) {
+      this.handlePrev();
+    }
+
+    if (e.keyCode === 39) {
+      this.handleNext();
+    }
+  }
+
+  handleNext() {
+    const { currentSlide } = this.state;
+    const { index } = this.props;
+
+    if (currentSlide + 1 === slides[index].slides.length) {
+      this.props.onDone();
+    } else {
+      this.setState({
+        currentSlide: currentSlide + 1,
+      }, () => {
+        this.restartLoop();
+      });
+    }
+  }
+
+  handlePrev() {
+    const { currentSlide } = this.state;
+
+    if (currentSlide !== 0) {
+      this.setState({
+        currentSlide: currentSlide - 1,
+      }, () => {
+        this.restartLoop();
+      });
+    }
   }
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      currentSlide: 0,
+    };
   }
 
   componentDidMount() {
@@ -37,6 +96,7 @@ export default class Slides extends Component {
   }
 
   componentWillUnmount() {
+    window.removeEventListener('keyup', this.handleKeyPress);
     window.removeEventListener('keypress', this.handleKeyPress);
     cancelAnimationFrame(this.animationFrame);
   }
@@ -54,7 +114,7 @@ export default class Slides extends Component {
   render() {
     return (
       <div style={this.getWrapperStyles()}>
-        <Slide>test</Slide>
+        {slides[this.props.index].slides[this.state.currentSlide]}
       </div>
     );
   }