Client refactor for #17

example/public/javascripts/accumulator.js

@@ -0,0 +1,34 @@
+var Accumulator = (function () {
+    var _currentTime = new Date().getTime(),
+        _accumulator = 0.0,
+        
+        reset = function () {
+            _currentTime = new Date().getTime();
+            _accumulator = 0.0;
+        },
+
+        tick = function () {
+            var newTime = new Date().getTime(), frameTime = newTime - _currentTime;
+            if (frameTime  > 250) {
+                frameTime = 250;
+            }
+            _currentTime = newTime;
+            _accumulator += frameTime;
+        },
+        
+        time = function () {
+            return _accumulator;
+        },
+        
+        reduceTime = function (time) {
+            _accumulator -= time;
+        };
+
+    return {
+        tick: tick,
+        reset: reset,
+        time: time,
+        reduceTime: reduceTime
+    };
+
+}) ();

example/public/javascripts/game.js

@@ -1,10 +1,10 @@
 $(function () {
-    var canvas = document.getElementById('gameCanvas'), ctxCanvas = canvas.getContext('2d'), keyboard = new THREEx.KeyboardState(),
+    var canvas = document.getElementById('gameCanvas'), 
+        ctxCanvas = canvas.getContext('2d'), 
+        keyboard = new THREEx.KeyboardState(),
         requestAnimFrame = (function () {
             return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000/60); };
-        })(),
-        currentTime = new Date().getTime(),
-        accumulator = 0.0;
+        })();
 
     GarageServerIO.initializeGarageServer('http://garageserver_io.jbillmann.c9.io', { 
         logging: true,
@@ -18,6 +18,7 @@ $(function () {
     });
     GarageServerIO.setPlayerState({ x: 0, y: 0 });
 
+    Accumulator.reset();
     render();
 
     function render () {
@@ -25,33 +26,14 @@ $(function () {
 
         ctxCanvas.clearRect(0, 0, canvas.width, canvas.height);
 
-        var newTime = new Date().getTime(), frameTime = newTime - currentTime;
-        if (frameTime  > 250) {
-            frameTime = 250;
-        }
-
-        currentTime = newTime;
-        accumulator += frameTime;
-
-        while (accumulator >= 15)
+        Accumulator.tick();
+        while (Accumulator.time() >= 15)
         {
-            if (keyboard.pressed('left')) {
-                GarageServerIO.addPlayerInput('left');
-            }
-            if (keyboard.pressed('right')) {
-                GarageServerIO.addPlayerInput('right');
-            }
-            if (keyboard.pressed('down')) {
-                GarageServerIO.addPlayerInput('down');
-            }
-            if (keyboard.pressed('up')) {
-                GarageServerIO.addPlayerInput('up');
-            }
-            accumulator -= 15;
+            captureInput();
+            Accumulator.reduceTime(15);
         }
 
         GarageServerIO.getStates(function (selfState, playerStates, entityStates) {
-
             playerStates.forEach(function (player) {
                 ctxCanvas.fillRect(player.currentState.x, player.currentState.y, 15, 15);
             });
@@ -63,4 +45,19 @@ $(function () {
             ctxCanvas.fillRect(selfState.x, selfState.y, 15, 15);
         });
     }
+    
+    function captureInput () {
+        if (keyboard.pressed('left')) {
+            GarageServerIO.addPlayerInput('left');
+        }
+        if (keyboard.pressed('right')) {
+            GarageServerIO.addPlayerInput('right');
+        }
+        if (keyboard.pressed('down')) {
+            GarageServerIO.addPlayerInput('down');
+        }
+        if (keyboard.pressed('up')) {
+            GarageServerIO.addPlayerInput('up');
+        }
+    }
 });