From 15f74335c70d223c52dcc2a781d8582c5580664e109d9e3bb697472a9b6c0919 Mon Sep 17 00:00:00 2001
From: Terrence Ezrol <terry@ezrol.com>
Date: Sun, 13 Jul 2025 16:22:52 -0400
Subject: [PATCH] add gray out of used buttons

---
 src/roast.css |  7 +++++++
 src/roast.ts  | 21 +++++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/src/roast.css b/src/roast.css
index cb5e841..386a91b 100644
--- a/src/roast.css
+++ b/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;
diff --git a/src/roast.ts b/src/roast.ts
index 77a316f..1a5898e 100644
--- a/src/roast.ts
+++ b/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 {