X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=71cac153d9d11b93e73352310c1643baf899448b;hb=2c5d7b20742b802d9c47916915c1114bcfc9a9c3;hp=5080e846b650d098cc6674f2aa26db96177d9e2f;hpb=28b32b4fc7c23b1c72bed68e1897576c5be46c3d;p=vchess.git diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 5080e846..71cac153 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: [ @@ -25,6 +25,7 @@ export default { selectedPiece: null, //moving piece (or clicked piece) start: null, //pixels coordinates + id of starting square (click or drag) click: "", + clickTime: 0, settings: store.state.settings }; }, @@ -54,6 +55,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; @@ -82,7 +87,7 @@ export default { const gameDiv = h( "div", { - class: { + "class": { game: true, clearer: true } @@ -92,7 +97,7 @@ export default { return h( "div", { - class: { + "class": { row: true }, style: { opacity: this.choices.length > 0 ? "0.5" : "1" } @@ -103,7 +108,7 @@ export default { if (showPiece(ci, cj)) { elems.push( h("img", { - class: { + "class": { piece: true, ghost: !!this.selectedPiece && @@ -112,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 } }) ); @@ -121,7 +131,7 @@ export default { if (this.settings.hints && hintSquares[ci][cj]) { elems.push( h("img", { - class: { + "class": { "mark-square": true }, attrs: { @@ -134,7 +144,7 @@ export default { return h( "div", { - class: { + "class": { board: true, ["board" + sizeY]: true, "light-square": lightSquare, @@ -143,8 +153,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 }) @@ -166,13 +178,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/" + @@ -180,7 +192,7 @@ export default { ".svg" } }), - h("sup", { class: { "reserve-count": true } }, [ qty ]) + h("sup", { "class": { "reserve-count": true } }, [ qty ]) ] ) ); @@ -193,13 +205,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/" + @@ -207,7 +219,7 @@ export default { ".svg" } }), - h("sup", { class: { "reserve-count": true } }, [ qty ]) + h("sup", { "class": { "reserve-count": true } }, [ qty ]) ] ) ); @@ -223,7 +235,7 @@ export default { h( "div", { - class: { + "class": { game: true, "reserve-div": true }, @@ -235,7 +247,7 @@ export default { h( "div", { - class: { + "class": { row: true, "reserve-row": true } @@ -248,7 +260,7 @@ export default { h( "div", { - class: { + "class": { game: true, "reserve-div": true }, @@ -260,7 +272,7 @@ export default { h( "div", { - class: { + "class": { row: true, "reserve-row": true } @@ -275,57 +287,79 @@ export default { 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 }, + "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", + { + "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: { - click: () => { - this.play(m); - this.choices = []; - } + 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); } @@ -436,8 +470,10 @@ export default { 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]); + 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) { @@ -456,16 +492,16 @@ export default {