Experimental game upload added

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

diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index cf0a70c..56f3488 100644 (file)
--- a/client/src/components/Board.vue
+++ b/client/src/components/Board.vue
@@ -303,9 +303,9 @@ export default {
     elementArray.push(gameDiv);
     if (!!this.vr.reserve) elementArray.push(reserveBottom);
     const boardElt = document.querySelector(".game");
-    // Square width might be undefine (at first drawing),
+    // boardElt might be undefine (at first drawing),
     // but it won't be used in this case.
-    const squareWidth = boardElt.offsetWidth / sizeY;
+    const squareWidth = (!!boardElt ? boardElt.offsetWidth / sizeY : 42);
     if (this.choices.length > 0 && !!boardElt) {
       // No choices to show at first drawing
       const offset = [boardElt.offsetTop, boardElt.offsetLeft];
@@ -446,10 +446,10 @@ export default {
                     attrs: {
                       id: "arrow",
                       markerWidth: (2 * arrowWidth) + "px",
-                      markerHeight: (2 * arrowWidth) + "px",
+                      markerHeight: (3 * arrowWidth) + "px",
                       markerUnits: "userSpaceOnUse",
                       refX: "0",
-                      refY: arrowWidth + "px",
+                      refY: (1.5 * arrowWidth) + "px",
                       orient: "auto"
                     }
                   },
@@ -460,8 +460,8 @@ export default {
                         "class": { "arrow-head": true },
                         attrs: {
                           d: (
-                            "M0,0 L0," + (2 * arrowWidth) + " " +
-                            "L" + (2 * arrowWidth) + "," + arrowWidth + " z"
+                            "M0,0 L0," + (3 * arrowWidth) + " L" +
+                            (2 * arrowWidth) + "," + (1.5 * arrowWidth) + " z"
                           )
                         }
                       }
@@ -519,12 +519,11 @@ export default {
       };
     },
     mousedown: function(e) {
-      if (!([1, 3].includes(e.which))) return;
       e.preventDefault();
-      if (e.which != 3)
+      if (!this.mobileBrowser && e.which != 3)
         // Cancel current drawing and circles, if any
         this.cancelResetArrows();
-      if (e.which == 1 || this.mobileBrowser) {
+      if (this.mobileBrowser || e.which == 1) {
         // Mouse left button
         if (!this.start) {
           // NOTE: classList[0] is enough: 'piece' is the first assigned class
@@ -566,8 +565,8 @@ export default {
         } else {
           this.processMoveAttempt(e);
         }
-      } else {
-        // e.which == 3 : mouse right button
+      } else if (e.which == 3) {
+        // Mouse right button
         let elem = e.target;
         // Next loop because of potential marks
         while (elem.tagName == "IMG") elem = elem.parentNode;
@@ -612,17 +611,16 @@ export default {
       }
     },
     mouseup: function(e) {
-      if (!([1, 3].includes(e.which))) return;
       e.preventDefault();
-      if (e.which == 1) {
+      if (this.mobileBrowser || e.which == 1) {
         if (!this.selectedPiece) return;
         // Drag'n drop. Selected piece is no longer needed:
         this.selectedPiece.parentNode.removeChild(this.selectedPiece);
         delete this.selectedPiece;
         this.selectedPiece = null;
         this.processMoveAttempt(e);
-      } else {
-        // Mouse right button (e.which == 3)
+      } else if (e.which == 3) {
+        // Mouse right button
         this.movingArrow = { x: -1, y: -1 };
         this.processArrowAttempt(e);
       }