Display recipes with multiple outputs

Sankeyfactory · Aug 16, 2024 · 375fbc9 · 375fbc9
1 parent fac0342
commit 375fbc9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 deletions.
diff --git a/dist/style.css b/dist/style.css
@@ -300,6 +300,8 @@ div#node-creation-modal {
     background-color: #212121;
     border-radius: 8px;
     box-sizing: border-box;
+    display: flex;
+    gap: 4px;
 }
 
 #node-creation-modal div.recipe:hover {
@@ -309,7 +311,7 @@ div#node-creation-modal {
 }
 
 #node-creation-modal .recipe img.item-icon {
-    height: 100%;
-    width: 100%;
+    flex-grow: 1;
+    min-width: 0;
     object-fit: contain;
 }
diff --git a/src/main.ts b/src/main.ts
@@ -167,18 +167,18 @@ async function main()
                 let recipeNode = document.createElement("div");
                 recipeNode.classList.add("recipe");
 
-                let itemIcon = document.createElement("img");
-                itemIcon.classList.add("item-icon");
+                for (const product of recipe.products)
+                {
+                    let itemIcon = document.createElement("img");
+                    itemIcon.classList.add("item-icon");
 
-                let isEventRecipe = false;
+                    let isEventRecipe = false;
 
-                if (recipe.products.length === 1)
-                {
                     let resource = satisfactoryData.resources.find(
-                        // I specify type because CD fails otherwise for some reason.
+                        // I specify type because deploy fails otherwise for some reason.
                         (resource: typeof satisfactoryData.resources[0]) => 
                         {
-                            return resource.id == recipe.products[0].id;
+                            return resource.id == product.id;
                         }
                     );
 
@@ -187,20 +187,20 @@ async function main()
                         itemIcon.src = `GameData/SatisfactoryIcons/${resource.iconPath}`;
                         isEventRecipe = resource.iconPath.startsWith("Events");
                     }
-                }
 
-                itemIcon.alt = recipe.displayName;
-                itemIcon.loading = "lazy";
+                    itemIcon.alt = recipe.displayName;
+                    itemIcon.loading = "lazy";
 
-                recipeNode.appendChild(itemIcon);
+                    recipeNode.appendChild(itemIcon);
 
-                if (isEventRecipe)
-                {
-                    eventsRecipesGroup.div.appendChild(recipeNode);
-                }
-                else
-                {
-                    simpleRecipesGroup.appendChild(recipeNode);
+                    if (isEventRecipe)
+                    {
+                        eventsRecipesGroup.div.appendChild(recipeNode);
+                    }
+                    else
+                    {
+                        simpleRecipesGroup.appendChild(recipeNode);
+                    }
                 }
             };
         };