add dev mode

index.html

@@ -19,11 +19,18 @@
     </div>
   </div>
   <div data-section="Edit" data-alt="e">
-    <button data-alt="u" data-button="edit:undo">Undo</button>
+    <button data-alt="u" data-button="edit:undo" disabled>Undo</button>
     <button data-alt="r" data-button="edit:redo" disabled>Redo</button>
+    <button data-toggle="dev-mode:toggle" data-toggled="false">Developer mode</button>
   </div>
   <div data-section="Select" data-alt="s">
-    <button data-alt="i">Invert</button>
+    <button data-alt="i" disabled>Invert</button>
+    <button data-alt="e" disabled>Expand</button>
+    <button data-alt="r" disabled>Reduce</button>
+    <button data-alt="c" disabled>All cells</button>
+    <button data-alt="m" disabled>All moderators</button>
+    <button data-alt="h" disabled>All heatsinks</button>
+    <button data-alt="a" disabled>All casings</button>
   </div>
   <div data-section="View" data-alt="v">
     <button data-alt="i" data-button="planner:zoom:+">Zoom in</button>

scripts/dev-mode.js

@@ -0,0 +1,44 @@
+import { registerLoadCallback } from "./main.js";
+import { awaitEvent, emitEvent, listenTo } from "./events.js";
+import { loadExampleFile } from "./files.js";
+import { loadConfiguration } from "./configuration.js";
+import { recall, save } from "./storage.js";
+import { getElements } from "./dom-utils.js";
+
+const devModeKey = "dev-mode";
+let devMode = false;
+
+registerLoadCallback(() => {
+  devMode = recall(devModeKey, false);
+
+  getElements("toggle", "dev-mode:toggle").forEach(e => {
+    e.dataset.toggled = devMode.toString();
+  });
+
+  listenTo("dev-mode:toggle", (e) => {
+    devMode = e.detail.state;
+    save(devModeKey, devMode);
+    console.log("debug mode toggled to", devMode);
+  });
+
+  document.addEventListener("keydown", e => {
+    if (!devMode) return;
+
+    if (e.key === "H") {
+      emitEvent("dev:suppress-hover");
+    }
+    if (e.key === "T") {
+      emitEvent("dev:suppress-tooltips");
+    }
+  });
+
+  if (!devMode) return;
+
+  awaitEvent("setup:end").then(() => {
+    void loadConfiguration("default");
+  });
+
+  awaitEvent("config:end").then(() => {
+    void loadExampleFile("Pandora's Fission Reactor");
+  });
+});

scripts/main.js

@@ -1,12 +1,13 @@
 import "./atlas.js";
 import "./block-picker.js";
-import { loadConfiguration } from "./configuration.js";
+import "./configuration.js";
+import "./dev-mode.js";
 import "./dialogs.js";
 import "./dom-list.js";
 import { debounce, getElements } from "./dom-utils.js";
 import "./errors.js";
-import { emitEvent, listenTo } from "./events.js";
-import { loadExampleFile } from "./files.js"
+import { awaitEvent, emitEvent, listenTo } from "./events.js";
+import "./files.js"
 import "./js-utils.js"
 import "./menu-bar.js";
 import "./ncpf-utils.js";
@@ -29,7 +30,7 @@ function runLoadCallbacks() {
 }
 
 window.addEventListener("load", () => {
-  emitEvent("setup-start");
+  emitEvent("setup:start");
 
   getElements("state", "*").forEach(e => {
     e.classList.add("hidden");
@@ -81,11 +82,5 @@ window.addEventListener("load", () => {
 
   runLoadCallbacks();
 
-  emitEvent("setup-end");
-
-  void loadConfiguration("default");
-  // void loadConfiguration("fuel-test");
-
-  // awaitEvent("config:end").then(() => loadExampleFile("Pandora's Fission Reactor"));
-  // awaitEvent("config:end").then(() => loadExampleFile("multi-reactor"));
+  emitEvent("setup:end");
 });

scripts/planner.js

@@ -75,11 +75,9 @@ registerLoadCallback(() => {
 
   listenTo("block-picker:selection", clearSelectedCells);
 
-  document.addEventListener("keydown", e => {
-    if (e.key === "H") {
-      suppressHover = !suppressHover;
-      console.log("Suppressing hover:", suppressHover);
-    }
+  listenTo("dev:suppress-hover", () => {
+    suppressHover = !suppressHover;
+    console.log("Suppressing hover:", suppressHover);
   });
 });
 

scripts/tooltip.js

@@ -37,11 +37,9 @@ registerLoadCallback(() => {
   listenTo("tooltips:show", showTooltip);
   listenTo("tooltips:hide", hideTooltip);
 
-  document.addEventListener("keydown", e => {
-    if (e.key === "T") {
-      suppressTooltips = !suppressTooltips;
-      console.log("suppressing tooltips", suppressTooltips);
-    }
+  listenTo("dev:suppress-tooltips", () => {
+    suppressTooltips = !suppressTooltips;
+    console.log("suppressing tooltips", suppressTooltips);
   });
 });