X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=b7b7f11053558ba68f36d79f3e060f43f45a5837;hb=2d4ec1779f50f6a479276edc9297b4323e0d42bb;hp=4123defa800e3a02fc254c9ea645e1f9618ec53b;hpb=f51c37cf24a7d695cdd51a3b0298a8ff64c3963a;p=vchess.git diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 4123defa..b7b7f110 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -2,7 +2,6 @@ import { getSquareId, getSquareFromId } from "@/utils/squareId"; 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 @@ -41,45 +40,9 @@ export default { const squareWidth = (!!boardElt ? boardElt.offsetWidth / sizeY : 40); //arbitrary value (not relevant) - const choices = h( - 'div', - { - attrs: { "id": "choices" }, - 'class': { 'row': true }, - style: { - "display": (this.choices.length > 0 ? "block" : "none"), - "top": ((sizeY/2)*squareWidth+squareWidth/2) + "px", - "width": (this.choices.length * squareWidth) + "px", - "height": squareWidth + "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/' + - V.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' }, - 'class': { 'choice-piece': true }, - on: { - "click": e => { this.play(m); this.choices=[]; }, - // NOTE: add 'touchstart' event to fix a problem on smartphones - "touchstart": e => { this.play(m); this.choices=[]; }, - }, - }) - ] - ); - }) - ); + const offset = (!!boardElt + ? [boardElt.offsetTop, boardElt.offsetLeft] + : [0, 0]); // Create board element (+ reserves if needed by variant or mode) const lm = this.lastMove; const showLight = this.settings.highlight && this.vname != "Dark"; @@ -167,7 +130,48 @@ export default { }) ); const playingColor = this.userColor || "w"; //default for an observer - let elementArray = [choices, gameDiv]; + let elementArray = [gameDiv]; + if (this.choices.length > 0) + { + const choices = h( + 'div', + { + attrs: { "id": "choices" }, + 'class': { 'row': true }, + style: { + "top": (offset[0] + (sizeY/2)*squareWidth-squareWidth/2) + "px", + "left": (offset[1] + squareWidth*(sizeY - this.choices.length)/2) + "px", + "width": (this.choices.length * squareWidth) + "px", + "height": squareWidth + "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/' + + V.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' }, + 'class': { 'choice-piece': true }, + on: { + "click": e => { this.play(m); this.choices=[]; }, + }, + }) + ] + ); + }) + ); + elementArray.unshift(choices); + } if (!!this.vr.reserve) { const shiftIdx = (playingColor=="w" ? 0 : 1); @@ -243,19 +247,31 @@ export default { ); elementArray.push(reserves); } - return h( - 'div', - { - // NOTE: click = mousedown + mouseup + let onEvents = {}; + // NOTE: click = mousedown + mouseup + if ('ontouchstart' in window) + { + onEvents = { on: { - mousedown: this.mousedown, - mousemove: this.mousemove, - mouseup: this.mouseup, touchstart: this.mousedown, touchmove: this.mousemove, touchend: this.mouseup, }, - }, + }; + } + else + { + onEvents = { + on: { + mousedown: this.mousedown, + mousemove: this.mousemove, + mouseup: this.mouseup, + }, + }; + } + return h( + 'div', + onEvents, elementArray ); }, @@ -278,26 +294,28 @@ export default { e.preventDefault(); //disable native drag & drop if (!this.selectedPiece && e.target.classList.contains("piece")) { + let parent = e.target.parentNode; // Next few lines to center the piece on mouse cursor - let rect = e.target.parentNode.getBoundingClientRect(); + let rect = parent.getBoundingClientRect(); this.start = { x: rect.x + rect.width/2, y: rect.y + rect.width/2, - id: e.target.parentNode.id + id: parent.id }; this.selectedPiece = e.target.cloneNode(); - this.selectedPiece.style.position = "absolute"; - this.selectedPiece.style.top = 0; - this.selectedPiece.style.display = "inline-block"; - this.selectedPiece.style.zIndex = 3000; - const startSquare = getSquareFromId(e.target.parentNode.id); + 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) - e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling); + parent.insertBefore(this.selectedPiece, e.target.nextSibling); } }, mousemove: function(e) { @@ -318,7 +336,6 @@ export default { if (!this.selectedPiece) return; e = e || window.event; - // Read drop target (or parentElement, parentNode... if type == "img") this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords const [offsetX,offsetY] = !!e.clientX ? [e.clientX,e.clientY] @@ -333,7 +350,7 @@ export default { // A click: selectedPiece and possibleMoves are already filled return; } - // OK: process move attempt + // OK: process move attempt, landing is a square node let endSquare = getSquareFromId(landing.id); let moves = this.findMatchingMoves(endSquare); this.possibleMoves = []; @@ -374,24 +391,6 @@ export default { // NOTE: no variants with reserve of size != 8 -div.board - float: left - height: 0 - display: inline-block - position: relative - -div.board8 - width: 12.5% - padding-bottom: 12.5% - -div.board10 - width: 10% - padding-bottom: 10% - -div.board11 - width: 9.09% - padding-bottom: 9.1% - .game width: 100% margin: 0 @@ -399,8 +398,8 @@ div.board11 cursor: pointer #choices - margin: 0 auto 0 auto - position: relative + margin: 0 + position: absolute z-index: 300 overflow-y: inherit background-color: rgba(0,0,0,0) @@ -414,22 +413,6 @@ div.board11 height: auto display: block -img.piece - width: 100% - -img.piece, img.mark-square - max-width: 100% - height: auto - display: block - -img.mark-square - opacity: 0.6 - width: 76% - position: absolute - top: 12% - left: 12% - opacity: .7 - img.ghost position: absolute opacity: 0.4 @@ -438,9 +421,6 @@ img.ghost .highlight background-color: #00cc66 !important -.in-shadow - filter: brightness(50%) - .incheck background-color: #cc3300 !important