slide start

Author: kenwheeler

demo/game/character.js

@@ -43,18 +43,18 @@ export default class Character extends Component {
       { x: 0, y: 0 },
       { x: 0, y: -0.15 },
     );
-    Matter.Body.set(body, 'friction', 0);
+    Matter.Body.set(body, 'friction', 0.0001);
   };
 
   punch = () => {
     this.isPunching = true;
     this.setState({
       characterState: 4,
-      loop: false,
+      repeat: false,
     });
   }
 
-  enterBuilding = (body) => {
+  getDoorIndex = (body) => {
     let doorIndex = null;
 
     const doorPositions = [...Array(6).keys()].map((a) => {
@@ -67,6 +67,12 @@ export default class Character extends Component {
       }
     });
 
+    return doorIndex;
+  }
+
+  enterBuilding = (body) => {
+    const doorIndex = this.getDoorIndex(body);
+
     if (doorIndex !== null) {
       this.setState({
         characterState: 3,
@@ -76,15 +82,10 @@ export default class Character extends Component {
     }
   };
 
-  checkKeys = () => {
+  checkKeys = (shouldMoveStageLeft, shouldMoveStageRight) => {
     const { keys, store } = this.props;
     const { body } = this.body;
 
-    const midPoint = Math.abs(store.stageX) + 448;
-
-    const shouldMoveStageLeft = body.position.x < midPoint && store.stageX < 0;
-    const shouldMoveStageRight = body.position.x > midPoint && store.stageX > -2048;
-
     let characterState = 2;
 
     if (keys.isDown(65) || gamepad.button(0, 'b')) {
@@ -105,21 +106,19 @@ export default class Character extends Component {
       }
 
       this.move(body, -5);
-
       characterState = 1;
     } else if (keys.isDown(keys.RIGHT) || gamepad.button(0, 'button 15')) {
       if (shouldMoveStageRight) {
         store.setStageX(store.stageX - 5);
       }
 
       this.move(body, 5);
-
       characterState = 0;
     }
 
     this.setState({
       characterState,
-      loop: characterState < 2,
+      repeat: characterState < 2,
     });
   }
 
@@ -132,15 +131,17 @@ 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) {
+    const velY = parseFloat(body.velocity.y.toFixed(10));
+
+    if (velY === 0) {
       this.isJumping = false;
-      Matter.Body.set(body, 'friction', 1);
+      Matter.Body.set(body, 'friction', 0.9999);
     }
 
     if (!this.isJumping && !this.isPunching && !this.isLeaving) {
       gamepad.update();
 
-      this.checkKeys();
+      this.checkKeys(shouldMoveStageLeft, shouldMoveStageRight);
 
       store.setCharacterPosition(body.position);
     } else {
@@ -206,13 +207,12 @@ export default class Character extends Component {
           ref={(b) => { this.body = b; }}
         >
           <Sprite
-            animating
-            loop={this.state.loop}
+            repeat={this.state.repeat}
             onPlayStateChanged={this.handlePlayStateChanged}
             src="assets/character-sprite.png"
             scale={this.context.scale * 2}
             state={this.state.characterState}
-            states={[9, 9, 0, 4, 5]}
+            steps={[9, 9, 0, 4, 5]}
           />
         </Body>
       </div>

demo/game/index.js

@@ -85,6 +85,7 @@ export default class Game extends Component {
       this.keyListener.RIGHT,
       this.keyListener.UP,
       this.keyListener.SPACE,
+      65,
     ]);
   }
 

demo/slides/basics.js

@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import Gamepad from 'html5-gamepad';
 
+import Slide from './slide';
+
 const gamepad = new Gamepad();
 
 export default class Slides extends Component {
@@ -29,6 +31,7 @@ export default class Slides extends Component {
   }
 
   componentDidMount() {
+    window.addEventListener('keyup', this.handleKeyPress);
     window.addEventListener('keypress', this.handleKeyPress);
     this.animationFrame = requestAnimationFrame(this.startUpdate);
   }
@@ -38,10 +41,20 @@ export default class Slides extends Component {
     cancelAnimationFrame(this.animationFrame);
   }
 
+  getWrapperStyles() {
+    return {
+      height: '100%',
+      width: '100%',
+      display: 'flex',
+      alignItems: 'stretch',
+      justifyContent: 'center',
+    };
+  }
+
   render() {
     return (
-      <div>
-        <p>Ayy whatup</p>
+      <div style={this.getWrapperStyles()}>
+        <Slide>test</Slide>
       </div>
     );
   }

demo/slides/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const slideStyles = {
+  display: 'flex',
+  flex: '1 1 0',
+  alignItems: 'center',
+  justifyContent: 'center',
+  maxWidth: '166vh',
+  background: 'red',
+};
+
+const Slide = (props) => (
+  <div style={slideStyles}>
+    {props.children}
+  </div>
+);
+
+export default Slide;