X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=base_rules.js;h=54c12209a0b23e9716367eb82eac04cc957da1cf;hb=b2fc1259220619ab828a5da79cbbc8894ac5d296;hp=5eb4d773c008f390cb5e7f1b6aa600ef20827ae8;hpb=e7b64798015851c120b9e8b4872297cfbaa0cb15;p=xogo.git

diff --git a/base_rules.js b/base_rules.js
index 5eb4d77..54c1220 100644
--- a/base_rules.js
+++ b/base_rules.js
@@ -415,6 +415,8 @@ export default class ChessRules {
 
     // Graphical (can use variables defined above)
     this.containerId = o.element;
+    this.isDiagram = o.diagram;
+    this.marks = o.marks;
     this.graphicalInit();
   }
 
@@ -453,7 +455,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);
@@ -557,12 +559,14 @@ export default class ChessRules {
   // VISUAL METHODS
 
   graphicalInit() {
-    // NOTE: not window.onresize = this.re_drawBoardElts because scope (this)
-    window.onresize = () => this.re_drawBoardElements();
-    this.re_drawBoardElements();
-    this.initMouseEvents();
-    const chessboard =
-      document.getElementById(this.containerId).querySelector(".chessboard");
+    const g_init = () => {
+      this.re_drawBoardElements();
+      if (!this.isDiagram && !this.mouseListeners && !this.touchListeners)
+        this.initMouseEvents();
+    };
+    let container = document.getElementById(this.containerId);
+    this.windowResizeObs = new ResizeObserver(g_init);
+    this.windowResizeObs.observe(container);
   }
 
   re_drawBoardElements() {
@@ -587,7 +591,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.
@@ -644,46 +648,62 @@ export default class ChessRules {
   }
 
   setupPieces(r) {
-    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);
+    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);
-          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].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");
-          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);
         }
       }
     }
-    if (this.hasReserve)
+    if (this.hasReserve && !this.isDiagram)
       this.re_drawReserve(['w', 'b'], r);
   }
 
@@ -996,6 +1016,10 @@ 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) {
       this.mouseListeners.forEach(ml => {
         document.removeEventListener(ml.type, ml.listener);