Added recipe confirmation button

dist/index.html

@@ -84,6 +84,7 @@ <h2 class="title">Select a recipe for the new node</h2>
                             <div class="title">Power usage</div>
                             <div class="text">30 MW</div>
                         </div>
+                        <div class="button" id="confirm-recipe">Create node</div>
                     </div>
                 </div>
             </div>

dist/style.css

@@ -411,3 +411,21 @@ div#node-creation-modal {
 #node-creation-modal #selected-recipe .property .text {
     text-align: center;
 }
+
+#node-creation-modal div.button {
+    display: flex;
+    padding: 12px 0;
+    justify-content: center;
+    margin-top: 10px;
+    border-radius: 8px;
+    background-color: #2b2b2b;
+    border: 2px solid #7a7a7a;
+    color: #ffffff;
+    text-align: center;
+}
+
+#node-creation-modal div.button:hover {
+    cursor: pointer;
+    background-color: #212121;
+    border: 2px solid #969696;
+}

src/main.ts

@@ -36,11 +36,8 @@ async function main()
         zoomRatioDisplay.textContent = `Zoom: ${zoomScale.toPrecision(2)}x`;
     });
 
-    function createNode() 
+    function createNode()
     {
-        let nodeCreationContainer = document.querySelector("div#node-creation-container");
-        nodeCreationContainer?.classList.remove("hidden");
-
         const node = new SankeyNode(nodesGroup, new Point(50, 50), [50, 50], [100]);
 
         node.nodeSvg.onmousedown = (event) =>
@@ -52,7 +49,11 @@ async function main()
         };
     };
 
-    (document.querySelector("div.button#create-node") as HTMLDivElement).onclick = createNode;
+    (document.querySelector("div.button#create-node") as HTMLDivElement).onclick = () =>
+    {
+        let nodeCreationContainer = document.querySelector("div#node-creation-container");
+        nodeCreationContainer?.classList.remove("hidden");
+    };
 
     let isLocked: boolean = false;
     let lockButton = document.querySelector("div.button#lock-viewport") as HTMLDivElement;
@@ -102,11 +103,22 @@ async function main()
         }
     });
 
+    let nodeCreationContainer = document.querySelector("div#node-creation-container");
+
     window.addEventListener("keypress", (event) =>
     {
         if (event.code === "KeyN")
         {
-            createNode();
+            let nodeCreationContainer = document.querySelector("div#node-creation-container");
+            nodeCreationContainer?.classList.remove("hidden");
+        }
+    });
+
+    window.addEventListener("keydown", (event) =>
+    {
+        if (event.code === "Escape" && !nodeCreationContainer?.classList.contains("hidden"))
+        {
+            nodeCreationContainer?.classList.add("hidden");
         }
     });
 
@@ -121,7 +133,6 @@ async function main()
     };
 
     let nodeCreationClose = document.querySelector("div#node-creation-close");
-    let nodeCreationContainer = document.querySelector("div#node-creation-container");
     nodeCreationClose?.addEventListener("click", () =>
     {
         nodeCreationContainer?.classList.add("hidden");
@@ -263,8 +274,6 @@ async function main()
 
     let selectedRecipeDisplay = document.querySelector("div#selected-recipe") as HTMLDivElement;
 
-    let selectedRecipeOutput = document.querySelector("#selected-recipe-output") as HTMLDivElement;
-
     let createResourceDisplay = (parentDiv: HTMLDivElement, craftingTime: number) =>
     {
         return (recipeResource: RecipeResource) =>
@@ -329,6 +338,14 @@ async function main()
         }
     });
 
+    let confirmRecipeButton = document.querySelector("div#confirm-recipe")!;
+
+    confirmRecipeButton.addEventListener("click", () =>
+    {
+        nodeCreationContainer?.classList.add("hidden");
+        createNode();
+    });
+
     tabSelectors.children[0].classList.add("active");
     recipeTabs.children[0].classList.add("active");
 }