From 4031da4824bf316cdff3bbf98cb9bf12562a85f4 Mon Sep 17 00:00:00 2001
From: "Lu[ke] Wilson" <l2wilson94@gmail.com>
Date: Wed, 27 Nov 2024 23:17:38 +0000
Subject: [PATCH] better ux for menus and stuff

---
 flok/index.html | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/flok/index.html b/flok/index.html
index 6a7d812..3219270 100644
--- a/flok/index.html
+++ b/flok/index.html
@@ -143,6 +143,10 @@
     justify-content: center;
     align-items: center;
   }
+
+  details button {
+    text-align: left;
+  }
 </style>
 
 <main>
@@ -158,6 +162,7 @@
           flex-direction: column;
         ">
         <button id="reload-button">🔄 Reload</button>
+        <button id="about-button">ℹ️ About</button>
         <button id="mcplant-button">🍔 McPlant</button>
         <!-- ⟳ <li>McPlant</li>
         <li>Linda McCartney</li>
@@ -208,6 +213,7 @@ <h2>welcome to pastagang!</h2>
 
   const mcplantButton = document.getElementById("mcplant-button");
   mcplantButton.addEventListener("click", () => {
+    closeBurgerMenu();
     alert("You eat the McPlant. It tastes just like a regular burger.");
   });
 
@@ -288,6 +294,19 @@ <h2>welcome to pastagang!</h2>
     }, 1000);
   }
 
+  const aboutButton = document.getElementById("about-button");
+  aboutButton.addEventListener("click", () => {
+    closeBurgerMenu();
+    openWelcomeDialog();
+  });
+
+  function openWelcomeDialog() {
+    document.getElementById("key-information").showModal();
+    iframe.style.display = "none";
+    dialogHolder.style.display = "flex";
+    coolButton.focus();
+  }
+
   function closeWelcomeDialog() {
     document.getElementById("key-information").close();
     iframe.style.display = "block";
@@ -295,12 +314,24 @@ <h2>welcome to pastagang!</h2>
     iframe.focus();
   }
 
+  addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      closeWelcomeDialog();
+    }
+  });
+
+  function closeBurgerMenu() {
+    const details = document.querySelector(".burger-menu");
+    details.removeAttribute("open");
+  }
+
   coolButton.addEventListener("click", closeWelcomeDialog);
 
   dialogHolder.addEventListener("click", (e) => {
     if (e.target !== dialogHolder) {
       return;
     }
-    coolButton.focus();
+    // coolButton.focus();
+    closeWelcomeDialog();
   });
 </script>