X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=0430c68fe2c2e528b7323ed59bde9e71109997b8;hb=1e8a838649e16509c80c9933d99d78856e11b5c2;hp=48bdd872c38f2a71f1c7797246f21d7f6a33efec;hpb=10addfff8239405375a1c99b8582f4d4d8283d0a;p=vchess.git diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 48bdd872..0430c68f 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -60,19 +60,22 @@ export default { if (!!lm) { if (!Array.isArray(lm)) lm = [lm]; lm.forEach(m => { - if (V.OnBoard(m.start.x, m.start.y)) + if (!m.start.noHighlight && V.OnBoard(m.start.x, m.start.y)) lmHighlights[m.start.x + sizeX * m.start.y] = true; - if (V.OnBoard(m.end.x, m.end.y)) + if (!m.end.noHighlight && V.OnBoard(m.end.x, m.end.y)) lmHighlights[m.end.x + sizeX * m.end.y] = true; + if (!!m.start.toplay) + // For Dice variant (at least?) + lmHighlights[m.start.toplay[0] + sizeX * m.start.toplay[1]] = true; }); } const showLight = ( this.settings.highlight && - ["all","highlight"].includes(V.ShowMoves) + ["all", "highlight"].includes(V.ShowMoves) ); const showCheck = ( this.settings.highlight && - ["all","highlight","byrow"].includes(V.ShowMoves) + ["all", "highlight", "byrow"].includes(V.ShowMoves) ); const orientation = !V.CanFlip ? "w" : this.orientation; // Ensure that squares colors do not change when board is flipped @@ -182,13 +185,12 @@ export default { "middle-square": V.Notoodark, [this.settings.bcolor]: true, "in-shadow": inShadow(ci, cj), - "highlight-light": inHighlight(ci, cj) && lightSquare, - "highlight-dark": - inHighlight(ci, cj) && (V.Monochrome || !lightSquare), + "highlight": inHighlight(ci, cj), "incheck-light": showCheck && lightSquare && incheckSq[ci][cj], "incheck-dark": - showCheck && !lightSquare && incheckSq[ci][cj] + showCheck && !lightSquare && incheckSq[ci][cj], + "hover-highlight": this.vr.hoverHighlight(ci, cj) }, attrs: { id: getSquareId({ x: ci, y: cj }) @@ -206,135 +208,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) { @@ -423,7 +443,8 @@ export default { touchend: this.mouseup } }; - } else { + } + else { onEvents = { on: { mousedown: this.mousedown, @@ -637,6 +658,7 @@ export default { 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(); @@ -899,44 +921,38 @@ img.ghost .incheck-dark background-color: rgba(204, 51, 0, 0.9) !important -.light-square.lichess - background-color: #f0d9b5 -.dark-square.lichess - background-color: #b58863 - -.light-square.chesscom - background-color: #e5e5ca -.dark-square.chesscom - background-color: #6f8f57 - -.light-square.chesstempo - background-color: #dfdfdf -.dark-square.chesstempo - background-color: #7287b6 - -.middle-square.lichess - background-color: #D3B18C - -.middle-square.chesscom - background-color: #AABA91 - -.middle-square.chesstempo - background-color: #A9B3CB - // TODO: no predefined highlight colors, but layers. How? -.light-square.lichess.highlight-light - background-color: #cdd26a -.dark-square.lichess.highlight-dark - background-color: #aaa23a - -.light-square.chesscom.highlight-light - background-color: #f7f783 -.dark-square.chesscom.highlight-dark - background-color: #bacb44 +.hover-highlight:hover + // TODO: color dependant on board theme, or inner border... + background-color: #C571E6 !important -.light-square.chesstempo.highlight-light - background-color: #9f9fff -.dark-square.chesstempo.highlight-dark - background-color: #557fff +.highlight + &.light-square + &.lichess + background-color: #cdd26a + &.chesscom + background-color: #f7f783 + &.chesstempo + background-color: #9f9fff + &.orangecc + background-color: #fef273 + &.dark-square + &.lichess + background-color: #aaa23a + &.chesscom + background-color: #bacb44 + &.chesstempo + background-color: #557fff + &.orangecc + background-color: #e8c525 + &.middle-square + &.lichess + background-color: #BCBA52 + &.chesscom + background-color: #D9E164 + &.chesstempo + background-color: #7A8FFF + &.orangecc + background-color: #F3DC4C