From 9d4a02185291aad8d8af5d35c1d6a808a1e11c9f Mon Sep 17 00:00:00 2001 From: Benjamin Auder Date: Mon, 9 Mar 2020 20:06:13 +0100 Subject: [PATCH] Update TODO, improve style for Crazyhouse variant, fix an introduced bug in example games stop logic --- TODO | 17 ---- client/src/components/Board.vue | 105 +++++++++++++++++-------- client/src/components/ComputerGame.vue | 3 + client/src/variants/Crazyhouse.js | 8 ++ 4 files changed, 82 insertions(+), 51 deletions(-) diff --git a/TODO b/TODO index 443c8fbd..76349413 100644 --- a/TODO +++ b/TODO @@ -1,20 +1,3 @@ -# Enhancements: -On Game page "mconnect" events => - send lastate to them (because they have the game infos) or just "your turn" - if their turn - remember them to send next "newmove" (or just "it's your turn") later - if not their turn - (=> listen for "mdisconnect" as well, and gameover, and newgame) -From MyGames page: send "mconnect" to all online players (me included: potential multi-tabs) - When quit, send mdisconnect (relayed by server if no other MyGames tab). - -Rematch button (change colors, re-apply randomness params (which should be saved somehow somewhere)) - --> need a bit more duplicated logic: in Game page, listen for newgame, and add a "launchGame" function -Will need a 'rematch' field in Game on server - -Put reserve pieces above and below the board. Center them. -Show count of remaining units as a red digit printed on the piece -(can it reach 10? theoretically yes... but then maybe we can just show "0" ?) -Grey "disabled" style for reserve pieces if none available. - # New variants 8-pieces https://www.youtube.com/watch?v=XZ8K02Da7Ps&list=PLRyjH8DPuzTBiym6lA0r84P8N0HnTtZyN&index=6&t=0s https://www.chessvariants.com/rules/8-piece-chess "Eightpieces" diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index cf3d3e68..19a5e321 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -77,6 +77,7 @@ export default { ); }; // Create board element (+ reserves if needed by variant) + let elementArray = []; const gameDiv = h( "div", { @@ -154,18 +155,19 @@ export default { ); }) ); - let elementArray = [gameDiv]; - const playingColor = this.userColor || "w"; //default for an observer - if (this.vr.reserve) { + if (!!this.vr.reserve) { + const playingColor = this.userColor || "w"; //default for an observer const shiftIdx = playingColor == "w" ? 0 : 1; let myReservePiecesArray = []; for (let i = 0; i < V.RESERVE_PIECES.length; i++) { + const qty = this.vr.reserve[playingColor][V.RESERVE_PIECES[i]]; myReservePiecesArray.push( h( "div", { class: { board: true, ["board" + sizeY]: true }, - attrs: { id: getSquareId({ x: sizeX + shiftIdx, y: i }) } + attrs: { id: getSquareId({ x: sizeX + shiftIdx, y: i }) }, + style: { opacity: qty > 0 ? 1 : 0.35 } }, [ h("img", { @@ -177,9 +179,7 @@ export default { ".svg" } }), - h("sup", { class: { "reserve-count": true } }, [ - this.vr.reserve[playingColor][V.RESERVE_PIECES[i]] - ]) + h("sup", { class: { "reserve-count": true } }, [ qty ]) ] ) ); @@ -187,12 +187,14 @@ export default { let oppReservePiecesArray = []; const oppCol = V.GetOppCol(playingColor); for (let i = 0; i < V.RESERVE_PIECES.length; i++) { + const qty = this.vr.reserve[oppCol][V.RESERVE_PIECES[i]]; oppReservePiecesArray.push( h( "div", { class: { board: true, ["board" + sizeY]: true }, - attrs: { id: getSquareId({ x: sizeX + (1 - shiftIdx), y: i }) } + attrs: { id: getSquareId({ x: sizeX + (1 - shiftIdx), y: i }) }, + style: { opacity: qty > 0 ? 1 : 0.35 } }, [ h("img", { @@ -204,37 +206,72 @@ export default { ".svg" } }), - h("sup", { class: { "reserve-count": true } }, [ - this.vr.reserve[oppCol][V.RESERVE_PIECES[i]] - ]) + h("sup", { class: { "reserve-count": true } }, [ qty ]) ] ) ); } - let reserves = h( - "div", - { - class: { - game: true, - "reserve-div": true - } - }, - [ - h( - "div", - { - class: { - row: true, - "reserve-row-1": true - } - }, - myReservePiecesArray - ), - h("div", { class: { row: true } }, oppReservePiecesArray) - ] + const myReserveTop = ( + (playingColor == 'w' && orientation == 'b') || + (playingColor == 'b' && orientation == 'w') ); - elementArray.push(reserves); + // Center reserves, assuming same number of pieces for each side: + const nbReservePieces = myReservePiecesArray.length; + const marginLeft = ((100 - nbReservePieces * (100 / sizeY)) / 2) + "%"; + const reserveTop = + h( + "div", + { + class: { + game: true, + "reserve-div": true + }, + style: { + "margin-left": marginLeft + } + }, + [ + h( + "div", + { + class: { + row: true, + "reserve-row": true + } + }, + myReserveTop ? myReservePiecesArray : oppReservePiecesArray + ) + ] + ); + var reserveBottom = + h( + "div", + { + class: { + game: true, + "reserve-div": true + }, + style: { + "margin-left": marginLeft + } + }, + [ + h( + "div", + { + class: { + row: true, + "reserve-row": true + } + }, + myReserveTop ? oppReservePiecesArray : myReservePiecesArray + ) + ] + ); + elementArray.push(reserveTop); } + elementArray.push(gameDiv); + if (!!this.vr.reserve) elementArray.push(reserveBottom); const boardElt = document.querySelector(".game"); if (this.choices.length > 0 && !!boardElt) { //no choices to show at first drawing @@ -399,7 +436,7 @@ export default { .reserve-count padding-left: 40% -.reserve-row-1 +.reserve-row margin-bottom: 15px // NOTE: no variants with reserve of size != 8 diff --git a/client/src/components/ComputerGame.vue b/client/src/components/ComputerGame.vue index 83b4e023..ce895ee1 100644 --- a/client/src/components/ComputerGame.vue +++ b/client/src/components/ComputerGame.vue @@ -92,6 +92,9 @@ export default { this.gameOver(scoreObj.score); return; } + if (this.game.score != "*") + // The game already ended, probably because of a user action + return; // Send the move to web worker (including his own moves) this.compWorker.postMessage(["newmove", move]); if (this.gameInfo.mode == "auto" || this.vr.turn != this.game.mycolor) diff --git a/client/src/variants/Crazyhouse.js b/client/src/variants/Crazyhouse.js index d677823d..16db148d 100644 --- a/client/src/variants/Crazyhouse.js +++ b/client/src/variants/Crazyhouse.js @@ -118,6 +118,14 @@ export const VariantRules = class CrazyhouseRules extends ChessRules { getReservePpath(index, color) { return color + V.RESERVE_PIECES[index]; } +// // Version if some day I have pieces with numbers printed on it: +// getReservePpath(index, color) { +// return ( +// "Crazyhouse/" + +// color + V.RESERVE_PIECES[index] + +// "_" + this.vr.reserve[playingColor][V.RESERVE_PIECES[i]] +// ); +// } // Ordering on reserve pieces static get RESERVE_PIECES() { -- 2.44.0