added stats + ping, fixed box2d step size

app/Game/Client/GameController.js

@@ -6,10 +6,11 @@ define([
     "Game/Client/Control/PlayerController", 
     "Game/Core/NotificationCenter",
     "Lib/Utilities/RequestAnimFrame",
-    "Game/Config/Settings"
+    "Game/Config/Settings",
+    "Lib/Vendor/Stats"
 ],
 
-function (Box2D, Parent, PhysicsEngine, ViewController, PlayerController, NotificationCenter, requestAnimFrame, Settings) {
+function (Box2D, Parent, PhysicsEngine, ViewController, PlayerController, NotificationCenter, requestAnimFrame, Settings, Stats) {
 
     function GameController () {
         this.viewController = new ViewController();
@@ -20,12 +21,19 @@ function (Box2D, Parent, PhysicsEngine, ViewController, PlayerController, Notifi
 
         this.me = null;
 
+        this.initStats();
+
         this.update();
-        this.render();
     }
 
     GameController.prototype = Object.create(Parent.prototype);
 
+    GameController.prototype.initStats = function() {
+        this.stats = new Stats();
+        this.stats.setMode(0);
+        document.body.appendChild(this.stats.domElement);
+    };
+
     GameController.prototype.makeMouseJoint = function(p) {
         var ground = this.physicsEngine.getGround();
         var body = this.me.getBody();
@@ -54,19 +62,19 @@ function (Box2D, Parent, PhysicsEngine, ViewController, PlayerController, Notifi
     }
 
     GameController.prototype.update  = function () {
+        this.stats.begin();
 
-        setTimeout(this.update.bind(this), Settings.BOX2D_TIME_STEP * 1000);
+        requestAnimFrame(this.update.bind(this));
 
         this.physicsEngine.update();
         
         if(this.me) {
             this.me.update();
         }
-    }
 
-    GameController.prototype.render = function() {
-        requestAnimFrame(this.render.bind(this));
         this.viewController.render();
+
+        this.stats.end();
     }
 
     GameController.prototype.onWorldUpdate = function (updateData) {

app/Game/Client/Networker.js

@@ -63,8 +63,22 @@ function (ProtocolHelper, GameController, User, NotificationCenter) {
                 console.log("already spawned player, options: ", options.spawnedPlayers[i])
             }
         }
+
+        this.initPing();
     }
 
+    Networker.prototype.initPing = function() {
+        this.pingDOMElement = document.createElement("span");
+        this.pingDOMElement.style.color = "white";
+        this.pingDOMElement.style.fontFamily = "monospace";
+        document.body.appendChild(this.pingDOMElement);
+        this.ping();
+    };
+
+    Networker.prototype.ping = function() {
+        this.sendCommand("ping", Date.now());
+    };
+
 
     // Sending commands
 
@@ -97,6 +111,11 @@ function (ProtocolHelper, GameController, User, NotificationCenter) {
         ProtocolHelper.applyCommand(message, this.gameController);
     }
 
+    Networker.prototype.onPong = function(timestamp) {
+        this.pingDOMElement.innerHTML = "Ping: " + (Date.now() - parseInt(timestamp, 10));
+        setTimeout(this.ping.bind(this), 1000);
+    };
+
     return Networker;
     
 });

app/Game/Client/View/ViewController.js

@@ -35,11 +35,11 @@ define(requires, function (DomController, Three, Settings, CameraController) {
             preserveDrawingBuffer: true
         };
 
-        //if(isWebGlEnabled()) {
+        if(Settings.USE_WEBGL) {
             this.renderer = new Three.WebGLRenderer(rendererOptions);
-        //} else {
-            //this.renderer = new Three.CanvasRenderer(rendererOptions);
-        //}
+        } else {
+            this.renderer = new Three.CanvasRenderer(rendererOptions);
+        }
         
         this.renderer.setClearColor("#333333", 1);
         this.renderer.setSize(Settings.STAGE_WIDTH, Settings.STAGE_HEIGHT);

app/Game/Config/Settings.js

@@ -8,7 +8,7 @@ define({
     BOX2D_GRAVITY: 16,
     BOX2D_VELOCITY_ITERATIONS: 5,
     BOX2D_POSITION_ITERATIONS: 5,
-    BOX2D_TIME_STEP: 1 / 30,
+    BOX2D_TIME_STEP: 1 / 60,
 
     // GRAPHIC PATHS
     GRAPHICS_PATH: 'static/img/',
@@ -43,8 +43,9 @@ define({
     // BROWSER
     CANVAS_DOM_ID: 'canvasContainer',
     IS_BROWSER_ENVIRONMENT: typeof window !== 'undefined',
+    USE_WEGBL: true, 
 
-    DEBUG_MODE: true,
+    DEBUG_MODE: false,
 
     // NETWORKING
     WORLD_UPDATE_BROADCAST_INTERVAL: 70

app/Game/Core/Physics/Engine.js

@@ -12,6 +12,7 @@ function (Settings, Box2D, CollisionDetector) {
             Settings.BOX2D_ALLOW_SLEEP
         );
         this.ground = null;
+        this.lastStep = Date.now();
         console.log(Settings.BOX2D_TIME_STEP)
     }
 
@@ -36,7 +37,9 @@ function (Settings, Box2D, CollisionDetector) {
     }
 
     Engine.prototype.update = function () {
-        this.world.Step(Settings.BOX2D_TIME_STEP, Settings.BOX2D_VELOCITY_ITERATIONS, Settings.BOX2D_POSITION_ITERATIONS);
+        var stepLength = (Date.now() - this.lastStep) / 1000;
+        this.world.Step(stepLength, Settings.BOX2D_VELOCITY_ITERATIONS, Settings.BOX2D_POSITION_ITERATIONS);
+        this.lastStep = Date.now();
         this.world.ClearForces();
     }
 

app/Lib/Vendor/Stats.js

@@ -0,0 +1,9 @@
+define(function() {
+	var Stats=function(){var l=Date.now(),m=l,g=0,n=Infinity,o=0,h=0,p=Infinity,q=0,r=0,s=0,f=document.createElement("div");f.id="stats";f.addEventListener("mousedown",function(b){b.preventDefault();t(++s%2)},!1);f.style.cssText="width:80px;opacity:0.9;cursor:pointer";var a=document.createElement("div");a.id="fps";a.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002";f.appendChild(a);var i=document.createElement("div");i.id="fpsText";i.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";
+	i.innerHTML="FPS";a.appendChild(i);var c=document.createElement("div");c.id="fpsGraph";c.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff";for(a.appendChild(c);74>c.children.length;){var j=document.createElement("span");j.style.cssText="width:1px;height:30px;float:left;background-color:#113";c.appendChild(j)}var d=document.createElement("div");d.id="ms";d.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none";f.appendChild(d);var k=document.createElement("div");
+	k.id="msText";k.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";k.innerHTML="MS";d.appendChild(k);var e=document.createElement("div");e.id="msGraph";e.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0";for(d.appendChild(e);74>e.children.length;)j=document.createElement("span"),j.style.cssText="width:1px;height:30px;float:left;background-color:#131",e.appendChild(j);var t=function(b){s=b;switch(s){case 0:a.style.display=
+	"block";d.style.display="none";break;case 1:a.style.display="none",d.style.display="block"}};return{REVISION:11,domElement:f,setMode:t,begin:function(){l=Date.now()},end:function(){var b=Date.now();g=b-l;n=Math.min(n,g);o=Math.max(o,g);k.textContent=g+" MS ("+n+"-"+o+")";var a=Math.min(30,30-30*(g/200));e.appendChild(e.firstChild).style.height=a+"px";r++;b>m+1E3&&(h=Math.round(1E3*r/(b-m)),p=Math.min(p,h),q=Math.max(q,h),i.textContent=h+" FPS ("+p+"-"+q+")",a=Math.min(30,30-30*(h/100)),c.appendChild(c.firstChild).style.height=
+	a+"px",m=b,r=0);return b},update:function(){l=this.end()}}};
+	
+	return Stats;
+});

app/Lobby/User.js

@@ -53,6 +53,11 @@ function (Parent, ProtocolHelper, NotificationCenter) {
         NotificationCenter.trigger("user/controlCommand", this.id, message);
     };
 
+    User.prototype.onPing = function(timestamp) {
+        var message = ProtocolHelper.encodeCommand("pong", timestamp);
+        NotificationCenter.trigger("user/" + this.socketLink.id + "/message", message);
+    };
+
     return User;
 
 });