preso

FormidableLabs · Sep 6, 2016 · 68b1860 · 68b1860
1 parent 151cdfe
commit 68b1860
Show file tree

Hide file tree

Showing 25 changed files with 339 additions and 142 deletions.
diff --git a/demo/character.js → demo/game/character.js b/demo/character.js → demo/game/character.js
@@ -6,7 +6,7 @@ import Matter from 'matter-js';
 import {
   Body,
   Sprite,
-} from '../src';
+} from '../../src';
 
 const gamepad = new Gamepad();
 
@@ -15,6 +15,7 @@ export default class Character extends Component {
 
   static propTypes = {
     keys: PropTypes.object,
+    onEnterBuilding: PropTypes.func,
     store: PropTypes.object,
   };
 
@@ -35,7 +36,26 @@ export default class Character extends Component {
       { x: 0, y: -0.15 },
     );
     Matter.Body.set(body, 'friction', 0);
-  }
+  };
+
+  enterBuilding = (body) => {
+    let doorIndex = null;
+
+    const doorPositions = [...Array(6).keys()].map((a) => {
+      return [(512 * a) + 224, (512 * a) + 288];
+    });
+
+    doorPositions.forEach((dp, di) => {
+      if (body.position.x + 64 > dp[0] && body.position.x + 64 < dp[1]) {
+        doorIndex = di;
+      }
+    });
+
+    if (doorIndex !== null) {
+      Matter.Events.off(this.context.engine, 'afterUpdate', this.update);
+      this.props.onEnterBuilding(doorIndex);
+    }
+  };
 
   update = () => {
     const { keys, store } = this.props;
@@ -44,14 +64,14 @@ export default class Character extends Component {
     const midPoint = Math.abs(store.stageX) + 448;
 
     const shouldMoveStageLeft = body.position.x < midPoint && store.stageX < 0;
-    const shouldMoveStageRight = body.position.x > midPoint && store.stageX > -1024;
+    const shouldMoveStageRight = body.position.x > midPoint && store.stageX > -2048;
 
-    if (body.velocity.y === 0) {
+    if (body.velocity.y === 0 || body.velocity.y < -100) {
       this.isJumping = false;
       Matter.Body.set(body, 'friction', 1);
     }
 
-    if (keys && !this.isJumping) {
+    if (!this.isJumping) {
 
       let characterState = 2;
 
@@ -61,6 +81,10 @@ export default class Character extends Component {
         this.jump(body);
       }
 
+      if (keys.isDown(keys.UP) || gamepad.button(0, 'button 12')) {
+        this.enterBuilding(body);
+      }
+
       if (keys.isDown(keys.LEFT) || gamepad.button(0, 'button 14')) {
         if (shouldMoveStageLeft) {
           store.setStageX(store.stageX + 5);
@@ -128,10 +152,12 @@ export default class Character extends Component {
   }
 
   render() {
+    const x = this.props.store.characterPosition.x;
+
     return (
       <div style={this.getWrapperStyles()}>
         <Body args={[
-          0, 384, 64, 64, { inertia: Infinity, restitution: 0, friction: 1, frictionStatic: 0 }]
+          x, 384, 64, 64, { inertia: Infinity, restitution: 0, friction: 1, frictionStatic: 0 }]
           }
           ref={(b) => { this.body = b; }}
         >

diff --git a/demo/game/fade.js b/demo/game/fade.js
@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+
+const Fade = (props) => (
+  <div
+    className={`fade ${props.visible && 'active'}`}
+  />
+);
+
+Fade.propTypes = {
+  visible: PropTypes.bool,
+};
+
+Fade.defaultProps = {
+  visible: true,
+};
+
+export default Fade;
diff --git a/demo/demo.js → demo/game/index.js b/demo/demo.js → demo/game/index.js
@@ -1,26 +1,25 @@
 import React, { Component } from 'react';
+import Matter from 'matter-js';
 
 import {
   Loop,
   Stage,
   KeyListener,
   World,
-} from '../src';
+} from '../../src';
 
 import Character from './character';
 import Level from './level';
-import GameStore from './stores/game-store';
-
-import './index.css';
+import Fade from './fade';
 
-import Matter from 'matter-js';
+import GameStore from './stores/game-store';
 
-export default class Demo extends Component {
+export default class Game extends Component {
 
   physicsInit = (engine) => {
     const ground = Matter.Bodies.rectangle(
-      448 * 2, 448,
-      1024 * 2, 64,
+      512 * 3, 448,
+      1024 * 3, 64,
       {
         isStatic: true,
       },
@@ -35,7 +34,7 @@ export default class Demo extends Component {
     );
 
     const rightWall = Matter.Bodies.rectangle(
-      1984, 288,
+      3008, 288,
       64, 576,
       {
         isStatic: true,
@@ -46,37 +45,57 @@ export default class Demo extends Component {
     Matter.World.addBody(engine.world, leftWall);
     Matter.World.addBody(engine.world, rightWall);
   }
+
+  handleEnterBuilding = () => {
+    this.setState({
+      fade: true,
+    });
+  }
+
   constructor(props) {
     super(props);
 
+    this.state = {
+      fade: true,
+    };
     this.keyListener = new KeyListener();
   }
+
   componentDidMount() {
+    this.setState({
+      fade: false,
+    });
+
     this.keyListener.subscribe([
       this.keyListener.LEFT,
       this.keyListener.RIGHT,
+      this.keyListener.UP,
       this.keyListener.SPACE,
     ]);
   }
+
   componentWillUnmount() {
     this.keyListener.unsubscribe();
   }
+
   render() {
     return (
       <Loop>
-        <Stage>
+        <Stage style={{ background: '#3a9bdc' }}>
           <World
             onInit={this.physicsInit}
           >
             <Level
               store={GameStore}
             />
             <Character
+              onEnterBuilding={this.handleEnterBuilding}
               store={GameStore}
               keys={this.keyListener}
             />
           </World>
         </Stage>
+        <Fade visible={this.state.fade} />
       </Loop>
     );
   }

diff --git a/demo/game/level.js b/demo/game/level.js
@@ -0,0 +1,83 @@
+import React, { Component, PropTypes } from 'react';
+import { autorun } from 'mobx';
+
+import {
+  TileMap,
+} from '../../src';
+
+import GameStore from './stores/game-store';
+
+export default class Level extends Component {
+
+  static contextTypes = {
+    scale: PropTypes.number,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      stageX: 0,
+    };
+  }
+
+  componentDidMount() {
+    this.cameraWatcher = autorun(() => {
+      const targetX = Math.round(GameStore.stageX * this.context.scale);
+      this.setState({
+        stageX: targetX,
+      });
+    });
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    const targetX = Math.round(GameStore.stageX * nextContext.scale);
+    this.setState({
+      stageX: targetX,
+    });
+  }
+
+  componentWillUnmount() {
+    this.cameraWatcher();
+  }
+
+  getWrapperStyles() {
+    return {
+      position: 'absolute',
+      transform: `translate(${this.state.stageX}px, 0px) translateZ(0)`,
+      transformOrigin: 'top left',
+    };
+  }
+
+  render() {
+    return (
+      <div style={this.getWrapperStyles()}>
+        <TileMap
+          style={{ top: Math.floor(64 * this.context.scale) }}
+          src="assets/boardwalktile.png"
+          tileSize={128}
+          columns={24}
+          rows={4}
+          layers={[
+            [
+              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+              1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
+            ],
+          ]}
+        />
+        <TileMap
+          style={{ top: Math.floor(-63 * this.context.scale) }}
+          src="assets/buildings.png"
+          rows={1}
+          columns={6}
+          tileSize={512}
+          layers={[
+            [1, 2, 3, 4, 5, 6],
+          ]}
+        />
+      </div>
+    );
+  }
+}
diff --git a/demo/stores/game-store.js → demo/game/stores/game-store.js b/demo/stores/game-store.js → demo/game/stores/game-store.js
@@ -12,8 +12,8 @@ class GameStore {
   setStageX(x) {
     if (x > 0) {
       this.stageX = 0;
-    } else if (x < -1024) {
-      this.stageX = -1024;
+    } else if (x < -2048) {
+      this.stageX = -2048;
     } else {
       this.stageX = x;
     }

diff --git a/demo/index.css b/demo/index.css
diff --git a/demo/index.js b/demo/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Demo from './demo';
+import Presentation from './presentation';
 
 ReactDOM.render(
-  <Demo />,
+  <Presentation />,
   document.getElementById('root')
 );
diff --git a/demo/intro.js b/demo/intro.js
@@ -0,0 +1,64 @@
+import React, { Component, PropTypes } from 'react';
+
+import Gamepad from 'html5-gamepad';
+
+const gamepad = new Gamepad();
+
+export default class Intro extends Component {
+  static propTypes = {
+    onStart: PropTypes.func,
+  };
+
+  startUpdate = () => {
+    gamepad.update();
+    if (gamepad.button(0, 'left stick')) {
+      this.props.onStart();
+      return;
+    }
+    this.animationFrame = requestAnimationFrame(this.startUpdate);
+  }
+
+  handleKeyPress = (e) => {
+    if (e.keyCode === 13) {
+      this.props.onStart();
+    }
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      blink: false,
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener('keypress', this.handleKeyPress);
+    this.animationFrame = requestAnimationFrame(this.startUpdate);
+    this.interval = setInterval(() => {
+      this.setState({
+        blink: !this.state.blink,
+      });
+    }, 500);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keypress', this.handleKeyPress);
+    cancelAnimationFrame(this.animationFrame);
+    clearInterval(this.interval);
+  }
+
+  render() {
+    return (
+      <div>
+        <img className="intro" src="assets/intro.png"/>
+        <p
+          className="start"
+          style={{ display: this.state.blink ? 'block' : 'none' }}
+        >
+            Press Start
+        </p>
+      </div>
+    );
+  }
+}