From e452399cafba5da840580a7c1a2f6b6e0afbcf83 Mon Sep 17 00:00:00 2001 From: Jeena Date: Sun, 22 Feb 2015 18:39:35 +0100 Subject: [PATCH] added menuBar --- app/Game/Client/GameController.js | 5 -- app/Game/Client/View/DomController.js | 66 ++++++++++++--------------- app/Lib/Vendor/Stats.js | 4 +- static/css/screen.css | 24 ++++++++-- static/html/index.html | 4 +- 5 files changed, 53 insertions(+), 50 deletions(-) diff --git a/app/Game/Client/GameController.js b/app/Game/Client/GameController.js index 7891d47..982f184 100755 --- a/app/Game/Client/GameController.js +++ b/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) { diff --git a/app/Game/Client/View/DomController.js b/app/Game/Client/View/DomController.js index 3a95f0a..ee1f8b4 100755 --- a/app/Game/Client/View/DomController.js +++ b/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.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); + this.devToolsContainer = document.getElementById("menuBar"); // 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 - this.health = document.createElement("span"); - this.health.innerHTML = "Health: 100"; - p = document.createElement("p"); - p.appendChild(this.health); - this.devToolsContainer.appendChild(p); + // create Ping: container + this.ping = document.createElement("li"); + this.devToolsContainer.appendChild(this.ping); + + // create Fullscreen + 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 = ''; diff --git a/app/Lib/Vendor/Stats.js b/app/Lib/Vendor/Stats.js index d648590..06cfb43 100755 --- a/app/Lib/Vendor/Stats.js +++ b/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 ); } diff --git a/static/css/screen.css b/static/css/screen.css index 3e349ae..f4e4598 100644 --- a/static/css/screen.css +++ b/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; diff --git a/static/html/index.html b/static/html/index.html index b54f3c6..94b9be9 100644 --- a/static/html/index.html +++ b/static/html/index.html @@ -13,7 +13,7 @@

@@ -74,7 +74,7 @@
- +