X-Git-Url: https://git.auder.net/?p=vchess.git;a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=d89ee40498c0a2fd205934b1987ceb4ae99b05ee;hp=d44234647c5779951421a6449002b6b26b2b4a1d;hb=d54f6261c9e30f4eabb402ad301dd5c5e40fb656;hpb=241bf8f2a9a2c48d793aeb0b1d20207f6371de70 diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index d4423464..d89ee404 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -19,10 +19,13 @@ 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) - start: {}, //pixels coordinates + id of starting square (click or drag) + start: null, //pixels coordinates + id of starting square (click or drag) + click: "", + clickTime: 0, settings: store.state.settings }; }, @@ -47,9 +50,40 @@ 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 showCheck = ( + this.settings.highlight && + ["all","highlight","byrow"].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 +93,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 +103,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,8 +117,13 @@ export default { attrs: { src: "/images/pieces/" + - this.vr.getPpath(this.vr.board[ci][cj], this.userColor, this.score) + - ".svg" + this.vr.getPpath( + this.vr.board[ci][cj], + // Extra args useful for some variants: + this.userColor, + this.score, + this.orientation) + + V.IMAGE_EXTENSION } }) ); @@ -106,24 +140,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": showCheck && lightSquare && incheckSq[ci][cj], + "incheck-dark": showCheck && !lightSquare && incheckSq[ci][cj] }, attrs: { id: getSquareId({ x: ci, y: cj }) @@ -135,18 +166,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", { @@ -158,9 +190,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 ]) ] ) ); @@ -168,12 +198,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", { @@ -185,96 +217,153 @@ 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 + // No choices to show at first drawing const squareWidth = boardElt.offsetWidth / sizeY; const offset = [boardElt.offsetTop, boardElt.offsetLeft]; + const maxNbeltsPerRow = Math.min(this.choices.length, sizeY); + let topOffset = offset[0] + (sizeY / 2) * squareWidth - squareWidth / 2; + let choicesHeight = squareWidth; + if (this.choices.length >= sizeY) { + // A second row is required (Eightpieces variant) + topOffset -= squareWidth / 2; + choicesHeight *= 2; + } const choices = h( "div", { attrs: { id: "choices" }, class: { row: true }, style: { - top: offset[0] + (sizeY / 2) * squareWidth - squareWidth / 2 + "px", + top: topOffset + "px", left: offset[1] + - (squareWidth * (sizeY - this.choices.length)) / 2 + + (squareWidth * Math.max(sizeY - this.choices.length, 0)) / 2 + "px", - width: this.choices.length * squareWidth + "px", - height: squareWidth + "px" + width: (maxNbeltsPerRow * squareWidth) + "px", + height: choicesHeight + "px" } }, - this.choices.map(m => { - //a "choice" is a move - return h( - "div", - { - class: { - board: true, - ["board" + sizeY]: true - }, - style: { - width: 100 / this.choices.length + "%", - "padding-bottom": 100 / this.choices.length + "%" - } - }, - [ - h("img", { - attrs: { - src: - "/images/pieces/" + - this.vr.getPpath(m.appear[0].c + m.appear[0].p) + - ".svg" + [ h( + "div", + { }, + this.choices.map(m => { + // A "choice" is a move + const applyMove = (e) => { + e.stopPropagation(); + // Force a delay between move is shown and clicked + // (otherwise a "double-click" bug might occur) + if (Date.now() - this.clickTime < 200) return; + this.choices = []; + this.play(m); + }; + const onClick = + this.mobileBrowser + ? { touchend: applyMove } + : { mouseup: applyMove }; + return h( + "div", + { + class: { + board: true, + ["board" + sizeY]: true }, - class: { "choice-piece": true }, - on: { - click: () => { - this.play(m); - this.choices = []; - } + style: { + width: (100 / maxNbeltsPerRow) + "%", + "padding-bottom": (100 / maxNbeltsPerRow) + "%" } - }) - ] - ); - }) + }, + [ + h("img", { + attrs: { + src: + "/images/pieces/" + + this.vr.getPPpath( + m.appear[0].c + m.appear[0].p, + // Extra arg useful for some variants: + this.orientation) + + V.IMAGE_EXTENSION + }, + class: { "choice-piece": true }, + on: onClick + }) + ] + ); + }) + ) ] ); elementArray.unshift(choices); } let onEvents = {}; // NOTE: click = mousedown + mouseup - if ("ontouchstart" in window) { + if (this.mobileBrowser) { onEvents = { on: { touchstart: this.mousedown, @@ -295,74 +384,103 @@ export default { }, methods: { mousedown: function(e) { - // Abort if a piece is already being processed, or target is not a piece. - // NOTE: just looking at classList[0] because piece is the first assigned class - if (!!this.selectedPiece || e.target.classList[0] != "piece") return; - e.preventDefault(); //disable native drag & drop - let parent = e.target.parentNode; //the surrounding square - // Next few lines to center the piece on mouse cursor - let rect = parent.getBoundingClientRect(); - this.start = { - x: rect.x + rect.width / 2, - y: rect.y + rect.width / 2, - id: parent.id - }; - this.selectedPiece = e.target.cloneNode(); - let spStyle = this.selectedPiece.style; - spStyle.position = "absolute"; - spStyle.top = 0; - spStyle.display = "inline-block"; - spStyle.zIndex = 3000; - const startSquare = getSquareFromId(parent.id); - this.possibleMoves = []; - const color = this.analyze ? this.vr.turn : this.userColor; - if (this.vr.canIplay(color, startSquare)) - this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare); - // Next line add moving piece just after current image - // (required for Crazyhouse reserve) - parent.insertBefore(this.selectedPiece, e.target.nextSibling); + e.preventDefault(); + if (!this.start) { + // Start square must contain a piece. + // NOTE: classList[0] is enough: 'piece' is the first assigned class + if (e.target.classList[0] != "piece") return; + let parent = e.target.parentNode; //surrounding square + // Show possible moves if current player allowed to play + const startSquare = getSquareFromId(parent.id); + this.possibleMoves = []; + const color = this.analyze ? this.vr.turn : this.userColor; + if (this.vr.canIplay(color, startSquare)) + this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare); + // For potential drag'n drop, remember start coordinates + // (to center the piece on mouse cursor) + let 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); + } else { + this.processMoveAttempt(e); + } }, mousemove: function(e) { if (!this.selectedPiece) return; + e.preventDefault(); // 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 - this.selectedPiece.style.left = offsetX - this.start.x + "px"; - this.selectedPiece.style.top = offsetY - this.start.y + "px"; + const [offsetX, offsetY] = + this.mobileBrowser + ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY] + : [e.clientX, e.clientY]; + Object.assign( + this.selectedPiece.style, + { + left: offsetX - this.start.x + "px", + top: offsetY - this.start.y + "px" + } + ); }, mouseup: function(e) { 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]; + e.preventDefault(); + // Drag'n drop. Selected piece is no longer needed: + this.selectedPiece.parentNode.removeChild(this.selectedPiece); + delete this.selectedPiece; + this.selectedPiece = null; + this.processMoveAttempt(e); + }, + processMoveAttempt: function(e) { + // Obtain the move from start and end squares + 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 + if (this.start.id == landing.id) { + if (this.click == landing.id) { + // Second click on same square: cancel current move + this.possibleMoves = []; + this.start = null; + this.click = ""; + } else this.click = landing.id; return; + } + this.start = null; // OK: process move attempt, landing is a square node let endSquare = getSquareFromId(landing.id); let moves = this.findMatchingMoves(endSquare); this.possibleMoves = []; - if (moves.length > 1) this.choices = moves; - else if (moves.length == 1) this.play(moves[0]); - // Else: impossible move - this.selectedPiece.parentNode.removeChild(this.selectedPiece); - delete this.selectedPiece; - this.selectedPiece = null; + if (moves.length > 1) { + this.clickTime = Date.now(); + this.choices = moves; + } else if (moves.length == 1) this.play(moves[0]); + // else: forbidden move attempt }, findMatchingMoves: function(endSquare) { // Run through moves list and return the matching set (if promotions...) - let moves = []; - this.possibleMoves.forEach(function(m) { - if (endSquare[0] == m.end.x && endSquare[1] == m.end.y) moves.push(m); - }); - return moves; + return ( + this.possibleMoves.filter(m => { + return (endSquare[0] == m.end.x && endSquare[1] == m.end.y); + }) + ); }, play: function(move) { this.$emit("play-move", move); @@ -378,18 +496,20 @@ export default { .reserve-count padding-left: 40% -.reserve-row-1 +.reserve-row margin-bottom: 15px // NOTE: no variants with reserve of size != 8 .game + user-select: none width: 100% margin: 0 .board cursor: pointer #choices + user-select: none margin: 0 position: absolute z-index: 300 @@ -407,14 +527,13 @@ export default { img.ghost position: absolute - opacity: 0.4 + opacity: 0.5 top: 0 -.highlight - background-color: #00cc66 !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; @@ -427,7 +546,25 @@ img.ghost background-color: #6f8f57; .light-square.chesstempo - background-color: #fdfdfd; + background-color: #dfdfdf; .dark-square.chesstempo - background-color: #88a0a8; + background-color: #7287b6; + +// 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 + +.light-square.chesstempo.highlight-light + background-color: #9f9fff +.dark-square.chesstempo.highlight-dark + background-color: #557fff +