jeena/chuck.js
1
0
Fork 0
mirror of https://github.com/logsol/chuck.js.git synced 2026-05-11 10:37:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
logsol 2015-03-03 15:34:43 +01:00
parent 6f5c24dd9c
commit 67507333c4
2 changed files with 82 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

54
app/Game/Client/View/DomController.js
View file

@ -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();
this.stats.setMode(0);
li.appendChild(this.stats.domElement);
var pingCanvas = document.createElement("canvas");
pingCanvas.id = "graph-fps";
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);
}
};

60
app/Game/Client/View/Graph.js
View file

@ -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], "" );
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;
self.addValue(null);
}, 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;
});