start showing the output goods

src/App.tsx

@@ -7,6 +7,7 @@ import { OptionsProvider } from './providers/OptionsProvider';
 import { ResourcesSelect } from './components/ResourcesSelect';
 import { BiomeSelect } from './components/BiomeSelect';
 import biomes from './data/biomes.json';
+import { GoodsList } from './components/GoodsList';
 
 export const App: Component = () => {
   const selectedBuildingsSignal = createSignal([] as string[]);
@@ -27,7 +28,12 @@ export const App: Component = () => {
         <BiomeSelect signal={selectedBiomeSignal} />
         <ResourcesSelect signal={selectedResourcesSignal} />
         <BuildingSelect signal={selectedBuildingsSignal} />
+        {/* don't actually need this now we are showing outputs? */}
         <BuildingList showNamesAccr={selectedBuildingsSignal[0]} />
+        <GoodsList
+          buildingsAccr={selectedBuildingsSignal[0]}
+          resourcesAccr={selectedResourcesSignal[0]}
+        />
       </OptionsProvider>
     </div>
   );

src/components/BiomeSelect.tsx

@@ -17,7 +17,7 @@ export const BiomeSelect: Component<{ signal: Signal<string> }> = (props) => {
   return (
     <div class="flex flex-row">
       <Select
-        placeholder="Reset resources to biome..."
+        placeholder="Set resources to biome..."
         class="biomeSelect"
         onChange={onChange}
         initialValue={initialValue()}

src/components/BuildingList.tsx

@@ -2,6 +2,10 @@ import type { Accessor, Component } from 'solid-js';
 import { For, Show } from 'solid-js';
 import recipesByBuilding from 'src/data/recipesByBuilding.json';
 import { useOptionsContext } from 'src/providers/OptionsProvider';
+import {
+  makeBuildingIconPart,
+  makeResourceIconPart,
+} from '../functions/IconNameUtils';
 
 export const BuildingList: Component<{ showNamesAccr: Accessor<string[]> }> = (
   props
@@ -78,14 +82,3 @@ export const BuildingList: Component<{ showNamesAccr: Accessor<string[]> }> = (
     </div>
   );
 };
-
-function makeBuildingIconPart(buildingName: string) {
-  return buildingName
-    .replace(/^Flawless /, '')
-    .replace(/'/g, '')
-    .replace(/ /g, '_');
-}
-
-function makeResourceIconPart(resourceName: string) {
-  return resourceName.replace(/ /g, '');
-}

src/components/GoodsList.tsx

@@ -0,0 +1,74 @@
+import { Component, Accessor, Show } from 'solid-js';
+import recipesByBuilding from 'src/data/recipesByBuilding.json';
+import { makeResourceIconPart } from 'src/functions/IconNameUtils';
+import { useOptionsContext } from 'src/providers/OptionsProvider';
+
+export const GoodsList: Component<{
+  buildingsAccr: Accessor<string[]>;
+  resourcesAccr: Accessor<string[]>;
+}> = (props) => {
+  const getGoods = () =>
+    // for each building, if one or more of each ingredient is in the resources list, add the output to the list
+    // todo: also include outputs from other buildings that are inputs to the current building
+    Object.keys(recipesByBuilding)
+      .filter((building) => props.buildingsAccr().includes(building))
+      .flatMap((building) =>
+        recipesByBuilding[building].filter((recipe) => {
+          const ingredients = [
+            recipe.Ingredient_1,
+            recipe.Ingredient_2 || null,
+            recipe.Ingredient_3 || null,
+          ].filter((x) => x);
+          console.log(
+            'recipe',
+            Object.keys(recipe.Product),
+            'ingredients',
+            ingredients
+          );
+          return ingredients.every((ingredient) =>
+            props
+              .resourcesAccr()
+              .some((resource) => Object.keys(ingredient).includes(resource))
+          );
+        })
+      )
+      .flatMap((recipe) => Object.keys(recipe.Product));
+  const [options] = useOptionsContext();
+
+  return (
+    <div class="p-2">
+      <h2 class="text-lg">Goods from resources</h2>
+      <ul class="flex">
+        {getGoods().map((productName) => (
+          <li>
+            <div class="flex space-x-1 mr-1">
+              <div>
+                <Show when={options.showRecipeIcons}>
+                  <img
+                    src={`./icons/resources/60px-Icon_Resource_${makeResourceIconPart(
+                      productName
+                    )}.png`}
+                    alt={productName}
+                    height={20}
+                    width={20}
+                    class="rounded-sm shadow-lg"
+                  />
+                </Show>
+              </div>
+              <div>
+                <Show when={options.showRecipeNames}>{productName}</Show>{' '}
+                {/* todo: get the recipe so i have more info to display */}
+                {/* <Show when={options.showRecipeEfficiency}>
+                {recipe.Efficiency}
+              </Show>{' '}
+              <Show when={options.showRecipeNumber}>
+                {amount}
+              </Show> */}
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

src/functions/IconNameUtils.ts

@@ -0,0 +1,9 @@
+export function makeBuildingIconPart(buildingName: string) {
+  return buildingName
+    .replace(/^Flawless /, '')
+    .replace(/'/g, '')
+    .replace(/ /g, '_');
+}
+export function makeResourceIconPart(resourceName: string) {
+  return resourceName.replace(/ /g, '');
+}