A ton of crutches to support power generators

dist/index.html

@@ -180,26 +180,21 @@ <h2 class="title">Select a recipe <span class="game-version"></span></h2>
                     </div>
                     <div class="property" id="selected-recipe-input">
                         <div class="title">Input per min</div>
-                        <div class="resource">
-                            <img class="icon" alt="" />
-                            <p class="amount"></p>
-                        </div>
                     </div>
                     <div class="property" id="selected-recipe-output">
                         <div class="title">Output per min</div>
-                        <div class="resource">
-                            <img class="icon" alt="" />
-                            <p class="amount"></p>
-                        </div>
-                        <div class="resource">
-                            <img class="icon" alt="" />
-                            <p class="amount"></p>
-                        </div>
                     </div>
                     <div class="property" id="selected-recipe-power">
                         <div class="title">Power</div>
                         <div class="text"></div>
                     </div>
+                    <div class="property" id="selected-recipe-produced-power">
+                        <div class="title">Output (MW)</div>
+                        <div class="resource power">
+                            <img class="icon" alt="" src="GameData/SatisfactoryIcons/Resource/Power.png" />
+                            <p class="amount"></p>
+                        </div>
+                    </div>
                     <div class="button dimmed" id="discard-recipe">Discard</div>
                     <div class="button" id="confirm-recipe">Create node</div>
                 </div>

dist/style.css

@@ -228,6 +228,10 @@ svg#canvas {
     fill: #8BAADA;
 }
 
+.node rect.output-slot.power {
+    fill: #ffce53;
+}
+
 .node rect.input-slot.missing {
     fill: var(--missing);
 }
@@ -244,7 +248,7 @@ svg#canvas {
 .node rect.machine:hover,
 .node rect.machine.selected,
 .node rect.input-slot:not(.missing):hover,
-.node rect.output-slot:not(.exceeding):hover,
+.node rect.output-slot:not(.exceeding):not(.power):hover,
 .node rect.input-slot.selected:not(.missing),
 .node rect.output-slot.selected:not(.exceeding) {
     filter: brightness(110%);
@@ -321,10 +325,18 @@ svg#canvas {
     height: 16px;
 }
 
+.node .recipe-container .property.power .resource img.icon {
+    margin: 0 -4px;
+}
+
 .node .recipe-container .property .resource p.amount {
     margin: 0;
 }
 
+.node .recipe-container .property.power .resource p.amount {
+    padding-top: 1px;
+}
+
 /* Recipe display near slots */
 
 .slots-group foreignObject.resources-display {
@@ -894,11 +906,19 @@ div#node-creation-modal .title span.game-version {
     margin: 0;
 }
 
+#node-creation-modal #selected-recipe .property .resource.power p.amount {
+    padding-top: 2px;
+}
+
 #node-creation-modal #selected-recipe .property .machine img.icon {
     width: 40px;
     height: 40px;
 }
 
+#node-creation-modal #selected-recipe .property .resource.power img.icon {
+    margin: 0 -8px;
+}
+
 /* Node creation modal's confirmation button */
 
 #node-creation-modal div.button {

src/GameData/GameRecipe.ts

@@ -7,7 +7,8 @@ export class GameRecipe
         public displayName: string,
         public ingredients: RecipeResource[],
         public products: RecipeResource[],
-        public manufacturingDuration: number
+        public manufacturingDuration: number,
+        public producedPower?: number
     ) { }
 }
 

src/RecipeSelectionModal.ts

@@ -243,26 +243,17 @@ export class RecipeSelectionModal extends EventTarget
 
         let isEventRecipe = false;
 
-        for (const product of recipe.products)
-        {
-            let progressBar = this.createHtmlElement("div", "progress-bar");
-
-            let itemIcon = document.createElement("img");
-            itemIcon.classList.add("item-icon");
+        let progressBar = this.createHtmlElement("div", "progress-bar");
+        recipeSelector.appendChild(progressBar);
 
-            let resource = loadSatisfactoryResource(product.id);
-
-            itemIcon.src = satisfactoryIconPath(resource.iconPath);
-            if (!isEventRecipe)
-            {
-                isEventRecipe = resource.iconPath.startsWith("Events");
-            }
-
-            itemIcon.alt = recipe.displayName;
-            itemIcon.loading = "lazy";
+        if (recipe.producedPower != undefined)
+        {
+            this.addSelectorIcon(recipeSelector, "Power");
+        }
 
-            recipeSelector.appendChild(progressBar);
-            recipeSelector.appendChild(itemIcon);
+        for (const product of recipe.products)
+        {
+            this.addSelectorIcon(recipeSelector, product.id, () => isEventRecipe = true);
         }
 
         recipeSelector.addEventListener("click", (event) =>
@@ -302,6 +293,32 @@ export class RecipeSelectionModal extends EventTarget
         }
     }
 
+    private addSelectorIcon(
+        recipeSelector: HTMLDivElement,
+        resourceId: string,
+        onEventRecipe?: () => void)
+    {
+        let itemIcon = document.createElement("img");
+        itemIcon.classList.add("item-icon");
+
+        let resource = loadSatisfactoryResource(resourceId);
+
+        itemIcon.src = satisfactoryIconPath(resource.iconPath);
+
+        if (resource.iconPath.startsWith("Events"))
+        {
+            if (onEventRecipe != undefined)
+            {
+                onEventRecipe();
+            }
+        }
+
+        itemIcon.alt = resource.displayName;
+        itemIcon.loading = "lazy";
+
+        recipeSelector.appendChild(itemIcon);
+    }
+
     private createResourceDisplay(
         parentDiv: HTMLDivElement,
         craftingTime: number,
@@ -352,8 +369,7 @@ export class RecipeSelectionModal extends EventTarget
 
         this._selectedRecipePowerText.innerText = `${this._selectedRecipe.madeIn.powerConsumption} MW`;
 
-        // Power generators showing "0 MW" is not intuitive.
-        if (this._selectedRecipe.recipe.id.startsWith("Power_"))
+        if (this._selectedRecipe.madeIn.powerConsumption === 0)
         {
             this._selectedRecipePower.classList.add("hidden");
         }
@@ -362,6 +378,35 @@ export class RecipeSelectionModal extends EventTarget
             this._selectedRecipePower.classList.remove("hidden");
         }
 
+        if (this._selectedRecipe.recipe.producedPower != undefined)
+        {
+            this._selectedRecipeProducedPower.classList.remove("hidden");
+
+            this._selectedRecipeProducedPowerText.innerText = `${this._selectedRecipe.recipe.producedPower}`;
+        }
+        else
+        {
+            this._selectedRecipeProducedPower.classList.add("hidden");
+        }
+
+        if (this._selectedRecipe.recipe.ingredients.length === 0)
+        {
+            this._selectedRecipeInput.classList.add("hidden");
+        }
+        else
+        {
+            this._selectedRecipeInput.classList.remove("hidden");
+        }
+
+        if (this._selectedRecipe.recipe.products.length === 0)
+        {
+            this._selectedRecipeOutput.classList.add("hidden");
+        }
+        else
+        {
+            this._selectedRecipeOutput.classList.remove("hidden");
+        }
+
         this._selectedRecipeDisplay.classList.remove("hidden");
 
         this._selectedRecipeDisplay.scrollTop = this._selectedRecipeDisplay.scrollHeight;
@@ -644,6 +689,8 @@ export class RecipeSelectionModal extends EventTarget
     private _selectedRecipeOutput = this._selectedRecipeDisplay.querySelector("#selected-recipe-output") as HTMLDivElement;
     private _selectedRecipePower = this._selectedRecipeDisplay.querySelector("#selected-recipe-power") as HTMLDivElement;
     private _selectedRecipePowerText = this._selectedRecipePower.querySelector(".text") as HTMLDivElement;
+    private _selectedRecipeProducedPower = this._selectedRecipeDisplay.querySelector("#selected-recipe-produced-power") as HTMLDivElement;
+    private _selectedRecipeProducedPowerText = this._selectedRecipeProducedPower.querySelector(".amount") as HTMLParagraphElement;
 
     private _confirmRecipeButton = this._modalContainer.querySelector("#confirm-recipe") as HTMLDivElement;
     private _discardRecipeButton = this._modalContainer.querySelector("#discard-recipe") as HTMLDivElement;

src/ResourcesSummary.ts

@@ -119,6 +119,16 @@ export class ResourcesSummary
             isAnyAdded = true;
         }
 
+        let power = resources.get("Power");
+        if (power != undefined)
+        {
+            column.appendChild(this.createResourceDisplay("Power", power, " MW"));
+
+            resources.delete("Power");
+
+            isAnyAdded = true;
+        }
+
         for (const [id, amount] of resources)
         {
             column.appendChild(this.createResourceDisplay(id, amount, "/min"));

src/Sankey/NodeConfiguration/NodeConfiguration.ts

@@ -121,6 +121,15 @@ export class NodeConfiguration extends EventTarget
             this._amountConfigurators.powerConfigurator!
         );
 
+        if (this._amountConfigurators.outputsConfigurators.length === 0)
+        {
+            NodeConfiguration._amountOutputsColumn.classList.add("hidden");
+        }
+        else
+        {
+            NodeConfiguration._amountOutputsColumn.classList.remove("hidden");
+        }
+
         /* Overclock group */
 
         NodeConfiguration._multipliersColumn.appendChild(this._overclockConfigurator!);
@@ -138,6 +147,15 @@ export class NodeConfiguration extends EventTarget
             this._overclockConfigurators.powerConfigurator!
         );
 
+        if (this._overclockConfigurators.outputsConfigurators.length === 0)
+        {
+            NodeConfiguration._overclockOutputsColumn.classList.add("hidden");
+        }
+        else
+        {
+            NodeConfiguration._overclockOutputsColumn.classList.remove("hidden");
+        }
+
         /* Modal window */
 
         NodeConfiguration._modalContainer.classList.remove("hidden");

src/Sankey/NodeResourceDisplay.ts

@@ -19,12 +19,8 @@ export class NodeResourceDisplay
         this.createOverclockDisplay(recipeContainer);
         this.createInputsDisplay(recipeContainer, recipe);
         this.createOutputsDisplay(recipeContainer, recipe);
-
-        // Recipes with id beginning with "Power_" are created by parsing tool for power production.
-        if (!recipe.id.startsWith("Power_"))
-        {
-            this.createPowerDisplay(recipeContainer, machine.powerConsumption);
-        }
+        this.createPowerDisplay(recipeContainer, machine.powerConsumption);
+        this.createPowerProductionDisplay(recipeContainer, recipe.producedPower);
 
         this._displayContainer.appendChild(recipeContainer);
 
@@ -68,6 +64,8 @@ export class NodeResourceDisplay
 
     private createInputsDisplay(parent: HTMLDivElement, recipe: GameRecipe)
     {
+        if (recipe.ingredients.length === 0) return;
+
         let inputsDisplay = this.createHtmlElement("div", "property") as HTMLDivElement;
 
         let title = this.createHtmlElement("div", "title");
@@ -88,6 +86,8 @@ export class NodeResourceDisplay
 
     private createOutputsDisplay(parent: HTMLDivElement, recipe: GameRecipe)
     {
+        if (recipe.products.length === 0) return;
+
         let outputsDisplay = this.createHtmlElement("div", "property") as HTMLDivElement;
 
         let title = this.createHtmlElement("div", "title");
@@ -108,6 +108,8 @@ export class NodeResourceDisplay
 
     private createPowerDisplay(parent: HTMLDivElement, powerConsumption: number)
     {
+        if (powerConsumption === 0) return;
+
         let powerDisplay = this.createHtmlElement("div", "property");
 
         let title = this.createHtmlElement("div", "title");
@@ -122,6 +124,27 @@ export class NodeResourceDisplay
         parent.appendChild(powerDisplay);
     }
 
+    private createPowerProductionDisplay(parent: HTMLDivElement, powerProduction: number | undefined)
+    {
+        if (powerProduction == undefined) return;
+
+        let powerProductionDisplay = this.createHtmlElement("div", "property", "power") as HTMLDivElement;
+
+        let title = this.createHtmlElement("div", "title");
+        title.innerText = "Output (MW)";
+
+        powerProductionDisplay.appendChild(title);
+
+        this._powerProductionDisplay = this.createAmountDisplay(
+            powerProductionDisplay,
+            "Power",
+            powerProduction,
+            "Resource/Power.png",
+        );
+
+        parent.appendChild(powerProductionDisplay);
+    }
+
     private createOverclockDisplay(parent: HTMLDivElement)
     {
         let overclockDisplay = this.createHtmlElement("div", "property");
@@ -206,13 +229,25 @@ export class NodeResourceDisplay
             outputDisplay.htmlElement.innerText = `${toFixed(this.toItemsInMinute(amount))}`;
         }
 
-        let overclockedPower = overclockPower(
-            this._machine.powerConsumption,
-            associatedNode.overclockRatio,
-            this._machine.powerConsumptionExponent
-        );
+        if (this._powerDisplay != undefined)
+        {
+            let overclockedPower = overclockPower(
+                this._machine.powerConsumption,
+                associatedNode.overclockRatio,
+                this._machine.powerConsumptionExponent
+            );
 
-        this._powerDisplay.innerText = `${toFixed(overclockedPower * associatedNode.machinesAmount)} MW`;
+            this._powerDisplay.innerText = `${toFixed(overclockedPower * associatedNode.machinesAmount)} MW`;
+        }
+
+        if (this._powerProductionDisplay != undefined)
+        {
+            let powerProduction = this._recipe.producedPower ?? 0
+                * associatedNode.machinesAmount
+                * associatedNode.overclockRatio;
+
+            this._powerProductionDisplay.innerText = `${toFixed(powerProduction)}`;
+        }
     }
 
     private readonly _recipe: GameRecipe;
@@ -224,5 +259,6 @@ export class NodeResourceDisplay
     private _overclockDisplay!: HTMLParagraphElement;
     private _inputDisplays: { htmlElement: HTMLParagraphElement; initialAmount: number; }[] = [];
     private _outputDisplays: { htmlElement: HTMLParagraphElement; initialAmount: number; }[] = [];
-    private _powerDisplay!: HTMLParagraphElement;
+    private _powerDisplay?: HTMLParagraphElement;
+    private _powerProductionDisplay?: HTMLParagraphElement;
 }