update tooltips

index.html

@@ -126,7 +126,7 @@
   </section>
 </aside>
 <footer>
-  <div>pre-alpha 1.5</div>
+  <div>pre-alpha 1.6</div>
   <div>
     <a href="https://discord.gg/Eq72HwPqfg">Discord server</a>
   </div>

scripts/block-picker.js

@@ -5,7 +5,7 @@ import { createTooltip, tooltipDataToPlain } from "./tooltip.js";
 import { emitEvent, listenTo } from "./events.js";
 import { getPlannerMultiblockType } from "./planner.js";
 import { registerLoadCallback } from "./main.js";
-import { lookupFromMetadata, resolveBlockName } from "./ncpf-utils.js";
+import { lookupFromMetadata, parseRuleAsString, resolveBlockName } from "./ncpf-utils.js";
 
 registerLoadCallback(() => {
   listenTo("config:end", buildBlockPicker);
@@ -78,7 +78,7 @@ function* getBlockTooltip(metadata) {
     }
     if (heatSink.rules) {
       for (const rule of heatSink.rules) {
-        yield "Requires " + parseRuleAsTooltip(rule, { configurationHint: metadata.configuration });
+        yield "Requires " + parseRuleAsString(rule, { configurationHint: metadata.configuration });
       }
     }
   }
@@ -99,15 +99,15 @@ function* getBlockTooltip(metadata) {
 
   if ("nuclearcraft:overhaul_sfr:fuel_cell" in data.modules) {
     hasAdditionalData = true;
-    yield "Fuel Cell";
+    yield "Fuel cell";
   }
 
   if ("nuclearcraft:overhaul_sfr:port" in data.modules) {
     hasAdditionalData = true;
     if (data.modules["nuclearcraft:overhaul_sfr:port"].output) {
-      yield "Output Port";
+      yield "Output port";
     } else {
-      yield "Input Port";
+      yield "Input port";
     }
   }
 
@@ -124,7 +124,7 @@ function* getBlockTooltip(metadata) {
   if ("nuclearcraft:overhaul_sfr:neutron_source" in data.modules) {
     hasAdditionalData = true;
     const neutronSource = data.modules["nuclearcraft:overhaul_sfr:neutron_source"];
-    yield "Neutron Source";
+    yield "Neutron source";
     yield `Efficiency: ${neutronSource.efficiency}`;
   }
 
@@ -132,7 +132,7 @@ function* getBlockTooltip(metadata) {
     hasAdditionalData = true;
     const moderator = data.modules["nuclearcraft:overhaul_sfr:moderator"];
     yield "Moderator";
-    yield `Flux: ${moderator.flux}`;
+    yield `Flux factor: ${moderator.flux}`;
     yield `Efficiency: ${moderator.efficiency}`;
   }
 
@@ -147,7 +147,7 @@ function* getBlockTooltip(metadata) {
   if ("nuclearcraft:overhaul_sfr:neutron_shield" in data.modules) {
     hasAdditionalData = true;
     const shield = data.modules["nuclearcraft:overhaul_sfr:neutron_shield"];
-    yield "Neutron Shield";
+    yield "Neutron shield";
     yield `Efficiency: ${shield.efficiency}`;
     yield `Heat per Flux: ${shield.heat_per_flux}`;
   }
@@ -162,54 +162,6 @@ function* getBlockTooltip(metadata) {
   };
 }
 
-function parseRuleAsTooltip(rule, props) {
-  switch (rule.type) {
-    case "and":
-      return rule.rules.map(r => parseRuleAsTooltip(r, props)).join(" AND ");
-
-    case "or":
-      return rule.rules.map(r => parseRuleAsTooltip(r, props)).join(" OR ");
-
-    case "between": {
-      const block = resolveBlockName(rule.block, props);
-      if (!block) {
-        console.warn("could not find block %o", rule.block);
-        return "???";
-      }
-      if (rule.min === rule.max) {
-        return `exactly ${rule.min} ${block}`;
-      } else if (rule.max === 6) {
-        return `at least ${rule.min} ${block}`;
-      } else if (rule.min === 0) {
-        return `no more than ${rule.max} ${block}`;
-      } else {
-        return `between ${rule.min} and ${rule.max} ${block}`;
-      }
-    }
-
-    case "axial": {
-      const block = resolveBlockName(rule.block, props);
-      if (!block) {
-        console.warn("could not find block %o", rule.block);
-        return "???";
-      }
-      if (rule.min === rule.max) {
-        return `exactly ${rule.min} axial ${block}`;
-      } else if (rule.max === 3) {
-        return `at least ${rule.min} axial ${block}`;
-      } else if (rule.min === 0) {
-        return `no more than ${rule.max} axial ${block}`;
-      } else {
-        return `between ${rule.min} and ${rule.max} axial ${block}`;
-      }
-    }
-
-    default:
-      console.warn("unknown rule: %o", rule);
-      return "???";
-  }
-}
-
 export function getBlockPickerActiveItem() {
   const blockPickerDom = document.getElementById("block-picker-list");
   return Number(blockPickerDom.dataset.activeItem ?? -1);

scripts/ncpf-utils.js

@@ -153,3 +153,51 @@ export function lookupFromMetadata(metadata) {
 
   return possibleEntries.find(other => checkEquivalence(metadata, other));
 }
+
+export function parseRuleAsString(rule, props = { configurationHint: null }) {
+  switch (rule.type) {
+    case "and":
+      return rule.rules.map(r => parseRuleAsString(r, props)).join(" AND ");
+
+    case "or":
+      return rule.rules.map(r => parseRuleAsString(r, props)).join(" OR ");
+
+    case "between": {
+      const block = resolveBlockName(rule.block, props);
+      if (!block) {
+        console.warn("could not find block %o", rule.block);
+        return "???";
+      }
+      if (rule.min === rule.max) {
+        return `exactly ${rule.min} ${block}`;
+      } else if (rule.max === 6) {
+        return `at least ${rule.min} ${block}`;
+      } else if (rule.min === 0) {
+        return `no more than ${rule.max} ${block}`;
+      } else {
+        return `between ${rule.min} and ${rule.max} ${block}`;
+      }
+    }
+
+    case "axial": {
+      const block = resolveBlockName(rule.block, props);
+      if (!block) {
+        console.warn("could not find block %o", rule.block);
+        return "???";
+      }
+      if (rule.min === rule.max) {
+        return `exactly ${rule.min} axial ${block}`;
+      } else if (rule.max === 3) {
+        return `at least ${rule.min} axial ${block}`;
+      } else if (rule.min === 0) {
+        return `no more than ${rule.max} axial ${block}`;
+      } else {
+        return `between ${rule.min} and ${rule.max} axial ${block}`;
+      }
+    }
+
+    default:
+      console.warn("unknown rule: %o", rule);
+      return "???";
+  }
+}

scripts/planner.js

@@ -8,7 +8,7 @@ import { registerLoadCallback } from "./main.js";
 import { getBlockPickerActiveItem, getBlockPickerRecipe } from "./block-picker.js";
 import { clearCellMetadata, getMetadata, setCellMetadata } from "./metadata.js";
 import { retainTooltipHover } from "./tooltip.js";
-import { checkEquivalence, lookupFromMetadata } from "./ncpf-utils.js";
+import { checkEquivalence, lookupFromMetadata, parseRuleAsString } from "./ncpf-utils.js";
 
 const zoomOptions = [ 0.5, 1, 2, 3, 4, 5 ];
 const zoomDefault = 2;
@@ -352,6 +352,46 @@ export function* getCellTooltip(cell) {
         name: recipe.modules["plannerator:display_name"].display_name,
         atlasIndex: getAtlasIndexFromMetadata(recipe, multiblockType, "ncpf:block_recipes"),
       }
+      if ("nuclearcraft:overhaul_sfr:fuel_stats" in recipe.modules) {
+        const stats = recipe.modules["nuclearcraft:overhaul_sfr:fuel_stats"];
+
+        if (stats.self_priming) {
+          yield "Self-priming";
+        } else {
+          yield "Not primed";
+        }
+        yield {
+          type: "compound",
+          items: [
+            `Criticality: `,
+            {
+              type: "bold",
+              text: `0/${stats.criticality}`,
+            },
+          ],
+        };
+      }
+    }
+  }
+
+  if ("nuclearcraft:overhaul_sfr:moderator" in data.modules) {
+    const moderator = data.modules["nuclearcraft:overhaul_sfr:moderator"];
+    yield `Flux factor: ${moderator.flux}`;
+    yield `Efficiency: ${moderator.efficiency}`;
+  }
+
+  if ("nuclearcraft:overhaul_sfr:reflector" in data.modules) {
+    const reflector = data.modules["nuclearcraft:overhaul_sfr:reflector"];
+    yield `Efficiency: ${reflector.efficiency}`;
+    yield `Reflectivity: ${reflector.reflectivity}`;
+  }
+
+  if ("nuclearcraft:overhaul_sfr:heat_sink" in data.modules) {
+    const heatSink = data.modules["nuclearcraft:overhaul_sfr:heat_sink"];
+    if (heatSink.rules) {
+      for (const rule of heatSink.rules) {
+        yield "Rule not met: " + parseRuleAsString(rule, { configurationHint: metadata.configuration });
+      }
     }
   }
 

scripts/tooltip.js

@@ -136,43 +136,68 @@ function createTooltipDom(data) {
   div.classList.add("tooltip");
   for (const row of data) {
     const rowElem = document.createElement("div");
-
-    if (typeof row === "string") {
-      rowElem.innerText = row;
-    } else {
-      if (!row.type) {
-        throw row;
-      }
-      // TODO: support richer tooltips
-      switch (row.type) {
-        case "italics":
-          rowElem.innerText = row.text;
-          rowElem.classList.add("italics");
-          break;
-
-        case "item":
-          if (row.prefix) {
-            rowElem.appendChild(document.createTextNode(row.prefix));
-          }
-          rowElem.appendChild(makeAtlasImage(row.atlasIndex));
-          rowElem.appendChild(document.createTextNode(row.name));
-          rowElem.classList.add("tooltip--item");
-          break;
-
-        case "meta":
-          break;
-
-        default:
-          console.warn("unknown tooltip type", row);
-          break;
-      }
-    }
-
+    rowElem.appendChild(createTooltipNode(row));
     div.appendChild(rowElem);
   }
   return div;
 }
 
+function createTooltipNode(tooltip) {
+  if (typeof tooltip === "string") {
+    return document.createTextNode(tooltip);
+  }
+
+  if (!tooltip.type) {
+    throw tooltip;
+  }
+
+  switch (tooltip.type) {
+    case "plain":
+      return createTooltipNode(tooltip.text);
+
+    case "italics": {
+      const elem = document.createElement("span");
+      elem.classList.add("italics");
+      elem.appendChild(createTooltipNode(tooltip.text));
+      return elem;
+    }
+
+    case "bold": {
+      const elem = document.createElement("span");
+      elem.classList.add("bold");
+      elem.appendChild(createTooltipNode(tooltip.text));
+      return elem;
+    }
+
+    case "item": {
+      const elem = document.createElement("div");
+      if (tooltip.prefix) {
+        elem.appendChild(createTooltipNode(tooltip.prefix));
+      }
+      elem.classList.add("tooltip--item");
+      elem.appendChild(makeAtlasImage(tooltip.atlasIndex));
+      elem.appendChild(createTooltipNode(tooltip.name));
+      break;
+    }
+
+    case "compound": {
+      const fragment = document.createDocumentFragment();
+      for (const item of tooltip.items) {
+        fragment.appendChild(createTooltipNode(item));
+      }
+      return fragment;
+    }
+
+    case "meta":
+      break;
+
+    default:
+      console.warn("unknown tooltip type", tooltip);
+      break;
+  }
+  return document.createDocumentFragment();
+}
+
 function createAutoTooltipDom(element) {
   if (element.dataset.x && element.dataset.tile) {
     return createTooltipDom([...getCellTooltip(element)]);