|
|
@@ -0,0 +1,76 @@ |
|
|
|
<!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> |