From: Benjamin Auder <benjamin.auder@somewhere>
Date: Wed, 29 Jun 2022 09:03:54 +0000 (+0200)
Subject: Attempt to avoid interferences from past loaded variants (seems ok now)
X-Git-Url: https://git.auder.net/variants/current/css/doc/img/%7B%7B%20targetUrl%20%7D%7D?a=commitdiff_plain;h=a5da62690c1314425a576302466b1d4ad406d80d;p=xogo.git

Attempt to avoid interferences from past loaded variants (seems ok now)
---

diff --git a/app.js b/app.js
index 6f17c64..1090b30 100644
--- a/app.js
+++ b/app.js
@@ -488,21 +488,22 @@ const afterPlay = (move_s, newTurn, ops) => {
   }
 };
 
-let vr, playerColor;
+let vr = null, playerColor, lastVname = undefined;
 function initializeGame(obj) {
   const options = obj.options || {};
   import(`/variants/${obj.vname}/class.js`).then(module => {
     window.V = module.default;
     for (const [k, v] of Object.entries(V.Aliases))
       window[k] = v;
-    // Load CSS. Avoid loading twice the same stylesheet:
-    const allIds = [].slice.call($.styleSheets).map(s => s.id);
-    const newId = obj.vname + "_css";
-    if (!allIds.includes(newId)) {
+    if (lastVname != obj.vname) {
+      // Load CSS + unload potential previous one.
+      if (lastVname)
+        document.getElementById(lastVname + "_css").remove();
       $.getElementsByTagName("head")[0].insertAdjacentHTML(
         "beforeend",
-        `<link id="${newId}" rel="stylesheet"
+        `<link id="${obj.vname + '_css'}" rel="stylesheet"
                href="/variants/${obj.vname}/style.css"/>`);
+      lastVname = obj.vname;
     }
     playerColor = (sid == obj.players[0].sid ? "w" : "b");
     // Init + remove potential extra DOM elements from a previous game:
@@ -526,6 +527,9 @@ function initializeGame(obj) {
         </svg>
       </div>
       <div class="chessboard"></div>`;
+    if (vr)
+      // Avoid interferences:
+      vr.removeListeners();
     vr = new V({
       seed: obj.seed, //may be null if FEN already exists (running game)
       fen: obj.fen,
diff --git a/base_rules.js b/base_rules.js
index ced3eed..6a68f84 100644
--- a/base_rules.js
+++ b/base_rules.js
@@ -966,22 +966,47 @@ export default class ChessRules {
       curPiece.remove();
     };
 
+    const resize = (e) => this.rescale(e.deltaY < 0 ? "up" : "down");
+
     if ('onmousedown' in window) {
-      document.addEventListener("mousedown", mousedown);
-      document.addEventListener("mousemove", mousemove);
-      document.addEventListener("mouseup", mouseup);
-      document.addEventListener("wheel",
-        (e) => this.rescale(e.deltaY < 0 ? "up" : "down"));
+      this.mouseListeners = [
+        {type: "mousedown", listener: mousedown},
+        {type: "mousemove", listener: mousemove},
+        {type: "mouseup", listener: mouseup},
+        {type: "wheel", listener: resize}
+      ];
+      this.mouseListeners.forEach(ml => {
+        document.addEventListener(ml.type, ml.listener);
+      });
     }
     if ('ontouchstart' in window) {
-      // https://stackoverflow.com/a/42509310/12660887
-      document.addEventListener("touchstart", mousedown, {passive: false});
-      document.addEventListener("touchmove", mousemove, {passive: false});
-      document.addEventListener("touchend", mouseup, {passive: false});
+      this.touchListeners = [
+        {type: "touchstart", listener: mousedown},
+        {type: "touchmove", listener: mousemove},
+        {type: "touchend", listener: mouseup}
+      ];
+      this.touchListeners.forEach(tl => {
+        // https://stackoverflow.com/a/42509310/12660887
+        document.addEventListener(tl.type, tl.listener, {passive: false});
+      });
     }
     // TODO: onpointerdown/move/up ? See reveal.js /controllers/touch.js
   }
 
+  removeListeners() {
+    if ('onmousedown' in window) {
+      this.mouseListeners.forEach(ml => {
+        document.removeEventListener(ml.type, ml.listener);
+      });
+    }
+    if ('ontouchstart' in window) {
+      this.touchListeners.forEach(tl => {
+        // https://stackoverflow.com/a/42509310/12660887
+        document.removeEventListener(tl.type, tl.listener);
+      });
+    }
+  }
+
   showChoices(moves, r) {
     let container = document.getElementById(this.containerId);
     let chessboard = container.querySelector(".chessboard");