X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=c2cce62c642cd17bd1b06642560a9bd0b54a3719;hb=298c42e63ae321526693e9ce418c4113af36e025;hp=ac03c8fc327ae78e5a028ffc732b801de273f8c1;hpb=69f3d8014e594ef949792d04d97b8286e9c2c268;p=vchess.git diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index ac03c8fc..c2cce62c 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -38,6 +38,8 @@ Vue.component('my-game', { this.newGame("problem", p.fen, V.ParseFen(p.fen).turn); }, }, + // TODO: split the rendering in other components ? + // At least divide in parts, it's too big now. render(h) { const [sizeX,sizeY] = [V.size.x,V.size.y]; // Precompute hints squares to facilitate rendering @@ -57,7 +59,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 +75,7 @@ Vue.component('my-game', { 'class': { "tooltip":true, "play": true, - "playing": this.mode == "computer", + "playing": this.mode == "computer" && this.score == "*", "spaceleft": true, }, }, @@ -190,24 +192,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 } }, @@ -443,7 +427,7 @@ Vue.component('my-game', { { myReservePiecesArray.push(h('div', { - 'class': {'board':true, ['board'+sizeY+'-reserve']:true}, + 'class': {'board':true, ['board'+sizeY]:true}, attrs: { id: this.getSquareId({x:sizeX+shiftIdx,y:i}) } }, [ @@ -467,7 +451,7 @@ Vue.component('my-game', { { oppReservePiecesArray.push(h('div', { - 'class': {'board':true, ['board'+sizeY+'-reserve']:true}, + 'class': {'board':true, ['board'+sizeY]:true}, attrs: { id: this.getSquareId({x:sizeX+(1-shiftIdx),y:i}) } }, [ @@ -618,175 +602,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 +680,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 +730,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', @@ -1006,9 +812,11 @@ Vue.component('my-game', { else if (friendContinuation) this.continueGame("friend"); }; + + // TODO: this events listener is central. Refactor ? How ? 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 +836,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 +846,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 +856,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 +878,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, })); @@ -1092,6 +903,7 @@ Vue.component('my-game', { break; } }; + const socketCloseListener = () => { this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant); this.conn.addEventListener('open', socketOpenListener); @@ -1113,7 +925,7 @@ Vue.component('my-game', { this.play(); } }; - // Computer moves web worker logic: + // Computer moves web worker logic: (TODO: also for observers in HH games) this.compWorker.postMessage(["scripts",variant]); const self = this; this.compWorker.onmessage = function(e) { @@ -1140,10 +952,29 @@ Vue.component('my-game', { } }, methods: { + // TODO: in settings.js setMyname: function(e) { this.myname = e.target.value; localStorage["username"] = this.myname; }, + showSettings: function(e) { + this.getRidOfTooltip(e.currentTarget); + document.getElementById("modal-settings").checked = true; + }, + toggleHints: function() { + this.hints = !this.hints; + localStorage["hints"] = (this.hints ? "1" : "0"); + }, + setBoardColor: function(e) { + this.bcolor = e.target.options[e.target.selectedIndex].value; + localStorage["bcolor"] = this.bcolor; + }, + setSound: function(e) { + this.sound = parseInt(e.target.options[e.target.selectedIndex].value); + localStorage["sound"] = this.sound; + }, + + // TODO: in another component trySendChat: function(e) { if (e.keyCode == 13) //'enter' key this.sendChat(); @@ -1156,6 +987,12 @@ Vue.component('my-game', { this.conn.send(JSON.stringify({ code:"newchat", oppid: this.oppid, msg: chatTxt})); }, + startChat: function(e) { + this.getRidOfTooltip(e.currentTarget); + document.getElementById("modal-chat").checked = true; + }, + + // TODO: in problems component toggleShowSolution: function() { let problemSolution = document.getElementById("problem-solution"); problemSolution.style.display = @@ -1163,14 +1000,14 @@ Vue.component('my-game', { ? "block" : "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 +1023,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 @@ -1196,6 +1031,10 @@ Vue.component('my-game', { } this.cursor = this.vr.moves.length; //to navigate in finished game }, + + // TODO: elsewhere (general methods to access/retrieve from storage, to be generalized) + // https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB + // https://dexie.org/ getStoragePrefix: function(mode) { let prefix = ""; if (mode == "computer") @@ -1242,40 +1081,23 @@ Vue.component('my-game', { delete localStorage[prefix+"fen"]; delete localStorage[prefix+"score"]; }, - // HACK because mini-css tooltips are persistent after click... - // NOTE: seems to work only in chrome/chromium. TODO... - getRidOfTooltip: function(elt) { - elt.style.visibility = "hidden"; - setTimeout(() => { elt.style.visibility="visible"; }, 100); - }, - startChat: function(e) { - this.getRidOfTooltip(e.currentTarget); - document.getElementById("modal-chat").checked = true; - }, clearCurrentGame: function(e) { this.getRidOfTooltip(e.currentTarget); this.clearStorage(); location.reload(); //to see clearing effects }, - showSettings: function(e) { - this.getRidOfTooltip(e.currentTarget); - document.getElementById("modal-settings").checked = true; - }, - toggleHints: function() { - this.hints = !this.hints; - localStorage["hints"] = (this.hints ? "1" : "0"); - }, - setBoardColor: function(e) { - this.bcolor = e.target.options[e.target.selectedIndex].value; - localStorage["bcolor"] = this.bcolor; - }, - setSound: function(e) { - this.sound = parseInt(e.target.options[e.target.selectedIndex].value); - localStorage["sound"] = this.sound; + + // HACK because mini-css tooltips are persistent after click... + // NOTE: seems to work only in chrome/chromium. TODO... + getRidOfTooltip: function(elt) { + elt.style.visibility = "hidden"; + setTimeout(() => { elt.style.visibility="visible"; }, 100); }, + + // TODO: elsewhere, probably (new game button) 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) { @@ -1299,19 +1121,8 @@ Vue.component('my-game', { this.getRidOfTooltip(e.currentTarget); document.getElementById("modal-fenedit").checked = true; }, - resign: function(e) { - this.getRidOfTooltip(e.currentTarget); - if (this.mode == "human" && this.oppConnected) - { - try { - this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid})); - } catch (INVALID_STATE_ERR) { - return; //socket is not ready (and not yet reconnected) - } - } - this.endGame(this.mycolor=="w"?"0-1":"1-0"); - }, - newGame: function(mode, fenInit, color, oppId) { + // In main hall : + newGame: function(mode, fenInit, color, oppId, gameId) { const fen = fenInit || VariantRules.GenRandInitFen(); console.log(fen); //DEBUG if (mode=="human" && !oppId) @@ -1325,7 +1136,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 +1185,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; @@ -1398,6 +1207,8 @@ Vue.component('my-game', { 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; @@ -1430,10 +1241,25 @@ Vue.component('my-game', { setTimeout(() => this.endGame(score), 100); } }, + + resign: function(e) { + this.getRidOfTooltip(e.currentTarget); + if (this.mode == "human" && this.oppConnected) + { + try { + this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid})); + } catch (INVALID_STATE_ERR) { + return; //socket is not ready (and not yet reconnected) + } + } + this.endGame(this.mycolor=="w"?"0-1":"1-0"); + }, playComputerMove: function() { this.timeStart = Date.now(); this.compWorker.postMessage(["askmove"]); }, + + // TODO: purely graphical, move in a "chessground-like" component // Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y. getSquareId: function(o) { // NOTE: a separator is required to allow any size of board @@ -1572,20 +1398,26 @@ Vue.component('my-game', { this.play(move); }, 250); }, + + // OK, these last functions can stay here (?!) play: function(move, programmatic) { if (!move) { // Navigate after game is over - if (this.cursor >= this.vr.moves.length) + if (this.cursor >= this.moves.length) return; //already at the end - move = this.vr.moves[this.cursor++]; + move = this.moves[this.cursor++]; } if (!!programmatic) //computer or human opponent return this.animateMove(move); // Not programmatic, or animation is over if (this.mode == "human" && this.vr.turn == this.mycolor) this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid})); - if (this.score == "*") + + + // TODO: play move, and stack it on this.moves (if a move was provided; otherwise just navigate) + + if (this.score == "*") //TODO: I don't like this if() { // Emergency check, if human game started "at the same time" // TODO: robustify this... @@ -1601,7 +1433,7 @@ Vue.component('my-game', { // Send the move to web worker (TODO: including his own moves?!) this.compWorker.postMessage(["newmove",move]); } - const eog = this.vr.checkGameOver(); + const eog = this.vr.getCurrentScore(); if (eog != "*") { if (["human","computer"].includes(this.mode)) @@ -1614,16 +1446,17 @@ Vue.component('my-game', { } } } - else - { - VariantRules.PlayOnBoard(this.vr.board, move); - this.$forceUpdate(); //TODO: ?! - } +// else +// { +// VariantRules.PlayOnBoard(this.vr.board, move); +// this.$forceUpdate(); //TODO: ?! +// } 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 == "*") this.playComputerMove(); }, + // TODO: merge two next functions undo: function() { // Navigate after game is over if (this.cursor == 0) @@ -1646,3 +1479,16 @@ Vue.component('my-game', { }, }, }) + +//// TODO: keep moves list here +//get lastMove() +// { +// const L = this.moves.length; +// return (L>0 ? this.moves[L-1] : null); +// } +// +//// here too: +// move.notation = this.getNotation(move); +//TODO: confirm dialog with "opponent offers draw", avec possible bouton "prevent future offers" + bouton "proposer nulle" +//+ bouton "abort" avec score == "?" + demander confirmation pour toutes ces actions, +//comme sur lichess