From: Benjamin Auder <benjamin.auder@somewhere>
Date: Thu, 30 Jun 2022 07:56:05 +0000 (+0200)
Subject: Improve diagraming abilities, fix Chakart full rules
X-Git-Url: https://git.auder.net/variants/current/doc/css/pieces/%7B%7B%20targetUrl%20%7D%7D?a=commitdiff_plain;h=549ca151c2c1a5d0c76cc1ab249d1687c5a18f62;p=xogo.git

Improve diagraming abilities, fix Chakart full rules
---

diff --git a/base_rules.js b/base_rules.js
index ad30c0a..16f6d7a 100644
--- a/base_rules.js
+++ b/base_rules.js
@@ -454,7 +454,7 @@ export default class ChessRules {
       this.setFlags(fenParsed.flags);
     if (this.hasEnpassant)
       this.epSquare = this.getEpSquare(fenParsed.enpassant);
-    if (this.hasReserve)
+    if (this.hasReserve && !this.isDiagram)
       this.initReserves(fenParsed.reserve);
     if (this.options["crazyhouse"])
       this.initIspawn(fenParsed.ispawn);
@@ -558,24 +558,14 @@ export default class ChessRules {
   // VISUAL METHODS
 
   graphicalInit() {
-    // NOTE: not window.onresize = this.re_drawBoardElts because scope (this)
-    window.onresize = () => this.re_drawBoardElements();
     const g_init = () => {
       this.re_drawBoardElements();
-      if (!this.isDiagram)
+      if (!this.isDiagram && !this.mouseListeners && !this.touchListeners)
         this.initMouseEvents();
     };
     let container = document.getElementById(this.containerId);
-    if (container.getBoundingClientRect().width == 0) {
-      // Element not ready yet
-      let ro = new ResizeObserver(() => {
-        ro.unobserve(container);
-        g_init();
-      });
-      ro.observe(container);
-    }
-    else
-      g_init();
+    this.windowResizeObs = new ResizeObserver(g_init);
+    this.windowResizeObs.observe(container);
   }
 
   re_drawBoardElements() {
@@ -600,7 +590,7 @@ export default class ChessRules {
       cbHeight = Math.min(rc.height, 767);
       cbWidth = cbHeight * vRatio;
     }
-    if (this.hasReserve) {
+    if (this.hasReserve && !this.isDiagram) {
       const sqSize = cbWidth / this.size.y;
       // NOTE: allocate space for reserves (up/down) even if they are empty
       // Cannot use getReserveSquareSize() here, but sqSize is an upper bound.
@@ -697,7 +687,7 @@ export default class ChessRules {
         }
       }
     }
-    if (this.hasReserve)
+    if (this.hasReserve && !this.isDiagram)
       this.re_drawReserve(['w', 'b'], r);
   }
 
@@ -827,7 +817,7 @@ export default class ChessRules {
         }
       }
     }
-    if (this.hasReserve)
+    if (this.hasReserve && !this.isDiagram)
       this.rescaleReserve(newR);
   }
 
@@ -1010,6 +1000,8 @@ export default class ChessRules {
   }
 
   removeListeners() {
+    let container = document.getElementById(this.containerId);
+    this.windowResizeObs.unobserve(container);
     if (this.isDiagram)
       return; //no listeners in this case
     if ('onmousedown' in window) {
diff --git a/common.css b/common.css
index aed01ae..5ad9428 100644
--- a/common.css
+++ b/common.css
@@ -179,18 +179,22 @@ main > div {
   margin: 20px auto;
   padding: 0 10px;
 }
-.full-rules h2, .full-rules h3, .full-rules h4 {
+.full-rules h1, .full-rules h2, .full-rules h3, .full-rules h4 {
   font-weight: bold;
   display: block;
 }
+.full-rules h1 {
+  font-size: 2.5em;
+  margin: 10px 0 20px 0;
+}
 .full-rules h2 {
   color: darkred;
-  font-size: 2.5em;
+  font-size: 2em;
   margin: 10px 0;
 }
 .full-rules h3 {
   color: darkviolet;
-  font-size: 2em;
+  font-size: 1.8em;
   margin: 10px 0;
 }
 .full-rules h4 {
@@ -199,15 +203,34 @@ main > div {
   margin: 5px 0;
   text-align: center;
 }
+.full-rules figure {
+  display: block;
+  overflow: visible;
+  margin-top: 20px;
+}
+.full-rules figure:after {
+  content: '';
+  display: block;
+  clear: both;
+  margin-bottom: 20px;
+}
 .full-rules .diag {
   position: relative;
-  margin: -30px auto 0 auto;
+  margin: 0 auto;
+}
+.full-rules .left {
+  float: left;
+}
+.full-rules .right {
+  float: right;
 }
 .full-rules figcaption {
   display: block;
   text-align: center;
-  margin-top: -50px;
-  margin-bottom: 30px;
+  clear: both;
+  font-size: 0.9em;
+  color: #0D1C46;
+  font-weight: bold;
 }
 /* TODO: use same CSS for rules and full-rules? */
 .full-rules p, .full-rules ul, .full-rules ol {
@@ -221,40 +244,6 @@ main > div {
   list-style-type: numeric;
   padding-left: 30px;
 }
-/* From vchess to adapt: */
-/*
-figure.diagram-container
-  margin: 15px 0 15px 0
-  text-align: center
-  width: 100%
-  display: block
-  .diagram
-    display: block
-    width: 50%
-    margin-left: auto
-    margin-right: auto
-    @media screen and (max-width: 630px)
-      width: 75%
-  .diag12
-    float: left
-    width: 42%
-    margin: 0 2% 0 6%
-    @media screen and (max-width: 630px)
-      width: 49%
-      margin: 0 1% 0 0
-  .diag22
-    float: left
-    width: 42%
-    margin: 0 6% 0 2%
-    @media screen and (max-width: 630px)
-      width: 49%
-      margin: 0 0 0 1%
-  figcaption
-    display: block
-    clear: both
-    padding-top: 5px
-    font-size: 0.8em
-*/
 
 #ng-select {
   margin-bottom: 20px;
diff --git a/utils/drawDiagrams.js b/utils/drawDiagrams.js
index 4672643..ec55d50 100644
--- a/utils/drawDiagrams.js
+++ b/utils/drawDiagrams.js
@@ -3,35 +3,51 @@ function fenToDiag(vname) {
     window.V = module.default;
     for (const [k, v] of Object.entries(V.Aliases))
       window[k] = v;
-    drawDiagrams();
+    re_drawDiagrams();
   });
 }
 
 // TODO: heuristic to improve for ratio != 1 (how?)
-function getDiagSize() {
-  if (window.innerWidth > 1000)
-    return 500;
-  if (window.innerWidth < 800)
-    return window.innerWidth;
-  return window.innerWidth / 2;
+function getDiagSize(elt) {
+  const baseWidth = Math.min(window.innerWidth, 800);
+  let multFact = 1;
+  if (elt.classList.contains("left") || elt.classList.contains("right"))
+    multFact = 0.45;
+  else if (baseWidth > 630)
+    multFact = 0.5;
+  else
+    multFact = 0.7;
+  return multFact * baseWidth;
 }
 
-function drawDiagrams() {
+let vr = null;
+function re_drawDiagrams() {
   const diagrams = document.getElementsByClassName("diag");
+  if (diagrams.length == 0)
+    return;
+  const redrawing = !!vr;
+  if (!redrawing)
+    vr = new Array(diagrams.length);
   for (let i=0; i<diagrams.length; i++) {
-    let chessboard = document.createElement("div");
-    chessboard.classList.add("chessboard");
-    diagrams[i].appendChild(chessboard);
-    const diagSize = getDiagSize();
+    if (!redrawing) {
+      let chessboard = document.createElement("div");
+      chessboard.classList.add("chessboard");
+      diagrams[i].appendChild(chessboard);
+      diagrams[i].id = "diag_" + i;
+    }
+    const diagSize = getDiagSize(diagrams[i]);
     diagrams[i].style.width = diagSize + "px";
     diagrams[i].style.height = diagSize + "px";
-    diagrams[i].id = "diag_" + i;
-    const vr = new V({
-      element: "diag_" + i,
-      fen: diagrams[i].dataset.fen,
-      color: diagrams[i].dataset.col || 'w',
-      options: {},
-      diagram: true
-    });
+    if (!redrawing) {
+      vr[i] = new V({
+        element: "diag_" + i,
+        fen: diagrams[i].dataset.fen,
+        color: diagrams[i].dataset.col || 'w',
+        options: {},
+        diagram: true
+      });
+    }
   }
 }
+
+window.onresize = re_drawDiagrams;
diff --git a/variants/Chakart/complete_rules.html b/variants/Chakart/complete_rules.html
index b2b1411..da15926 100644
--- a/variants/Chakart/complete_rules.html
+++ b/variants/Chakart/complete_rules.html
@@ -12,17 +12,17 @@
 
 <div>
   <p>
-    Pieces move as usual, but they all hide a special "power" inspired by
-    Mario Kart:
+    Pieces move as usual, but they all hide a special "power"
+    inspired by Mario Kart:
   </p>
   <ul>
     <li>
-      The pawn (Toad) leaves a "turbo" mushroom on its initial square, or on
-      the intermediate one in case of a two squares move.
+      The pawn (Toad) leaves a "turbo" mushroom on its initial square,
+      or on the intermediate one in case of a two squares move.
     </li>
     <li>
-      The knight (Yoshi) let a surprise egg on its initial square. See about
-      egg effect below.
+      The knight (Yoshi) let a surprise egg on its initial square.
+      See about egg effect below.
     </li>
     <li>
       The rook (Donkey) put a banana on a square diagonally adjacent to the
@@ -33,8 +33,8 @@
       arrival one, at random, if possible.
     </li>
     <li>
-      The queen (Mario) can play a stealth move once in the game: the opponent
-      will only know that a queen moved - to an empty square.
+      The queen (Mario) can play a stealth move once in the game:
+      the opponent will only know that a queen moved - to an empty square.
       A promoted queen also has this power if not already used.
     </li>
     <li>
@@ -63,6 +63,7 @@
       A king or a pawn arriving on a mushroom advance one square further,
       while a knight jump another time in the same direction, if possible.
       Pawns can "eat" objects diagonally too.
+      Mushrooms have no effect on sliders (queen, rook, bishop).
     </li>
     <li>
       A piece arriving on a banana (resp. bomb) is redirected at random by one
@@ -70,24 +71,22 @@
       color!) stands on that square, then it is captured.
     </li>
     <li>
-      The effects can cumulate, as illustrated on the diagram: the bishop
-      "captures" the banana on e4, and is then redirected twoard e5: mushroom,
-      it jumps over the black pawn to ends on the bomb on e7, which sends it
-      on d6 (f6 and f8 were possible too). A bomb is finally put on c6 which
-      is the only eligible square. A piece may ends on its initial square,
-      move back, and so on. That being said, a given object can only be used
-      once on the path.
+      The effects can cumulate, as illustrated on the diagram: the pawn
+      "captures" the banana on e4, and is then redirected toward e5: mushroom,
+      it jumps to the next square, which sends it on d5 eating the white rook.
+      (We can imagine that the hope was to eat the black knight instead).
+      A piece may ends on its initial square, move back, and so on. That being
+      said, a given object can only be used once on the path.
     </li>
   </ul>
-  <!-- TODO: class for left/right + adapt diagrams for new rules -->
   <figure>
     <div class="diag left"
-      data-fen='rn1b2qk/pbppwppp/1w2p3/1p1Rm3/3PdnPr/4P1d1/PPP1mP1P/NNB1KRQB b 1 {"flags":"1111"}'>
+      data-fen='rn1b2qk/pbpp1ppp/1w2wp2/1p1Rm3/3PdnPr/4PPd1/PPP1m2P/NNB1KRQB b 1 {"flags":"1111"}'>
     </div>
     <div class="diag right"
-      data-fen='rn1b2qk/pbpp1ppp/1wwBp3/1p1R4/3P1nPr/4P1d1/PPP1mP1P/NNB1KRQ1 w 2 {"flags":"1111"}'>
+      data-fen='rn1b2qk/pbpp1ppp/1w3p2/1p1P4/3P1nPr/4P1d1/PPP1m2P/NNB1KRQB w 2 {"flags":"1111"}'>
     </div>
-    <figcaption>Left: before 1.Bxe4. Right: after the move, ending on d6.</figcaption>
+    <figcaption>Left: before 1.fxe4. Right: after the move, ending on d6.</figcaption>
   </figure>
 </div>