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>
|