X-Git-Url: https://git.auder.net/?p=vchess.git;a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=c02893b51b41e80431dbf19b7351d2901c13f2fe;hp=3f3b55561456d29652bfd0bff21505e8d7a80ffe;hb=b6487fb9c41705187cf97215fc9e8f86a59057c7;hpb=3fa426b632d92a65843038a161677069de5db27e diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 3f3b5556..c02893b5 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -57,7 +57,7 @@ Vue.component('my-game', { "tooltip": true, "play": true, "seek": this.seek, - "playing": this.mode == "human", + "playing": this.mode == "human" && this.score == "*", }, }, [h('i', { 'class': { "material-icons": true } }, "accessibility")]) @@ -73,7 +73,7 @@ Vue.component('my-game', { 'class': { "tooltip":true, "play": true, - "playing": this.mode == "computer", + "playing": this.mode == "computer" && this.score == "*", "spaceleft": true, }, }, @@ -190,24 +190,6 @@ Vue.component('my-game', { } ); aboveBoardElts.push(turnIndic); - const settingsBtn = h( - 'button', - { - on: { click: this.showSettings }, - attrs: { - "aria-label": translations['Settings'], - "id": "settingsBtn", - }, - 'class': { - "tooltip": true, - "play": true, - "above-board": true, - "indic-right": true, - }, - }, - [h('i', { 'class': { "material-icons": true } }, "settings")] - ); - aboveBoardElts.push(settingsBtn); elementArray.push( h('div', { "class": { "aboveboard-wrapper": true } }, @@ -618,175 +600,6 @@ Vue.component('my-game', { ) ]; elementArray = elementArray.concat(modalFenEdit); - const modalSettings = [ - h('input', - { - attrs: { "id": "modal-settings", type: "checkbox" }, - "class": { "modal": true }, - }), - h('div', - { - attrs: { "role": "dialog", "aria-labelledby": "settingsTitle" }, - }, - [ - h('div', - { - "class": { "card": true, "smallpad": true }, - }, - [ - h('label', - { - attrs: { "id": "close-settings", "for": "modal-settings" }, - "class": { "modal-close": true }, - } - ), - h('h3', - { - attrs: { "id": "settingsTitle" }, - "class": { "section": true }, - domProps: { innerHTML: translations["Preferences"] }, - } - ), - h('fieldset', - { }, - [ - h('label', - { - attrs: { for: "nameSetter" }, - domProps: { innerHTML: translations["My name is..."] }, - }, - ), - h('input', - { - attrs: { - "id": "nameSetter", - type: "text", - value: this.myname, - }, - on: { "change": this.setMyname }, - } - ), - ] - ), - h('fieldset', - { }, - [ - h('label', - { - attrs: { for: "setHints" }, - domProps: { innerHTML: translations["Show hints?"] }, - }, - ), - h('input', - { - attrs: { - "id": "setHints", - type: "checkbox", - checked: this.hints, - }, - on: { "change": this.toggleHints }, - } - ), - ] - ), - h('fieldset', - { }, - [ - h('label', - { - attrs: { for: "selectColor" }, - domProps: { innerHTML: translations["Board colors"] }, - }, - ), - h("select", - { - attrs: { "id": "selectColor" }, - on: { "change": this.setBoardColor }, - }, - [ - h("option", - { - domProps: { - "value": "lichess", - innerHTML: translations["brown"] - }, - attrs: { "selected": this.color=="lichess" }, - } - ), - h("option", - { - domProps: { - "value": "chesscom", - innerHTML: translations["green"] - }, - attrs: { "selected": this.color=="chesscom" }, - } - ), - h("option", - { - domProps: { - "value": "chesstempo", - innerHTML: translations["blue"] - }, - attrs: { "selected": this.color=="chesstempo" }, - } - ), - ], - ), - ] - ), - h('fieldset', - { }, - [ - h('label', - { - attrs: { for: "selectSound" }, - domProps: { innerHTML: translations["Play sounds?"] }, - }, - ), - h("select", - { - attrs: { "id": "selectSound" }, - on: { "change": this.setSound }, - }, - [ - h("option", - { - domProps: { - "value": "0", - innerHTML: translations["None"] - }, - attrs: { "selected": this.sound==0 }, - } - ), - h("option", - { - domProps: { - "value": "1", - innerHTML: translations["New game"] - }, - attrs: { "selected": this.sound==1 }, - } - ), - h("option", - { - domProps: { - "value": "2", - innerHTML: translations["All"] - }, - attrs: { "selected": this.sound==2 }, - } - ), - ], - ), - ] - ), - ] - ) - ] - ) - ]; - elementArray = elementArray.concat(modalSettings); let chatEltsArray = [ h('label', @@ -865,41 +678,7 @@ Vue.component('my-game', { actionArray ); elementArray.push(actions); - if (this.score != "*" && this.pgnTxt.length > 0) - { - elementArray.push( - h('div', - { - attrs: { id: "pgn-div" }, - "class": { "section-content": true }, - }, - [ - h('a', - { - attrs: { - id: "download", - href: "#", - } - } - ), - h('p', - { - attrs: { id: "pgn-game" }, - domProps: { innerHTML: this.pgnTxt } - } - ), - h('button', - { - attrs: { "id": "downloadBtn" }, - on: { click: this.download }, - domProps: { innerHTML: translations["Download game"] }, - } - ), - ] - ) - ); - } - else if (this.mode != "idle") + if (!!this.vr) { if (this.mode == "problem") { @@ -949,6 +728,31 @@ Vue.component('my-game', { ) ); } + elementArray.push( + h('div', + { + attrs: { id: "pgn-div" }, + "class": { "section-content": true }, + }, + [ + h('a', + { + attrs: { + id: "download", + href: "#", + } + } + ), + h('button', + { + attrs: { "id": "downloadBtn" }, + on: { click: this.download }, + domProps: { innerHTML: translations["Download PGN"] }, + } + ), + ] + ) + ); } return h( 'div', @@ -1008,7 +812,7 @@ Vue.component('my-game', { }; const socketMessageListener = msg => { const data = JSON.parse(msg.data); - const L = (!!this.vr ? this.vr.moves.length : 0); + let L = undefined; switch (data.code) { case "oppname": @@ -1028,7 +832,7 @@ Vue.component('my-game', { break; case "newgame": //opponent found // oppid: opponent socket ID - this.newGame("human", data.fen, data.color, data.oppid); + this.newGame("human", data.fen, data.color, data.oppid, data.gameid); break; case "newmove": //..he played! this.play(data.move, (variant!="Dark" ? "animate" : null)); @@ -1038,6 +842,7 @@ Vue.component('my-game', { break; //games IDs don't match: definitely over... this.oppConnected = true; // Send our "last state" informations to opponent + L = this.vr.moves.length; this.conn.send(JSON.stringify({ code: "lastate", oppid: this.oppid, @@ -1047,10 +852,11 @@ Vue.component('my-game', { })); break; case "lastate": //got opponent infos about last move + L = this.vr.moves.length; if (this.gameId != data.gameId) break; //games IDs don't match: nothing we can do... // OK, opponent still in game (which might be over) - if (this.mode != "human") + if (this.score != "*") { // We finished the game (any result possible) this.conn.send(JSON.stringify({ @@ -1068,6 +874,7 @@ Vue.component('my-game', { this.conn.send(JSON.stringify({ code: "lastate", oppid: this.oppid, + gameId: this.gameId, lastMove: this.vr.moves[L-1], movesCount: L, })); @@ -1164,13 +971,12 @@ Vue.component('my-game', { : "none"; }, download: function() { - let content = document.getElementById("pgn-game").innerHTML; - content = content.replace(/
/g, "\n"); + // Variants may have special PGN structure (so next function isn't defined here) + const content = this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode); // Prepare and trigger download link let downloadAnchor = document.getElementById("download"); downloadAnchor.setAttribute("download", "game.pgn"); - downloadAnchor.href = "data:text/plain;charset=utf-8," + - encodeURIComponent(content); + downloadAnchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content); downloadAnchor.click(); }, showScoreMsg: function() { @@ -1186,8 +992,6 @@ Vue.component('my-game', { localStorage.setItem(prefix+"score", score); } this.showScoreMsg(); - // Variants may have special PGN structure (so next function isn't defined here) - this.pgnTxt = this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode); if (this.mode == "human" && this.oppConnected) { // Send our nickname to opponent @@ -1275,7 +1079,7 @@ Vue.component('my-game', { }, clickGameSeek: function(e) { this.getRidOfTooltip(e.currentTarget); - if (this.mode == "human") + if (this.mode == "human" && this.score == "*") return; //no newgame while playing if (this.seek) { @@ -1311,8 +1115,8 @@ Vue.component('my-game', { } this.endGame(this.mycolor=="w"?"0-1":"1-0"); }, - newGame: function(mode, fenInit, color, oppId) { - const fen = "nrqkbrnb/pppppppp/8/8/8/8/PPPPPPPP/RKQBNRBN w 1111 -";//fenInit || VariantRules.GenRandInitFen(); + newGame: function(mode, fenInit, color, oppId, gameId) { + const fen = fenInit || VariantRules.GenRandInitFen(); console.log(fen); //DEBUG if (mode=="human" && !oppId) { @@ -1325,7 +1129,7 @@ Vue.component('my-game', { } // Send game request and wait.. try { - this.conn.send(JSON.stringify({code:"newgame", fen:fen})); + this.conn.send(JSON.stringify({code:"newgame", fen:fen, gameid: getRandString() })); } catch (INVALID_STATE_ERR) { return; //nothing achieved } @@ -1374,12 +1178,10 @@ Vue.component('my-game', { this.mode = mode; this.incheck = []; this.fenStart = V.ParseFen(fen).position; //this is enough - if (mode != "problem") - this.setStorage(); //store game state in case of interruptions if (mode=="human") { // Opponent found! - this.gameId = getRandString(); + this.gameId = gameId; this.oppid = oppId; this.oppConnected = true; this.mycolor = color; @@ -1391,13 +1193,15 @@ Vue.component('my-game', { else if (mode == "computer") { this.compWorker.postMessage(["init",this.vr.getFen()]); - this.mycolor = "w";//(Math.random() < 0.5 ? 'w' : 'b'); + this.mycolor = (Math.random() < 0.5 ? 'w' : 'b'); if (this.mycolor != this.vr.turn) this.playComputerMove(); } else if (mode == "friend") this.mycolor = "w"; //convention... //else: problem solving: nothing more to do + if (mode != "problem") + this.setStorage(); //store game state in case of interruptions }, continueGame: function(mode) { this.mode = mode; @@ -1622,10 +1426,7 @@ Vue.component('my-game', { if (["human","computer","friend"].includes(this.mode)) this.updateStorage(); //after our moves and opponent moves if (this.mode == "computer" && this.vr.turn != this.mycolor && this.score == "*") - { - console.log(this.vr.moves.length + " " + this.vr.turn + " " + this.mycolor); this.playComputerMove(); - } }, undo: function() { // Navigate after game is over @@ -1649,3 +1450,10 @@ Vue.component('my-game', { }, }, }) + +// TODO: keep moves list here +get lastMove() + { + const L = this.moves.length; + return (L>0 ? this.moves[L-1] : null); + }