add gray out of used buttons

src/roast.css

@@ -96,6 +96,13 @@ body {
     margin: 20px;
 }
 
+#event-buttons button.activated {
+    background-color: #ccc; /* gray to indicate completed step */
+    color: #333;
+    border: 2px solid #888;
+}
+
+
 #event-buttons button {
     padding: 15px 25px;
     font-size: 20px;

src/roast.ts

@@ -103,6 +103,7 @@ function logEvent(eventName: string): void {
         startTimer();
         log.push({ time: formatTime(timer), event: eventName });
         updateLog();
+        updateEventButtons(eventName);
         return;
     }
     if (eventName === "Drop") {
@@ -112,6 +113,7 @@ function logEvent(eventName: string): void {
         document.getElementById("create-plan")!.classList.remove("hidden");
         const tempButtons = document.getElementById("temp-buttons")!;
         tempButtons.innerHTML = "";
+        updateEventButtons(eventName);
         return;
     }
     if (eventName === "First Crack") {
@@ -120,6 +122,23 @@ function logEvent(eventName: string): void {
 
     log.push({ time: formatTime(timer), event: eventName });
     updateLog();
+    updateEventButtons(eventName);
+}
+
+function updateEventButtons(eventName: string){
+    if (eventName === "Charge" || eventName === "Yellow" || eventName === "First Crack" || eventName === "Second Crack" || eventName === "Drop") {
+        const eventSequence = ["Charge", "Yellow", "First Crack", "Second Crack", "Drop"];
+        const pressedIndex = eventSequence.indexOf(eventName);
+
+        for (let i = 0; i <= pressedIndex; i++) {
+            const btn = document.querySelector(`#event-buttons button:nth-child(${i + 1})`) as HTMLButtonElement;
+            if (btn) btn.classList.add("activated");
+        }
+    }
+    else if (eventName === "Reset") {
+        const eventButtons = document.querySelectorAll("#event-buttons button");
+        eventButtons.forEach(btn => btn.classList.remove("activated"));
+    }
 }
 
 function resetSystem(): void {
@@ -140,6 +159,8 @@ function resetSystem(): void {
     document.getElementById("create-plan")!.classList.remove("hidden");
     const tempButtons = document.getElementById("temp-buttons")!;
     tempButtons.innerHTML = "";
+
+    updateEventButtons("Reset");
 }
 
 function formatTime(seconds: number): string {