X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=ab8605727efef0b288095b2b55d4f210d12ee584;hb=cd4cad0468612cf00c6e6879554e3cee58d4b1f9;hp=1e68fe63265860cf42bb61f7f7aad8994b4d2dd1;hpb=cd3174c5a6c2a3f520cc8ff5974701996119dce3;p=vchess.git diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 1e68fe63..ab860572 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -1,5 +1,4 @@ -// TODO: use indexedDB instead of localStorage? (more flexible...) - +// TODO: use indexedDB instead of localStorage? (more flexible: allow several games) Vue.component('my-game', { data: function() { return { @@ -37,20 +36,7 @@ Vue.component('my-game', { let actionArray = [ h('button', { - on: { - click: () => { - if (this.mode == "human") - return; //no newgame while playing - if (this.seek) - delete localStorage["newgame"]; //cancel game seek - else - { - localStorage["newgame"] = variant; - this.newGame("human"); - } - this.seek = !this.seek; - } - }, + on: { click: this.clickGameSeek }, attrs: { "aria-label": 'New game VS human' }, 'class': { "tooltip": true, @@ -61,13 +47,7 @@ Vue.component('my-game', { [h('i', { 'class': { "material-icons": true } }, "accessibility")]), h('button', { - on: { - click: () => { - if (this.mode == "human") - return; //no newgame while playing - this.newGame("computer"); - } - }, + on: { click: this.clickComputerGame }, attrs: { "aria-label": 'New game VS computer' }, 'class': { "tooltip":true, @@ -222,24 +202,12 @@ Vue.component('my-game', { // ); // elementArray.push(reserve); // } - let eogMessage = "Unfinished"; - switch (this.score) - { - case "1-0": - eogMessage = "White win"; - break; - case "0-1": - eogMessage = "Black win"; - break; - case "1/2": - eogMessage = "Draw"; - break; - } + const eogMessage = this.getEndgameMessage(this.score); let elemsOfEog = [ h('label', { - attrs: { "for": "modal-control" }, + attrs: { "for": "modal-eog" }, "class": { "modal-close": true }, } ), @@ -264,7 +232,7 @@ Vue.component('my-game', { const modalEog = [ h('input', { - attrs: { "id": "modal-control", type: "checkbox" }, + attrs: { "id": "modal-eog", type: "checkbox" }, "class": { "modal": true }, }), h('div', @@ -286,7 +254,7 @@ Vue.component('my-game', { const modalNewgame = [ h('input', { - attrs: { "id": "modal-control2", type: "checkbox" }, + attrs: { "id": "modal-newgame", type: "checkbox" }, "class": { "modal": true }, }), h('div', @@ -301,7 +269,7 @@ Vue.component('my-game', { [ h('label', { - attrs: { "id": "close-newgame", "for": "modal-control2" }, + attrs: { "id": "close-newgame", "for": "modal-newgame" }, "class": { "modal-close": true }, } ), @@ -365,24 +333,24 @@ Vue.component('my-game', { const socketOpenListener = () => { if (continuation) { - // TODO: check FEN integrity with opponent const fen = localStorage.getItem("fen"); const mycolor = localStorage.getItem("mycolor"); const oppid = localStorage.getItem("oppid"); const moves = JSON.parse(localStorage.getItem("moves")); this.newGame("human", fen, mycolor, oppid, moves, true); - // Send ping to server, which answers pong if opponent is connected - this.conn.send(JSON.stringify({code:"ping", oppid:this.oppId})); + // Send ping to server (answer pong if opponent is connected) + this.conn.send(JSON.stringify({code:"ping",oppid:this.oppid})); } else if (localStorage.getItem("newgame") === variant) { // New game request has been cancelled on disconnect this.seek = true; - this.newGame("human"); + this.newGame("human", undefined, undefined, undefined, undefined, "reconnect"); } }; const socketMessageListener = msg => { const data = JSON.parse(msg.data); + console.log("Receive message: " + data.code); switch (data.code) { case "newgame": //opponent found @@ -391,13 +359,51 @@ Vue.component('my-game', { case "newmove": //..he played! this.play(data.move, "animate"); break; - case "pong": //sent when opponent stayed online after we disconnected + case "pong": //received if we sent a ping (game still alive on our side) this.oppConnected = true; + const L = this.vr.moves.length; + // Send our "last state" informations to opponent + this.conn.send(JSON.stringify({ + code:"lastate", + oppid:this.oppid, + lastMove:L>0?this.vr.moves[L-1]:undefined, + movesCount:L, + })); + break; + case "lastate": //got opponent infos about last move (we might have resigned) + if (this.mode!="human" || this.oppid!=data.oppid) + { + // OK, we resigned + this.conn.send(JSON.stringify({ + code:"lastate", + oppid:this.oppid, + lastMove:undefined, + movesCount:-1, + })); + } + else if (data.movesCount < 0) + { + // OK, he resigned + this.endGame(this.mycolor=="w"?"1-0":"0-1"); + } + else if (data.movesCount < this.vr.moves.length) + { + // We must tell last move to opponent + const L = this.vr.moves.length; + this.conn.send(JSON.stringify({ + code:"lastate", + oppid:this.oppid, + lastMove:this.vr.moves[L-1], + movesCount:L, + })); + } + else if (data.movesCount > this.vr.moves.length) //just got last move from him + this.play(data.lastMove, "animate"); break; case "resign": //..you won! this.endGame(this.mycolor=="w"?"1-0":"0-1"); break; - // TODO: also use (dis)connect info to count online players + // TODO: also use (dis)connect info to count online players? case "connect": case "disconnect": if (this.mode == "human" && this.oppid == data.id) @@ -406,7 +412,6 @@ Vue.component('my-game', { } }; const socketCloseListener = () => { - console.log("Lost connection -- reconnect"); this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant); this.conn.addEventListener('open', socketOpenListener); this.conn.addEventListener('message', socketMessageListener); @@ -419,7 +424,7 @@ Vue.component('my-game', { methods: { endGame: function(score) { this.score = score; - let modalBox = document.getElementById("modal-control"); + let modalBox = document.getElementById("modal-eog"); modalBox.checked = true; //setTimeout(() => { modalBox.checked = false; }, 2000); //disabled, to show PGN if (this.mode == "human") @@ -427,13 +432,29 @@ Vue.component('my-game', { this.mode = "idle"; this.oppid = ""; }, + getEndgameMessage: function(score) { + let eogMessage = "Unfinished"; + switch (this.score) + { + case "1-0": + eogMessage = "White win"; + break; + case "0-1": + eogMessage = "Black win"; + break; + case "1/2": + eogMessage = "Draw"; + break; + } + return eogMessage; + }, resign: function() { if (this.mode == "human" && this.oppConnected) { try { this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid})); } catch (INVALID_STATE_ERR) { - return; //resign failed for some reason... + return; //socket is not ready (and not yet reconnected) } } this.endGame(this.mycolor=="w"?"0-1":"1-0"); @@ -460,6 +481,23 @@ Vue.component('my-game', { delete localStorage["fen"]; delete localStorage["moves"]; }, + clickGameSeek: function() { + if (this.mode == "human") + return; //no newgame while playing + if (this.seek) + delete localStorage["newgame"]; //cancel game seek + else + { + localStorage["newgame"] = variant; + this.newGame("human"); + } + this.seek = !this.seek; + }, + clickComputerGame: function() { + if (this.mode == "human") + return; //no newgame while playing + this.newGame("computer"); + }, newGame: function(mode, fenInit, color, oppId, moves, continuation) { const fen = fenInit || VariantRules.GenRandInitFen(); console.log(fen); //DEBUG @@ -480,9 +518,12 @@ Vue.component('my-game', { } catch (INVALID_STATE_ERR) { return; //nothing achieved } - let modalBox = document.getElementById("modal-control2"); - modalBox.checked = true; - setTimeout(() => { modalBox.checked = false; }, 2000); + if (continuation !== "reconnect") //TODO: bad HACK... + { + let modalBox = document.getElementById("modal-newgame"); + modalBox.checked = true; + setTimeout(() => { modalBox.checked = false; }, 2000); + } return; } this.vr = new VariantRules(fen, moves || []); @@ -496,9 +537,9 @@ Vue.component('my-game', { // Opponent found! if (!continuation) { - // Playing sound fails on game continuation: - new Audio("/sounds/newgame.mp3").play(); - document.getElementById("modal-control2").checked = false; + // Not playing sound on game continuation: + new Audio("/sounds/newgame.mp3").play().then(() => {}).catch(err => {}); + document.getElementById("modal-newgame").checked = false; } this.oppid = oppId; this.oppConnected = true; @@ -508,7 +549,7 @@ Vue.component('my-game', { { const oppCol = this.vr.turn; const lastMove = moves[moves.length-1]; - this.vr.undo(lastMove, "ingame"); + this.vr.undo(lastMove); this.incheck = this.vr.getCheckSquares(lastMove, oppCol); this.vr.play(lastMove, "ingame"); } @@ -643,16 +684,8 @@ Vue.component('my-game', { this.incheck = this.vr.getCheckSquares(move, oppCol); //is opponent in check? // Not programmatic, or animation is over if (this.mode == "human" && this.vr.turn == this.mycolor) - { - if (!this.oppConnected) - return; //abort move if opponent is gone - try { - this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid})); - } catch(INVALID_STATE_ERR) { - return; //abort also if sending failed - } - } - new Audio("/sounds/chessmove1.mp3").play(); + this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid})); + new Audio("/sounds/chessmove1.mp3").play().then(() => {}).catch(err => {}); this.vr.play(move, "ingame"); if (this.mode == "human") this.updateStorage(); //after our moves and opponent moves