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

worked a bit on menu top bar

Browse source
This commit is contained in:
logsol 2015-02-28 19:57:05 +01:00
parent 60eae208a2
commit 13af9ecb9c
8 changed files with 122 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/Game/Client/Networker.js
View file

@ -12,6 +12,7 @@ function (ProtocolHelper, GameController, User, Nc, Settings, DomController) {
"use strict";
function Networker (socketLink, channelName, nickname) {
this.channelName = channelName;
this.nickname = nickname;
this.socketLink = socketLink;
@ -36,6 +37,8 @@ function (ProtocolHelper, GameController, User, Nc, Settings, DomController) {
Nc.on(Nc.ns.client.to.server.gameCommand.send, this.sendGameCommand, this);
Nc.on(Nc.ns.core.game.events.level.loaded, this.onLevelLoaded, this);
DomController.setNick(nickname);
}
// Socket callbacks

2
app/Game/Client/View/Abstract/View.js
View file

@ -90,7 +90,7 @@ function (Abstract, DomController, Settings, Exception, Nc) {
AbstractView.prototype.onToggleDebugMode = function(debugMode) {
if(debugMode) {
this.setCameraPosition(-Settings.STAGE_WIDTH / 2, -Settings.STAGE_HEIGHT / 2);
//this.setCameraPosition(-Settings.STAGE_WIDTH / 2, -Settings.STAGE_HEIGHT / 2);
}
this.debugMode = debugMode;

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

@ -3,11 +3,11 @@ define([
'Lib/Utilities/NotificationCenter',
"Lib/Vendor/Stats",
"Lib/Vendor/Screenfull",
"Game/Client/View/GraphManager",
"Game/Client/View/Graph",
"Game/Client/PointerLockManager"
],
function (Settings, Nc, Stats, Screenfull, GraphManager, PointerLockManager) {
function (Settings, Nc, Stats, Screenfull, Graph, PointerLockManager) {
"use strict";
@ -16,30 +16,75 @@ function (Settings, Nc, Stats, Screenfull, GraphManager, PointerLockManager) {
this.debugCanvas = null;
this.stats = null;
this.ping = null;
this.nickContainer = null;
var contextFps = document.getElementById('graph-fps').getContext("2d");
this.gm = new GraphManager(contextFps);
this.devToolsContainer = document.getElementById("menuBar");
Nc.on(Nc.ns.client.view.events.ready, this.initDevTools, this);
this.initDevTools();
}
DomController.prototype.initDevTools = function() {
var self = this;
var li, button, label;
// create dev tools container
this.devToolsContainer = document.getElementById("menuBar");
// create back to menu button
li = document.createElement("li");
li.id = "back-to-menu";
button = document.createElement("button");
button.innerHTML = "Menu";
button.onclick = function() {
window.location.href="/";
}
li.appendChild(button);
this.devToolsContainer.appendChild(li);
// create FPS stats
// create user name
li = document.createElement("li");
label = document.createElement("label");
label.appendChild(document.createTextNode("?"));
li.appendChild(label);
this.devToolsContainer.appendChild(li);
this.nickContainer = label;
// create new fps meter
li = document.createElement("li");
var fpsCanvas = document.createElement("canvas");
fpsCanvas.id = "graph-fps";
fpsCanvas.width = "100";
fpsCanvas.height = "27";
li.appendChild(fpsCanvas);
this.devToolsContainer.appendChild(li);
this.fpsGraph = new Graph(fpsCanvas.getContext("2d"));
li = document.createElement("li");
label = document.createElement("label");
label.id = "label-fps";
label.innerHTML = "FPS:0";
li.appendChild(label);
this.devToolsContainer.appendChild(li);
// create old FPS stats
/*
li = document.createElement("li");
this.stats = new Stats();
this.stats.setMode(0);
li.appendChild(this.stats.domElement);
this.devToolsContainer.appendChild(li);
*/
// create Ping: container
li = document.createElement("li");
this.ping = document.createElement("label");
li.appendChild(this.ping);
this.devToolsContainer.appendChild(li);
// create debug mode
li = document.createElement("li");
var label = document.createElement("label");
label = document.createElement("label");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.onclick = function(e) {
@ -51,14 +96,11 @@ function (Settings, Nc, Stats, Screenfull, GraphManager, PointerLockManager) {
li.appendChild(label);
this.devToolsContainer.appendChild(li);
// create Ping: container
this.ping = document.createElement("li");
this.devToolsContainer.appendChild(this.ping);
// create Fullscreen
var li = document.createElement("li");
// create Fullscreen
li = document.createElement("li");
li.id = "fullscreen"
var button = document.createElement("button");
button = document.createElement("button");
button.innerHTML = "Fullscreen";
button.onclick = function() {
if(Screenfull.enabled) {
@ -69,27 +111,37 @@ function (Settings, Nc, Stats, Screenfull, GraphManager, PointerLockManager) {
li.appendChild(button);
this.devToolsContainer.appendChild(li);
// FIXME : isn't this a weird place for this?
window.onresize = function() {
Nc.trigger(Nc.ns.client.view.display.change);
}
};
DomController.prototype.setNick = function (nick) {
this.nickContainer.innerHTML = nick
}
DomController.prototype.statsBegin = function() {
this.gm.fpsStep();
/*
if(this.stats) {
this.stats.begin();
}
*/
};
DomController.prototype.statsEnd = function() {
/*
if(this.stats) {
this.stats.end();
}
*/
this.fpsGraph.step();
};
DomController.prototype.setPing = function(ping) {
this.ping.innerHTML = "Ping: " + ping;
this.ping.innerHTML = "Ping:" + ping;
};
DomController.prototype.getCanvasContainer = function () {

23
app/Game/Client/View/GraphManager.js → app/Game/Client/View/Graph.js
View file

@ -6,18 +6,18 @@ function (Chart) {
"use strict";
function GraphManager(ctxFps) {
function Graph(ctx) {
var numberOfGraphBarsFPS = 25;
var numberOfGraphBars = 25;
var empty = new Array(numberOfGraphBarsFPS);
var empty = new Array(numberOfGraphBars);
for (var i = empty.length - 1; i >= 0; i--) empty[i] = -1;
var data = {
labels: empty,
datasets: [
{
label: "My First dataset",
label: "no label",
fillColor: "rgba(220,220,220,1)",
strokeColor: "rgba(220,220,220,1)",
highlightFill: "rgba(220,220,220,1)",
@ -46,13 +46,13 @@ function (Chart) {
scaleSteps: 60
}
this.fpsGraph = new Chart(ctxFps).Bar(data, options);
this.chart = new Chart(ctx).Bar(data, options);
this.frameCounter = 0;
var self = this;
setInterval(function(){
self.fpsGraph.addData( [self.frameCounter], "" );
self.chart.addData( [self.frameCounter], "" );
var color;
var alpha = 0.8;
@ -64,17 +64,18 @@ function (Chart) {
color = "rgba(224, 018, 018, " + 1 + ")";
}
self.fpsGraph.datasets[0].bars[self.fpsGraph.datasets[0].bars.length-1].fillColor = color;
self.fpsGraph.removeData();
self.fpsGraph.update();
self.chart.datasets[0].bars[self.chart.datasets[0].bars.length-1].fillColor = color;
self.chart.removeData();
self.chart.update();
self.frameCounter = 0;
}, 1000);
}
GraphManager.prototype.fpsStep = function() {
Graph.prototype.step = function() {
this.frameCounter++;
}
return GraphManager;
return Graph;
});

2
app/Game/Client/View/ViewManager.js
View file

@ -38,8 +38,6 @@ function (Settings, Exception, AbstractView, PixiView, Nc) {
throw new Exception("In the view", Settings.VIEW_CONTROLLER + 'View', "this.setCanvas(canvas) has not been called with a valid HTMLCanvasElement!");
}
Nc.trigger(Nc.ns.client.view.events.ready, view);
return view;
}