🤖 Plandex → apply pending changes

✏️  Add 'Ghost Buster' timer game to the app

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>

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`;

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;
 }