added ping histograph and made disconnect clear with page reload. fixes #104 fixes #122

app/Game/Client/View/DomController.js

@@ -1,13 +1,12 @@
 define([
     'Game/Config/Settings',
     'Lib/Utilities/NotificationCenter',
-    "Lib/Vendor/Stats",
     "Lib/Vendor/Screenfull",
     "Game/Client/View/Graph",
     "Game/Client/PointerLockManager"
 ], 
 
-function (Settings, Nc, Stats, Screenfull, Graph, PointerLockManager) {
+function (Settings, Nc, Screenfull, Graph, PointerLockManager) {
 
 	"use strict";
 
@@ -16,6 +15,7 @@ function (Settings, Nc, Stats, Screenfull, Graph, PointerLockManager) {
         this.stats = null;
         this.ping = null;
         this.nickContainer = null;
+        this.fpsContainer = "";
 
         this.devToolsContainer = document.getElementById("menuBar");
 
@@ -55,24 +55,48 @@ function (Settings, Nc, Stats, Screenfull, Graph, PointerLockManager) {
         li.appendChild(fpsCanvas);
         this.devToolsContainer.appendChild(li);
 
-        this.fpsGraph = new Graph(fpsCanvas.getContext("2d"));
+        this.fpsGraph = new Graph(fpsCanvas.getContext("2d"), true);
 
+        // create fps label with updater
         li = document.createElement("li");
         label = document.createElement("label");
         label.id = "label-fps";
-        label.innerHTML = "FPS:0";
         li.appendChild(label);
         this.devToolsContainer.appendChild(li);
+        this.fpsContainer = label;
 
+        this.fpsGraph.onUpdate(function(value){
+            self.fpsContainer.innerHTML = "FPS:" + value;
 
-        // create old FPS stats
+            var color, 
-        /*
+                alpha = 0.8;
+
+            if (value >= 50) {
+                color = "rgba(136, 209, 018, " + alpha +  ")";
+            } else if (value > 25) {
+                color = "rgba(204, 114, 018, " + alpha +  ")";
+            } else {
+                color = "rgba(224, 018, 018, " + 1 +  ")";
+            }
+
+            return color;
+        });
+
+        // create new ping meter
         li = document.createElement("li");
-        this.stats = new Stats();
+        var pingCanvas = document.createElement("canvas");
-        this.stats.setMode(0);
+        pingCanvas.id = "graph-fps";
-        li.appendChild(this.stats.domElement);
+        pingCanvas.width = "100";
+        pingCanvas.height = "27";
+        li.appendChild(pingCanvas);
         this.devToolsContainer.appendChild(li);
-        */
+
+        this.pingGraph = new Graph(pingCanvas.getContext("2d"), false, {
+            scaleOverride: false, 
+            scaleStartValue: 0, 
+            scaleStepWidth: 0, 
+            scaleSteps: 0
+        })
 
         // create Ping: container
         li = document.createElement("li");
@@ -127,6 +151,7 @@ function (Settings, Nc, Stats, Screenfull, Graph, PointerLockManager) {
 
     DomController.prototype.setPing = function(ping) {
         this.ping.innerHTML = "Ping:" + ping;
+        this.pingGraph.addValue(ping);
     };
 
     DomController.prototype.getCanvasContainer = function () {
@@ -152,6 +177,15 @@ function (Settings, Nc, Stats, Screenfull, Graph, PointerLockManager) {
             document.body.style.backgroundColor = '';
         } else {
             document.body.style.backgroundColor = '#aaaaaa';
+            this.ping.innerHTML = "Disconnected. ".replace(/ /g, ' ');
+            this.ping.style.color = "#ff0000";
+
+            self = this;
+            setTimeout(function(){self.ping.innerHTML = "Reload Page...".replace(/ /g, ' ');}, 3000);
+            setTimeout(function(){self.ping.innerHTML = "Reload in 3...".replace(/ /g, ' ');}, 6000);
+            setTimeout(function(){self.ping.innerHTML = "Reload in 2...".replace(/ /g, ' ');}, 7000);
+            setTimeout(function(){self.ping.innerHTML = "Reload in 1...".replace(/ /g, ' ');}, 8000);
+            setTimeout(function(){self.ping.innerHTML = "Reload now.   ".replace(/ /g, ' '); location.reload(); }, 9000);
         }
     };
 

app/Game/Client/View/Graph.js

@@ -6,7 +6,7 @@ function (Chart) {
 
     "use strict";
  
-    function Graph(ctx) {
+    function Graph(ctx, isStepCounter, newOptions) {
 
     	var numberOfGraphBars = 25;
 
@@ -46,36 +46,54 @@ function (Chart) {
 		    scaleSteps: 60
 		}
 
+		if (newOptions) {
+			if (newOptions.scaleOverride) options.scaleOverride = newOptions.scaleOverride;
+			if (newOptions.scaleStartValue) options.scaleStartValue = newOptions.scaleStartValue;
+			if (newOptions.scaleSteps) options.scaleSteps = newOptions.scaleSteps;
+			if (newOptions.scaleStepWidth) options.scaleStepWidth = newOptions.scaleStepWidth;
+		} 
+        
         this.chart = new Chart(ctx).Bar(data, options);
-        this.frameCounter = 0;
+        this.stepCounter = 0;
+        this.currentValue = 0;
+        this.updateFunction = function(value){};
 
         var self = this;
 
+        if (isStepCounter) {
 	        setInterval(function(){
-        	self.chart.addData( [self.frameCounter], "" );
+	        	self.addValue(null);
-        	var color;
-        	var alpha = 0.8;
-
-        	if (self.frameCounter >= 50) {
-        		color = "rgba(136, 209, 018, " + alpha +  ")";
-        	} else if (self.frameCounter > 25) {
-        		color = "rgba(204, 114, 018, " + alpha +  ")";
-        	} else {
-        		color = "rgba(224, 018, 018, " + 1 +  ")";
-        	}
-
-        	self.chart.datasets[0].bars[self.chart.datasets[0].bars.length-1].fillColor = color;
-	        self.chart.removeData();
-		    self.chart.update();
-		    self.frameCounter = 0;
-
 	        }, 1000);
         }
 
-    Graph.prototype.step = function() {
-    	this.frameCounter++;
     }
 
+    Graph.prototype.addValue = function (value) {
+
+    	value = value ? value : this.stepCounter;
+
+    	this.chart.addData( [value], "" );
+	    this.currentValue = value;
+	    this.stepCounter = 0;
+	    var color = this.updateFunction(this.currentValue);
+	    color = color ? color : "rgba(136, 209, 018, 1)"; // green
+	    this.chart.datasets[0].bars[this.chart.datasets[0].bars.length-1].fillColor = color;
+	  	this.chart.removeData();
+	    this.chart.update();
+    }
+ 
+    Graph.prototype.step = function() {
+    	this.stepCounter++;
+    };
+
+    Graph.prototype.getCurrentValue = function() {
+    	return this.currentValue;
+    };
+
+    Graph.prototype.onUpdate = function(f) {
+    	this.updateFunction = f;
+    };
+ 
     return Graph;
  
 });