X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=cf3d3e68020ae940d4669bd125688d224532fe06;hb=cafe016679ee9c14bf7bf0a37104ade7f74aff89;hp=bd2612d8611630cd145c72455263ff247d4c2fbf;hpb=20620465247585ed4e845885c4d9fee8cd6920c1;p=vchess.git diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index bd2612d8..cf3d3e68 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,35 @@ 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) const gameDiv = h( "div", { @@ -59,7 +86,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 +96,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 +110,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 +128,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 }) @@ -154,7 +173,7 @@ export default { attrs: { src: "/images/pieces/" + - this.vr.getReservePpath(playingColor, i) + + this.vr.getReservePpath(i, playingColor) + ".svg" } }), @@ -181,7 +200,7 @@ export default { attrs: { src: "/images/pieces/" + - this.vr.getReservePpath(oppCol, i) + + this.vr.getReservePpath(i, oppCol) + ".svg" } }), @@ -255,7 +274,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 +293,7 @@ export default { } let onEvents = {}; // NOTE: click = mousedown + mouseup - if ("ontouchstart" in window) { + if (this.mobileBrowser) { onEvents = { on: { touchstart: this.mousedown, @@ -325,9 +344,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,15 +355,16 @@ 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 while (landing.tagName == "IMG") landing = landing.parentNode; if (this.start.id == landing.id) - //one or multi clicks on same piece + // One or multi clicks on same piece return; // OK: process move attempt, landing is a square node let endSquare = getSquareFromId(landing.id); @@ -410,11 +431,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;