From d37602ef35284c6fac7da0b9a713774882535bb8 Mon Sep 17 00:00:00 2001
From: Jason McPheron <jason.mcpheron@gmail.com>
Date: Sun, 21 Apr 2024 10:08:19 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20Plandex=20=E2=86=92=20apply=20pe?=
 =?UTF-8?q?nding=20changes=20=20=20=E2=9C=8F=EF=B8=8F=20=20Add=20'Ghost=20?=
 =?UTF-8?q?Buster'=20timer=20game=20to=20the=20app?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 27 ++++++++++++++++-------
 public/script.js  | 55 +++++++++++++++++++----------------------------
 public/styles.css |  7 ++++++
 3 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/public/index.html b/public/index.html
index 148d325..2b94dd7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,16 +20,27 @@
                 </div>
             </div>
         </div>
-        <div class="card mt-3">
-            <div class="card-body">
-                <button id="challengeButton" class="btn btn-success">⏱️ 2-Second Challenge ⏱️</button>
-                <div id="challengeResults" class="mt-3">
-                    <h2>Challenge Results 🎯</h2>
-                    <ul id="resultsList"></ul>
-                </div>
-            </div>
+<div class="card mt-3">
+    <div class="card-body">
+        <button id="challengeButton" class="btn btn-success">⏱️ 2-Second Challenge ⏱️</button>
+        <div id="challengeResults" class="mt-3">
+            <h2>Challenge Results 🎯</h2>
+            <ul id="resultsList"></ul>
         </div>
     </div>
+</div>
+<div class="card mt-3">
+    <div class="card-body">
+        <h2 class="card-title">👻 Ghost Buster Game 👻</h2>
+        <p class="card-text">Press start and bust the ghost as soon as it appears!</p>
+        <button id="startGhostGame" class="btn btn-warning">Start</button>
+        <button id="bustGhost" class="btn btn-danger" style="display: none;">Bust Ghost 👻</button>
+        <div id="ghostDisplay" class="mt-3"></div>
+        <div id="ghostResults" class="mt-3"></div>
+    </div>
+</div>
+
+    </div>
     <script src="script.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/script.js b/public/script.js
index d4c6185..8086b9f 100644
--- a/public/script.js
+++ b/public/script.js
@@ -1,43 +1,32 @@
 let timerRunning = false;
 let startTime;
 let elapsedTime = 0;
-let timerHistory = [];
-let challengeRunning = false;
-let challengeStartTime;
-let challengeTimes = [];
-
-const timerButton = document.getElementById('timerButton');
-const historyList = document.getElementById('historyList');
-const challengeButton = document.getElementById('challengeButton');
-timerButton.addEventListener('click', function() {
-    if (!timerRunning) {
-        startTime = Date.now() - elapsedTime;
-        timerRunning = true;
-        timerButton.textContent = 'Stop Timer';
-    } else {
-        elapsedTime = Date.now() - startTime;
-        timerRunning = false;
-        timerButton.textContent = 'Start Timer';
-        recordTime(elapsedTime);
-    }
+let ghostGameRunning = false;
+let ghostTimer;
+let ghostAppearTime;
+document.getElementById('startGhostGame').addEventListener('click', function() {
+    ghostGameRunning = true;
+    document.getElementById('ghostDisplay').textContent = '';
+    document.getElementById('ghostResults').textContent = '';
+    document.getElementById('bustGhost').style.display = 'none';
+    let randomTime = Math.random() * 10000; // Random time within 10 seconds
+    ghostTimer = setTimeout(function() {
+        document.getElementById('ghostDisplay').textContent = '👻';
+        ghostAppearTime = Date.now();
+        document.getElementById('bustGhost').style.display = 'inline';
+    }, randomTime);
 });
-
-challengeButton.addEventListener('click', function() {
-    if (!challengeRunning) {
-        challengeStartTime = Date.now();
-        challengeRunning = true;
-        challengeButton.textContent = 'Tap at 2 seconds';
+document.getElementById('bustGhost').addEventListener('click', function() {
+    if (!ghostAppearTime) {
+        document.getElementById('ghostResults').textContent = 'Too early! You lose!';
+        clearTimeout(ghostTimer);
     } else {
-        let tapTime = Date.now();
-        let interval = tapTime - challengeStartTime;
-        challengeTimes.push(interval);
-        challengeRunning = false;
-        challengeButton.textContent = '⏱️ 2-Second Challenge ⏱️';
-        recordChallengeTime(interval);
+        let reactionTime = Date.now() - ghostAppearTime;
+        document.getElementById('ghostResults').textContent = `Reaction Time: ${reactionTime} ms`;
     }
+    ghostGameRunning = false;
+    document.getElementById('bustGhost').style.display = 'none';
 });
-
-function recordTime(time) {
     timerHistory.push(time);
     const newTime = document.createElement('li');
     newTime.textContent = `Time: ${time} ms`;
diff --git a/public/styles.css b/public/styles.css
index 01cc636..4719dec 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -24,4 +24,11 @@ body {
 
 #timerHistory, #challengeResults {
     color: #000080; /* Navy */
+}
+
+#startGhostGame, #bustGhost {
+    margin: 10px;
+    font-size: 16px;
+    padding: 10px 20px;
+    border-radius: 8px;
 }
\ No newline at end of file