diff --git a/dist/style.css b/dist/style.css index de86085..f0186bc 100644 --- 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 index e902d7e..23685b3 100644 --- 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); + } } }; };