X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=8b570952de5cc36eac05eadf9d2e16c7e80354f0;hb=8e44d3a3982a536240ae576df0eafcc8a16f23c5;hp=1c259f9a28f292e78f62799870bd0d982be2f92b;hpb=89021f181ac0689bbc785ce0ebd9a910e66352b0;p=vchess.git diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 1c259f9a..8b570952 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -14,7 +14,6 @@ export default { choices: [], //promotion pieces, or checkered captures... (as moves) selectedPiece: null, //moving piece (or clicked piece) start: {}, //pixels coordinates + id of starting square (click or drag) - currentSquare: null, settings: store.state.settings, }; }, @@ -76,8 +75,6 @@ export default { '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=[]; }, }, }) ] @@ -255,9 +252,9 @@ export default { mousedown: this.mousedown, mousemove: this.mousemove, mouseup: this.mouseup, - touchstart: this.mousedown, +// touchstart: this.mousedown, touchmove: this.mousemove, - touchend: this.mouseup, +// touchend: this.mouseup, }, }, elementArray @@ -283,9 +280,6 @@ export default { if (!this.selectedPiece && e.target.classList.contains("piece")) { let parent = e.target.parentNode; - // Mark selected square - this.currentSquare = parent; - this.currentSquare.classList.add("selected"); // Next few lines to center the piece on mouse cursor let rect = parent.getBoundingClientRect(); this.start = { @@ -294,10 +288,11 @@ export default { 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; + 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); @@ -315,12 +310,6 @@ export default { // If there is an active element, move it around if (!!this.selectedPiece) { - // Mousemove => drag & drop, no need to keep initial square highlighted - if (!!this.currentSquare) - { - this.currentSquare.classList.remove("selected"); - this.currentSquare = null; - } const [offsetX,offsetY] = !!e.clientX ? [e.clientX,e.clientY] //desktop browser : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone @@ -332,7 +321,6 @@ export default { if (!this.selectedPiece) return; e = e || window.event; - // Read drop target (or iterate 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] @@ -347,13 +335,7 @@ export default { // A click: selectedPiece and possibleMoves are already filled return; } - // Reset initial square color (if not mousemove: smartphone) - if (!!this.currentSquare) - { - this.currentSquare.classList.remove("selected"); - this.currentSquare = null; - } - // 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 = []; @@ -427,9 +409,6 @@ img.ghost .incheck background-color: #cc3300 !important -.selected - background-color: #f7acf7 !important - .light-square.lichess background-color: #f0d9b5; .dark-square.lichess