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,24 +1,43 @@
-function $(selector) {
+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);
-}
+	}
 
-function $$(selector) {
+	function $$(selector) {
 		return document.querySelectorAll(selector);
-}
+	}
 
-if(localStorage["player"]) {
+	if(localStorage["player"]) {
 		var player = JSON.parse(localStorage["player"]);
 		if(player.nickname) {
 			$("#nick").value = player.nickname;
 		}
-}
+	}
 
-if(localStorage["customname"]) {
+	if(localStorage["customname"]) {
 		$("#customname").value = localStorage["customname"];
-}
+	}
 
-var lastRefreshResponse;
+	var lastRefreshResponse;
-function refresh(callback) {
+	function refresh(callback) {
 			try {
 			var xhr = new XMLHttpRequest();
 		    xhr.onreadystatechange = function() {
@@ -48,28 +67,26 @@ function refresh(callback) {
 			console.error(e)
 		}
 	    return false;
-}
+	}
 
-function populate(list) {
+	function populate(list) {
 		var html = "";
 		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>";
 		}
 
 		$("#list").innerHTML = html;
-}
+	}
 
-$("form#listform").onsubmit = function(e) {
+	$("form#listform").onsubmit = function(e) {
 		try {
 			var nickname = $("#nick").value;
 			var channelName = getSelectedChannel();
@@ -79,9 +96,9 @@ $("form#listform").onsubmit = function(e) {
 		}
 
 		return false;
-}
+	}
 
-$("form#createform").onsubmit = function(e) {
+	$("form#createform").onsubmit = function(e) {
 		try {
 			var channelName = $("#customname").value;
 			create(channelName, onCreateSuccess);
@@ -90,9 +107,9 @@ $("form#createform").onsubmit = function(e) {
 		}
 
 		return false;
-}
+	}
 
-$("form#customjoinform").onsubmit = function(e) {
+	$("form#customjoinform").onsubmit = function(e) {
 		try {
 			var nickname = $("#nick").value;
 			var channelName = $("#customname").value;
@@ -102,24 +119,33 @@ $("form#customjoinform").onsubmit = function(e) {
 		}
 
 		return false;
-}
+	}
 
-function onCreateSuccess(options) {
+	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 show(id) {
+	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";
-}
+	}
 
-function quickstart() {
+	function quickstart() {
 		refresh(function(list){
 			var defaultChannelName = "Dungeon";
 			var nickname = $("#nick").value;
@@ -136,9 +162,9 @@ function quickstart() {
 				join(nickname, defaultChannelName);
 			}
 		});
-}
+	}
 
-function startTimer(seconds) {
+	function startTimer(seconds) {
 		var now = new Date();
 		var end = new Date(now.getTime() + seconds * 1000);
 		setInterval(function() {
@@ -151,18 +177,18 @@ function startTimer(seconds) {
 				$("#timeout").innerHTML = " within " + formatDate(diff) + " minutes";
 			}
 		}, 1000);
-}
+	}
 
-function formatDate(date) {
+	function formatDate(date) {
 	    var minutes = date.getMinutes();
 		var seconds = date.getSeconds();
 		if(minutes < 10) minutes = "0" + minutes;
 		if(seconds < 10) seconds = "0" + seconds;
 
 		return minutes + ":" + seconds;
-}
+	}
 
-function channelExists(list, channelName) {
+	function channelExists(list, channelName) {
 		for (var i = 0; i < list.length; i++) {
 			var channel = list[i];
 			if(channel.name == channelName) {
@@ -170,9 +196,9 @@ function channelExists(list, channelName) {
 			}
 		}
 		return false;
-}
+	}
 
-function validateForJoin(nickname, channelName) {
+	function validateForJoin(nickname, channelName) {
 		if(!nickname || nickname.length < 3) {
 			alert("Nickname too short")
 			return false;
@@ -182,9 +208,9 @@ function validateForJoin(nickname, channelName) {
 			return false;
 		}
 		return true;
-}
+	}
 
-function validateForCreate(channelName, maps) {
+	function validateForCreate(channelName, maps) {
 		return true;
 		if(maps.length < 1) {
 			alert("Please choose at least one map.")
@@ -196,9 +222,9 @@ function validateForCreate(channelName, maps) {
 			return false;
 		}
 		return true;
-}
+	}
 
-function getSelectedMaps() {
+	function getSelectedMaps() {
 		var maps = [];
 		var checkboxes = document.querySelectorAll("form#createform input[name=maps]");
 		for (var i = 0; i < checkboxes.length; i++) {
@@ -208,9 +234,9 @@ function getSelectedMaps() {
 			}
 		};
 		return maps;
-}
+	}
 
-function getSelectedChannel() {
+	function getSelectedChannel() {
 		var name = null;
 		var radios = document.querySelectorAll("form#listform input[name=channel]");
 		for (var i = 0; i < radios.length; i++) {
@@ -221,9 +247,9 @@ function getSelectedChannel() {
 			}
 		};
 		return name
-}
+	}
 
-function join(nickname, channelName) {
+	function join(nickname, channelName) {
 
 		if(validateForJoin(nickname, channelName)) {
 			localStorage["player"] = JSON.stringify({
@@ -233,11 +259,14 @@ 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);
+		}
 	}
-}
 
-function create(channelName, callback) {
+	function create(channelName, callback) {
 		var maps = getSelectedMaps();
 			
 		if(validateForCreate(channelName, maps)) {
@@ -268,9 +297,13 @@ function create(channelName, callback) {
 	        xhr.open("POST", "/api", true);
 	        xhr.send(JSON.stringify({command:"createChannel", options: options}));
 		}
-}
+	}
 
-$("#refresh").onclick = refresh;
+	$("#refresh").onclick = refresh;
-refresh();
+	refresh();
-setInterval(refresh, 5000);
+	setInterval(refresh, 5000);
 
+	Chuck.menu = {
+		show: show
+	}
+})(Chuck);