From 1a6d8effadca9281021d20307fa4f744085832f5 Mon Sep 17 00:00:00 2001 From: Jeena Date: Sat, 12 Jul 2014 17:31:18 +0200 Subject: [PATCH] Moved menu to require.js style, ref #77 --- static/js/menu.js => app/Menu/Menu.js | 138 ++++++++++++-------------- client.js | 10 +- static/css/screen.css | 6 ++ static/html/index.html | 10 +- 4 files changed, 81 insertions(+), 83 deletions(-) rename static/js/menu.js => app/Menu/Menu.js (78%) diff --git a/static/js/menu.js b/app/Menu/Menu.js similarity index 78% rename from static/js/menu.js rename to app/Menu/Menu.js index 07a4374..a6a02ec 100644 --- a/static/js/menu.js +++ b/app/Menu/Menu.js @@ -1,5 +1,61 @@ -if(!Chuck) var Chuck = {}; -(function(Chuck) { +define([ + "Lib/Utilities/ColorConverter" +], + +function (ColorConverter) { + + var instance = null + + function Menu() { + + } + + Menu.prototype.init = function() { + instance = this; // Dum und Dümmer + + if(localStorage["player"]) { + var player = JSON.parse(localStorage["player"]); + if(player.nickname) { + $("#nick").value = player.nickname; + } + } + + if(localStorage["customname"]) { + $("#customname").value = localStorage["customname"]; + } + + + $("#refresh").onclick = refresh; + refresh(); + populateMaps(); + var channelDestructionTimeout = null; + var refreshInterval = setInterval(refresh, 5000); + + $("#createbutton").onclick = function() { + show('#createform'); + return false; + }; + $("#quickstartbutton").onclick = quickstart; + + var cancelButtons = $$(".cancel"); + for (var i = 0; i < cancelButtons.length; i++) { + cancelButtons[i].onclick = function() { + show('#listform'); + return false; + }; + }; + + this.colorConverter = new ColorConverter(); + var c = $("#nick"); + c.onchange = c.onkeyup = c.onblur = c.onclick = this.updatePrimaryColor.bind(this); + this.updatePrimaryColor({target:c}); + }; + + Menu.prototype.updatePrimaryColor = function(e) { + $("#primarycolor").style.backgroundColor = "#" + this.colorConverter.getColorByName(e.target.value).toString(16); + }; + + Menu.prototype.onRun = function(channelName, nickname) {} window.onhashchange = function() { if(window.location.hash) { @@ -28,17 +84,6 @@ if(!Chuck) var Chuck = {}; return document.querySelectorAll(selector); } - if(localStorage["player"]) { - var player = JSON.parse(localStorage["player"]); - if(player.nickname) { - $("#nick").value = player.nickname; - } - } - - if(localStorage["customname"]) { - $("#customname").value = localStorage["customname"]; - } - var lastRefreshResponse; function refresh(callback) { @@ -57,36 +102,6 @@ if(!Chuck) var Chuck = {}; console.error("getChannels error: ", responseText) }); -/* - try { - var xhr = new XMLHttpRequest(); - xhr.onreadystatechange = function() { - if(xhr.readyState == 4) { - if(xhr.status == 200) { - - var response = xhr.responseText; - if(response != lastRefreshResponse) { - lastRefreshResponse = response; - populate(JSON.parse(response).success); - } - document.body.className = ""; - - if(typeof callback == 'function') { - callback(JSON.parse(response).success) - } - } else { - console.error("Ajax error: " + xhr.status + " " + xhr.responseText) - $("#list").innerHTML = ""; - document.body.className = "offline"; - } - } - } - xhr.open("POST", "/api", true); - xhr.send(JSON.stringify({command:"getChannels"})); - } catch(e) { - console.error(e) - } -*/ return false; } @@ -229,6 +244,7 @@ if(!Chuck) var Chuck = {}; join(nickname, defaultChannelName); } }); + return false; } function startTimer(seconds) { @@ -328,7 +344,7 @@ if(!Chuck) var Chuck = {}; //window.location.href = "/game.html"; $("#menu").style.display = "none"; $("#game").style.display = "block"; - Chuck.run(channelName, nickname); + instance.onRun(channelName, nickname); // Dumm und dümmer if(refreshInterval) { clearInterval(refreshInterval); @@ -364,35 +380,9 @@ if(!Chuck) var Chuck = {}; console.log(responseText) alert(JSON.parse(responseText).error) }); - - /* - var xhr = new XMLHttpRequest(); - xhr.onreadystatechange = function() { - if(xhr.readyState == 4) { - if(xhr.status == 200) { - if(typeof callback == 'function') { - callback(JSON.parse(xhr.responseText).success); - } - } else { - console.log(xhr.responseText) - alert(JSON.parse(xhr.responseText).error) - } - } - } - xhr.open("POST", "/api", true); - xhr.send(JSON.stringify({command:"createChannel", options: options})); - */ } } - - $("#refresh").onclick = refresh; - refresh(); - populateMaps(); - var channelDestructionTimeout = null; - var refreshInterval = setInterval(refresh, 5000); - - Chuck.menu = { - show: show, - quickstart: quickstart - } -})(Chuck); \ No newline at end of file + + return Menu; + +}); \ No newline at end of file diff --git a/client.js b/client.js index 416ce4b..9de072e 100755 --- a/client.js +++ b/client.js @@ -14,12 +14,13 @@ requirejs([ "Lib/Vendor/SocketIO", "Game/Config/Settings", "Lib/Utilities/Exception", - "Lib/Vendor/Pixi" + "Menu/Menu" ], -function (Networker, SocketIO, Settings, Exception, PIXI) { +function (Networker, SocketIO, Settings, Exception, Menu) { - Chuck.run = function(channelName, nickname) { + var menu = new Menu(); + menu.onRun = function(channelName, nickname) { var options = { "reconnect": false, "reconnection delay": 500, @@ -33,6 +34,7 @@ function (Networker, SocketIO, Settings, Exception, PIXI) { var networker = new Networker(socket, channelName, nickname); Chuck.inspector.networker = networker; Chuck.inspector.settings = Settings; - Chuck.inspector.resetLevel = function() { networker.sendGameCommand("resetLevel"); } + Chuck.inspector.resetLevel = function() { networker.sendGameCommand("resetLevel"); } } + menu.init(); }); \ No newline at end of file diff --git a/static/css/screen.css b/static/css/screen.css index 0cccbb1..8898ed7 100644 --- a/static/css/screen.css +++ b/static/css/screen.css @@ -40,6 +40,12 @@ input, button { text-transform: capitalize; } +#primarycolor { + padding: 0.3em; + width: 1em; + background-color: black; +} + article#menu { margin: 4em auto; background: #1a1a1a; diff --git a/static/html/index.html b/static/html/index.html index 23acabf..f0c37e3 100644 --- a/static/html/index.html +++ b/static/html/index.html @@ -11,6 +11,7 @@

@@ -33,7 +34,7 @@

- +

@@ -48,7 +49,7 @@

- +

@@ -65,8 +66,8 @@

- - + +

@@ -76,7 +77,6 @@ - \ No newline at end of file