Quality of life changes, fixed some bugs

TattlingElk · Oct 20, 2024 · fc27931 · fc27931
1 parent 37012b2
commit fc27931
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/heroes.json b/heroes.json
@@ -26,12 +26,12 @@
     },
     {
         "screenName": "Cassidy",
-        "acceptedNames": ["Cassidy", "Cass", "McCree", "Mc Cree"],
+        "acceptedNames": ["Cassidy", "Cass", "McCree", "Mc Cree", "Cas"],
         "image": "heroes-art/cassidy.png"
     },
     {
         "screenName": "D.Va",
-        "acceptedNames": ["D.Va", "Mech", "D.Va's mech","dva"],
+        "acceptedNames": ["D.Va", "Mech", "DVa's mech","dva"],
         "image": "heroes-art/dva.png"
     },
     {

diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Character Guessing Game</title>
+  <title>Guess the Ow2 Hero</title>
   <style>
     /* Add some basic styling to make the game look decent */
     body {
@@ -156,6 +156,7 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
+
     }
 
     .popup-message {
@@ -167,7 +168,6 @@
       border-radius: 5px;
       color: white;
       font-size: 16px;
-      z-index: 1000; /* Ensure it appears above other content */
       display: none; /* Initially hidden */
     }
 
@@ -182,12 +182,12 @@
 </head>
 <body>
   <div id="start-screen">
-    <h1>Character Guessing Game</h1>
-    <p>Guess the character's name by submitting your answer. You can skip or give up at any time.</p>
+    <h1>Guess the Overwatch hero</h1>
+    <p>Guess the Herp's name. You can skip or give up at any time.</p>
     <button id="start-button">Start Game</button>
   </div>
   <div id="game-container">
-    <h1>Character Guessing Game</h1>
+    <h1>OverGuess</h1>
     <img id="character-image" src="" alt="Character Image">
     <input id="input-field" type="text" placeholder="Guess the character's name">
     <button id="submit-button">Submit</button>

diff --git a/script.js b/script.js
@@ -3,7 +3,7 @@ fetch('heroes.json')
   .then(response => response.json())
   .then(data => {
     // Shuffle the character data to randomize the order
-    const shuffledData = data.sort(() => Math.random() - 0.5);
+    let shuffledData = data.sort(() => Math.random() - 0.5);
 
     // Initialize the game state
     let currentIndex = 0;
@@ -19,6 +19,7 @@ fetch('heroes.json')
       // Hide the start screen and show the game container
       document.getElementById('start-screen').style.display = 'none';
       document.getElementById('game-container').style.display = 'flex';
+      shuffledData = data.sort(() => Math.random() - 0.5)//shuffle characters on game start to make sure that pressing restart, won't show the same heroes
 
       // Reset game state
       currentIndex = 0;
@@ -96,13 +97,15 @@ function endGame() {
     totalTime = (endTime - startTime) / 1000;
     const finalResult = `Game over! You guessed ${correctGuesses} out of ${shuffledData.length} characters in ${totalTime} seconds.`;
     document.getElementById('final-result').innerHTML = finalResult;
+
     document.getElementById('game-over-modal').style.display = 'block'; // Show the game over modal
 
     // Add event listener to the close button
     document.querySelector('.close-button').addEventListener('click', () => {
-      // Hide the game over modal
+      // Hide the game over modal, and show the main menu again, also hide the game container
       document.getElementById('game-over-modal').style.display = 'none';
-      // Optionally, you can reset the game state here if needed
+      document.getElementById('start-screen').style.display = 'flex';
+      document.getElementById('game-container').style.display = 'none';
     });
 
     // Add event listener to the restart button