From 151cdfe4360b44baddec0ebf7b63d7d1fc455f83 Mon Sep 17 00:00:00 2001
From: Ken Wheeler <ken_wheeler@me.com>
Date: Mon, 5 Sep 2016 11:37:59 -0400
Subject: [PATCH] phew

---
 demo/character.js         | 27 +++++++++++++++++++--------
 demo/demo.js              |  4 ++--
 demo/level.js             |  2 +-
 demo/stores/game-store.js |  8 +++++++-
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/demo/character.js b/demo/character.js
index 03ebe6e..7f06052 100644
--- a/demo/character.js
+++ b/demo/character.js
@@ -41,8 +41,10 @@ export default class Character extends Component {
     const { keys, store } = this.props;
     const { body } = this.body;
 
-    const shouldMoveStageLeft = body.position.x < 448 && store.stageX < 0;
-    const shouldMoveStageRight = body.position.x > 448 && store.stageX > -1024;
+    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;
 
     if (body.velocity.y === 0) {
       this.isJumping = false;
@@ -62,18 +64,18 @@ export default class Character extends Component {
       if (keys.isDown(keys.LEFT) || gamepad.button(0, 'button 14')) {
         if (shouldMoveStageLeft) {
           store.setStageX(store.stageX + 5);
-        } else {
-          this.move(body, -5);
         }
 
+        this.move(body, -5);
+
         characterState = 1;
       } else if (keys.isDown(keys.RIGHT) || gamepad.button(0, 'button 15')) {
         if (shouldMoveStageRight) {
           store.setStageX(store.stageX - 5);
-        } else {
-          this.move(body, 5);
         }
 
+        this.move(body, 5);
+
         characterState = 0;
       }
 
@@ -82,7 +84,14 @@ export default class Character extends Component {
       this.setState({
         characterState,
       });
+    } else {
+      const targetX = store.stageX + (this.lastX - body.position.x);
+      if (shouldMoveStageLeft || shouldMoveStageRight) {
+        store.setStageX(targetX);
+      }
     }
+
+    this.lastX = body.position.x;
   };
 
   constructor(props) {
@@ -90,6 +99,7 @@ export default class Character extends Component {
 
     this.loopID = null;
     this.isJumping = false;
+    this.lastX = 0;
 
     this.state = {
       characterState: 2,
@@ -105,13 +115,14 @@ export default class Character extends Component {
   }
 
   getWrapperStyles() {
-    const { characterPosition } = this.props.store;
+    const { characterPosition, stageX } = this.props.store;
     const { scale } = this.context;
     const { x, y } = characterPosition;
+    const targetX = x + stageX;
 
     return {
       position: 'absolute',
-      transform: `translate(${x * scale}px, ${y * scale}px)`,
+      transform: `translate(${targetX * scale}px, ${y * scale}px)`,
       transformOrigin: 'left top',
     };
   }
diff --git a/demo/demo.js b/demo/demo.js
index 1c80e28..868d8fc 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -27,7 +27,7 @@ export default class Demo extends Component {
     );
 
     const leftWall = Matter.Bodies.rectangle(
-      -96, 288,
+      -64, 288,
       64, 576,
       {
         isStatic: true,
@@ -35,7 +35,7 @@ export default class Demo extends Component {
     );
 
     const rightWall = Matter.Bodies.rectangle(
-      992, 288,
+      1984, 288,
       64, 576,
       {
         isStatic: true,
diff --git a/demo/level.js b/demo/level.js
index bedd823..1bf4ceb 100644
--- a/demo/level.js
+++ b/demo/level.js
@@ -37,7 +37,7 @@ export default class Level extends Component {
   getWrapperStyles() {
     return {
       position: 'absolute',
-      transform: `translate(${this.state.stageX}px, 0px)`,
+      transform: `translate(${this.state.stageX}px, 0px) translateZ(0)`,
       transformOrigin: 'top left',
     };
   }
diff --git a/demo/stores/game-store.js b/demo/stores/game-store.js
index 0be7fbf..e83706c 100644
--- a/demo/stores/game-store.js
+++ b/demo/stores/game-store.js
@@ -10,7 +10,13 @@ class GameStore {
   }
 
   setStageX(x) {
-    this.stageX = x;
+    if (x > 0) {
+      this.stageX = 0;
+    } else if (x < -1024) {
+      this.stageX = -1024;
+    } else {
+      this.stageX = x;
+    }
   }
 }