X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=7f2e43e4c343ee1cc9810eb41f869c022daeeed5;hb=ffeaef854d80445ef87f2cdf4fe71d60347a81bf;hp=29c00645ad0c0211fe8cd1cebe8e756a748d6205;hpb=107dc1bd5361e2538b1551bdcc37c1e90a444b83;p=vchess.git

diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index 29c00645..7f2e43e4 100644
--- a/client/src/components/Board.vue
+++ b/client/src/components/Board.vue
@@ -121,27 +121,28 @@ export default {
             const squareId = "sq-" + ci + "-" + cj;
             let elems = [];
             if (showPiece(ci, cj)) {
-              elems.push(
-                h("img", {
-                  "class": {
-                    piece: true,
-                    ghost:
-                      !!this.selectedPiece &&
-                      this.selectedPiece.parentNode.id == squareId
-                  },
-                  attrs: {
-                    src:
-                      "/images/pieces/" +
-                      this.vr.getPpath(
-                        this.vr.board[ci][cj],
-                        // Extra args useful for some variants:
-                        this.userColor,
-                        this.score,
-                        this.orientation) +
-                      V.IMAGE_EXTENSION
-                  }
-                })
-              );
+              let pieceSpecs = {
+                "class": {
+                  piece: true,
+                  ghost:
+                    !!this.selectedPiece &&
+                    this.selectedPiece.parentNode.id == squareId
+                },
+                attrs: {
+                  src:
+                    "/images/pieces/" +
+                    this.vr.getPpath(
+                      this.vr.board[ci][cj],
+                      // Extra args useful for some variants:
+                      this.userColor,
+                      this.score,
+                      this.orientation) +
+                    V.IMAGE_EXTENSION
+                }
+              };
+              if (this.arrows.length == 0)
+                pieceSpecs["style"] = { position: "absolute" };
+              elems.push(h("img", pieceSpecs));
             }
             if (this.settings.hints && hintSquares[ci][cj]) {
               elems.push(
@@ -174,12 +175,16 @@ export default {
                 "class": {
                   board: true,
                   ["board" + sizeY]: true,
-                  "light-square": lightSquare && !V.Monochrome,
-                  "dark-square": !lightSquare || !!V.Monochrome,
+                  "light-square":
+                    !V.Notoodark && lightSquare && !V.Monochrome,
+                  "dark-square":
+                    !V.Notoodark && (!lightSquare || !!V.Monochrome),
+                  "middle-square": V.Notoodark,
                   [this.settings.bcolor]: true,
                   "in-shadow": inShadow(ci, cj),
                   "highlight-light": inHighlight(ci, cj) && lightSquare,
-                  "highlight-dark": inHighlight(ci, cj) && !lightSquare,
+                  "highlight-dark":
+                    inHighlight(ci, cj) && (V.Monochrome || !lightSquare),
                   "incheck-light":
                     showCheck && lightSquare && incheckSq[ci][cj],
                   "incheck-dark":
@@ -213,6 +218,7 @@ export default {
             },
             [
               h("img", {
+                // NOTE: class "reserve" not used currently
                 "class": { piece: true, reserve: true },
                 attrs: {
                   src:
@@ -221,7 +227,14 @@ export default {
                     ".svg"
                 }
               }),
-              h("sup", { "class": { "reserve-count": true } }, [ qty ])
+              h(
+                "sup",
+                {
+                  "class": { "reserve-count": true },
+                  style: { top: "calc(100% + 5px)" }
+                },
+                [ qty ]
+              )
             ]
           )
         );
@@ -248,7 +261,14 @@ export default {
                     ".svg"
                 }
               }),
-              h("sup", { "class": { "reserve-count": true } }, [ qty ])
+              h(
+                "sup",
+                {
+                  "class": { "reserve-count": true },
+                  style: { top: "calc(100% + 5px)" }
+                },
+                [ qty ]
+              )
             ]
           )
         );
@@ -592,11 +612,11 @@ export default {
       if (!this.mobileBrowser && e.which != 3)
         // Cancel current drawing and circles, if any
         this.cancelResetArrows();
-      this.containerPos =
-        document.getElementById("boardContainer").getBoundingClientRect();
       if (this.mobileBrowser || e.which == 1) {
         // Mouse left button
         if (!this.start) {
+          this.containerPos =
+            document.getElementById("boardContainer").getBoundingClientRect();
           // NOTE: classList[0] is enough: 'piece' is the first assigned class
           const withPiece = (e.target.classList[0] == "piece");
           // Emit the click event which could be used by some variants
@@ -638,6 +658,8 @@ export default {
         }
       } else if (e.which == 3) {
         // Mouse right button
+        this.containerPos =
+          document.getElementById("gamePosition").getBoundingClientRect();
         let elem = e.target;
         // Next loop because of potential marks
         while (elem.tagName == "IMG") elem = elem.parentNode;
@@ -662,8 +684,23 @@ export default {
         offsetY < this.containerPos.top ||
         offsetY > this.containerPos.bottom
       ) {
-        this.selectedPiece = null;
-        this.startArrow = null;
+        if (!!this.selectedPiece) {
+          this.selectedPiece.parentNode.removeChild(this.selectedPiece);
+          delete this.selectedPiece;
+          this.selectedPiece = null;
+          this.start = null;
+          this.possibleMoves = []; //in case of
+          this.click = "";
+          let selected = document.querySelector(".ghost");
+          if (!!selected) selected.classList.remove("ghost");
+        }
+        else {
+          this.startArrow = null;
+          this.movingArrow = null;
+          const currentArrow = document.getElementById("currentArrow");
+          if (!!currentArrow)
+            currentArrow.parentNode.removeChild(currentArrow);
+        }
         return;
       }
       e.preventDefault();
@@ -702,6 +739,7 @@ export default {
         this.selectedPiece = null;
         this.processMoveAttempt(e);
       } else if (e.which == 3) {
+        if (!this.startArrow) return;
         // Mouse right button
         this.movingArrow = null;
         this.processArrowAttempt(e);
@@ -813,11 +851,15 @@ export default {
 <style lang="sass" scoped>
 @import "@/styles/_board_squares_img.sass";
 
-// NOTE: no variants with reserve of size != 8
-.game.reserve-div
-  margin-bottom: 18px
+//.game.reserve-div
+  // TODO: would be cleaner to restrict width so that it doesn't overflow
+  // Commented out because pieces would disappear over the board otherwise:
+  //overflow: hidden
 .reserve-count
-  padding-left: 40%
+  width: 100%
+  text-align: center
+  display: inline-block
+  position: absolute
 .reserve-row
   margin-bottom: 15px
 
@@ -849,6 +891,7 @@ export default {
       display: block
 
 img.ghost
+  // NOTE: no need to set z-index here, since opacity is low
   position: absolute
   opacity: 0.5
   top: 0
@@ -859,19 +902,28 @@ img.ghost
   background-color: rgba(204, 51, 0, 0.9) !important
 
 .light-square.lichess
-  background-color: #f0d9b5;
+  background-color: #f0d9b5
 .dark-square.lichess
-  background-color: #b58863;
+  background-color: #b58863
 
 .light-square.chesscom
-  background-color: #e5e5ca;
+  background-color: #e5e5ca
 .dark-square.chesscom
-  background-color: #6f8f57;
+  background-color: #6f8f57
 
 .light-square.chesstempo
-  background-color: #dfdfdf;
+  background-color: #dfdfdf
 .dark-square.chesstempo
-  background-color: #7287b6;
+  background-color: #7287b6
+
+.middle-square.lichess
+  background-color: #D3B18C
+
+.middle-square.chesscom
+  background-color: #AABA91
+
+.middle-square.chesstempo
+  background-color: #A9B3CB
 
 // TODO: no predefined highlight colors, but layers. How?