From 13af9ecb9c11ea1b1b03e5c4c2e102d5d18e215d Mon Sep 17 00:00:00 2001 From: logsol Date: Sat, 28 Feb 2015 19:57:05 +0100 Subject: [PATCH] worked a bit on menu top bar --- app/Game/Client/Networker.js | 3 + app/Game/Client/View/Abstract/View.js | 2 +- app/Game/Client/View/DomController.js | 88 +++++++++++++++---- .../Client/View/{GraphManager.js => Graph.js} | 23 ++--- app/Game/Client/View/ViewManager.js | 2 - app/Lib/Utilities/NotificationCenter.js | 3 - static/css/screen.css | 51 +++++++---- static/html/index.html | 2 +- 8 files changed, 122 insertions(+), 52 deletions(-) rename app/Game/Client/View/{GraphManager.js => Graph.js} (73%) diff --git a/app/Game/Client/Networker.js b/app/Game/Client/Networker.js index 193a96b..3b3ba12 100755 --- a/app/Game/Client/Networker.js +++ b/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 diff --git a/app/Game/Client/View/Abstract/View.js b/app/Game/Client/View/Abstract/View.js index 378aa8e..15dd098 100755 --- a/app/Game/Client/View/Abstract/View.js +++ b/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; diff --git a/app/Game/Client/View/DomController.js b/app/Game/Client/View/DomController.js index e1450e5..35f48b5 100755 --- a/app/Game/Client/View/DomController.js +++ b/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.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 () { diff --git a/app/Game/Client/View/GraphManager.js b/app/Game/Client/View/Graph.js similarity index 73% rename from app/Game/Client/View/GraphManager.js rename to app/Game/Client/View/Graph.js index 057921a..fa51e9f 100644 --- a/app/Game/Client/View/GraphManager.js +++ b/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.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; }); \ No newline at end of file diff --git a/app/Game/Client/View/ViewManager.js b/app/Game/Client/View/ViewManager.js index f116d8e..2f30bd5 100755 --- a/app/Game/Client/View/ViewManager.js +++ b/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; } diff --git a/app/Lib/Utilities/NotificationCenter.js b/app/Lib/Utilities/NotificationCenter.js index 9b16fff..5a337ab 100755 --- a/app/Lib/Utilities/NotificationCenter.js +++ b/app/Lib/Utilities/NotificationCenter.js @@ -63,9 +63,6 @@ function (Exception) { debugMode: { toggle: null }, - events: { - ready: null - }, gameStats: { toggle: null }, diff --git a/static/css/screen.css b/static/css/screen.css index 31844a8..83213d4 100644 --- a/static/css/screen.css +++ b/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; - padding: 0; - vertical-align: middle; - padding: 0 2em; + float: left; + margin-left: 40px; +} + +#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; - margin-top: 0.5em; + float: right !important; + margin-right: 5px; } ::selection { @@ -132,7 +156,7 @@ a { height: 100%; } -#canvasContainer canvas { +#canvasContainer canvas { position: absolute;/* top: 50%; left: 50%; @@ -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; diff --git a/static/html/index.html b/static/html/index.html index e09f6ad..37dd78b 100644 --- a/static/html/index.html +++ b/static/html/index.html @@ -75,7 +75,7 @@
- +