removed game.html, fixes #85

app/Game/Client/Networker.js

@@ -9,7 +9,9 @@ define([
 
 function (ProtocolHelper, GameController, User, Nc, Settings, DomController) {
 
-    function Networker (socketLink) {
+    function Networker (socketLink, channelName, nickname) {
+        this.channelName = channelName;
+        this.nickname = nickname;
         this.socketLink = socketLink;
         this.gameController = null;
         this.users = {};
@@ -38,14 +40,13 @@ function (ProtocolHelper, GameController, User, Nc, Settings, DomController) {
 
     Networker.prototype.onConnect = function () {
         console.log('connected.')
-        var channel = JSON.parse(localStorage["channel"]);
+        if(this.channelName) {
-        var player = JSON.parse(localStorage["player"]);
-        if(channel.name) {
             var options = {
-                channelName: channel.name,
+                channelName: this.channelName,
-                nickname: player.nickname
+                nickname: this.nickname
             }
             this.sendCommand('join', options);
+            DomController.setConnected(true);
         } else {
             window.location.href = "/";
         }
@@ -55,7 +56,7 @@ function (ProtocolHelper, GameController, User, Nc, Settings, DomController) {
         //if(this.gameController) this.gameController.destruct();
         //this.gameController = null;
         console.log('disconnected. game destroyed. no auto-reconnect');
-        document.body.style.backgroundColor = '#aaaaaa';
+        DomController.setConnected(false);
     }
 
     Networker.prototype.onJoinSuccess = function (options) {

app/Game/Client/View/DomController.js

@@ -123,6 +123,14 @@ function (Settings, Nc, Stats, Screenfull) {
         this.health.innerHTML = "Health: " + parseInt(health, 10);     
     };
 
+    DomController.prototype.setConnected = function(connected) {
+        if(connected) {
+            document.body.style.backgroundColor = '';
+        } else {
+            document.body.style.backgroundColor = '#aaaaaa';
+        }
+    };
+
 
     return new DomController();
     

app/Game/Config/Settings.js

@@ -62,12 +62,12 @@ define(function() {
 
         // NETWORKING
         NETWORK_UPDATE_INTERVAL: 70,
-        CHANNEL_DESTRUCTION_TIME: 30,
         NETWORK_LOG_INCOMING: false,
         NETWORK_LOG_OUTGOING: false,
         NETWORK_LOG_FILTER: ['ping', 'pong', 'worldUpdate', 'lookAt'],
 
         // CHANNEL
+        CHANNEL_DESTRUCTION_TIME: 5 * 60,
         CHANNEL_END_ROUND_TIME: 4, //10,
         CHANNEL_DEFAULT_MAX_USERS: 40,
         CHANNEL_DEFAULT_SCORE_LIMIT: 10,

client.js

@@ -6,7 +6,8 @@ requirejs.config({
     waitSeconds: 0
 });
 
-var inspector = {};
+if(!Chuck) var Chuck = {};
+Chuck.inspector = {};
 
 requirejs([
     "Game/Client/Networker", 
@@ -18,6 +19,7 @@ requirejs([
 
 function (Networker, SocketIO, Settings, Exception, PIXI) {
 
+    Chuck.run = function(channelName, nickname) {
         var options = {
             "reconnect": false,
             "reconnection delay": 500,
@@ -28,8 +30,9 @@ function (Networker, SocketIO, Settings, Exception, PIXI) {
             ]
         };
         var socket = SocketIO.connect("/", options);
-    var networker = new Networker(socket);
+        var networker = new Networker(socket, channelName, nickname);
-    inspector.networker = networker;
+        Chuck.inspector.networker = networker;
-    inspector.settings = Settings;
+        Chuck.inspector.settings = Settings;
-    inspector.resetLevel = function() { networker.sendGameCommand("resetLevel"); }
+        Chuck.inspector.resetLevel = function() { networker.sendGameCommand("resetLevel"); }        
+    }
 });

static/css/screen.css

@@ -0,0 +1,108 @@
+html, body {
+    width: 100%; 
+    height: 100%;
+}
+
+body {
+    background: #222;
+    color: #ccc;
+    font-family: "Lucida Grande", sans-serif;
+    margin: 0; 
+    padding: 0; 
+    display: table; 
+}
+
+::selection {
+    background: #607950; /* Safari */
+    }
+::-moz-selection {
+    background: #607950; /* Firefox */
+}
+
+input, button {
+    background: black;
+    color: #ccc;
+    border: 0;
+    padding: 0.3em 0.6em;
+    font-size: 1em;
+}
+
+#createform, #customjoinform, #game {
+    display: none;
+}
+
+article#menu {
+    margin: 4em auto;
+    background: #1a1a1a;
+    padding: 2em;
+    max-width: 30em;
+}
+
+table, th, td {
+    border: 1px solid #777;
+    border-collapse: collapse;
+}
+
+th, td {
+    padding: 0.5em 1em;
+}
+
+ul {
+    list-style-type: none;
+    padding-left: 0;
+}
+
+#link {
+    width: 100%;
+}
+
+.offline {
+    background: #ccc;
+}
+
+tr:hover td {
+    background: #222;
+}
+
+a {
+    color: #ccc;
+}
+
+
+#canvasContainer { 
+    /*
+    text-align: center; 
+    display: table-cell; 
+    vertical-align: middle; 
+    */
+    height: 100%;
+}
+
+canvas { 
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -200px;
+    margin-left: -300px;
+}
+
+:-webkit-full-screen {
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+}
+
+#devtools {
+    font-family: monospace;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 10px;
+    background: #222;
+}
+
+#devtools p {
+    padding: 5px 0 0 0;
+    margin: 0;
+}

static/html/game.html

@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>Chuck</title>
-        <style>
-            html, body { 
-                margin: 0; 
-                padding: 0; 
-                display: table; 
-                width: 100%; 
-                height: 100%;
-                background: black;
-                color: white;
-                font-family: monospace;
-            }
-
-            #canvasContainer { 
-                /*
-                text-align: center; 
-                display: table-cell; 
-                vertical-align: middle; 
-                */
-                height: 100%;
-            }
-
-            canvas { 
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                margin-top: -200px;
-                margin-left: -300px;
-            }
-
-            :-webkit-full-screen {
-                top: 0;
-                left: 0;
-                margin: 0;
-                padding: 0;
-            }
-
-            #devtools {
-                position: absolute;
-                right: 0;
-                top: 0;
-                padding: 10px;
-                background: #222;
-            }
-
-            #devtools p {
-                padding: 5px 0 0 0;
-                margin: 0;
-            }
-
-        </style>
-    </head>
-    <body>
-        <div id="canvasContainer">
-            <canvas id="canvas"></canvas>
-        </div>
-        <script data-main="client" src="require.js"></script>
-    </body>
-</html>

static/html/index.html

@@ -2,20 +2,10 @@
 <html>
 <head>
 	<title>Chuck Lobby</title>
-	<style type="text/css">
+	<link rel="stylesheet" href="/static/css/screen.css" type="text/css" media="screen">
-		body { background: #222; color: #ccc; font-family: "Lucida Grande", sans-serif; }
-		input, button { background: black; color: #ccc; border: 0; padding: 0.3em 0.6em; font-size: 1em; }
-		#createform, #customjoinform { display: none; }
-		article { margin: 4em auto; background: #1a1a1a; padding: 2em; max-width: 30em; }
-		table, th, td { border: 1px solid #777; border-collapse: collapse; }
-		th, td { padding: 0.5em 1em; }
-		ul { list-style-type: none; padding-left: 0; }
-		#link { width: 100%; }
-		.offline { background: #ccc; }
-	</style>
 </head>
 <body>
-<article>
+<article id="menu">
 	<h1>Chuck</h1>
 	<p>
 		<label>
@@ -42,8 +32,8 @@
 			</fieldset>
 
 			<p>
-				<button>Run</button>
+				<button>Create</button>
-				<button onclick="show('#listform'); return false;">Cancel</button>
+				<button onclick="Chuck.menu.show('#listform'); return false;">Cancel</button>
 			</p>
 		</div>
 	</form>
@@ -51,13 +41,14 @@
 	<form action="#" method="GET" id="customjoinform">
 		<p>
 			<label>
-				Link to share with your friends<br>
+				Link to share with your friends:<br>
-				<input id="link">
+				<input id="link" readonly onclick="this.select()">
 			</label>
 		</p>
 		<p>
 			<button>Join</button>
 			<span id="timeout"></span>
+			<button onclick="Chuck.menu.show('#listform'); return false;">Cancel</button>
 		</p>
 	</form>
 
@@ -73,13 +64,19 @@
 			<tbody id="list"></tbody>
 		</table>
 		<p>
-			<button>Join</button>
 			<button id="refresh">Refresh list</button>
-			<button onclick="show('#createform'); return false;">Create</button>
+			<button onclick="Chuck.menu.show('#createform'); return false;">Create</button>
-			<button onclick="quickstart(); return false;">Quickstart</button>
+			<button onclick="Chuck.menu.quickstart(); return false;">Quickstart</button>
 		</p>
 	</form>
 </article>
+<article id="game">
+	<button onclick="window.location.href='/'">Menu</button>
+    <div id="canvasContainer">
+        <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>

static/js/menu.js

@@ -1,3 +1,22 @@
+if(!Chuck) var Chuck = {};
+(function(Chuck) {
+
+	window.onhashchange = function() {
+		if(window.location.hash) {
+			refresh(function(list) {
+				var channelName = unescape(window.location.hash.substr(1));
+				if(channelExists(list, channelName)) {
+					showCustomJoinForm()
+				} else {
+					alert("Channel \"" + channelName + "\" does not exist (anymore).")
+					window.location.href = "/";
+				}
+			});
+		}
+	}
+
+	window.onload = window.onhashchange;
+
 	function $(selector) {
 		return document.querySelector(selector);
 	}
@@ -55,12 +74,10 @@ function populate(list) {
 		if(list.length > 0) {
 			for (var i = 0; i < list.length; i++) {
 				var channel = list[i];
-			html += "<tr><td><label>";
+				html += "<tr><td>";
-			html += "<input name='channel' type='radio' value='" + channel.name + "'"
+					html += "<a href='#" + channel.name + "'>";
-			if(i == 0) html += " checked"
-				html += "> ";
 				html += channel.name
-			html += "</label></td><td></td></tr>";
+				html += "</a></td><td>death match</td></tr>";
 			};			
 		} else {
 			html += "<tr><td colspan='2'>No channels found.</td></tr>";
@@ -105,16 +122,25 @@ $("form#customjoinform").onsubmit = function(e) {
 	}
 
 	function onCreateSuccess(options) {
-	$("#customname").value = options.channelName;
+		window.location.hash = options.channelName;
-	$("#link").value = window.location.href + options.link;
-	show("#customjoinform");
 		startTimer(options.timeout);
 	}
 
+	function showCustomJoinForm() {
+		$("#customname").value = unescape(window.location.hash.substr(1));
+		$("#link").value = window.location.href;
+		show("#customjoinform");
+	}
+
 	function show(id) {
 		$("#createform").style.display = "none";
 		$("#listform").style.display = "none";
 		$("#customjoinform").style.display = "none";
+		$("#game").style.display = "none";
+
+		if(id != "#customjoinform") {
+			history.pushState("", document.title, window.location.pathname);
+		}
 
 		$(id).style.display = "block";
 	}
@@ -233,7 +259,10 @@ function join(nickname, channelName) {
 				name: channelName
 			});
 
-		window.location.href = "/game.html";
+			//window.location.href = "/game.html";
+			$("#menu").style.display = "none";
+			$("#game").style.display = "block";
+			Chuck.run(channelName, nickname);
 		}
 	}
 
@@ -274,3 +303,7 @@ $("#refresh").onclick = refresh;
 	refresh();
 	setInterval(refresh, 5000);
 
+	Chuck.menu = {
+		show: show
+	}
+})(Chuck);