worked a bit on menu top bar

app/Game/Client/Networker.js

@@ -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

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

@@ -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;

app/Game/Client/View/DomController.js

@@ -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.devToolsContainer = document.getElementById("menuBar");
-        this.gm = new GraphManager(contextFps);
 
-        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
+        // create back to menu button
-        this.devToolsContainer = document.getElementById("menuBar");
+        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
+        // create Fullscreen
-        var li = document.createElement("li");
+        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 () {

app/Game/Client/View/Graph.js

@@ -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.chart.datasets[0].bars[self.chart.datasets[0].bars.length-1].fillColor = color;
-	        self.fpsGraph.removeData();
+	        self.chart.removeData();
-		    self.fpsGraph.update();
+		    self.chart.update();
 		    self.frameCounter = 0;
+
         }, 1000);
     }
  
-    GraphManager.prototype.fpsStep = function() {
+    Graph.prototype.step = function() {
     	this.frameCounter++;
     }
  
-    return GraphManager;
+    return Graph;
  
 });

app/Game/Client/View/ViewManager.js

@@ -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;
     }
  

app/Lib/Utilities/NotificationCenter.js

@@ -63,9 +63,6 @@ function (Exception) {
                     debugMode: {
                         toggle: null
                     },
-                    events: {
-                        ready: null
-                    },
                     gameStats: {
                         toggle: null
                     },

static/css/screen.css

@@ -28,30 +28,54 @@ body {
 }
 
 #menuBar {
+
     list-style-type: none;
-    margin: 0;
-    padding: 0;
     background: rgba(0, 0, 0, 0.5);
     position: absolute;
     z-index: 1;
     width: 100%;
-    /*display: none;*/
+    margin: 0;
+    padding: 5px 0;
 
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
+
+#menuBar button {
+    outline : 0;
+    -moz-outline : 0;
+}
+
 #menuBar li {
-    display: inline-block;
+    float: left;
-    padding: 0;
+    margin-left: 40px;
-    vertical-align: middle;
+}
-    padding: 0 2em;
+
+#menuBar li label {
+
+    padding: 5px 0;
+    display: block;
 }
 
 #back-to-menu {
-    display: inline-block;
+    margin-left: 5px !important;
 }
 
+#graph-fps {
+    background: rgba(0,0,0,0.3);
+    border: 1px solid rgba(0,0,0,0.5);
+    padding: 2px;
+    display: inline;
+}
+
+
 #fullscreen {
-    float: right;
+    float: right !important;
-    margin-top: 0.5em;
+    margin-right: 5px;
 }
 
 ::selection {
@@ -140,11 +164,6 @@ a {
     margin-left: -300px;*/
 }
 
-#graph-fps {
-    background: rgba(0,0,0,0.3);
-    border: 1px solid rgba(0,0,0,0.5);
-    padding: 2px;
-}
 
 :-webkit-full-screen {
     top: 0;

static/html/index.html

@@ -75,7 +75,7 @@
 	</form>
 </article>
 <article id="game">
-	<ul id="menuBar"><li><button id="back-to-menu" onclick="window.location.href='/'">Menu</button></li><li><canvas id="graph-fps" width="100" height="29"></canvas><span id="fps-value"></span></li></ul>
+	<ul id="menuBar"></ul>
     <div id="canvasContainer">
         <canvas id="canvas"></canvas>
     </div>