begin implementing block recipe selector

scripts/block-picker.js

@@ -195,5 +195,5 @@ function parseRuleAsTooltip(rule, props) {
 
 export function getBlockPickerActiveItem() {
   const blockPickerDom = document.getElementById("block-picker-list");
-  return Number(blockPickerDom.dataset.activeItem);
+  return Number(blockPickerDom.dataset.activeItem ?? -1);
 }

scripts/main.js

@@ -4,7 +4,7 @@ import { loadConfiguration } from "./configuration.js";
 import "./dialogs.js";
 import "./dom-list.js";
 import { addEventToButton, addEventToInput, debounce, getElements } from "./dom-utils.js";
-import { emitEvent, listenTo } from "./events.js";
+import { awaitEvent, emitEvent, listenTo } from "./events.js";
 import "./files.js"
 import "./js-utils.js"
 import "./menu-bar.js";
@@ -16,6 +16,7 @@ import "./solver.js";
 import { getState, setState, STATE } from "./state.js";
 import "./storage.js";
 import "./tooltip.js";
+import { loadExampleFile } from "./files.js";
 
 let loadCallbacks = [];
 export function registerLoadCallback(cb) {
@@ -85,7 +86,7 @@ window.addEventListener("load", () => {
 
   emitEvent("setup-end");
 
-  void loadConfiguration("addons");
+  void loadConfiguration("default");
 
   // awaitEvent("config:end").then(() => loadExampleFile("tiny reactor"));
   // awaitEvent("config:end").then(() => loadExampleFile("multi-reactor"));

scripts/planner.js

@@ -256,7 +256,7 @@ function clearSelectedCells() {
       });
 }
 export function getSelectedCells() {
-  return document.querySelectorAll("#planner [data-selected]");
+  return [...document.querySelectorAll("#planner [data-selected]")];
 }
 
 export function clearPlanner(size, type) {

scripts/recipe-selector.js

@@ -1,7 +1,7 @@
 import { registerLoadCallback } from "./main.js";
 import { listenTo } from "./events.js";
 import { configuration } from "./configuration.js";
-import { getPlannerDom, getPlannerMultiblockType } from "./planner.js";
+import { getPlannerDom, getPlannerMultiblockType, getSelectedCells } from "./planner.js";
 import { DomList } from "./dom-list.js";
 import { getAtlasIndexFromMetadata, getAtlasMetadata, makeAtlasImage } from "./atlas.js";
 import { getSolverMetadata, setSolverMetadata } from "./solver.js";
@@ -24,6 +24,8 @@ const defaultRecipes = {
 
 registerLoadCallback(() => {
   listenTo([ "config:end", "solver:reset:done" ], rescanDesignRecipes);
+
+  listenTo([ "planner:selection:removed", "planner:selection:added"], rescanSelectionRecipes);
 });
 
 function rescanDesignRecipes() {
@@ -135,6 +137,32 @@ function rescanDesignRecipes() {
   }
 }
 
+function rescanSelectionRecipes() {
+  const selectedCells = getSelectedCells();
+  const selectedTiles = new Set(selectedCells.map(v => Number(v.dataset.tile)));
+
+  const designRecipes = new DomList(
+      document.getElementById("recipe-selector:selection"),
+      document.getElementById("recipe-selector:template"),
+  );
+  designRecipes.clear();
+
+  if (selectedTiles.size !== 1 || selectedTiles.has(-1)) {
+    return;
+  }
+
+  const multiblockType = getPlannerMultiblockType();
+
+  const tileMetadata = getAtlasMetadata(selectedCells[0].dataset.tile);
+  const tile = findFullEntry("blocks", tileMetadata, { configurationHint: multiblockType });
+
+  if (!tile.modules || !tile.modules["ncpf:block_recipes"]) {
+    return;
+  }
+
+  console.log(tile);
+}
+
 function* getRecipeTooltip(recipe, metadata) {
   const multiblockType = getPlannerMultiblockType();
   let hasAdditionalData = false;