X-Git-Url: https://git.auder.net/img/rock_paper_scissors_lizard_spock.gif?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=48bdd872c38f2a71f1c7797246f21d7f6a33efec;hb=10addfff8239405375a1c99b8582f4d4d8283d0a;hp=7f2e43e4c343ee1cc9810eb41f869c022daeeed5;hpb=ffeaef854d80445ef87f2cdf4fe71d60347a81bf;p=vchess.git

diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index 7f2e43e4..48bdd872 100644
--- a/client/src/components/Board.vue
+++ b/client/src/components/Board.vue
@@ -568,7 +568,11 @@ export default {
             this.coordsToXY(line[1], bPos.top, bPos.left, squareWidth);
           let path =
             document.createElementNS("http://www.w3.org/2000/svg", "path");
-          path.classList.add("svg-line");
+          if (line[0][0] == line[1][0] || line[0][1] == line[1][1])
+            path.classList.add("svg-line");
+          else
+            // "Diagonals" are drawn with a lighter color (TODO: generalize)
+            path.classList.add("svg-diag");
           path.setAttribute(
             "d",
             "M" + lStart.x + "," + lStart.y + " " +
@@ -671,12 +675,7 @@ export default {
       // Cancel if off boardContainer
       const [offsetX, offsetY] =
         this.mobileBrowser
-          ?
-            [
-              e.changedTouches[0].pageX,
-              // TODO: fixing attempt for smartphones, removing window.scrollY
-              e.changedTouches[0].pageY - window.scrollY
-            ]
+          ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY]
           : [e.clientX, e.clientY];
       if (
         offsetX < this.containerPos.left ||
@@ -756,11 +755,7 @@ export default {
       // Obtain the move from start and end squares
       const [offsetX, offsetY] =
         this.mobileBrowser
-          ?
-            [
-              e.changedTouches[0].pageX,
-              e.changedTouches[0].pageY - window.scrollY
-            ]
+          ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY]
           : [e.clientX, e.clientY];
       let landing = document.elementFromPoint(offsetX, offsetY);
       // Next condition: classList.contains(piece) fails because of marks
@@ -844,6 +839,9 @@ export default {
 .svg-line
   stroke: black
 
+.svg-diag
+  stroke: grey
+
 .arrow-head
   fill: #5f0e78
 </style>