X-Git-Url: https://git.auder.net/img/rock_paper_scissors_lizard_spock.gif?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=96833bc087130bc138690a86d9102314d55c2e2e;hb=0869b00a0e716a559c7a70ba2d854eed91689e33;hp=40035a5fb256052612eac0e5c8adb827121f5c2b;hpb=3ed62725fe47e395793cf952403d61fc9f347eee;p=vchess.git diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 40035a5f..96833bc0 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -334,10 +334,20 @@ 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) } @@ -470,6 +480,15 @@ 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"); @@ -597,12 +616,12 @@ Vue.component('my-game', { this.oppConnected = true; this.mycolor = color; this.seek = false; + this.mode = "human"; 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"]; @@ -610,14 +629,14 @@ Vue.component('my-game', { } else //against computer { + this.mode = "computer"; this.mycolor = 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); }, @@ -649,7 +668,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); @@ -732,8 +751,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})); @@ -741,7 +759,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)