added menuBar

app/Game/Client/GameController.js

@@ -210,11 +210,6 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Nc, reque
     GameController.prototype.onUpdateStats = function(options) {
         var player = this.players[options.playerId];
         player.setStats(options.stats);
-
-        // FIXME: move to canvas later
-        if(player == this.me) {
-            DomController.setHealth(player.stats.health);
-        }
     };
 
     GameController.prototype.onPlayerKill = function(options) {

app/Game/Client/View/DomController.js

@@ -23,38 +23,17 @@ function (Settings, Nc, Stats, Screenfull) {
         var self = this;
 
         // create dev tools container
-        this.devToolsContainer = document.createElement("div");
+        this.devToolsContainer = document.getElementById("menuBar");
-        this.devToolsContainer.id = "devtools";
-        document.body.appendChild(this.devToolsContainer);
-
-        // create Fullscreen
-        var p = document.createElement("p");
-        var button = document.createElement("button");
-        button.innerHTML = "Fullscreen";
-        button.onclick = function() {
-            if(Screenfull.enabled) {
-                Screenfull.request(self.canvas);
-            }
-        }
-        p.appendChild(button);
-        this.devToolsContainer.appendChild(p);
-
-        window.onresize = function() {
-            if(Screenfull.enabled) {
-                Nc.trigger(Nc.ns.client.view.fullscreen.change, Screenfull.isFullscreen);
-            }
-        }
-
-        // create Ping: container
-        this.ping = document.createElement("span");
-        this.devToolsContainer.appendChild(this.ping);
 
         // create FPS stats
+        li = document.createElement("li");
         this.stats = new Stats();
         this.stats.setMode(0);
-        this.devToolsContainer.appendChild(this.stats.domElement);
+        li.appendChild(this.stats.domElement);
+        this.devToolsContainer.appendChild(li);
 
         // create debug mode
+        li = document.createElement("li");
         var label = document.createElement("label");
         var checkbox = document.createElement("input");
         checkbox.type = "checkbox";
@@ -64,14 +43,31 @@ function (Settings, Nc, Stats, Screenfull) {
         }
         label.appendChild(checkbox);
         label.appendChild(document.createTextNode("Debug"));
-        this.devToolsContainer.appendChild(label);
+        li.appendChild(label);
+        this.devToolsContainer.appendChild(li);
 
-        // create health
+        // create Ping: container
-        this.health = document.createElement("span");
+        this.ping = document.createElement("li");
-        this.health.innerHTML = "Health: 100";
+        this.devToolsContainer.appendChild(this.ping);
-        p = document.createElement("p");
+
-        p.appendChild(this.health);
+                // create Fullscreen
-        this.devToolsContainer.appendChild(p);
+        var li = document.createElement("li");
+        li.id = "fullscreen"
+        var button = document.createElement("button");
+        button.innerHTML = "Fullscreen";
+        button.onclick = function() {
+            if(Screenfull.enabled) {
+                Screenfull.request(self.canvas);
+            }
+        }
+        li.appendChild(button);
+        this.devToolsContainer.appendChild(li);
+
+        window.onresize = function() {
+            if(Screenfull.enabled) {
+                Nc.trigger(Nc.ns.client.view.fullscreen.change, Screenfull.isFullscreen);
+            }
+        }
     };
 
     DomController.prototype.statsBegin = function() {
@@ -121,10 +117,6 @@ function (Settings, Nc, Stats, Screenfull) {
         return this.debugCanvas;
     }
 
-    DomController.prototype.setHealth = function(health) {
-        this.health.innerHTML = "Health: " + parseInt(health, 10);     
-    };
-
     DomController.prototype.setConnected = function(connected) {
         if(connected) {
             document.body.style.backgroundColor = '';

app/Lib/Vendor/Stats.js

@@ -28,13 +28,13 @@ define(function() {
 
 		var fpsGraph = document.createElement( 'div' );
 		fpsGraph.id = 'fpsGraph';
-		fpsGraph.style.cssText = 'position:relative;width:74px;height:20px;background-color:#0ff';
+		fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
 		fpsDiv.appendChild( fpsGraph );
 
 		while ( fpsGraph.children.length < 74 ) {
 
 			var bar = document.createElement( 'span' );
-			bar.style.cssText = 'width:1px;height:20px;float:left;background-color:#113';
+			bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
 			fpsGraph.appendChild( bar );
 
 		}

static/css/screen.css

@@ -27,9 +27,26 @@ body {
     -moz-osx-font-smoothing: grayscale;
 }
 
+#menuBar {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    background: #333;
+}
+#menuBar li {
+    display: inline-block;
+    padding: 0;
+    vertical-align: middle;
+    padding: 0 2em;
+}
+
 #back-to-menu {
     display: inline-block;
-    margin: 10px;
+}
+
+#fullscreen {
+    float: right;
+    margin-top: 0.5em;
 }
 
 ::selection {
@@ -43,7 +60,7 @@ input, button {
     background: black;
     color: #ccc;
     border: 0;
-    padding: 0.3em 0.6em;
+    padding: 0.3em 0.6em 0.6em;
     font-size: 1em;
     font-family: inherit;
     text-transform: inherit;
@@ -60,7 +77,7 @@ input, button {
 #primarycolor {
     padding: 0.3em;
     width: 1em;
-    background-color: black;
+    background-color: #777;
 }
 
 article#menu {
@@ -126,7 +143,6 @@ canvas {
 }
 
 #devtools {
-    font-family: monospace;
     position: absolute;
     right: 0;
     top: 0;

static/html/index.html

@@ -13,7 +13,7 @@
 		<label>
 			Nickname:<br>
 			<input id="nick" name="nick" type="text">
-			<input id="primarycolor">
+			<input readonly id="primarycolor">
 		</label>
 	</p>
 
@@ -74,7 +74,7 @@
 	</form>
 </article>
 <article id="game">
-	<button id="back-to-menu" onclick="window.location.href='/'">Menu</button>
+	<ul id="menuBar"><li><button id="back-to-menu" onclick="window.location.href='/'">Menu</button></ul>
     <div id="canvasContainer">
         <canvas id="canvas"></canvas>
     </div>