Marks on board for diagrams: done

diff --git a/TODO b/TODO
index 0bbf333..1e4eda3 100644 (file)
--- a/TODO
+++ b/TODO
@@ -1,5 +1,3 @@
-allow markers on board for diagrams (add d_pieces to base_rules.js --> all the same purple circle)
-

 add variants :
 Dark Racing Kings ? Checkered-Teleport ?
 
 add variants :
 Dark Racing Kings ? Checkered-Teleport ?
 

diff --git a/base_rules.js b/base_rules.js
index 16f6d7a..54c1220 100644 (file)
--- a/base_rules.js
+++ b/base_rules.js
@@ -416,6 +416,7 @@ export default class ChessRules {
     // Graphical (can use variables defined above)
     this.containerId = o.element;
     this.isDiagram = o.diagram;
     // Graphical (can use variables defined above)
     this.containerId = o.element;
     this.isDiagram = o.diagram;

+    this.marks = o.marks;

     this.graphicalInit();
   }
 
     this.graphicalInit();
   }
 


@@ -647,43 +648,58 @@ export default class ChessRules {
   }
 
   setupPieces(r) {
   }
 
   setupPieces(r) {

-    // TODO: d_pieces : only markers (for diagrams) / also in rescale()
-    if (this.g_pieces) {
-      // Refreshing: delete old pieces first
-      for (let i=0; i<this.size.x; i++) {
-        for (let j=0; j<this.size.y; j++) {
-          if (this.g_pieces[i][j]) {
-            this.g_pieces[i][j].remove();
-            this.g_pieces[i][j] = null;
-          }
-        }
-      }
-    }
-    else
-      this.g_pieces = ArrayFun.init(this.size.x, this.size.y, null);

     let chessboard =
       document.getElementById(this.containerId).querySelector(".chessboard");
     if (!r)
       r = chessboard.getBoundingClientRect();
     const pieceWidth = this.getPieceWidth(r.width);
     let chessboard =
       document.getElementById(this.containerId).querySelector(".chessboard");
     if (!r)
       r = chessboard.getBoundingClientRect();
     const pieceWidth = this.getPieceWidth(r.width);

+    const addPiece = (i, j, arrName, classes) => {
+      this[arrName][i][j] = document.createElement("piece");
+      C.AddClass_es(this[arrName][i][j], classes);
+      this[arrName][i][j].style.width = pieceWidth + "px";
+      this[arrName][i][j].style.height = pieceWidth + "px";
+      let [ip, jp] = this.getPixelPosition(i, j, r);
+      // Translate coordinates to use chessboard as reference:
+      this[arrName][i][j].style.transform =
+        `translate(${ip - r.x}px,${jp - r.y}px)`;
+      chessboard.appendChild(this[arrName][i][j]);
+    };
+    const conditionalReset = (arrName) => {
+      if (this[arrName]) {
+        // Refreshing: delete old pieces first. This isn't necessary,
+        // but simpler (this method isn't called many times)
+        for (let i=0; i<this.size.x; i++) {
+          for (let j=0; j<this.size.y; j++) {
+            if (this[arrName][i][j]) {
+              this[arrName][i][j].remove();
+              this[arrName][i][j] = null;
+            }
+          }
+        }
+      }
+      else
+        this[arrName] = ArrayFun.init(this.size.x, this.size.y, null);
+      if (arrName == "d_pieces")
+        this.marks.forEach(([i, j]) => addPiece(i, j, arrName, "mark"));
+    };
+    if (this.marks)
+      conditionalReset("d_pieces");
+    conditionalReset("g_pieces");

     for (let i=0; i < this.size.x; i++) {
       for (let j=0; j < this.size.y; j++) {
         if (this.board[i][j] != "") {
           const color = this.getColor(i, j);
           const piece = this.getPiece(i, j);
     for (let i=0; i < this.size.x; i++) {
       for (let j=0; j < this.size.y; j++) {
         if (this.board[i][j] != "") {
           const color = this.getColor(i, j);
           const piece = this.getPiece(i, j);

-          this.g_pieces[i][j] = document.createElement("piece");
-          C.AddClass_es(this.g_pieces[i][j],
-                        this.pieces(color, i, j)[piece]["class"]);
+          addPiece(i, j, "g_pieces", this.pieces(color, i, j)[piece]["class"]);

           this.g_pieces[i][j].classList.add(C.GetColorClass(color));
           this.g_pieces[i][j].classList.add(C.GetColorClass(color));

-          this.g_pieces[i][j].style.width = pieceWidth + "px";
-          this.g_pieces[i][j].style.height = pieceWidth + "px";
-          let [ip, jp] = this.getPixelPosition(i, j, r);
-          // Translate coordinates to use chessboard as reference:
-          this.g_pieces[i][j].style.transform =
-            `translate(${ip - r.x}px,${jp - r.y}px)`;

           if (this.enlightened && !this.enlightened[i][j])
             this.g_pieces[i][j].classList.add("hidden");
           if (this.enlightened && !this.enlightened[i][j])
             this.g_pieces[i][j].classList.add("hidden");

-          chessboard.appendChild(this.g_pieces[i][j]);
+        }
+        if (this.marks && this.d_pieces[i][j]) {
+          let classes = ["mark"];
+          if (this.board[i][j] != "")
+            classes.push("transparent");
+          addPiece(i, j, "d_pieces", classes);

         }
       }
     }
         }
       }
     }


@@ -817,7 +833,7 @@ export default class ChessRules {
         }
       }
     }
         }
       }
     }

-    if (this.hasReserve && !this.isDiagram)
+    if (this.hasReserve)

       this.rescaleReserve(newR);
   }
 
       this.rescaleReserve(newR);
   }
 

diff --git a/common.css b/common.css
index 5ad9428..167822b 100644 (file)
--- a/common.css
+++ b/common.css
@@ -203,12 +203,18 @@ main > div {
   margin: 5px 0;
   text-align: center;
 }
   margin: 5px 0;
   text-align: center;
 }

+piece.mark {
+  background-image: url('/pieces/mark.svg');
+}
+piece.mark.transparent {
+  opacity: 0.65;
+}

 .full-rules figure {
   display: block;
   overflow: visible;
   margin-top: 20px;
 }
 .full-rules figure {
   display: block;
   overflow: visible;
   margin-top: 20px;
 }

-.full-rules figure:after {
+.full-rules figure::after {

   content: '';
   display: block;
   clear: both;
   content: '';
   display: block;
   clear: both;

diff --git a/pieces/mark.svg b/pieces/mark.svg
new file mode 100644 (file)
index 0000000..9c1b930
--- /dev/null
+++ b/pieces/mark.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Mark possible moves - vchess"
+   viewbox="0 0 599 599"
+   width="600"
+   height="600"
+   sodipodi:docname="mark.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1060"
+     id="namedview4"
+     showgrid="false"
+     inkscape:zoom="0.39333333"
+     inkscape:cx="310.16949"
+     inkscape:cy="300"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Mark possible moves - vchess" />
+  <circle
+     id="mark_circle"
+     cx="300"
+     cy="300"
+     r="180"
+     style="fill:#9900cc;stroke-width:0.89999998" />
+</svg>

diff --git a/utils/drawDiagrams.js b/utils/drawDiagrams.js
index ec55d50..9438dd6 100644 (file)
--- a/utils/drawDiagrams.js
+++ b/utils/drawDiagrams.js
@@ -42,6 +42,9 @@ function re_drawDiagrams() {
       vr[i] = new V({
         element: "diag_" + i,
         fen: diagrams[i].dataset.fen,
       vr[i] = new V({
         element: "diag_" + i,
         fen: diagrams[i].dataset.fen,

+        marks: diagrams[i].dataset.mks
+                 ? JSON.parse('[' + diagrams[i].dataset.mks + ']')
+                 : undefined,

         color: diagrams[i].dataset.col || 'w',
         options: {},
         diagram: true
         color: diagrams[i].dataset.col || 'w',
         options: {},
         diagram: true

diff --git a/variants/Chakart/complete_rules.html b/variants/Chakart/complete_rules.html
index da15926..1f64dd6 100644 (file)
--- a/variants/Chakart/complete_rules.html
+++ b/variants/Chakart/complete_rules.html
@@ -46,7 +46,7 @@
   <p>The king cannot castle, and pawns don't capture en passant.</p>
   <figure>
     <div class="diag"
   <p>The king cannot castle, and pawns don't capture en passant.</p>
   <figure>
     <div class="diag"

-      data-fen='qbbrrnek/pppppppp/5n2/8/1BwP4/3m4/PPP1PPPP/QBNN1KRR b 3 {"flags":"1111"}'>
+         data-fen='qbbrrnek/pppppppp/5n2/8/1BwP4/3m4/PPP1PPPP/QBNN1KRR b 3 {"flags":"1111"}'>

     </div>
     <figcaption>After 1.d4 Nf6 2.Bb4 (put a bomb on c4).</figcaption>
   </figure>
     </div>
     <figcaption>After 1.d4 Nf6 2.Bb4 (put a bomb on c4).</figcaption>
   </figure>


@@ -81,10 +81,10 @@
   </ul>
   <figure>
     <div class="diag left"
   </ul>
   <figure>
     <div class="diag left"

-      data-fen='rn1b2qk/pbpp1ppp/1w2wp2/1p1Rm3/3PdnPr/4PPd1/PPP1m2P/NNB1KRQB b 1 {"flags":"1111"}'>
+         data-fen='rn1b2qk/pbpp1ppp/1w2wp2/1p1Rm3/3PdnPr/4PPd1/PPP1m2P/NNB1KRQB b 1 {"flags":"1111"}'>

     </div>
     <div class="diag right"
     </div>
     <div class="diag right"

-      data-fen='rn1b2qk/pbpp1ppp/1w3p2/1p1P4/3P1nPr/4P1d1/PPP1m2P/NNB1KRQB w 2 {"flags":"1111"}'>
+         data-fen='rn1b2qk/pbpp1ppp/1w3p2/1p1P4/3P1nPr/4P1d1/PPP1m2P/NNB1KRQB w 2 {"flags":"1111"}'>

     </div>
     <figcaption>Left: before 1.fxe4. Right: after the move, ending on d6.</figcaption>
   </figure>
     </div>
     <figcaption>Left: before 1.fxe4. Right: after the move, ending on d6.</figcaption>
   </figure>


@@ -125,7 +125,7 @@
          data-fen='erk2rq1/1m2e1m1/mppmne1m/p1BpppPp/mm1P1QbP/1Nmnw1dm/e1mP2d1/1BwR1RKN b 1 {"flags":"1111"}'>
     </div>
     <div class="diag right"
          data-fen='erk2rq1/1m2e1m1/mppmne1m/p1BpppPp/mm1P1QbP/1Nmnw1dm/e1mP2d1/1BwR1RKN b 1 {"flags":"1111"}'>
     </div>
     <div class="diag right"

-      data-fen='erk3Q1/1m2e1d1/mppmnr1m/p1BpppPp/mm1P1QbP/1Nmnw1dm/e1mP2d1/1BwR1RKN w 2 {"flags":"1111"}'>
+         data-fen='erk3Q1/1m2e1d1/mppmnr1m/p1BpppPp/mm1P1QbP/1Nmnw1dm/e1mP2d1/1BwR1RKN w 2 {"flags":"1111"}'>

     </div>
     <figcaption>
       1...Rxf6*W: Waluigi turns the g8 queen into white.
     </div>
     <figcaption>
       1...Rxf6*W: Waluigi turns the g8 queen into white.