Make chess views scrollable, fix chess chat duplication and unmount chess component safely when it is removed from the DOM

lib/depject/page/html/render/chess.js

@@ -2,7 +2,7 @@ const { h } = require("mutant");
 const nest = require("depnest");
 const SsbChessDataAccess = require("ssb-chess-data-access");
 const SsbChessMithril = require("ssb-chess-mithril");
-const { onceTrue } = require("mutant");
+const { onceTrue, computed } = require("mutant");
 
 exports.needs = nest({
   "sbot.obs.connection": "first",
@@ -15,8 +15,11 @@ exports.create = function (api) {
   return nest("page.html.render", function channel(path) {
     if (path !== "/chess") return;
 
+    let chessComponent = null;
+    let removed = false;
+
     const page =
-      h("div.wrapper", [
+      h("div.wrapper", { className: 'Scroller' }, [
         h(
           "section.content",
           h("div", { id: "ssb-chess-mithril-plugin", style: { 'margin-top':'20px' } }),
@@ -29,22 +32,28 @@ exports.create = function (api) {
             "ssb-chess-mithril-plugin",
           );
 
-          if (!attachToElement) {
+          if (!attachToElement && !removed) {
             console.log("no element, loop");
             setTimeout(() => {
               loadChess();
             }, 500);
             return;
+          } else if (!removed) {
+            const dataAccess = new SsbChessDataAccess.SbotClassic(ssb);
+            chessComponent = SsbChessMithril(attachToElement, dataAccess);
           }
-
-          const dataAccess = new SsbChessDataAccess.SbotClassic(ssb);
-
-          SsbChessMithril(attachToElement, dataAccess);
         };
 
-        loadChess();
-      });
+        loadChess()
+      })
+
+
+      return computed(page, p => p, {onUnlisten: () => {
+        removed = true;
 
-      return page;
+        if (chessComponent) {
+          chessComponent.destroy();
+        }
+      }});
   });
 };