Browse Source

basic matchmaking works

master
mort 6 years ago
parent
commit
34417a2464
2 changed files with 79 additions and 18 deletions
  1. 52
    18
      index.html
  2. 27
    0
      js/game.js

+ 52
- 18
index.html View File

@@ -7,11 +7,12 @@
<body>
<div id="sections">
<div class="loading hidden">
<div class="arg"></div>
<img src="assets/loading.gif">
</div>

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

<div class="pre hidden">
@@ -26,29 +27,70 @@

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

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

var elem = $("#sections > ."+name);
console.log(elem);
elem.removeClass("hidden");
page.switchTo.prev = elem;
//We don't want to switch to a page if we're going to
//switch again a couple of milliseconds later.
if (page.switchTo.timeout)
clearTimeout(page.switchTo.timeout);
page.switchTo.timeout = setTimeout(function() {
var elem = $("#sections > ."+name);
elem.removeClass("hidden");
if (arg)
elem.children(".arg").html(arg);
else
elem.children(".ard").html("");
page.switchTo.prev = elem;
}, 150);
}
}

window.game = null;

function startGame(type) {
page.switchTo(
"loading",
"Waiting for opponent..."
);
sock.send("game/start", {
type: type
}, function(err, res) {
if (err)
return page.switchTo("error", err);

page.switchTo("game");

window.game = new Game(
$("#game-canvas")[0],
res.players,
res.index,
sock
);
game.start();

sock.on("gameover", function(data) {
game.stop();
page.switchTo("error", data.msg);
});
});
}

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

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

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

sock.on("ready", function() {
@@ -56,21 +98,13 @@
page.switchTo("pre");

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

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

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

+ 27
- 0
js/game.js View File

@@ -0,0 +1,27 @@
(function() {
window.Game = function(canvas, players, index) {
this._canvas = canvas;
this._ctx = canvas.getContext("2d");
this._players = players;
this._player = players[index];
this._sock = sock;

this._keys = [];

//Keep track of which keys are pressed and which aren't
canvas.addEventListener("keydown", function(evt) {
this._keys[evt.keyCode] = true;
}.bind(this));
canvas.addEventListener("keyup", function(evt) {
this._keys[evt.keyCode] = false;
}.bind(this));
}

Game.prototype.start = function() {
console.log("starting game");
}

Game.prototype.stop = function() {
console.log("Stopping game");
}
})();

Loading…
Cancel
Save