Cosmetics

[vchess.git] / client / src / components / Board.vue

diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index 640ccca..cf3d3e6 100644 (file)
--- a/client/src/components/Board.vue
+++ b/client/src/components/Board.vue
@@ -19,6 +19,7 @@ export default {
   ],
   data: function() {
     return {
+      mobileBrowser: ("ontouchstart" in window),
       possibleMoves: [], //filled after each valid click/dragstart
       choices: [], //promotion pieces, or checkered captures... (as moves)
       selectedPiece: null, //moving piece (or clicked piece)
@@ -48,7 +49,10 @@ export default {
     });
 
     const lm = this.lastMove;
-    const showLight = this.settings.highlight && V.ShowMoves == "all";
+    const showLight = (
+      this.settings.highlight &&
+      ["all","highlight"].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;
@@ -289,7 +293,7 @@ export default {
     }
     let onEvents = {};
     // NOTE: click = mousedown + mouseup
-    if ("ontouchstart" in window) {
+    if (this.mobileBrowser) {
       onEvents = {
         on: {
           touchstart: this.mousedown,
@@ -340,9 +344,10 @@ export default {
     mousemove: function(e) {
       if (!this.selectedPiece) return;
       // There is an active element: move it around
-      const [offsetX, offsetY] = e.clientX
-        ? [e.clientX, e.clientY] //desktop browser
-        : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone
+      const [offsetX, offsetY] =
+        this.mobileBrowser
+          ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY]
+          : [e.clientX, e.clientY];
       this.selectedPiece.style.left = offsetX - this.start.x + "px";
       this.selectedPiece.style.top = offsetY - this.start.y + "px";
     },
@@ -350,9 +355,10 @@ export default {
       if (!this.selectedPiece) return;
       // There is an active element: obtain the move from start and end squares
       this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords
-      const [offsetX, offsetY] = e.clientX
-        ? [e.clientX, e.clientY]
-        : [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
+      const [offsetX, offsetY] =
+        this.mobileBrowser
+          ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY]
+          : [e.clientX, e.clientY];
       let landing = document.elementFromPoint(offsetX, offsetY);
       this.selectedPiece.style.zIndex = 3000;
       // Next condition: classList.contains(piece) fails because of marks