X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=b8d0fadd502ced30eab1381db3a23ea3f91b0bb9;hb=173f11dc3119c842a58daa9d1e0afc67eeb0e4e8;hp=7827af1645abbd65a49bc67b8c1cb421ccca41a3;hpb=f63ba2771b8bc09885952a24b4115ab4d8c6aaa1;p=vchess.git diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 7827af16..b8d0fadd 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -171,7 +171,11 @@ export default { }) ); } - const lightSquare = (ci + cj) % 2 == lightSquareMod; + const oddity = (ci + cj) % 2; + const lightSquare = ( + (!V.DarkBottomRight && oddity == lightSquareMod) || + (V.DarkBottomRight && oddity != lightSquareMod) + ); return h( "div", { @@ -208,135 +212,153 @@ export default { // Some variants have more than sizeY reserve pieces (Clorange: 10) const reserveSquareNb = Math.max(sizeY, V.RESERVE_PIECES.length); let myReservePiecesArray = []; - for (let i = 0; i < V.RESERVE_PIECES.length; i++) { - const qty = this.vr.reserve[playingColor][V.RESERVE_PIECES[i]]; - myReservePiecesArray.push( + if (!!this.vr.reserve[playingColor]) { + 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" + reserveSquareNb]: true }, + attrs: { id: getSquareId({ x: sizeX + shiftIdx, y: i }) }, + style: { opacity: qty > 0 ? 1 : 0.35 } + }, + [ + h("img", { + // NOTE: class "reserve" not used currently + "class": { piece: true, reserve: true }, + attrs: { + src: + "/images/pieces/" + + this.vr.getReservePpath(i, playingColor, orientation) + + ".svg" + } + }), + h( + "sup", + { + "class": { "reserve-count": true }, + style: { top: "calc(100% + 5px)" } + }, + [ qty ] + ) + ] + ) + ); + } + } + let oppReservePiecesArray = []; + const oppCol = V.GetOppCol(playingColor); + if (!!this.vr.reserve[oppCol]) { + 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" + reserveSquareNb]: true }, + attrs: { id: getSquareId({ x: sizeX + (1 - shiftIdx), y: i }) }, + style: { opacity: qty > 0 ? 1 : 0.35 } + }, + [ + h("img", { + "class": { piece: true, reserve: true }, + attrs: { + src: + "/images/pieces/" + + this.vr.getReservePpath(i, oppCol, orientation) + + ".svg" + } + }), + h( + "sup", + { + "class": { "reserve-count": true }, + style: { top: "calc(100% + 5px)" } + }, + [ qty ] + ) + ] + ) + ); + } + } + const myReserveTop = ( + (playingColor == 'w' && orientation == 'b') || + (playingColor == 'b' && orientation == 'w') + ); + const hasReserveTop = ( + (myReserveTop && !!this.vr.reserve[playingColor]) || + (!myReserveTop && !!this.vr.reserve[oppCol]) + ); + // "var" because must be reachable from outside this block + var hasReserveBottom = ( + (myReserveTop && !!this.vr.reserve[oppCol]) || + (!myReserveTop && !!this.vr.reserve[playingColor]) + ); + // Center reserves, assuming same number of pieces for each side: + const nbReservePieces = myReservePiecesArray.length; + const marginLeft = + ((100 - nbReservePieces * (100 / reserveSquareNb)) / 2) + "%"; + if (hasReserveTop) { + var reserveTop = h( "div", { - "class": { board: true, ["board" + reserveSquareNb]: true }, - attrs: { id: getSquareId({ x: sizeX + shiftIdx, y: i }) }, - style: { opacity: qty > 0 ? 1 : 0.35 } + "class": { + game: true, + "reserve-div": true + }, + style: { + "margin-left": marginLeft + } }, [ - h("img", { - // NOTE: class "reserve" not used currently - "class": { piece: true, reserve: true }, - attrs: { - src: - "/images/pieces/" + - this.vr.getReservePpath(i, playingColor, orientation) + - ".svg" - } - }), h( - "sup", + "div", { - "class": { "reserve-count": true }, - style: { top: "calc(100% + 5px)" } + "class": { + row: true, + "reserve-row": true + } }, - [ qty ] + myReserveTop ? myReservePiecesArray : oppReservePiecesArray ) ] - ) - ); + ); } - 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( + if (hasReserveBottom) { + var reserveBottom = h( "div", { - "class": { board: true, ["board" + reserveSquareNb]: true }, - attrs: { id: getSquareId({ x: sizeX + (1 - shiftIdx), y: i }) }, - style: { opacity: qty > 0 ? 1 : 0.35 } + "class": { + game: true, + "reserve-div": true + }, + style: { + "margin-left": marginLeft + } }, [ - h("img", { - "class": { piece: true, reserve: true }, - attrs: { - src: - "/images/pieces/" + - this.vr.getReservePpath(i, oppCol, orientation) + - ".svg" - } - }), h( - "sup", + "div", { - "class": { "reserve-count": true }, - style: { top: "calc(100% + 5px)" } + "class": { + row: true, + "reserve-row": true + } }, - [ qty ] + myReserveTop ? oppReservePiecesArray : myReservePiecesArray ) ] - ) - ); + ); } - const myReserveTop = ( - (playingColor == 'w' && orientation == 'b') || - (playingColor == 'b' && orientation == 'w') - ); - // Center reserves, assuming same number of pieces for each side: - const nbReservePieces = myReservePiecesArray.length; - const marginLeft = - ((100 - nbReservePieces * (100 / reserveSquareNb)) / 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); + if (hasReserveTop) elementArray.push(reserveTop); } elementArray.push(gameDiv); - if (!!this.vr.reserve) elementArray.push(reserveBottom); + if (!!this.vr.reserve && hasReserveBottom) + elementArray.push(reserveBottom); const boardElt = document.getElementById("gamePosition"); // boardElt might be undefine (at first drawing) if (this.choices.length > 0 && !!boardElt) { @@ -380,10 +402,12 @@ export default { this.choices = []; this.play(m); }; + const stopPropagation = (e) => { e.stopPropagation(); } const onClick = this.mobileBrowser - ? { touchend: applyMove } - : { mouseup: applyMove }; + // Must cancel mousedown logic: + ? { touchstart: stopPropagation, touchend: applyMove } + : { mousedown: stopPropagation, mouseup: applyMove }; return h( "div", { @@ -401,7 +425,7 @@ export default { attrs: { src: "/images/pieces/" + - // orientation: extra arg useful for some variants: + // orientation: extra arg useful for some variants this.vr.getPPpath(m, this.orientation) + V.IMAGE_EXTENSION }, @@ -425,7 +449,8 @@ export default { touchend: this.mouseup } }; - } else { + } + else { onEvents = { on: { mousedown: this.mousedown, @@ -625,45 +650,45 @@ export default { document.getElementById("boardContainer").getBoundingClientRect(); // NOTE: classList[0] is enough: 'piece' is the first assigned class const withPiece = (e.target.classList[0] == "piece"); - // Emit the click event which could be used by some variants - this.$emit( - "click-square", - getSquareFromId(withPiece ? e.target.parentNode.id : e.target.id) - ); - // Start square must contain a piece. - if (!withPiece) return; - let parent = e.target.parentNode; //surrounding square // Show possible moves if current player allowed to play - const startSquare = getSquareFromId(parent.id); + const startSquare = + getSquareFromId(withPiece ? e.target.parentNode.id : e.target.id); this.possibleMoves = []; const color = this.analyze ? this.vr.turn : this.userColor; - if (this.vr.canIplay(color, startSquare)) - this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare); - else return; - // For potential drag'n drop, remember start coordinates - // (to center the piece on mouse cursor) - const rect = parent.getBoundingClientRect(); - this.start = { - x: rect.x + rect.width / 2, - y: rect.y + rect.width / 2, - id: parent.id - }; - // Add the moving piece to the board, just after current image - this.selectedPiece = e.target.cloneNode(); - Object.assign( - this.selectedPiece.style, - { - position: "absolute", - top: 0, - display: "inline-block", - zIndex: 3000 + if (this.vr.canIplay(color, startSquare)) { + // Emit the click event which could be used by some variants + const targetId = + (withPiece ? e.target.parentNode.id : e.target.id); + this.$emit("click-square", getSquareFromId(targetId)); + if (withPiece) { + this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare); + // For potential drag'n drop, remember start coordinates + // (to center the piece on mouse cursor) + let parent = e.target.parentNode; //surrounding square + const rect = parent.getBoundingClientRect(); + this.start = { + x: rect.x + rect.width / 2, + y: rect.y + rect.width / 2, + id: parent.id + }; + // Add the moving piece to the board, just after current image + this.selectedPiece = e.target.cloneNode(); + Object.assign( + this.selectedPiece.style, + { + position: "absolute", + top: 0, + display: "inline-block", + zIndex: 3000 + } + ); + parent.insertBefore(this.selectedPiece, e.target.nextSibling); } - ); - parent.insertBefore(this.selectedPiece, e.target.nextSibling); - } else { - this.processMoveAttempt(e); + } } - } else if (e.which == 3) { + else this.processMoveAttempt(e); + } + else if (e.which == 3) { // Mouse right button this.containerPos = document.getElementById("gamePosition").getBoundingClientRect();