From: Benjamin Auder Date: Mon, 19 Nov 2018 11:27:30 +0000 (+0100) Subject: Improved PGN and game seek X-Git-Url: https://git.auder.net/assets/js/doc/html/pieces/css/index.css?a=commitdiff_plain;h=01a135e2aa21365c0a96931fbb6be76876e7c2a1;p=vchess.git Improved PGN and game seek --- diff --git a/TODO b/TODO index e9d0cc5a..7ed21c6d 100644 --- a/TODO +++ b/TODO @@ -1,4 +1,6 @@ -Styles must be improved (full width for smartphones, selectable text for PGN...) +Styles must be improved (full width for smartphones, ...) +PGN text is not selectable (understand why?!) +Change cursor when computer "think" (sablier) Tooltip text should fade (even when mouse stay on it, especially for small screens) Checkered stage 2: switch button at reserve position (or on top). Mode expert: game.js, button on top (with online indicator) diff --git a/public/javascripts/base_rules.js b/public/javascripts/base_rules.js index 11de1471..c0dc826f 100644 --- a/public/javascripts/base_rules.js +++ b/public/javascripts/base_rules.js @@ -1037,14 +1037,15 @@ class ChessRules } // The score is already computed when calling this function - getPGN(mycolor, score, fenStart) + getPGN(mycolor, score, fenStart, mode) { let pgn = ""; pgn += '[Site "vchess.club"]
'; const d = new Date(); + const opponent = this.mode=="human" ? "Anonymous" : "Computer"; pgn += '[Date "' + d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate() + '"]
'; - pgn += '[White "' + (mycolor=='w'?'Myself':'Anonymous') + '"]
'; - pgn += '[Black "' + (mycolor=='b'?'Myself':'Anonymous') + '"]
'; + pgn += '[White "' + (mycolor=='w'?'Myself':opponent) + '"]
'; + pgn += '[Black "' + (mycolor=='b'?'Myself':opponent) + '"]
'; pgn += '[Fen "' + fenStart + '"]
'; pgn += '[Result "' + score + '"]

'; diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index ab860572..e412525f 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -203,32 +203,6 @@ Vue.component('my-game', { // elementArray.push(reserve); // } const eogMessage = this.getEndgameMessage(this.score); - let elemsOfEog = - [ - h('label', - { - attrs: { "for": "modal-eog" }, - "class": { "modal-close": true }, - } - ), - h('h3', - { - "class": { "section": true }, - domProps: { innerHTML: eogMessage }, - } - ) - ]; - if (this.score != "*") - { - elemsOfEog.push( - h('p', //'textarea', //TODO: selectable! - { - domProps: { innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart) }, - //attrs: { "readonly": true }, - } - ) - ); - } const modalEog = [ h('input', { @@ -244,7 +218,20 @@ Vue.component('my-game', { { "class": { "card": true, "smallpad": true }, }, - elemsOfEog + [ + h('label', + { + attrs: { "for": "modal-eog" }, + "class": { "modal-close": true }, + } + ), + h('h3', + { + "class": { "section": true }, + domProps: { innerHTML: eogMessage }, + } + ) + ] ) ] ) @@ -299,6 +286,23 @@ Vue.component('my-game', { actionArray ); elementArray.push(actions); + if (this.score != "*") + { + elementArray.push( + h('div', + { }, + [ + h('p', + { + domProps: { + innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode) + } + } + ) + ] + ) + ); + } return h( 'div', { @@ -426,7 +430,7 @@ Vue.component('my-game', { this.score = score; let modalBox = document.getElementById("modal-eog"); modalBox.checked = true; - //setTimeout(() => { modalBox.checked = false; }, 2000); //disabled, to show PGN + setTimeout(() => { modalBox.checked = false; }, 2000); if (this.mode == "human") this.clearStorage(); this.mode = "idle"; @@ -485,13 +489,12 @@ Vue.component('my-game', { if (this.mode == "human") return; //no newgame while playing if (this.seek) + { delete localStorage["newgame"]; //cancel game seek + this.seek = false; + } else - { - localStorage["newgame"] = variant; this.newGame("human"); - } - this.seek = !this.seek; }, clickComputerGame: function() { if (this.mode == "human") @@ -507,11 +510,12 @@ Vue.component('my-game', { const storageVariant = localStorage.getItem("variant"); if (!!storageVariant && storageVariant !== variant) { - // TODO: find a better way to ensure this. Newgame system is currently a mess. alert("Finish your " + storageVariant + " game first!"); return; } // Send game request and wait.. + localStorage["newgame"] = variant; + this.seek = true; this.clearStorage(); //in case of try { this.conn.send(JSON.stringify({code:"newgame", fen:fen}));