add addon tooltip to block picker

scripts/atlas.js

@@ -39,18 +39,21 @@ export async function buildAtlas(data) {
     ...Object.entries(data.configuration),
     ...data.addons.flatMap(a => Object.entries(a.configuration)),
   ]
-      .flatMap(([config, data]) => Object.entries(data)
-          .map(([type, entries]) => [config, type, entries]))
-      .flatMap(([c, t, e]) => Array.isArray(e)
-          ? [[c, t, e]]
+      .map(([t, d]) => [t, d.modules["plannerator:configuration_metadata"], d])
+      // .map(v => {console.log(v); return v})
+      .flatMap(([config, addon, data]) => Object.entries(data)
+          .map(([type, entries]) => [config, type, addon, entries]))
+      .flatMap(([c, t, a, e]) => Array.isArray(e)
+          ? [[c, t, a, e]]
           : t === "modules" && e["plannerator:global_elements"]
-              ? [[c, "plannerator:global_elements", e["plannerator:global_elements"].elements]]
+              ? [[c, "plannerator:global_elements", a, e["plannerator:global_elements"].elements]]
               : [])
-      .flatMap(([c, t, l]) => l.map((v) => [c, t, v]))
-      .filter(([,, b]) => b && b.modules && b.modules["plannerator:texture"])
-      .map(([c, t, b]) => ({
+      .flatMap(([c, t, a, l]) => l.map((v) => [c, t, a, v]))
+      .filter(([,,, b]) => b && b.modules && b.modules["plannerator:texture"])
+      .map(([c, t, a, b]) => ({
         configuration: c,
         configurationList: t,
+        configurationAddon: a,
         texture: b.modules["plannerator:texture"].texture,
         ...(Object.fromEntries(Object.entries(b).filter(([k]) => k !== "modules")))
       }));

scripts/filter.js

@@ -37,7 +37,7 @@ export class Filter {
   test(...data) {
     for (const datum of data) {
       if (typeof datum !== "string") {
-        console.log("cannot test %o", datum);
+        console.trace("cannot test %o", datum);
         continue;
       }
 

scripts/main.js

@@ -46,7 +46,7 @@ window.addEventListener("load", () => {
 
   emitEvent("setup-end");
 
-  void loadConfiguration("catastrophe");
+  void loadConfiguration("addons");
 
   awaitEvent("config:end").then(() => loadExampleFile("tiny reactor"));
   // awaitEvent("config:end").then(() => loadExampleFile("multi-reactor"));

scripts/planner.js

@@ -2,7 +2,7 @@ import { atlases, makeAtlasImage } from "./atlas.js";
 import { DomList } from "./dom-list.js";
 import { emitEvent, listenTo } from "./events.js";
 import { Filter } from "./filter.js";
-import { createTooltip } from "./tooltip.js";
+import { createTooltip, tooltipDataToPlain } from "./tooltip.js";
 import { lookupFromMetadata, resolveBlockName } from "./ncpf-utils.js";
 import { addEventToButton } from "./dom-utils.js";
 
@@ -134,15 +134,14 @@ function buildBlockPicker() {
   const grid = new DomList(document.querySelector("#block-list"));
   grid.clear();
 
-  const blocks = atlases.flatMap(a => a.metadata)
-      .filter(m => m.configuration === multiblockType && m.configurationList === "blocks");
-  console.log(blocks);
-      blocks.forEach(m => {
+  atlases.flatMap(a => a.metadata)
+      .filter(m => m.configuration === multiblockType && m.configurationList === "blocks")
+      .forEach(m => {
         const item = grid.makeItem();
         item.dataset.index = m.index.toString(10);
         const tooltipData = [...getBlockTooltip(m)];
         item.dataset.tooltip = createTooltip(tooltipData).toString(10);
-        if (!filter.test(...tooltipData)) {
+        if (!filter.test(...tooltipDataToPlain(tooltipData))) {
           item.classList.add("hidden");
         }
         item.appendChild(makeAtlasImage(m.index));
@@ -297,6 +296,11 @@ function* getBlockTooltip(metadata) {
   if (!hasAdditionalData) {
     console.log("unknown block", data);
   }
+
+  yield {
+    type: "italics",
+    text: metadata.configurationAddon.name,
+  };
 }
 
 function parseRuleAsTooltip(rule, props) {

scripts/tooltip.js

@@ -111,11 +111,31 @@ function createTooltipDom(id) {
     if (typeof row === "string") {
       rowElem.innerText = row;
     } else {
-      // TODO: support rich tooltips
+      if (!row.type) {
         throw row;
       }
+      // TODO: support richer tooltips
+      if (row.type === "italics") {
+        rowElem.innerText = row.text;
+        rowElem.classList.add("italics");
+      }
+    }
 
     div.appendChild(rowElem);
   }
   return div;
 }
+
+export function tooltipDataToPlain(data) {
+  if (!Array.isArray(data)) {
+    console.warn("tooltip data is not an array: %o", data);
+    return [];
+  }
+
+  return data.flatMap(row => {
+    if (typeof row === "string") return row;
+    if (!row.type) return [];
+    if (row.text) return row.text;
+    return [];
+  })
+}

style.css

@@ -27,6 +27,9 @@
 .bold {
     font-weight: bold;
 }
+.italics {
+    font-style: italic;
+}
 
 .list {
     display: flex;