From 83c6c2c96e7d34c79db20827f56b51040ef39392 Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Thu, 13 Feb 2020 19:17:16 +0100 Subject: [PATCH] Some style improvements --- client/public/index.html | 6 ------ client/src/App.vue | 4 +++- client/src/components/Board.vue | 30 +++++++++++++++++++++++++----- 3 files changed, 28 insertions(+), 12 deletions(-) diff --git a/client/public/index.html b/client/public/index.html index ab456c20..861b8c3e 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -10,12 +10,6 @@ href="//cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.1/mini-default.min.css"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700"> - <style> - body { - --fore-color: #2c3e50; - --back-color: #f2f2f2; - } - </style> </head> <body> <div id="app"></div> diff --git a/client/src/App.vue b/client/src/App.vue index 1ead6cb5..4cd1124f 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -84,13 +84,15 @@ export default { <style lang="sass"> html, * font-family: "Open Sans", Arial, sans-serif - --back-color: #f2f2f2 --a-link-color: black --a-visited-color: black body padding: 0 min-width: 320px + --fore-color: #1c1e10 //#2c3e50 + //--back-color: #f2f2f2 + background-image: radial-gradient(white, #e6e6ff) //lavender) #app -webkit-font-smoothing: antialiased diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index ddc13731..8d429a34 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -14,6 +14,7 @@ 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, }; }, @@ -281,26 +282,30 @@ export default { e.preventDefault(); //disable native drag & drop 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 = 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); + 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) { @@ -310,6 +315,12 @@ 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 @@ -321,7 +332,7 @@ export default { if (!this.selectedPiece) return; e = e || window.event; - // Read drop target (or parentElement, parentNode... if type == "img") + // 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] @@ -336,6 +347,12 @@ 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 let endSquare = getSquareFromId(landing.id); let moves = this.findMatchingMoves(endSquare); @@ -447,6 +464,9 @@ img.ghost .incheck background-color: #cc3300 !important +.selected + background-color: #f7acf7 !important + .light-square.lichess background-color: #f0d9b5; .dark-square.lichess -- 2.44.0