Add Highscore Feature to Fake Insects Game

index.html

@@ -99,6 +99,10 @@
             You found 0 fake insects in 25 seconds.
           </p>
           <p id="performance-percentage" class="text-md text-gray-500">You've outperformed 0% of players.</p>
+          <p class="text-md text-gray-500">
+            Overall Highscore: 
+            <span id="highscore" class="rounded-xl bg-black px-2 text-white">0</span>
+          </p>
         </div>
 
         <button
@@ -121,6 +125,7 @@
     const gameOverMessageElement = document.getElementById('game-over-message');
     const image1 = document.getElementById('image1');
     const image2 = document.getElementById('image2');
+    const highscoreElement = document.getElementById('highscore');
 
     let score = 0;
     let timeLeft = 25;
@@ -132,6 +137,10 @@
     // Start preloading images immediately
     preloadImages();
 
+    // Load highscore from localStorage
+    let highscore = localStorage.getItem('highscore') || 0;
+    highscoreElement.textContent = highscore;
+
     function preloadImages(count = 20) {
       for (let i = 1; i <= count; i++) {
         const index = Math.floor(Math.random() * totalImages) + 1;
@@ -228,6 +237,12 @@
       }
       const performancePercentage = calculatePerformancePercentage(score);
       document.getElementById('performance-percentage').textContent = `You've outperformed ${performancePercentage}% of players.`;
+      // Update highscore if needed
+      if (score > highscore) {
+        highscore = score;
+        localStorage.setItem('highscore', highscore);
+        highscoreElement.textContent = highscore;
+      }
       gameOverOverlay.classList.remove('hidden');
     }
 
@@ -278,4 +293,4 @@
     // Initial call to hide images with no src
     hideImagesWithNoSrc();
   </script>
-</html>
+</html>