From: Benjamin Auder <benjamin.auder@somewhere>
Date: Tue, 21 Apr 2020 13:10:35 +0000 (+0200)
Subject: Adjustments + add en-passant to Zen rules
X-Git-Url: https://git.auder.net/doc/html/css/%7B%7B%20path%28%27mixstore_static_policy%27%29%20%7D%7D?a=commitdiff_plain;h=ffeaef854d80445ef87f2cdf4fe71d60347a81bf;p=vchess.git

Adjustments + add en-passant to Zen rules
---

diff --git a/TODO b/TODO
index 9c3992c7..0e5d0fd2 100644
--- a/TODO
+++ b/TODO
@@ -25,8 +25,11 @@ https://www.chessvariants.com/mvopponent.dir/mesmer-chess.html
 
 =====
 
+fanorona https://fr.wikipedia.org/wiki/Fanorona
+Yoté https://fr.wikipedia.org/wiki/Yot%C3%A9 http://www.zillionsofgames.com/cgi-bin/zilligames/submissions.cgi/92187?do=show;id=960
 gess https://en.wikipedia.org/wiki/Gess
 weiqi (check if landed stone captures, walk on connected components), go13, go9, gomoku, reversi
+  first click show the stone, second click confirm the move?
 avalam, qoridor, xiangqi, draughts, draughts8
 (puis quand hexaboards peut-être: hexavariants + Hex)
 Byo-yomi possible: 1h+b15,5m (15 pierres 5 minutes)
diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index 41398625..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 ]
+              )
             ]
           )
         );
@@ -831,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
 
@@ -867,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
@@ -877,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?
 
diff --git a/client/src/styles/_board_squares_img.sass b/client/src/styles/_board_squares_img.sass
index cbb2c346..5e46b538 100644
--- a/client/src/styles/_board_squares_img.sass
+++ b/client/src/styles/_board_squares_img.sass
@@ -39,23 +39,26 @@ div.board12
 
 img.piece
   width: 100%
+  z-index: 10
 
 img.piece, img.mark-square, img.circle-square
   max-width: 100%
   height: auto
   display: block
 
+img.mark-square, img.circle-square
+  position: absolute
+  z-index: 20
+
 img.mark-square
   opacity: .7
   width: 76%
-  position: absolute
   top: 12%
   left: 12%
 
 img.circle-square
   opacity: 0.7
   width: 100%
-  position: absolute
   top: 0
   left: 0
 
diff --git a/client/src/variants/Shatranj.js b/client/src/variants/Shatranj.js
index d8e4460e..7aab305e 100644
--- a/client/src/variants/Shatranj.js
+++ b/client/src/variants/Shatranj.js
@@ -13,6 +13,10 @@ export class ShatranjRules extends ChessRules {
     return true;
   }
 
+  static get Notoodark() {
+    return true;
+  }
+
   static get PawnSpecs() {
     return Object.assign(
       {},
diff --git a/client/src/variants/Sittuyin.js b/client/src/variants/Sittuyin.js
index 61bab569..0ddf74c9 100644
--- a/client/src/variants/Sittuyin.js
+++ b/client/src/variants/Sittuyin.js
@@ -14,6 +14,10 @@ export class SittuyinRules extends ChessRules {
     return true;
   }
 
+  static get Notoodark() {
+    return true;
+  }
+
   static get Lines() {
     return ChessRules.Lines.concat([
       [[0, 0], [8, 8]],
diff --git a/client/src/variants/Zen.js b/client/src/variants/Zen.js
index ff562d0a..0424e07f 100644
--- a/client/src/variants/Zen.js
+++ b/client/src/variants/Zen.js
@@ -1,9 +1,29 @@
 import { ChessRules } from "@/base_rules";
 
 export class ZenRules extends ChessRules {
-  // NOTE: enPassant, if enabled, would need to redefine carefully getEpSquare
-  static get HasEnpassant() {
-    return false;
+  getEpSquare(moveOrSquare) {
+    if (!moveOrSquare) return undefined;
+    if (typeof moveOrSquare === "string") {
+      const square = moveOrSquare;
+      if (square == "-") return undefined;
+      return V.SquareToCoords(square);
+    }
+    const move = moveOrSquare;
+    const s = move.start,
+          e = move.end;
+    if (
+      // Exclude captures (of rooks for example)
+      move.vanish.length == 1 &&
+      s.y == e.y &&
+      Math.abs(s.x - e.x) == 2 &&
+      move.appear[0].p == V.PAWN
+    ) {
+      return {
+        x: (s.x + e.x) / 2,
+        y: s.y
+      };
+    }
+    return undefined;
   }
 
   // TODO(?): some duplicated code in 2 next functions