X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=19a5e321cb8b47287808d2f19a82d064a98df8f6;hb=9d4a02185291aad8d8af5d35c1d6a808a1e11c9f;hp=626800211a87a8ccb85ae79a644aaf984c8e2a85;hpb=7d8bf63e973bbb9766ab3b4555d58e04f2641167;p=vchess.git diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 62680021..19a5e321 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -19,6 +19,7 @@ export default { ], data: function() { return { + mobileBrowser: ("ontouchstart" in window), possibleMoves: [], //filled after each valid click/dragstart choices: [], //promotion pieces, or checkered captures... (as moves) selectedPiece: null, //moving piece (or clicked piece) @@ -47,9 +48,36 @@ export default { incheckSq[sq[0]][sq[1]] = true; }); - // Create board element (+ reserves if needed by variant) const lm = this.lastMove; - const showLight = this.settings.highlight && V.ShowMoves == "all"; + const showLight = ( + this.settings.highlight && + ["all","highlight"].includes(V.ShowMoves) + ); + const orientation = !V.CanFlip ? "w" : this.orientation; + // Ensure that squares colors do not change when board is flipped + const lightSquareMod = (sizeX + sizeY) % 2; + const showPiece = (x, y) => { + return ( + this.vr.board[x][y] != V.EMPTY && + (!this.vr.enlightened || this.analyze || this.score != "*" || + (!!this.userColor && this.vr.enlightened[this.userColor][x][y])) + ); + }; + const inHighlight = (x, y) => { + return showLight && !!lm && ( + (lm.end.x == x && lm.end.y == y) || + (lm.start.x == x && lm.start.y == y)); + }; + const inShadow = (x, y) => { + return ( + !this.analyze && + this.score == "*" && + this.vr.enlightened && + (!this.userColor || !this.vr.enlightened[this.userColor][x][y]) + ); + }; + // Create board element (+ reserves if needed by variant) + let elementArray = []; const gameDiv = h( "div", { @@ -59,7 +87,7 @@ export default { } }, [...Array(sizeX).keys()].map(i => { - let ci = this.orientation == "w" ? i : sizeX - i - 1; + const ci = orientation == "w" ? i : sizeX - i - 1; return h( "div", { @@ -69,14 +97,9 @@ export default { style: { opacity: this.choices.length > 0 ? "0.5" : "1" } }, [...Array(sizeY).keys()].map(j => { - let cj = this.orientation == "w" ? j : sizeY - j - 1; + const cj = orientation == "w" ? j : sizeY - j - 1; let elems = []; - if ( - this.vr.board[ci][cj] != V.EMPTY && - (!this.vr.enlightened || this.analyze || this.score != "*" || - (!!this.userColor && - this.vr.enlightened[this.userColor][ci][cj])) - ) { + if (showPiece(ci, cj)) { elems.push( h("img", { class: { @@ -88,7 +111,7 @@ export default { attrs: { src: "/images/pieces/" + - V.getPpath(this.vr.board[ci][cj]) + + this.vr.getPpath(this.vr.board[ci][cj], this.userColor, this.score) + ".svg" } }) @@ -106,24 +129,21 @@ export default { }) ); } + const lightSquare = (ci + cj) % 2 == lightSquareMod; return h( "div", { class: { board: true, ["board" + sizeY]: true, - "light-square": (i + j) % 2 == 0, - "dark-square": (i + j) % 2 == 1, + "light-square": lightSquare, + "dark-square": !lightSquare, [this.settings.bcolor]: true, - "in-shadow": - !this.analyze && - this.score == "*" && - this.vr.enlightened && - (!this.userColor || - !this.vr.enlightened[this.userColor][ci][cj]), - highlight: - showLight && !!lm && lm.end.x == ci && lm.end.y == cj, - incheck: showLight && incheckSq[ci][cj] + "in-shadow": inShadow(ci, cj), + "highlight-light": inHighlight(ci, cj) && lightSquare, + "highlight-dark": inHighlight(ci, cj) && !lightSquare, + "incheck-light": showLight && lightSquare && incheckSq[ci][cj], + "incheck-dark": showLight && !lightSquare && incheckSq[ci][cj] }, attrs: { id: getSquareId({ x: ci, y: cj }) @@ -135,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", { @@ -154,13 +175,11 @@ export default { attrs: { src: "/images/pieces/" + - this.vr.getReservePpath(playingColor, i) + + this.vr.getReservePpath(i, playingColor) + ".svg" } }), - h("sup", { class: { "reserve-count": true } }, [ - this.vr.reserve[playingColor][V.RESERVE_PIECES[i]] - ]) + h("sup", { class: { "reserve-count": true } }, [ qty ]) ] ) ); @@ -168,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", { @@ -181,41 +202,76 @@ export default { attrs: { src: "/images/pieces/" + - this.vr.getReservePpath(oppCol, i) + + this.vr.getReservePpath(i, oppCol) + ".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 @@ -255,7 +311,7 @@ export default { attrs: { src: "/images/pieces/" + - V.getPpath(m.appear[0].c + m.appear[0].p) + + this.vr.getPpath(m.appear[0].c + m.appear[0].p) + ".svg" }, class: { "choice-piece": true }, @@ -274,7 +330,7 @@ export default { } let onEvents = {}; // NOTE: click = mousedown + mouseup - if ("ontouchstart" in window) { + if (this.mobileBrowser) { onEvents = { on: { touchstart: this.mousedown, @@ -325,9 +381,10 @@ export default { mousemove: function(e) { if (!this.selectedPiece) return; // There is an active element: move it around - const [offsetX, offsetY] = e.clientX - ? [e.clientX, e.clientY] //desktop browser - : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone + const [offsetX, offsetY] = + this.mobileBrowser + ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY] + : [e.clientX, e.clientY]; this.selectedPiece.style.left = offsetX - this.start.x + "px"; this.selectedPiece.style.top = offsetY - this.start.y + "px"; }, @@ -335,9 +392,10 @@ export default { if (!this.selectedPiece) return; // There is an active element: obtain the move from start and end squares this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords - const [offsetX, offsetY] = e.clientX - ? [e.clientX, e.clientY] - : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; + const [offsetX, offsetY] = + this.mobileBrowser + ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY] + : [e.clientX, e.clientY]; let landing = document.elementFromPoint(offsetX, offsetY); this.selectedPiece.style.zIndex = 3000; // Next condition: classList.contains(piece) fails because of marks @@ -378,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 @@ -410,11 +468,15 @@ img.ghost opacity: 0.4 top: 0 -.highlight - background-color: #00cc66 !important +.highlight-light + background-color: rgba(0, 204, 102, 0.7) !important +.highlight-dark + background-color: rgba(0, 204, 102, 0.9) !important -.incheck - background-color: #cc3300 !important +.incheck-light + background-color: rgba(204, 51, 0, 0.7) !important +.incheck-dark + background-color: rgba(204, 51, 0, 0.9) !important .light-square.lichess background-color: #f0d9b5;