From ddd74a262c1560c44ee90c9e5efbe5d4402dd95e Mon Sep 17 00:00:00 2001
From: CodedSakura <sakuracoded@gmail.com>
Date: Tue, 14 Jul 2026 16:49:14 +0300
Subject: [PATCH] begin recipe selector

---
 index.html                 | 26 ++++++++++-
 scripts/dom-list.js        |  5 ++-
 scripts/files.js           |  4 +-
 scripts/main.js            |  3 +-
 scripts/recipe-selector.js | 89 ++++++++++++++++++++++++++++++++++++++
 style.css                  |  2 +
 6 files changed, 123 insertions(+), 6 deletions(-)
 create mode 100644 scripts/recipe-selector.js

diff --git a/index.html b/index.html
index 72eb4f5..1212cf4 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,7 @@
 </nav>
 <aside id="left-menu" data-state="planning">
   <span data-resize="left-menu"></span>
-  <section id="block-picker">
+  <section id="block-picker" data-state="planning">
     <label>
       Filter:
       <input data-input="block-picker:filter">
@@ -82,6 +82,30 @@
 </main>
 <aside id="right-menu">
   <span data-resize="right-menu"></span>
+  <section id="recipe-selector" data-state="planning">
+    <template id="recipe-selector:template">
+      <div>
+        <header data-text="recipe:type"></header>
+        <div class="recipe">
+          <div data-atlas="recipe:selected"></div>
+          <div data-text="recipe:selected"></div>
+        </div>
+        <input placeholder="Filter" type="text" data-input="recipe:filter">
+        <div class="select">
+          <template>
+            <div class="recipe">
+              <div data-atlas="recipe:item"></div>
+              <div data-text="recipe:item"></div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </template>
+    <div id="recipe-selector:design" class="recipe-selector">
+    </div>
+    <div id="recipe-selector:selection" class="recipe-selector">
+    </div>
+  </section>
 </aside>
 <footer>
   <div>pre-alpha 1.1</div>
diff --git a/scripts/dom-list.js b/scripts/dom-list.js
index 2d52ee4..ab9655a 100644
--- a/scripts/dom-list.js
+++ b/scripts/dom-list.js
@@ -5,9 +5,10 @@ export class DomList {
   list;
   template;
 
-  constructor(rootElem) {
+  constructor(rootElem, templateElement = undefined) {
     this.list = rootElem;
-    this.template = this.list.querySelector("template").content.firstElementChild;
+    this.template = (templateElement ?? this.list.querySelector("template"))
+        .content.firstElementChild;
   }
 
   clear() {
diff --git a/scripts/files.js b/scripts/files.js
index 21d243c..88adea9 100644
--- a/scripts/files.js
+++ b/scripts/files.js
@@ -157,10 +157,10 @@ export async function saveFile(name = undefined) {
 
   if (multiblockType === "nuclearcraft:overhaul_sfr") {
     const coolantRecipes = [];
-    let coolantRecipeIndex = -1;
+    let coolantRecipeIndex;
     const plannerMetadata = getSolverMetadata(getPlannerDom());
 
-    coolantRecipes.push(stripEntryToMinimums(plannerMetadata["coolant_recipe"]));
+    coolantRecipes.push(stripEntryToMinimums(plannerMetadata.coolant_recipe));
     coolantRecipeIndex = 0;
 
     fileData = {
diff --git a/scripts/main.js b/scripts/main.js
index 34e48d6..ef0920d 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -10,6 +10,7 @@ import "./js-utils.js"
 import "./menu-bar.js";
 import "./ncpf-utils.js";
 import "./planner.js";
+import "./recipe-selector.js";
 import "./resize-menus.js";
 import "./solver.js";
 import { getState, setState, STATE } from "./state.js";
@@ -84,7 +85,7 @@ window.addEventListener("load", () => {
 
   emitEvent("setup-end");
 
-  void loadConfiguration("default");
+  void loadConfiguration("addons");
 
   // awaitEvent("config:end").then(() => loadExampleFile("tiny reactor"));
   // awaitEvent("config:end").then(() => loadExampleFile("multi-reactor"));
diff --git a/scripts/recipe-selector.js b/scripts/recipe-selector.js
new file mode 100644
index 0000000..284ac00
--- /dev/null
+++ b/scripts/recipe-selector.js
@@ -0,0 +1,89 @@
+import { registerLoadCallback } from "./main.js";
+import { listenTo } from "./events.js";
+import { configuration } from "./configuration.js";
+import { getPlannerDom, getPlannerMultiblockType } from "./planner.js";
+import { DomList } from "./dom-list.js";
+import { getAtlasIndexFromMetadata, makeAtlasImage } from "./atlas.js";
+import { getSolverMetadata, setSolverMetadata } from "./solver.js";
+import { findFullEntry } from "./ncpf-utils.js";
+
+const defaultRecipes = {
+  ["nuclearcraft:overhaul_sfr"]: {
+    coolant_recipe: {
+      elements: [
+        { name: "water", type: "legacy_fluid" },
+        { name: "condensate_water", type: "legacy_fluid" },
+      ],
+      type: "list",
+    },
+  },
+};
+
+registerLoadCallback(() => {
+  listenTo([ "config:end", "solver:reset:done" ], rescanDesignRecipes);
+});
+
+function rescanDesignRecipes() {
+  console.log("rescan recipes");
+  console.log(configuration);
+
+  const multiblockType = getPlannerMultiblockType();
+
+  const configs = [
+    ...Object.entries(configuration.configuration),
+    ...configuration.addons.flatMap(a => Object.entries(a.configuration)),
+  ].filter(([type]) => type === multiblockType);
+
+  const designRecipes = new DomList(
+      document.getElementById("recipe-selector:design"),
+      document.getElementById("recipe-selector:template"),
+  );
+  designRecipes.clear();
+
+  if (multiblockType === "nuclearcraft:overhaul_sfr") {
+    const coolantRecipes = configs.filter(([, v]) => "coolant_recipes" in v && v.coolant_recipes.length > 0)
+        .flatMap(([, v]) => v.coolant_recipes);
+
+    const designItem = designRecipes.makeItem();
+    designItem.querySelectorAll('[data-text="recipe:type"]')
+        .forEach(e => e.innerText = "Coolant Recipe");
+
+    const plannerDom = getPlannerDom();
+    const plannerMetadata = getSolverMetadata(plannerDom);
+    let selectedRecipe = plannerMetadata?.coolant_recipe;
+    if (!plannerMetadata) {
+      selectedRecipe = defaultRecipes["nuclearcraft:overhaul_sfr"].coolant_recipe;
+      setSolverMetadata(plannerDom, {
+        coolant_recipe: selectedRecipe,
+      });
+    }
+    selectedRecipe = findFullEntry("coolant_recipes", selectedRecipe, { configurationHint: multiblockType });
+
+    const selectedRecipeName = selectedRecipe.modules["plannerator:display_name"].display_name;
+    const selectedAtlasId = getAtlasIndexFromMetadata(selectedRecipe, multiblockType, "coolant_recipes");
+    designItem.querySelectorAll('[data-text="recipe:selected"]')
+        .forEach(e => e.innerText = selectedRecipeName);
+    designItem.querySelectorAll('[data-atlas="recipe:selected"]')
+        .forEach(e => e.appendChild(makeAtlasImage(selectedAtlasId)));
+
+    const recipeList = new DomList(designItem.querySelector(":scope > .select"));
+    recipeList.clear();
+    for (let i = 0; i < coolantRecipes.length; i++) {
+      const recipe = coolantRecipes[i];
+      const recipeItem = recipeList.makeItem();
+
+      const recipeName = recipe.modules["plannerator:display_name"].display_name;
+      const atlasId = getAtlasIndexFromMetadata(recipe, multiblockType, "coolant_recipes");
+
+      recipeItem.querySelectorAll('[data-text="recipe:item"]')
+          .forEach(e => e.innerText = recipeName);
+      recipeItem.querySelectorAll('[data-atlas="recipe:item"]')
+          .forEach(e => e.appendChild(makeAtlasImage(atlasId)));
+
+      console.log(recipe, recipeItem, atlasId);
+      recipeList.addItem(recipeItem);
+    }
+
+    designRecipes.addItem(designItem);
+  }
+}
diff --git a/style.css b/style.css
index f109f3f..420ef87 100644
--- a/style.css
+++ b/style.css
@@ -262,6 +262,8 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
     outline: calc(var(--scale-factor) * 1px) solid var(--block-hover-outline-color, #6666);
 }
 
+#recipe-selector {}
+
 [data-tooltip] {
     position: relative;
     user-select: none;