From 63ca2b89cfe577efd168c6b2e26750cb01b66d64 Mon Sep 17 00:00:00 2001 From: Benjamin Auder Date: Thu, 30 Jan 2020 18:53:20 +0100 Subject: [PATCH] 'update' --- TODO | 47 ++++++- _tmp/TODO | 104 --------------- client/src/components/BaseGame.vue | 122 +++++++++--------- client/src/components/Chat.vue | 1 + client/src/components/ComputerGame.vue | 6 +- client/src/components/MoveList.vue | 4 +- client/src/main.js | 10 ++ client/src/translations/en.js | 1 + client/src/utils/gameStorage.js | 4 +- client/src/views/Analyze.vue | 3 + client/src/views/Game.vue | 14 +- ...hexaboard_test.html => hexaboard_test.html | 0 server/db/create.sql | 6 +- server/models/Game.js | 10 +- 14 files changed, 140 insertions(+), 192 deletions(-) delete mode 100644 _tmp/TODO rename _tmp/hexaboard_test.html => hexaboard_test.html (100%) diff --git a/TODO b/TODO index 354e91d6..95431640 100644 --- a/TODO +++ b/TODO @@ -1,2 +1,45 @@ -styling: connection indicator, names, put movesList + chat in better positions -complete translations, stylesheets, variants rules ... +au moins l'échange des coups en P2P ? et game chat ? +surligner "hall" (menu) si nouveau défi perso (reçu) et pas affichage courant +de même surligner "my games" si c'est à nous de jouer dans une partie (corr) + +Click elsewhere make modal disappear (for now: Esc key works...) + +Use better-sqlite3 instead of node-sqlite3: +https://www.npmjs.com/package/better-sqlite3 + +Canvas for hexagonal board Vue reactivity : +https://stackoverflow.com/questions/40177493/drawing-onto-a-canvas-with-vue-js +custom directives ? + +Desktop notifications: +https://developer.mozilla.org/fr/docs/Web/API/notification + +Think about this: +https://alligator.io/vuejs/component-communication/ +https://alligator.io/vuejs/global-event-bus/ + +Dans variant page, "mes parties" peut toujours contenir corr + importées (deux onglets) +En fin de partie (observée ou non), bouton "import game" en + de "download game" ==> directement dans indexedDB +les parties par correspondance survivent 7 jours après la fin de partie + +mat en 2 échiqueté : brnkr3/pppp1p1p/4ps2/8/2P2P2/P1qP4/2c1s1PP/R1K5 +(Bb3+ Kb1 Ba2#) + +Importer des parties : nécessite de parser le PGN produit (possible, un peu pénible) + +espagnol : jugada ou movimiento ? +fin de la partida au lieu de final de partida ? + +Mode new game contre un ami comme sur lichess ? + +Coordonnées sur échiquier: sur cases, à gauche (verticale) ou en bas (horizontale) + +Import game : en local dans indexedDb, affichage dans "Games --> Imported" + +Hexachess: McCooey et Shafran (deux tailles, randomisation OK) +http://www.math.bas.bg/~iad/tyalie/shegra/shegrax.html +http://www.quadibloc.com/chess/ch0401.htm + +Inspiration for refactor: +https://github.com/triestpa/Vue-Chess/blob/master/src/components/chessboard/chessboard.js +https://github.com/gustaYo/vue-chess diff --git a/_tmp/TODO b/_tmp/TODO deleted file mode 100644 index 86d36fe3..00000000 --- a/_tmp/TODO +++ /dev/null @@ -1,104 +0,0 @@ ---> correspondance: stocker sur serveur lastMove + uid + color + movesCount + gameId + variant + timeleft -fin de partie corr: supprimer partie du serveur au bout de 7 jours (arbitraire) -// TODO: au moins l'échange des coups en P2P ? et game chat ? - -// TODO: surligner "hall" (menu) si nouveau défi perso (reçu) et pas affichage courant -// de même surligner "my games" si c'est à nous de jouer dans une partie (corr) -// ==> myGames componentn + Game component must listen for "new move" events - -Hall + problems : similar pages, with "New game[problem]" button -with a list of variants. ---> but display all challenges (and all problems) -Possible filter: write a few variant names, to keep only these. ---> In settings ! - -Use better-sqlite3 instead of node-sqlite3: -https://www.npmjs.com/package/better-sqlite3 - -Canvas for hexagonal board Vue reactivity : -https://stackoverflow.com/questions/40177493/drawing-onto-a-canvas-with-vue-js -custom directives ? - -Desktop notifications: -https://developer.mozilla.org/fr/docs/Web/API/notification - -Think about this: -https://alligator.io/vuejs/component-communication/ -https://alligator.io/vuejs/global-event-bus/ - -CRON task remove unlogged users, finished corr games after 7 days, individual challenges older than 7 days - -tell opponent that I got the move, for him to start timer (and lose...) - --> no, not needed and impossible if everybody is offline - ==> just store this time locally (cheating possible but...) -board2, board3, board4 -VariantRules2, 3 et 4 aussi -fetch challenges and corr games from server at startup (room) -but forbid anonymous to start corr games or accept challenges - -Dans variant page, "mes parties" peut toujours contenir corr + importées (deux onglets) -En fin de partie (observée ou non), bouton "import game" en + de "download game" ==> directement dans indexedDB ---> sursis de 7 jours pour les parties par correspondance, qui sont encore chargées depuis le serveur - -mat en 2 échiqueté : brnkr3/pppp1p1p/4ps2/8/2P2P2/P1qP4/2c1s1PP/R1K5 -(Bb3+ Kb1 Ba2#) - -// TODO: decodeURIComponent() for GET/DELETE parameters - -2) Integrate computer play into rules tab -3) Allow correspondance play (no need for P2P: online moves through the server (which also store them)) -4) Write my-games tab (included current/finished/imported) - Use Dexie.js, or anything to store games locally -5) Write room tab - Use this: https://github.com/feross/simple-peer for online games+challenges+chat -6) Test... and publish - -Finish rules translation in Spanish + improve existing ones -Design: final touch (gain extra space on top, using space on the right) -Crazyhouse: center reserves, grey if zero available, numbers superimposed -Promotions: increase pieces sizes, better background. -Code: use two spaces instead of tabs, everywhere. -Increase code line length to 100 or more? -(http://katafrakt.me/2017/09/16/80-characters-line-length-limit/) -Chat button should be more apparent after game ends (color ?) -Reinforce security for problems upload (how ?) - -Later: -Let choice of time control, allow correspondance play, several corr games at the same time -==> need to use indexedDB instead of localStorage. Maybe with Dexie https://dexie.org/ -Each user would have a unique identifier stored in the client DB. -Allow to cancel games (if opponent doesn't connect again) -Live games storage would be browser-based: different games on smartphone, home computer, work computer... (why not ?) -==> (at most 1) running, and finished (which can be deleted from local memory) -Allow challenging a specific player (by his chosen name) -But keep the random pairings as main playing way + always playing in ZEN mode - -style menu : surligner onglet courant - -Interface : - - newGame: une modalBox à paramètres, timeControl, type d'adversaire ==> "new Game") - -Importer des parties : nécessite de parser le PGN produit (possible, un peu pénible) -mais permettrait mode analyse (avec bouton "analyse", comme sur ancien site). - -espagnol : jugada ou movimiento ? -fin de la partida au lieu de final de partida ? - -Bouton new game ==> human only. Indiquer adversaire (éventuellement), cadence (ou "infini") -Mode analyse : accessible à tout moment d'une partie (HH, ou computer) terminée + bouton "analyze from here" (sur parties observées) - -Coordonnées sur échiquier: sur cases, à gauche (verticale) ou en bas (horizontale) - -Import game : en local dans indexedDb, affichage dans "Games --> Imported" - -Checkered : si intervention d'un 3eme joueur, initialiser son temps à la moyenne des temps restants des deux autres... ? - -Mode contre ordinateur : seulement accessible depuis onglet "Rules" (son principal intérêt) - -Hexachess: McCooey et Shafran (deux tailles, randomisation OK) -http://www.math.bas.bg/~iad/tyalie/shegra/shegrax.html -http://www.quadibloc.com/chess/ch0401.htm - -Inspiration for refactor: -https://github.com/triestpa/Vue-Chess/blob/master/src/components/chessboard/chessboard.js -https://github.com/gustaYo/vue-chess diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index e04f5082..1ea862fb 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -7,7 +7,7 @@ div#baseGame(tabindex=-1 @click="() => focusBg()" @keydown="handleKeys") h3#eogMessage.section {{ endgameMessage }} .row #boardContainer.col-sm-12.col-md-9 - Board(:vr="vr" :last-move="lastMove" :analyze="analyze" + Board(:vr="vr" :last-move="lastMove" :analyze="game.mode=='analyze'" :user-color="game.mycolor" :orientation="orientation" :vname="game.vname" @play-move="play") #controls @@ -16,11 +16,11 @@ div#baseGame(tabindex=-1 @click="() => focusBg()" @keydown="handleKeys") button(@click="flip") ⇅ button(@click="() => play()") > button(@click="gotoEnd") >> - #fenDiv(v-if="showFen && !!vr") - p(@click="gotoFenContent") {{ vr.getFen() }} #pgnDiv a#download(href="#") button(@click="download") {{ st.tr["Download PGN"] }} + button(v-if="game.mode!='analyze'" @click="analyzePosition") + | {{ st.tr["Analyze"] }} .col-sm-12.col-md-3 MoveList(v-if="showMoves" :score="game.score" :message="game.scoreMsg" :moves="moves" :cursor="cursor" @goto-move="gotoMove") @@ -59,20 +59,14 @@ export default { this.re_setVariables(); }, // Received a new move to play: - "game.moveToPlay": function() { - this.play(this.game.moveToPlay, "receive", this.game.vname=="Dark"); + "game.moveToPlay": function(newMove) { + if (!!newMove) //if stop + launch new game, get undefined move + this.play(newMove, "receive"); }, }, computed: { showMoves: function() { - return true; - //return window.innerWidth >= 768; - }, - showFen: function() { - return this.game.vname != "Dark" || this.game.score != "*"; - }, - analyze: function() { - return this.game.mode == "analyze" || this.game.score != "*"; + return this.game.vname != "Dark" || this.game.mode=="analyze"; }, }, created: function() { @@ -131,10 +125,11 @@ export default { this.cursor = L-1; this.lastMove = (L > 0 ? this.moves[L-1] : null); }, - gotoFenContent: function(event) { - const newUrl = "#/analyze/" + this.game.vname + - "/?fen=" + event.target.innerText.replace(/ /g, "_"); - window.open(newUrl); //to open in a new tab + analyzePosition: function() { + const newUrl = "/analyze/" + this.game.vname + + "/?fen=" + this.vr.getFen().replace(/ /g, "_"); + //window.open("#" + newUrl); //to open in a new tab + this.$router.push(newUrl); //better }, download: function() { const content = this.getPgn(); @@ -194,7 +189,7 @@ export default { modalBox.checked = true; setTimeout(() => { modalBox.checked = false; }, 2000); }, - animateMove: function(move) { + animateMove: function(move, callback) { let startSquare = document.getElementById(getSquareId(move.start)); let endSquare = document.getElementById(getSquareId(move.end)); let rectStart = startSquare.getBoundingClientRect(); @@ -219,66 +214,65 @@ export default { for (let i=0; i { + if (!!receive && this.cursor < this.moves.length-1) this.gotoEnd(); //required to play the move - return this.animateMove(move); - } - if (!navigate) - { - move.color = this.vr.turn; - move.notation = this.vr.getNotation(move); - } - // Not programmatic, or animation is over - this.vr.play(move); - this.cursor++; - this.lastMove = move; - if (this.st.settings.sound == 2) - new Audio("/sounds/move.mp3").play().catch(err => {}); - if (!navigate) - { - move.fen = this.vr.getFen(); - if (this.game.score == "*" || this.analyze) + if (navigate) + { + if (this.cursor == this.moves.length-1) + return; //no more moves + move = this.moves[this.cursor+1]; + } + else { + move.color = this.vr.turn; + move.notation = this.vr.getNotation(move); + } + this.vr.play(move); + this.cursor++; + this.lastMove = move; + if (this.st.settings.sound == 2) + new Audio("/sounds/move.mp3").play().catch(err => {}); + if (!navigate) + { + move.fen = this.vr.getFen(); // Stack move on movesList at current cursor if (this.cursor == this.moves.length) this.moves.push(move); else this.moves = this.moves.slice(0,this.cursor).concat([move]); } - } - if (!this.analyze) - this.$emit("newmove", move); //post-processing (e.g. computer play) - // Is opponent in check? - this.incheck = this.vr.getCheckSquares(this.vr.turn); - const score = this.vr.getCurrentScore(); - if (score != "*") - { - const message = this.getScoreMessage(score); - if (!this.analyze) - this.$emit("gameover", score, message); - else //just show score on screen (allow undo) - this.showEndgameMsg(score + " . " + message); - } + if (this.game.mode != "analyze") + this.$emit("newmove", move); //post-processing (e.g. computer play) + // Is opponent in check? + this.incheck = this.vr.getCheckSquares(this.vr.turn); + const score = this.vr.getCurrentScore(); + if (score != "*") + { + const message = this.getScoreMessage(score); + if (this.game.mode != "analyze") + this.$emit("gameover", score, message); + else //just show score on screen (allow undo) + this.showEndgameMsg(score + " . " + message); + } + }; + if (!!receive && this.game.vname != "Dark") + this.animateMove(move, doPlayMove); + else + doPlayMove(); }, undo: function(move) { const navigate = !move; @@ -328,7 +322,7 @@ export default {