X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=c14130b541a0310d0f04a31994b77c9a2a0aa222;hb=f6dbe8e31a3260487664f1e0b50710b3f3efaf5f;hp=6d42f27f1fe7da8a125226ce6b5429e8922a80b9;hpb=d47d91c4e9773ade7c8609e3315170e95b56f5e5;p=vchess.git diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 6d42f27f..c14130b5 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -24,7 +24,7 @@ Vue.component('my-game', { incheck: [], pgnTxt: "", hints: (!localStorage["hints"] ? true : localStorage["hints"] === "1"), - color: localStorage["color"] || "lichess", //lichess, chesscom or chesstempo + bcolor: localStorage["bcolor"] || "lichess", //lichess, chesscom or chesstempo // sound level: 0 = no sound, 1 = sound only on newgame, 2 = always sound: parseInt(localStorage["sound"] || "2"), // Web worker to play computer moves without freezing interface: @@ -52,7 +52,7 @@ Vue.component('my-game', { h('button', { on: { click: this.clickGameSeek }, - attrs: { "aria-label": 'New online game' }, + attrs: { "aria-label": translations['New live game'] }, 'class': { "tooltip": true, "play": true, @@ -63,13 +63,13 @@ Vue.component('my-game', { }, [h('i', { 'class': { "material-icons": true } }, "accessibility")]) ); - if (["idle","chat","computer"].includes(this.mode)) + if (variant!="Dark" && ["idle","chat","computer"].includes(this.mode)) { actionArray.push( h('button', { on: { click: this.clickComputerGame }, - attrs: { "aria-label": 'New game VS computer' }, + attrs: { "aria-label": translations['New game versus computer'] }, 'class': { "tooltip":true, "play": true, @@ -80,13 +80,13 @@ Vue.component('my-game', { [h('i', { 'class': { "material-icons": true } }, "computer")]) ); } - if (["idle","chat","friend"].includes(this.mode)) + if (variant!="Dark" && ["idle","chat","friend"].includes(this.mode)) { actionArray.push( h('button', { on: { click: this.clickFriendGame }, - attrs: { "aria-label": 'New IRL game' }, + attrs: { "aria-label": translations['Analysis mode'] }, 'class': { "tooltip":true, "play": true, @@ -139,7 +139,7 @@ Vue.component('my-game', { { on: { click: this.startChat }, attrs: { - "aria-label": 'Start chat', + "aria-label": translations['Start chat'], "id": "chatBtn", }, 'class': { @@ -160,7 +160,7 @@ Vue.component('my-game', { { on: { click: this.clearComputerGame }, attrs: { - "aria-label": 'Clear computer game', + "aria-label": translations['Clear game versus computer'], "id": "clearBtn", }, 'class': { @@ -194,7 +194,7 @@ Vue.component('my-game', { { on: { click: this.showSettings }, attrs: { - "aria-label": 'Settings', + "aria-label": translations['Settings'], "id": "settingsBtn", }, 'class': { @@ -276,7 +276,7 @@ Vue.component('my-game', { ); // Create board element (+ reserves if needed by variant or mode) const lm = this.vr.lastMove; - const showLight = this.hints && + const showLight = this.hints && variant!="Dark" && (!["idle","chat"].includes(this.mode) || this.cursor==this.vr.moves.length); const gameDiv = h('div', { @@ -298,7 +298,8 @@ Vue.component('my-game', { _.range(sizeY).map(j => { let cj = (this.mycolor=='w' ? j : sizeY-j-1); let elems = []; - if (this.vr.board[ci][cj] != VariantRules.EMPTY) + if (this.vr.board[ci][cj] != VariantRules.EMPTY && (variant!="Dark" + || this.score!="*" || this.vr.enlightened[this.mycolor][ci][cj])) { elems.push( h( @@ -341,7 +342,9 @@ Vue.component('my-game', { ['board'+sizeY]: true, 'light-square': (i+j)%2==0, 'dark-square': (i+j)%2==1, - [this.color]: true, + [this.bcolor]: true, + 'in-shadow': variant=="Dark" && this.score=="*" + && !this.vr.enlightened[this.mycolor][ci][cj], 'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}), 'incheck': showLight && incheckSq[ci][cj], }, @@ -361,7 +364,7 @@ Vue.component('my-game', { h('button', { on: { click: this.resign }, - attrs: { "aria-label": 'Resign' }, + attrs: { "aria-label": translations['Resign'] }, 'class': { "tooltip":true, "play": true, @@ -377,7 +380,7 @@ Vue.component('my-game', { h('button', { on: { click: e => this.undo() }, - attrs: { "aria-label": 'Undo' }, + attrs: { "aria-label": translations['Undo'] }, "class": { "play": true, "spaceleft": true, @@ -387,7 +390,7 @@ Vue.component('my-game', { h('button', { on: { click: e => this.play() }, - attrs: { "aria-label": 'Play' }, + attrs: { "aria-label": translations['Play'] }, "class": { "play": true, "spaceleft": true, @@ -404,7 +407,7 @@ Vue.component('my-game', { h('button', { on: { click: this.undoInGame }, - attrs: { "aria-label": 'Undo' }, + attrs: { "aria-label": translations['Undo'] }, "class": { "play": true, "spaceleft": true, @@ -415,7 +418,7 @@ Vue.component('my-game', { h('button', { on: { click: () => { this.mycolor = this.vr.getOppCol(this.mycolor) } }, - attrs: { "aria-label": 'Flip' }, + attrs: { "aria-label": translations['Flip board'] }, "class": { "play": true, "spaceleft": true, @@ -514,7 +517,12 @@ Vue.component('my-game', { [ h('div', { - "class": { "card": true, "smallpad": true }, + "class": { + "card": true, + "smallpad": true, + "small-modal": true, + "text-center": true, + }, }, [ h('label', @@ -563,7 +571,7 @@ Vue.component('my-game', { { attrs: { "id": "titleFenedit" }, "class": { "section": true }, - domProps: { innerHTML: "Position + flags (FEN):" }, + domProps: { innerHTML: translations["Game state (FEN):"] }, } ), h('input', @@ -584,7 +592,7 @@ Vue.component('my-game', { this.newGame("friend", fen); } }, - domProps: { innerHTML: "Ok" }, + domProps: { innerHTML: translations["Ok"] }, } ), h('button', @@ -595,7 +603,7 @@ Vue.component('my-game', { VariantRules.GenRandInitFen(); } }, - domProps: { innerHTML: "Random" }, + domProps: { innerHTML: translations["Random"] }, } ), ] @@ -630,7 +638,7 @@ Vue.component('my-game', { { attrs: { "id": "settingsTitle" }, "class": { "section": true }, - domProps: { innerHTML: "Preferences" }, + domProps: { innerHTML: translations["Preferences"] }, } ), h('fieldset', @@ -639,7 +647,7 @@ Vue.component('my-game', { h('label', { attrs: { for: "nameSetter" }, - domProps: { innerHTML: "My name is..." }, + domProps: { innerHTML: translations["My name is..."] }, }, ), h('input', @@ -660,7 +668,7 @@ Vue.component('my-game', { h('label', { attrs: { for: "setHints" }, - domProps: { innerHTML: "Show hints?" }, + domProps: { innerHTML: translations["Show hints?"] }, }, ), h('input', @@ -681,20 +689,20 @@ Vue.component('my-game', { h('label', { attrs: { for: "selectColor" }, - domProps: { innerHTML: "Board colors" }, + domProps: { innerHTML: translations["Board colors"] }, }, ), h("select", { attrs: { "id": "selectColor" }, - on: { "change": this.setColor }, + on: { "change": this.setBoardColor }, }, [ h("option", { domProps: { "value": "lichess", - innerHTML: "brown" + innerHTML: translations["brown"] }, attrs: { "selected": this.color=="lichess" }, } @@ -703,7 +711,7 @@ Vue.component('my-game', { { domProps: { "value": "chesscom", - innerHTML: "green" + innerHTML: translations["green"] }, attrs: { "selected": this.color=="chesscom" }, } @@ -712,7 +720,7 @@ Vue.component('my-game', { { domProps: { "value": "chesstempo", - innerHTML: "blue" + innerHTML: translations["blue"] }, attrs: { "selected": this.color=="chesstempo" }, } @@ -727,7 +735,7 @@ Vue.component('my-game', { h('label', { attrs: { for: "selectSound" }, - domProps: { innerHTML: "Play sounds?" }, + domProps: { innerHTML: translations["Play sounds?"] }, }, ), h("select", @@ -740,7 +748,7 @@ Vue.component('my-game', { { domProps: { "value": "0", - innerHTML: "None" + innerHTML: translations["None"] }, attrs: { "selected": this.sound==0 }, } @@ -749,7 +757,7 @@ Vue.component('my-game', { { domProps: { "value": "1", - innerHTML: "Newgame" + innerHTML: translations["New game"] }, attrs: { "selected": this.sound==1 }, } @@ -758,7 +766,7 @@ Vue.component('my-game', { { domProps: { "value": "2", - innerHTML: "All" + innerHTML: translations["All"] }, attrs: { "selected": this.sound==2 }, } @@ -785,7 +793,7 @@ Vue.component('my-game', { { attrs: { "id": "titleChat" }, "class": { "section": true }, - domProps: { innerHTML: "Chat with " + this.oppName }, + domProps: { innerHTML: translations["Chat with "] + this.oppName }, } ) ]; @@ -809,7 +817,7 @@ Vue.component('my-game', { attrs: { "id": "input-chat", type: "text", - placeholder: "Type here", + placeholder: translations["Type here"], }, on: { keyup: this.trySendChat }, //if key is 'enter' } @@ -818,7 +826,7 @@ Vue.component('my-game', { { attrs: { id: "sendChatBtn"}, on: { click: this.sendChat }, - domProps: { innerHTML: "Send" }, + domProps: { innerHTML: translations["Send"] }, } ) ]); @@ -878,7 +886,7 @@ Vue.component('my-game', { { attrs: { "id": "downloadBtn" }, on: { click: this.download }, - domProps: { innerHTML: "Download game" }, + domProps: { innerHTML: translations["Download game"] }, } ), ] @@ -900,7 +908,7 @@ Vue.component('my-game', { h('h3', { "class": { clickable: true }, - domProps: { innerHTML: "Show solution" }, + domProps: { innerHTML: translations["Show solution"] }, on: { click: this.toggleShowSolution }, } ), @@ -914,24 +922,27 @@ Vue.component('my-game', { ) ); } - // Show current FEN - elementArray.push( - h('div', - { - attrs: { id: "fen-div" }, - "class": { "section-content": true }, - }, - [ - h('p', - { - attrs: { id: "fen-string" }, - domProps: { innerHTML: this.vr.getBaseFen() }, - "class": { "text-center": true }, - } - ) - ] - ) - ); + if (variant != "Dark" || this.score!="*") + { + // Show current FEN + elementArray.push( + h('div', + { + attrs: { id: "fen-div" }, + "class": { "section-content": true }, + }, + [ + h('p', + { + attrs: { id: "fen-string" }, + domProps: { innerHTML: this.vr.getBaseFen() }, + "class": { "text-center": true }, + } + ) + ] + ) + ); + } } return h( 'div', @@ -962,13 +973,13 @@ Vue.component('my-game', { switch (this.score) { case "1-0": - eogMessage = "White win"; + eogMessage = translations["White win"]; break; case "0-1": - eogMessage = "Black win"; + eogMessage = translations["Black win"]; break; case "1/2": - eogMessage = "Draw"; + eogMessage = translations["Draw"]; break; } return eogMessage; @@ -1003,14 +1014,15 @@ Vue.component('my-game', { // We opened another tab on the same game this.mode = "idle"; this.vr = null; - alert("Already playing a game in this variant on another tab!"); + alert(translations[ + "Already playing a game in this variant on another tab!"]); break; case "newgame": //opponent found // oppid: opponent socket ID this.newGame("human", data.fen, data.color, data.oppid); break; case "newmove": //..he played! - this.play(data.move, "animate"); + this.play(data.move, (variant!="Dark" ? "animate" : null)); break; case "pong": //received if we sent a ping (game still alive on our side) if (this.gameId != data.gameId) @@ -1205,6 +1217,7 @@ Vue.component('my-game', { 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); @@ -1226,9 +1239,9 @@ Vue.component('my-game', { this.hints = !this.hints; localStorage["hints"] = (this.hints ? "1" : "0"); }, - setColor: function(e) { - this.color = e.target.options[e.target.selectedIndex].value; - localStorage["color"] = this.color; + 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); @@ -1267,13 +1280,16 @@ Vue.component('my-game', { this.endGame(this.mycolor=="w"?"0-1":"1-0"); }, newGame: function(mode, fenInit, color, oppId) { - let fen = fenInit || VariantRules.GenRandInitFen(); + const fen = fenInit || VariantRules.GenRandInitFen(); console.log(fen); //DEBUG if (mode=="human" && !oppId) { const storageVariant = localStorage.getItem("variant"); if (!!storageVariant && storageVariant !== variant) - return alert("Finish your " + storageVariant + " game first!"); + { + return alert(translations["Finish your "] + + storageVariant + translations[" game first!"]); + } // Send game request and wait.. try { this.conn.send(JSON.stringify({code:"newgame", fen:fen})); @@ -1299,8 +1315,8 @@ Vue.component('my-game', { const score = localStorage.getItem("comp-score"); if (storageVariant !== variant && score == "*") { - if (!confirm("Unfinished " + storageVariant + - " computer game will be erased")) + if (!confirm(storageVariant + + translations[": unfinished computer game will be erased"])) { return; } @@ -1336,7 +1352,9 @@ Vue.component('my-game', { if (this.mycolor != this.vr.turn) this.playComputerMove(); } - //else: against a (IRL) friend or problem solving: nothing more to do + else if (mode == "friend") + this.mycolor = "w"; //convention... + //else: problem solving: nothing more to do }, continueGame: function(mode) { this.mode = mode; @@ -1347,6 +1365,8 @@ Vue.component('my-game', { const fen = localStorage.getItem(prefix+"fen"); const score = localStorage.getItem(prefix+"score"); //set in "endGame()" this.fenStart = localStorage.getItem(prefix+"fenStart"); + this.vr = new VariantRules(fen, moves); + this.incheck = this.vr.getCheckSquares(this.vr.turn); if (mode == "human") { this.gameId = localStorage.getItem("gameId"); @@ -1355,14 +1375,10 @@ Vue.component('my-game', { code:"ping",oppid:this.oppid,gameId:this.gameId})); } else - this.compWorker.postMessage(["init",fen]); - this.vr = new VariantRules(fen, moves); - if (moves.length > 0) { - const lastMove = moves[moves.length-1]; - this.vr.undo(lastMove); - this.incheck = this.vr.getCheckSquares(lastMove); - this.vr.play(lastMove, "ingame"); + this.compWorker.postMessage(["init",fen]); + if (this.mycolor != this.vr.turn) + this.playComputerMove(); } if (score != "*") { @@ -1424,6 +1440,7 @@ Vue.component('my-game', { if (this.vr.canIplay(color,startSquare)) this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare); } + console.log(this.possibleMoves); // Next line add moving piece just after current image // (required for Crazyhouse reserve) e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling); @@ -1534,8 +1551,9 @@ Vue.component('my-game', { // TODO: robustify this... if (this.mode == "human" && !!move.computer) return; - this.incheck = this.vr.getCheckSquares(move); //is opponent in check? this.vr.play(move, "ingame"); + // Is opponent in check? + this.incheck = this.vr.getCheckSquares(this.vr.turn); if (this.sound == 2) new Audio("/sounds/move.mp3").play().catch(err => {}); if (this.mode == "computer") @@ -1586,15 +1604,7 @@ Vue.component('my-game', { this.vr.undo(lm); if (this.sound == 2) new Audio("/sounds/undo.mp3").play().catch(err => {}); - const lmBefore = this.vr.lastMove; - if (!!lmBefore) - { - this.vr.undo(lmBefore); - this.incheck = this.vr.getCheckSquares(lmBefore); - this.vr.play(lmBefore, "ingame"); - } - else - this.incheck = []; + this.incheck = this.vr.getCheckSquares(this.vr.turn); } }, },