mort
/
ld33-client


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div id="sections">
			<div class="loading hidden">
				<img src="assets/loading.gif">
			</div>

			<div class="error hidden">
				Error: Couldn't connect to server.
			</div>

			<div class="pre hidden">
				<button id="play-god">Play as God</button>
				<button id="play-runner">Play as Runner</button>
			</div>

			<div class="game hidden">
				<canvas id="game-canvas"></canvas>
			</div>
		</div>

		<script src="node_modules/jquery/dist/jquery.min.js"></script>
		<script src="node_modules/socksugar/client.js"></script>

		<script>
			window.page = {
				switchTo: function(name) {
					if (page.switchTo.prev)
						page.switchTo.prev.addClass("hidden");

					var elem = $("#sections > ."+name);
					console.log(elem);
					elem.removeClass("hidden");
					page.switchTo.prev = elem;
				}
			}

			//Start with showincg a loading animation
			page.switchTo("loading");

			//Initiate a socket connection
			window.sock = new SockSugar("ws://localhost:8081");

			//If we can't connect to the server, display an error
			var errTimeout = setTimeout(function() {
				page.switchTo("error");
			}, 7000);

			sock.on("ready", function() {
				clearTimeout(errTimeout);
				page.switchTo("pre");

				$("#play-god").on("click", function() {
					page.switchTo("loading");
					sock.send("startgame/god", {}, function(err, res) {
						console.log(err, res);
					});
				});

				$("#play-runner").on("click", function() {
					page.switchTo("loading");
					sock.send("startgame/runner", {}, function(err, res) {
						console.log(err, res);
					});
				});
			});
		</script>

		<script src="sections/browser.js"></script>
	</body>
</html>