Moved menu to require.js style, ref #77

app/Menu/Menu.js

@@ -1,5 +1,61 @@
-if(!Chuck) var Chuck = {};
+define([
-(function(Chuck) {
+	"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;
+    return Menu;
-	refresh();
-	populateMaps();
-	var channelDestructionTimeout = null;
-	var refreshInterval = setInterval(refresh, 5000);
  
-	Chuck.menu = {
+});
-		show: show,
-		quickstart: quickstart
-	}
-})(Chuck);

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,
@@ -35,4 +36,5 @@ function (Networker, SocketIO, Settings, Exception, PIXI) {
         Chuck.inspector.settings = Settings;
         Chuck.inspector.resetLevel = function() { networker.sendGameCommand("resetLevel"); } 
     }
+    menu.init();
 });

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;

static/html/index.html

@@ -11,6 +11,7 @@
 		<label>
 			Nickname:<br>
 			<input id="nick" name="nick" type="text">
+			<input id="primarycolor">
 		</label>
 	</p>
 
@@ -33,7 +34,7 @@
 
 			<p>
 				<button>Create</button>
-				<button onclick="Chuck.menu.show('#listform'); return false;">Cancel</button>
+				<button class="cancel">Cancel</button>
 			</p>
 		</div>
 	</form>
@@ -48,7 +49,7 @@
 		<p>
 			<button>Join</button>
 			<span id="timeout"></span>
-			<button onclick="Chuck.menu.show('#listform'); return false;">Cancel</button>
+			<button class="cancel">Cancel</button>
 		</p>
 	</form>
 
@@ -65,8 +66,8 @@
 		</table>
 		<p>
 			<button id="refresh">Refresh list</button>
-			<button onclick="Chuck.menu.show('#createform'); return false;">Create</button>
+			<button id="createbutton">Create</button>
-			<button onclick="Chuck.menu.quickstart(); return false;">Quickstart</button>
+			<button id="quickstartbutton">Quickstart</button>
 		</p>
 	</form>
 </article>
@@ -76,7 +77,6 @@
         <canvas id="canvas"></canvas>
     </div>
 </article>
-<script type="text/javascript" src="/static/js/menu.js"></script>
 <script data-main="client" src="require.js"></script>
 </body>
 </html>