X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=170aeac9705ed4b2f5663fa9d1f1401e0be97eae;hb=2526c041baf44968b0aa7b98af56730e88f6a595;hp=829beaaddc4543cc9f24c832b864d2e251440585;hpb=bdb1f12dbb7e2d72ce3a0803a0cf2626e1f821e0;p=vchess.git diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 829beaad..170aeac9 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -16,6 +16,8 @@ Vue.component('my-game', { seek: false, fenStart: "", incheck: [], + pgnTxt: "", + expert: document.cookie.length>0 ? document.cookie.substr(-1)=="1" : false, }; }, render(h) { @@ -96,6 +98,22 @@ Vue.component('my-game', { } ); elementArray.push(turnIndic); + let expertSwitch = h( + 'button', + { + on: { click: this.toggleExpertMode }, + attrs: { "aria-label": 'Toggle expert mode' }, + 'class': { + "tooltip":true, + "topindicator": true, + "indic-right": true, + "expert-switch": true, + "expert-mode": this.expert, + }, + }, + [h('i', { 'class': { "material-icons": true } }, "remove_red_eye")] + ); + elementArray.push(expertSwitch); let choices = h('div', { attrs: { "id": "choices" }, @@ -161,7 +179,7 @@ Vue.component('my-game', { ) ); } - if (hintSquares[ci][cj]) + if (!this.expert && hintSquares[ci][cj]) { elems.push( h( @@ -184,10 +202,10 @@ Vue.component('my-game', { { 'class': { 'board': true, - 'light-square': !highlight && (i+j)%2==0, - 'dark-square': !highlight && (i+j)%2==1, - 'highlight': highlight, - 'incheck': incheckSq[ci][cj], + 'light-square': (i+j)%2==0 && (this.expert || !highlight), + 'dark-square': (i+j)%2==1 && (this.expert || !highlight), + 'highlight': !this.expert && highlight, + 'incheck': !this.expert && incheckSq[ci][cj], }, attrs: { id: this.getSquareId({x:ci,y:cj}), @@ -199,18 +217,21 @@ Vue.component('my-game', { ); }), choices] ); - actionArray.push( - h('button', - { - on: { click: this.resign }, - attrs: { "aria-label": 'Resign' }, - 'class': { - "tooltip":true, - "bottom": true, + if (this.mode != "idle") + { + actionArray.push( + h('button', + { + on: { click: this.resign }, + attrs: { "aria-label": 'Resign' }, + 'class': { + "tooltip":true, + "bottom": true, + }, }, - }, - [h('i', { 'class': { "material-icons": true } }, "flag")]) - ); + [h('i', { 'class': { "material-icons": true } }, "flag")]) + ); + } elementArray.push(gameDiv); // if (!!vr.reserve) // { @@ -317,12 +338,22 @@ Vue.component('my-game', { { elementArray.push( h('div', - { }, + { attrs: { id: "pgn-div" } }, [ + h('a', + { + attrs: { + id: "download", + href: "#", + } + } + ), h('p', { + attrs: { id: "pgn-game" }, + on: { click: this.download }, domProps: { - innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode) + innerHTML: this.pgnTxt } } ) @@ -453,10 +484,21 @@ Vue.component('my-game', { this.conn.onclose = socketCloseListener; }, methods: { + download: function() { + let content = document.getElementById("pgn-game").innerHTML; + content = content.replace(/
/g, "\n"); + // 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.click(); + }, endGame: function(score) { this.score = score; let modalBox = document.getElementById("modal-eog"); modalBox.checked = true; + // 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); setTimeout(() => { modalBox.checked = false; }, 2000); if (this.mode == "human") this.clearStorage(); @@ -479,6 +521,10 @@ Vue.component('my-game', { } return eogMessage; }, + toggleExpertMode: function() { + this.expert = !this.expert; + document.cookie = "expert=" + (this.expert ? "1" : "0"); + }, resign: function() { if (this.mode == "human" && this.oppConnected) { @@ -529,7 +575,7 @@ Vue.component('my-game', { this.newGame("computer"); }, newGame: function(mode, fenInit, color, oppId, moves, continuation) { - const fen = fenInit || VariantRules.GenRandInitFen(); + const fen = "brnbnkrq/pppppppp/8/8/8/8/PPPPPPPP/BNNRKBQR 11111111111111111111";//fenInit || VariantRules.GenRandInitFen(); console.log(fen); //DEBUG this.score = "*"; if (mode=="human" && !oppId) @@ -558,6 +604,7 @@ Vue.component('my-game', { return; } this.vr = new VariantRules(fen, moves || []); + this.pgnTxt = ""; //redundant with this.score = "*", but cleaner this.mode = mode; this.incheck = []; //in case of this.fenStart = continuation @@ -578,10 +625,9 @@ Vue.component('my-game', { this.seek = false; if (!!moves && moves.length > 0) //imply continuation { - const oppCol = this.vr.turn; const lastMove = moves[moves.length-1]; this.vr.undo(lastMove); - this.incheck = this.vr.getCheckSquares(lastMove, oppCol); + this.incheck = this.vr.getCheckSquares(lastMove); this.vr.play(lastMove, "ingame"); } delete localStorage["newgame"]; @@ -589,14 +635,13 @@ Vue.component('my-game', { } else //against computer { - this.mycolor = Math.random() < 0.5 ? 'w' : 'b'; + this.mycolor = "w";//Math.random() < 0.5 ? 'w' : 'b'; if (this.mycolor == 'b') setTimeout(this.playComputerMove, 500); } }, playComputerMove: function() { - const compColor = this.mycolor=='w' ? 'b' : 'w'; - const compMove = this.vr.getComputerMove(compColor); + const compMove = this.vr.getComputerMove(); // HACK: avoid selecting elements before they appear on page: setTimeout(() => this.play(compMove, "animate"), 500); }, @@ -628,7 +673,7 @@ Vue.component('my-game', { this.selectedPiece.style.display = "inline-block"; this.selectedPiece.style.zIndex = 3000; let startSquare = this.getSquareFromId(e.target.parentNode.id); - this.possibleMoves = this.vr.canIplay(this.mycolor,startSquare) + this.possibleMoves = this.mode!="idle" && this.vr.canIplay(this.mycolor,startSquare) ? this.vr.getPossibleMovesFrom(startSquare) : []; e.target.parentNode.appendChild(this.selectedPiece); @@ -711,8 +756,7 @@ Vue.component('my-game', { this.animateMove(move); return; } - const oppCol = this.vr.getOppCol(this.vr.turn); - this.incheck = this.vr.getCheckSquares(move, oppCol); //is opponent in check? + this.incheck = this.vr.getCheckSquares(move); //is opponent in check? // 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})); @@ -720,7 +764,7 @@ Vue.component('my-game', { this.vr.play(move, "ingame"); if (this.mode == "human") this.updateStorage(); //after our moves and opponent moves - const eog = this.vr.checkGameOver(this.vr.turn); + const eog = this.vr.checkGameOver(); if (eog != "*") this.endGame(eog); else if (this.mode == "computer" && this.vr.turn != this.mycolor)