X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=56f34880e93dcfd75744a1d68bcb9680382518ae;hb=1ef65040168ab7d55ce921abc9d63644a937d689;hp=0d531a6b4594de3f731bc35a1e2bd46128de915c;hpb=3a2a7b5fd3c6bfd0752838094c27e1fb6172d109;p=vchess.git diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 0d531a6b..56f34880 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -4,7 +4,7 @@ import { ArrayFun } from "@/utils/array"; import { store } from "@/store"; export default { name: "my-board", - // Last move cannot be guessed from here, and is required to highlight squares + // Last move cannot be guessed from here, and is required for highlights. // vr: object to check moves, print board... // userColor is left undefined for an external observer props: [ @@ -24,6 +24,10 @@ export default { choices: [], //promotion pieces, or checkered captures... (as moves) selectedPiece: null, //moving piece (or clicked piece) start: null, //pixels coordinates + id of starting square (click or drag) + startArrow: null, + movingArrow: { x: -1, y: -1 }, + arrows: [], //object of {start: x,y / end: x,y} + circles: {}, //object of squares' ID --> true (TODO: use a set?) click: "", clickTime: 0, settings: store.state.settings @@ -55,6 +59,10 @@ export default { 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; @@ -83,7 +91,7 @@ export default { const gameDiv = h( "div", { - class: { + "class": { game: true, clearer: true } @@ -93,22 +101,23 @@ export default { return h( "div", { - class: { + "class": { row: true }, style: { opacity: this.choices.length > 0 ? "0.5" : "1" } }, [...Array(sizeY).keys()].map(j => { const cj = orientation == "w" ? j : sizeY - j - 1; + const squareId = "sq-" + ci + "-" + cj; let elems = []; if (showPiece(ci, cj)) { elems.push( h("img", { - class: { + "class": { piece: true, ghost: !!this.selectedPiece && - this.selectedPiece.parentNode.id == "sq-" + ci + "-" + cj + this.selectedPiece.parentNode.id == squareId }, attrs: { src: @@ -119,7 +128,7 @@ export default { this.userColor, this.score, this.orientation) + - ".svg" + V.IMAGE_EXTENSION } }) ); @@ -127,7 +136,7 @@ export default { if (this.settings.hints && hintSquares[ci][cj]) { elems.push( h("img", { - class: { + "class": { "mark-square": true }, attrs: { @@ -136,11 +145,23 @@ export default { }) ); } + if (!!this.circles[squareId]) { + elems.push( + h("img", { + "class": { + "circle-square": true + }, + attrs: { + src: "/images/circle.svg" + } + }) + ); + } const lightSquare = (ci + cj) % 2 == lightSquareMod; return h( "div", { - class: { + "class": { board: true, ["board" + sizeY]: true, "light-square": lightSquare, @@ -149,8 +170,10 @@ export default { "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] + "incheck-light": + showCheck && lightSquare && incheckSq[ci][cj], + "incheck-dark": + showCheck && !lightSquare && incheckSq[ci][cj] }, attrs: { id: getSquareId({ x: ci, y: cj }) @@ -172,13 +195,13 @@ export default { h( "div", { - class: { board: true, ["board" + sizeY]: true }, + "class": { board: true, ["board" + sizeY]: true }, attrs: { id: getSquareId({ x: sizeX + shiftIdx, y: i }) }, style: { opacity: qty > 0 ? 1 : 0.35 } }, [ h("img", { - class: { piece: true, reserve: true }, + "class": { piece: true, reserve: true }, attrs: { src: "/images/pieces/" + @@ -186,7 +209,7 @@ export default { ".svg" } }), - h("sup", { class: { "reserve-count": true } }, [ qty ]) + h("sup", { "class": { "reserve-count": true } }, [ qty ]) ] ) ); @@ -199,13 +222,13 @@ export default { h( "div", { - class: { board: true, ["board" + sizeY]: true }, + "class": { board: true, ["board" + sizeY]: true }, attrs: { id: getSquareId({ x: sizeX + (1 - shiftIdx), y: i }) }, style: { opacity: qty > 0 ? 1 : 0.35 } }, [ h("img", { - class: { piece: true, reserve: true }, + "class": { piece: true, reserve: true }, attrs: { src: "/images/pieces/" + @@ -213,7 +236,7 @@ export default { ".svg" } }), - h("sup", { class: { "reserve-count": true } }, [ qty ]) + h("sup", { "class": { "reserve-count": true } }, [ qty ]) ] ) ); @@ -229,7 +252,7 @@ export default { h( "div", { - class: { + "class": { game: true, "reserve-div": true }, @@ -241,7 +264,7 @@ export default { h( "div", { - class: { + "class": { row: true, "reserve-row": true } @@ -254,7 +277,7 @@ export default { h( "div", { - class: { + "class": { game: true, "reserve-div": true }, @@ -266,7 +289,7 @@ export default { h( "div", { - class: { + "class": { row: true, "reserve-row": true } @@ -280,72 +303,177 @@ export default { elementArray.push(gameDiv); if (!!this.vr.reserve) elementArray.push(reserveBottom); const boardElt = document.querySelector(".game"); + // boardElt might be undefine (at first drawing), + // but it won't be used in this case. + const squareWidth = (!!boardElt ? boardElt.offsetWidth / sizeY : 42); if (this.choices.length > 0 && !!boardElt) { // No choices to show at first drawing - const squareWidth = boardElt.offsetWidth / sizeY; const offset = [boardElt.offsetTop, boardElt.offsetLeft]; - // TODO: multi-rows if more than V.size.y pieces (as inEightpieces) + 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 }, + "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 - 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.play(m); - this.choices = []; - }; - const onClick = - this.mobileBrowser - ? { touchend: applyMove } - : { mouseup: applyMove }; - 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.getPPpath( - m.appear[0].c + m.appear[0].p, - // Extra arg useful for some variants: - this.orientation) + - ".svg" + [ h( + "div", + { + "class": { "full-width": true } + }, + 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: onClick - }) - ] - ); - }) + style: { + width: (100 / maxNbeltsPerRow) + "%", + "padding-bottom": (100 / maxNbeltsPerRow) + "%" + } + }, + [ + h("img", { + attrs: { + src: + "/images/pieces/" + + // orientation: extra arg useful for some variants: + this.vr.getPPpath(m, this.orientation) + + V.IMAGE_EXTENSION + }, + "class": { "choice-piece": true }, + on: onClick + }) + ] + ); + }) + ) ] ); elementArray.unshift(choices); } + if ( + !this.mobileBrowser && + (this.arrows.length > 0 || this.movingArrow.x >= 0) + ) { + let svgArrows = []; + const arrowWidth = squareWidth / 4; + this.arrows.forEach(a => { + const endPoint = this.adjustEndArrow(a.start, a.end, squareWidth); + svgArrows.push( + h( + "path", + { + "class": { "svg-arrow": true }, + attrs: { + d: ( + "M" + a.start.x + "," + a.start.y + " " + + "L" + endPoint.x + "," + endPoint.y + ), + style: "stroke-width:" + arrowWidth + "px" + } + } + ) + ); + }); + if (this.movingArrow.x >= 0) { + const endPoint = + this.adjustEndArrow(this.startArrow, this.movingArrow, squareWidth); + svgArrows.push( + h( + "path", + { + "class": { "svg-arrow": true }, + attrs: { + d: ( + "M" + this.startArrow.x + "," + this.startArrow.y + " " + + "L" + endPoint.x + "," + endPoint.y + ), + style: "stroke-width:" + arrowWidth + "px" + } + } + ) + ); + } + // Add SVG element for drawing arrows + elementArray.push( + h( + "svg", + { + attrs: { + id: "arrowCanvas", + stroke: "none" + } + }, + [ + h( + "defs", + {}, + [ + h( + "marker", + { + attrs: { + id: "arrow", + markerWidth: (2 * arrowWidth) + "px", + markerHeight: (3 * arrowWidth) + "px", + markerUnits: "userSpaceOnUse", + refX: "0", + refY: (1.5 * arrowWidth) + "px", + orient: "auto" + } + }, + [ + h( + "path", + { + "class": { "arrow-head": true }, + attrs: { + d: ( + "M0,0 L0," + (3 * arrowWidth) + " L" + + (2 * arrowWidth) + "," + (1.5 * arrowWidth) + " z" + ) + } + } + ) + ] + ) + ] + ) + ].concat(svgArrows) + ) + ); + } let onEvents = {}; // NOTE: click = mousedown + mouseup if (this.mobileBrowser) { @@ -361,74 +489,141 @@ export default { on: { mousedown: this.mousedown, mousemove: this.mousemove, - mouseup: this.mouseup + mouseup: this.mouseup, + contextmenu: this.blockContextMenu } }; } return h("div", onEvents, elementArray); }, methods: { + blockContextMenu: function(e) { + e.preventDefault(); + e.stopPropagation(); + return false; + }, + cancelResetArrows: function() { + this.startArrow = null; + this.arrows = []; + this.circles = {}; + }, + adjustEndArrow: function(start, end, squareWidth) { + // Simple heuristic for now, just remove 1/3 square. + // TODO: should depend on the orientation. + const delta = [end.x - start.x, end.y - start.y]; + const dist = Math.sqrt(delta[0] * delta[0] + delta[1] * delta[1]); + const fracSqWidth = squareWidth / 3; + return { + x: end.x - delta[0] * fracSqWidth / dist, + y: end.y - delta[1] * fracSqWidth / dist + }; + }, mousedown: function(e) { 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 = { + if (!this.mobileBrowser && e.which != 3) + // Cancel current drawing and circles, if any + this.cancelResetArrows(); + if (this.mobileBrowser || e.which == 1) { + // Mouse left button + if (!this.start) { + // 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 + // 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) + 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); + } else { + this.processMoveAttempt(e); + } + } else if (e.which == 3) { + // Mouse right button + let elem = e.target; + // Next loop because of potential marks + while (elem.tagName == "IMG") elem = elem.parentNode; + // To center the arrow in square: + const rect = elem.getBoundingClientRect(); + this.startArrow = { x: rect.x + rect.width / 2, y: rect.y + rect.width / 2, - id: parent.id + id: elem.id }; - // Add the moving piece to the board, just after current image - this.selectedPiece = e.target.cloneNode(); + } + }, + mousemove: function(e) { + if (!this.selectedPiece && !this.startArrow) return; + e.preventDefault(); + if (!!this.selectedPiece) { + // There is an active element: move it around + const [offsetX, offsetY] = + this.mobileBrowser + ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY] + : [e.clientX, e.clientY]; Object.assign( this.selectedPiece.style, { - position: "absolute", - top: 0, - display: "inline-block", - zIndex: 3000 + left: offsetX - this.start.x + "px", + top: offsetY - this.start.y + "px" } ); - 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] = - 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" + else { + let elem = e.target; + // Next loop because of potential marks + while (elem.tagName == "IMG") elem = elem.parentNode; + // To center the arrow in square: + if (elem.id != this.startArrow.id) { + const rect = elem.getBoundingClientRect(); + this.movingArrow = { + x: rect.x + rect.width / 2, + y: rect.y + rect.width / 2 + }; } - ); + } }, mouseup: function(e) { - 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); + if (this.mobileBrowser || e.which == 1) { + if (!this.selectedPiece) return; + // 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) { + // Mouse right button + this.movingArrow = { x: -1, y: -1 }; + this.processArrowAttempt(e); + } }, processMoveAttempt: function(e) { // Obtain the move from start and end squares @@ -459,6 +654,31 @@ export default { } else if (moves.length == 1) this.play(moves[0]); // else: forbidden move attempt }, + processArrowAttempt: function(e) { + // Obtain the arrow from start and end squares + const [offsetX, offsetY] = [e.clientX, e.clientY]; + let landing = document.elementFromPoint(offsetX, offsetY); + // Next condition: classList.contains(piece) fails because of marks + while (landing.tagName == "IMG") landing = landing.parentNode; + if (this.startArrow.id == landing.id) + // Draw (or erase) a circle + this.$set(this.circles, landing.id, !this.circles[landing.id]); + else { + // OK: add arrow, landing is a new square + const rect = landing.getBoundingClientRect(); + this.arrows.push({ + start: { + x: this.startArrow.x, + y: this.startArrow.y + }, + end: { + x: rect.x + rect.width / 2, + y: rect.y + rect.width / 2 + } + }); + } + this.startArrow = null; + }, findMatchingMoves: function(endSquare) { // Run through moves list and return the matching set (if promotions...) return ( @@ -475,16 +695,16 @@ export default {