X-Git-Url: https://git.auder.net/?p=vchess.git;a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=5b8b92206c7d202f21d0a9df01d8609b5c404b3b;hp=4af6469160151c910fb4a1766c61372e796f7100;hb=cfc1cf0d2dde4d7f69f107d8c7ec30c815812da0;hpb=8764102a5f1e9ad16965dd5e2c249062b3d8a605 diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 4af64691..5b8b9220 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -31,6 +31,7 @@ export default { circles: {}, //object of squares' ID --> true (TODO: use a set?) click: "", clickTime: 0, + initialized: 0, settings: store.state.settings }; }, @@ -60,19 +61,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 @@ -121,27 +125,28 @@ export default { const squareId = "sq-" + ci + "-" + cj; let elems = []; if (showPiece(ci, cj)) { - elems.push( - h("img", { - "class": { - piece: true, - ghost: - !!this.selectedPiece && - this.selectedPiece.parentNode.id == squareId - }, - attrs: { - src: - "/images/pieces/" + - this.vr.getPpath( - this.vr.board[ci][cj], - // Extra args useful for some variants: - this.userColor, - this.score, - this.orientation) + - V.IMAGE_EXTENSION - } - }) - ); + let pieceSpecs = { + "class": { + piece: true, + ghost: + !!this.selectedPiece && + this.selectedPiece.parentNode.id == squareId + }, + attrs: { + src: + "/images/pieces/" + + this.vr.getPpath( + this.vr.board[ci][cj], + // Extra args useful for some variants: + this.userColor, + this.score, + this.orientation) + + V.IMAGE_EXTENSION + } + }; + if (this.arrows.length == 0) + pieceSpecs["style"] = { position: "absolute" }; + elems.push(h("img", pieceSpecs)); } if (this.settings.hints && hintSquares[ci][cj]) { elems.push( @@ -167,23 +172,32 @@ 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", { "class": { board: true, ["board" + sizeY]: true, - "light-square": lightSquare && !V.Monochrome, - "dark-square": !lightSquare || !!V.Monochrome, + "light-square": + !V.Notoodark && lightSquare && !V.Monochrome, + "dark-square": + !V.Notoodark && (!lightSquare || !!V.Monochrome), + "middle-square": V.Notoodark, [this.settings.bcolor]: true, "in-shadow": inShadow(ci, cj), - "highlight-light": inHighlight(ci, cj) && lightSquare, - "highlight-dark": inHighlight(ci, cj) && !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], !this.analyze ? this.userColor : null) }, attrs: { id: getSquareId({ x: ci, y: cj }) @@ -201,127 +215,161 @@ 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( - 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", { - "class": { piece: true, reserve: true }, - attrs: { - src: - "/images/pieces/" + - this.vr.getReservePpath(i, playingColor, orientation) + - ".svg" - } - }), - h("sup", { "class": { "reserve-count": true } }, [ qty ]) - ] - ) - ); + 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); - 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 } }, [ qty ]) - ] - ) - ); + 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 nbReservePieces = + Math.max(myReservePiecesArray.length, oppReservePiecesArray.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 - } + if (hasReserveTop) { + var reserveTop = + h( + "div", + { + "class": { + game: true, + "reserve-div": true }, - myReserveTop ? myReservePiecesArray : oppReservePiecesArray - ) - ] - ); - var reserveBottom = - h( - "div", - { - "class": { - game: true, - "reserve-div": true + style: { + "margin-left": marginLeft + } }, - style: { - "margin-left": marginLeft - } - }, - [ - h( - "div", - { - "class": { - row: true, - "reserve-row": true - } + [ + h( + "div", + { + "class": { + row: true, + "reserve-row": true + } + }, + myReserveTop ? myReservePiecesArray : oppReservePiecesArray + ) + ] + ); + } + if (hasReserveBottom) { + var reserveBottom = + h( + "div", + { + "class": { + game: true, + "reserve-div": true }, - myReserveTop ? oppReservePiecesArray : myReservePiecesArray - ) - ] - ); - elementArray.push(reserveTop); + style: { + "margin-left": marginLeft + } + }, + [ + h( + "div", + { + "class": { + row: true, + "reserve-row": true + } + }, + myReserveTop ? oppReservePiecesArray : myReservePiecesArray + ) + ] + ); + } + 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) { 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 topOffset = offset[0] + ((sizeX - 1) / 2) * squareWidth; let choicesHeight = squareWidth; if (this.choices.length >= sizeY) { // A second row is required (Eightpieces variant) @@ -358,10 +406,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", { @@ -379,7 +429,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 }, @@ -403,7 +453,8 @@ export default { touchend: this.mouseup } }; - } else { + } + else { onEvents = { on: { mousedown: this.mousedown, @@ -413,6 +464,8 @@ export default { } }; } + if (this.initialized == 1) this.$emit("rendered"); + if (this.initialized <= 1) this.initialized++; return ( h( "div", @@ -497,15 +550,20 @@ export default { } }, addArrow: function(arrow) { - this.arrows.push(arrow); - // Also add to DOM: - const boardElt = document.getElementById("gamePosition"); - const squareWidth = boardElt.offsetWidth / V.size.y; - const bPos = boardElt.getBoundingClientRect(); - const newArrow = - this.getSvgArrow(arrow, bPos.top, bPos.left, squareWidth); - document.getElementById("arrowCanvas") - .insertAdjacentElement("beforeend", newArrow); + const arrowIdx = this.arrows.findIndex(a => { + return ( + a.start[0] == arrow.start[0] && a.start[1] == arrow.start[1] && + a.end[0] == arrow.end[0] && a.end[1] == arrow.end[1] + ); + }); + if (arrowIdx >= 0) + // Erase the arrow + this.arrows.splice(arrowIdx, 1); + else + // Add to arrows vector: + this.arrows.push(arrow); + // NOTE: no need to draw here, will be re-draw + // by updated() hook callong re_setDrawings() }, getSvgArrow: function(arrow, top, left, squareWidth) { const aStart = @@ -528,11 +586,12 @@ export default { return path; }, re_setDrawings: function() { + // Add some drawing on board (for some variants + arrows and circles) + const boardElt = document.getElementById("gamePosition"); + if (!boardElt) return; // Remove current canvas, if any const curCanvas = document.getElementById("arrowCanvas"); if (!!curCanvas) curCanvas.parentNode.removeChild(curCanvas); - // Add some drawing on board (for some variants + arrows and circles) - const boardElt = document.getElementById("gamePosition"); const squareWidth = boardElt.offsetWidth / V.size.y; const bPos = boardElt.getBoundingClientRect(); let svgArrows = []; @@ -548,7 +607,11 @@ export default { this.coordsToXY(line[1], bPos.top, bPos.left, squareWidth); let path = document.createElementNS("http://www.w3.org/2000/svg", "path"); - path.classList.add("svg-line"); + if (line[0][0] == line[1][0] || line[0][1] == line[1][1]) + path.classList.add("svg-line"); + else + // "Diagonals" are drawn with a lighter color (TODO: generalize) + path.classList.add("svg-diag"); path.setAttribute( "d", "M" + lStart.x + "," + lStart.y + " " + @@ -588,7 +651,6 @@ export default { document.getElementById("rootBoardElement").appendChild(arrowCanvas); }, mousedown: function(e) { - e.preventDefault(); if (!this.mobileBrowser && e.which != 3) // Cancel current drawing and circles, if any this.cancelResetArrows(); @@ -599,45 +661,51 @@ 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 + if (withPiece) e.preventDefault(); // 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); - // 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); + const sq = getSquareFromId(targetId); + this.$emit("click-square", sq); + if (withPiece && !this.vr.onlyClick(sq)) { + this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare); + if (this.possibleMoves.length > 0) { + // 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 + e.preventDefault(); this.containerPos = document.getElementById("gamePosition").getBoundingClientRect(); let elem = e.target; @@ -645,18 +713,14 @@ export default { while (elem.tagName == "IMG") elem = elem.parentNode; this.startArrow = getSquareFromId(elem.id); } + else e.preventDefault(); }, mousemove: function(e) { if (!this.selectedPiece && !this.startArrow) return; // Cancel if off boardContainer const [offsetX, offsetY] = this.mobileBrowser - ? - [ - e.changedTouches[0].pageX, - // TODO: fixing attempt for smartphones, removing window.scrollY - e.changedTouches[0].pageY - window.scrollY - ] + ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY] : [e.clientX, e.clientY]; if ( offsetX < this.containerPos.left || @@ -669,6 +733,8 @@ export default { delete this.selectedPiece; this.selectedPiece = null; this.start = null; + this.possibleMoves = []; //in case of + this.click = ""; let selected = document.querySelector(".ghost"); if (!!selected) selected.classList.remove("ghost"); } @@ -708,15 +774,17 @@ export default { } }, mouseup: function(e) { - e.preventDefault(); if (this.mobileBrowser || e.which == 1) { if (!this.selectedPiece) return; + 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); - } else if (e.which == 3) { + } + else if (e.which == 3) { + e.preventDefault(); if (!this.startArrow) return; // Mouse right button this.movingArrow = null; @@ -734,11 +802,7 @@ export default { // Obtain the move from start and end squares const [offsetX, offsetY] = this.mobileBrowser - ? - [ - e.changedTouches[0].pageX, - e.changedTouches[0].pageY - window.scrollY - ] + ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY] : [e.clientX, e.clientY]; let landing = document.elementFromPoint(offsetX, offsetY); // Next condition: classList.contains(piece) fails because of marks @@ -822,6 +886,9 @@ export default { .svg-line stroke: black +.svg-diag + stroke: grey + .arrow-head fill: #5f0e78 @@ -829,11 +896,15 @@ export default {