Updates

Sankeyfactory · Aug 16, 2024 · 0256560 · 0256560
1 parent 0a1ac41
commit 0256560
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 8 deletions.
diff --git a/GameData/Satisfactory.json b/GameData/Satisfactory.json
diff --git a/index.html b/index.html
@@ -36,10 +36,54 @@
                     <h2 class="title">Select a recipe for the new node</h2>
                     <div class="close" id="node-creation-close">X</div>
                 </div>
-                <div class="content">
-                    <div id="recipe-tabs"> </div>
-                    <div class="tab-selectors-container">
-                        <div id="tab-selectors"> </div>
+                <div class="columns">
+                    <div class="content">
+                        <div id="recipe-tabs"> </div>
+                        <div class="tab-selectors-container">
+                            <div id="tab-selectors"> </div>
+                        </div>
+                    </div>
+                    <div id="selected-recipe" class="hidden">
+                        <div class="property" id="selected-recipe-name">
+                            <div class="title">Recipe name</div>
+                            <div class="text">Iron plate</div>
+                        </div>
+                        <div class="property" id="selected-recipe-machine">
+                            <div class="title">Machine</div>
+                            <div class="machine">
+                                <img class="icon"
+                                    src="GameData/SatisfactoryIcons/Buildable/Factory/AssemblerMk1/AssemblerMk1.png"
+                                    alt="Iron Plate" loading="lazy">
+                            </div>
+                        </div>
+                        <div class="property" id="selected-recipe-input">
+                            <div class="title">Input per min</div>
+                            <div class="resource">
+                                <img class="icon"
+                                    src="GameData/SatisfactoryIcons/Resource/Parts/IronPlate/IronPlates.png"
+                                    alt="Iron Plate" loading="lazy">
+                                <p class="amount">30</p>
+                            </div>
+                        </div>
+                        <div class="property" id="selected-recipe-output">
+                            <div class="title">Output per min</div>
+                            <div class="resource">
+                                <img class="icon"
+                                    src="GameData/SatisfactoryIcons/Resource/Parts/IronPlate/IronPlates.png"
+                                    alt="Iron Plate" loading="lazy">
+                                <p class="amount">30</p>
+                            </div>
+                            <div class="resource">
+                                <img class="icon"
+                                    src="GameData/SatisfactoryIcons/Resource/Parts/IronPlate/IronPlates.png"
+                                    alt="Iron Plate" loading="lazy">
+                                <p class="amount">30</p>
+                            </div>
+                        </div>
+                        <div class="property" id="selected-recipe-power">
+                            <div class="title">Power usage</div>
+                            <div class="text">30 MW</div>
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/script.js b/script.js
diff --git a/style.css b/style.css
@@ -217,11 +217,19 @@ div#node-creation-modal {
 }
 
 #node-creation-modal div.content {
-    padding: 0 16px 16px 16px;
     display: flex;
     flex-direction: column-reverse;
     flex-grow: 1;
     min-height: 0;
+    min-width: 0;
+}
+
+#node-creation-modal div.columns {
+    display: flex;
+    flex-grow: 1;
+    min-height: 0;
+    padding: 0 16px 16px 16px;
+    gap: 16px;
 }
 
 #node-creation-modal div.tab-selectors-container {
@@ -330,8 +338,76 @@ div#node-creation-modal {
     border: 2px solid #585858;
 }
 
+#node-creation-modal div.recipe.selected {
+    background-color: #242424;
+    border: 2px solid #585858;
+}
+
 #node-creation-modal .recipe img.item-icon {
     flex-grow: 1;
     min-width: 0;
     object-fit: contain;
 }
+
+#node-creation-modal div#selected-recipe {
+    align-self: stretch;
+    justify-content: flex-end;
+    min-width: 120px;
+    max-width: 120px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+#node-creation-modal #selected-recipe .property {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+#node-creation-modal #selected-recipe .property>div {
+    background-color: #00000050;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 6px;
+}
+
+#node-creation-modal #selected-recipe .property>div:first-child {
+    border-radius: 8px 8px 0 0;
+}
+
+#node-creation-modal #selected-recipe .property>div:last-child {
+    border-radius: 0 0 8px 8px;
+}
+
+#node-creation-modal #selected-recipe .property .title {
+    font-weight: 500;
+}
+
+#node-creation-modal #selected-recipe .property .resource {
+    display: flex;
+    gap: 8px;
+}
+
+#node-creation-modal #selected-recipe .property .resource img.icon {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+    min-width: 0;
+}
+
+#node-creation-modal #selected-recipe .property .resource p.amount {
+    margin: 0;
+}
+
+#node-creation-modal #selected-recipe .property .machine img.icon {
+    width: 40px;
+    height: 40px;
+    object-fit: contain;
+    min-width: 0;
+}
+
+#node-creation-modal #selected-recipe .property .text {
+    text-align: center;
+}