X-Git-Url: https://git.auder.net/images/pieces/current/gitweb.js?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=377013a1e5eb95223af6cfd0bccc5bc6d5a771b9;hb=bd76b45611cbb58dcf774745a4d690277a82aacd;hp=5bc8ec250bc9a077d817773feaab6c50d05abf31;hpb=168a5e4cb38413c58d6beae083014eb67dba6b97;p=vchess.git diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 5bc8ec25..377013a1 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 @@ -282,26 +281,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) { @@ -322,7 +323,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] @@ -337,7 +337,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 = []; @@ -378,24 +378,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 @@ -418,22 +400,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 @@ -442,9 +408,6 @@ img.ghost .highlight background-color: #00cc66 !important -.in-shadow - filter: brightness(50%) - .incheck background-color: #cc3300 !important