buncha stuff

demo/game/character.js

@@ -4,6 +4,7 @@ import Gamepad from 'html5-gamepad';
 import Matter from 'matter-js';
 
 import {
+  AudioPlayer,
   Body,
   Sprite,
 } from '../../src';
@@ -24,11 +25,18 @@ export default class Character extends Component {
     scale: PropTypes.number,
   };
 
+  handlePlayStateChanged = (state) => {
+    this.setState({
+      spritePlaying: state ? true : false,
+    });
+  };
+
   move = (body, x) => {
     Matter.Body.setVelocity(body, { x, y: 0 });
   };
 
   jump = (body) => {
+    this.jumpNoise.play();
     this.isJumping = true;
     Matter.Body.applyForce(
       body,
@@ -38,6 +46,14 @@ export default class Character extends Component {
     Matter.Body.set(body, 'friction', 0);
   };
 
+  punch = () => {
+    this.isPunching = true;
+    this.setState({
+      characterState: 4,
+      loop: false,
+    });
+  }
+
   enterBuilding = (body) => {
     let doorIndex = null;
 
@@ -52,12 +68,15 @@ export default class Character extends Component {
     });
 
     if (doorIndex !== null) {
-      Matter.Events.off(this.context.engine, 'afterUpdate', this.update);
+      this.setState({
+        characterState: 3,
+      });
+      this.isLeaving = true;
       this.props.onEnterBuilding(doorIndex);
     }
   };
 
-  update = () => {
+  checkKeys = () => {
     const { keys, store } = this.props;
     const { body } = this.body;
 
@@ -66,49 +85,69 @@ export default class Character extends Component {
     const shouldMoveStageLeft = body.position.x < midPoint && store.stageX < 0;
     const shouldMoveStageRight = body.position.x > midPoint && store.stageX > -2048;
 
-    if (body.velocity.y === 0 || body.velocity.y < -100) {
-      this.isJumping = false;
-      Matter.Body.set(body, 'friction', 1);
-    }
+    let characterState = 2;
 
-    if (!this.isJumping) {
+    if (keys.isDown(65) || gamepad.button(0, 'b')) {
+      return this.punch();
+    }
 
-      let characterState = 2;
+    if (keys.isDown(keys.SPACE) || gamepad.button(0, 'a')) {
+      this.jump(body);
+    }
 
-      gamepad.update();
+    if (keys.isDown(keys.UP) || gamepad.button(0, 'button 12')) {
+      return this.enterBuilding(body);
+    }
 
-      if (keys.isDown(keys.SPACE) || gamepad.button(0, 'a')) {
-        this.jump(body);
+    if (keys.isDown(keys.LEFT) || gamepad.button(0, 'button 14')) {
+      if (shouldMoveStageLeft) {
+        store.setStageX(store.stageX + 5);
       }
 
-      if (keys.isDown(keys.UP) || gamepad.button(0, 'button 12')) {
-        this.enterBuilding(body);
+      this.move(body, -5);
+
+      characterState = 1;
+    } else if (keys.isDown(keys.RIGHT) || gamepad.button(0, 'button 15')) {
+      if (shouldMoveStageRight) {
+        store.setStageX(store.stageX - 5);
       }
 
-      if (keys.isDown(keys.LEFT) || gamepad.button(0, 'button 14')) {
-        if (shouldMoveStageLeft) {
-          store.setStageX(store.stageX + 5);
-        }
+      this.move(body, 5);
 
-        this.move(body, -5);
+      characterState = 0;
+    }
 
-        characterState = 1;
-      } else if (keys.isDown(keys.RIGHT) || gamepad.button(0, 'button 15')) {
-        if (shouldMoveStageRight) {
-          store.setStageX(store.stageX - 5);
-        }
+    this.setState({
+      characterState,
+      loop: characterState < 2,
+    });
+  }
 
-        this.move(body, 5);
+  update = () => {
+    const { store } = this.props;
+    const { body } = this.body;
 
-        characterState = 0;
-      }
+    const midPoint = Math.abs(store.stageX) + 448;
 
-      store.setCharacterPosition(body.position);
+    const shouldMoveStageLeft = body.position.x < midPoint && store.stageX < 0;
+    const shouldMoveStageRight = body.position.x > midPoint && store.stageX > -2048;
 
-      this.setState({
-        characterState,
-      });
+    if (body.velocity.y === 0 || body.velocity.y < -100) {
+      this.isJumping = false;
+      Matter.Body.set(body, 'friction', 1);
+    }
+
+    if (!this.isJumping && !this.isPunching && !this.isLeaving) {
+      gamepad.update();
+
+      this.checkKeys();
+
+      store.setCharacterPosition(body.position);
     } else {
+      if (this.isPunching && this.state.spritePlaying === false) {
+        this.isPunching = false;
+      }
+
       const targetX = store.stageX + (this.lastX - body.position.x);
       if (shouldMoveStageLeft || shouldMoveStageRight) {
         store.setStageX(targetX);
@@ -123,14 +162,19 @@ export default class Character extends Component {
 
     this.loopID = null;
     this.isJumping = false;
+    this.isPunching = false;
+    this.isLeaving = false;
     this.lastX = 0;
 
     this.state = {
       characterState: 2,
+      loop: false,
+      spritePlaying: true,
     };
   }
 
   componentDidMount() {
+    this.jumpNoise = new AudioPlayer('/assets/jump.wav');
     Matter.Events.on(this.context.engine, 'afterUpdate', this.update);
   }
 
@@ -163,10 +207,12 @@ export default class Character extends Component {
         >
           <Sprite
             animating
+            loop={this.state.loop}
+            onPlayStateChanged={this.handlePlayStateChanged}
             src="assets/character-sprite.png"
             scale={this.context.scale * 2}
             state={this.state.characterState}
-            states={[9, 9, 0]}
+            states={[9, 9, 0, 4, 5]}
           />
         </Body>
       </div>

demo/game/index.js

@@ -1,7 +1,8 @@
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import Matter from 'matter-js';
 
 import {
+  AudioPlayer,
   Loop,
   Stage,
   KeyListener,
@@ -16,6 +17,10 @@ import GameStore from './stores/game-store';
 
 export default class Game extends Component {
 
+  static propTypes = {
+    onLeave: PropTypes.func,
+  };
+
   physicsInit = (engine) => {
     const ground = Matter.Bodies.rectangle(
       512 * 3, 448,
@@ -50,6 +55,9 @@ export default class Game extends Component {
     this.setState({
       fade: true,
     });
+    setTimeout(() => {
+      this.props.onLeave();
+    }, 500);
   }
 
   constructor(props) {
@@ -59,9 +67,15 @@ export default class Game extends Component {
       fade: true,
     };
     this.keyListener = new KeyListener();
+    window.AudioContext = window.AudioContext || window.webkitAudioContext;
+    window.context = new AudioContext();
   }
 
   componentDidMount() {
+    this.player = new AudioPlayer('/assets/music.wav', () => {
+      this.stopMusic = this.player.play({ loop: true, offset: 1, volume: 0.35 });
+    });
+
     this.setState({
       fade: false,
     });
@@ -75,6 +89,7 @@ export default class Game extends Component {
   }
 
   componentWillUnmount() {
+    this.stopMusic();
     this.keyListener.unsubscribe();
   }
 

demo/intro.js

@@ -1,7 +1,8 @@
 import React, { Component, PropTypes } from 'react';
-
 import Gamepad from 'html5-gamepad';
 
+import { AudioPlayer } from '../src';
+
 const gamepad = new Gamepad();
 
 export default class Intro extends Component {
@@ -12,6 +13,7 @@ export default class Intro extends Component {
   startUpdate = () => {
     gamepad.update();
     if (gamepad.button(0, 'left stick')) {
+      this.startNoise.play();
       this.props.onStart();
       return;
     }
@@ -20,6 +22,7 @@ export default class Intro extends Component {
 
   handleKeyPress = (e) => {
     if (e.keyCode === 13) {
+      this.startNoise.play();
       this.props.onStart();
     }
   }
@@ -33,6 +36,7 @@ export default class Intro extends Component {
   }
 
   componentDidMount() {
+    this.startNoise = new AudioPlayer('/assets/start.wav');
     window.addEventListener('keypress', this.handleKeyPress);
     this.animationFrame = requestAnimationFrame(this.startUpdate);
     this.interval = setInterval(() => {

demo/presentation.js

@@ -2,13 +2,28 @@ import React, { Component } from 'react';
 
 import Intro from './intro';
 import Game from './game';
+import Slides from './slides';
 
 export default class Presentation extends Component {
+
   handleStart = () => {
     this.setState({
       mode: 1,
     });
-  }
+  };
+
+  handleDone = () => {
+    this.setState({
+      mode: 1,
+    });
+  };
+
+  handleLeave = () => {
+    this.setState({
+      mode: 3,
+    });
+  };
+
   constructor(props) {
     super(props);
 
@@ -20,11 +35,16 @@ export default class Presentation extends Component {
     let componentToRender;
     switch (this.state.mode) {
     case 0: {
-      componentToRender = <Intro onStart={this.handleStart}/>;
+      componentToRender = <Intro onStart={this.handleStart} />;
       break;
     }
     case 1: {
-      componentToRender = <Game />;
+      componentToRender = <Game onLeave={this.handleLeave} />;
+      break;
+    }
+    case 3: {
+      componentToRender = <Slides onDone={this.handleDone} />;
+      break;
     }
     }
     return componentToRender;

demo/slides/index.js

@@ -0,0 +1,48 @@
+import React, { Component, PropTypes } from 'react';
+import Gamepad from 'html5-gamepad';
+
+const gamepad = new Gamepad();
+
+export default class Slides extends Component {
+
+  static propTypes = {
+    onDone: PropTypes.func,
+  };
+
+  startUpdate = () => {
+    gamepad.update();
+    if (gamepad.button(0, 'y')) {
+      this.props.onDone();
+      return;
+    }
+    this.animationFrame = requestAnimationFrame(this.startUpdate);
+  }
+
+  handleKeyPress = (e) => {
+    if (e.keyCode === 27) {
+      this.props.onDone();
+    }
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    window.addEventListener('keypress', this.handleKeyPress);
+    this.animationFrame = requestAnimationFrame(this.startUpdate);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keypress', this.handleKeyPress);
+    cancelAnimationFrame(this.animationFrame);
+  }
+
+  render() {
+    return (
+      <div>
+        <p>Ayy whatup</p>
+      </div>
+    );
+  }
+}

public/index.css

@@ -41,7 +41,7 @@ html, body, #root {
   bottom: 0;
   right: 0;
   background: black;
-  -webkit-transition: 1s opacity linear;
+  -webkit-transition: 500ms opacity linear;
   transition: 1s opacity linear;
   opacity: 0;
 }