Thinkful-Ed · MaryGailAng · May 28, 2024 · May 28, 2024 · May 28, 2024 · May 28, 2024
diff --git a/index.html b/index.html
@@ -1,13 +1,23 @@
 <html>
   <head>
     <link rel="stylesheet" href="./src/styles.css">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Roboto&family=Special+Elite&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
-    <h1></h1>
+    <h1 id="title">Whack-a-Mole</h1>
+    <div class="menu">
+      <div class="menuList"><button id="easy">Easy</button></div>
+      <div class="menuList"><button id="normal">Normal</button></div>
+      <div class="menuList"><button id="hard">Hard</button></div>
+    </div>
+    <div class="menu">
+      <div class="menuList"><button id="start">Game Start</button></div>
+      <div class="menuList"><button id="end">Game Stop</button></div>
+    </div>
     <div>
-      <div>
-        <h2>Click start to play!</h2>
-      </div>
       <div>
         <h2>score: <span id="score">0</span></h2>
       </div>
@@ -23,6 +33,27 @@ <h2><span id="timer">0</span> seconds left.</h2>
         <div id="mole1" class="mole"></div>
       </div>
       <!--TODO: Add the missing holes and moles. -->
+      <div id="hole2" class="hole">
+        <div id="mole2" class="mole"></div>
+      </div>
+      <div id="hole3" class="hole">
+        <div id="mole3" class="mole"></div>
+      </div>
+      <div id="hole4" class="hole">
+        <div id="mole4" class="mole"></div>
+      </div>
+      <div id="hole5" class="hole">
+        <div id="mole5" class="mole"></div>
+      </div>
+      <div id="hole6" class="hole">
+        <div id="mole6" class="mole"></div>
+      </div>
+      <div id="hole7" class="hole">
+        <div id="mole7" class="mole"></div>
+      </div>
+      <div id="hole8" class="hole">
+        <div id="mole8" class="mole"></div>
+      </div>
     </div>
     <script src="./src/index.js"></script>
   </body>

diff --git a/src/index.js b/src/index.js
@@ -2,15 +2,34 @@ const holes = document.querySelectorAll('.hole');
 const moles = document.querySelectorAll('.mole');
 const startButton = document.querySelector('#start');
 // TODO: Add the missing query selectors:
-const score; // Use querySelector() to get the score element
-const timerDisplay; // use querySelector() to get the timer element.
+const endButton = document.querySelector('#end');
+const easyButton = document.querySelector("#easy");
+const normalButton = document.querySelector("#normal");
+const hardButton = document.querySelector("#hard");
+const score = document.querySelector('#score'); // Use querySelector() to get the score element
+const timerDisplay = document.querySelector('#timer'); // use querySelector() to get the timer element.
 
 let time = 0;
 let timer;
 let lastHole = 0;
 let points = 0;
 let difficulty = "hard";
 
+const audioHit = new Audio("https://github.com/gabrielsanchez/erddiagram/blob/main/hit.mp3?raw=true");
+const song = new Audio("https://github.com/gabrielsanchez/erddiagram/blob/main/molesong.mp3?raw=true");
+
+function playAudio(audioObject){
+  audioObject.play();
+}
+
+function stopAudio(audioObject){
+  audioObject.pause();
+}
+
+function play(){
+  playAudio(song)
+}
+
 /**
  * Generates a random integer within a range.
  *
@@ -21,7 +40,7 @@ let difficulty = "hard";
  *
  */
 function randomInteger(min, max) {
-  // return Math.floor(Math.random() * (max - min + 1)) + min;
+   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
 /**
@@ -41,7 +60,13 @@ function randomInteger(min, max) {
  */
 function setDelay(difficulty) {
   // TODO: Write your code here.
-
+  if (difficulty === "easy"){
+    return 1500
+  } else if (difficulty === "normal"){
+    return 1000
+  } else if (difficulty === "hard"){
+    return randomInteger(600, 1200)
+  }
 }
 
 /**
@@ -60,7 +85,17 @@ function setDelay(difficulty) {
  */
 function chooseHole(holes) {
   // TODO: Write your code here.
-
+  // 1. Generate a random integer from 0 to 8 and assign it to an index variable.
+  const index = randomInteger(0, 8);
+  // 2. Get a random hole with the random index (e.g., const hole = holes[index]).
+  const hole = holes[index];
+  // 3. if hole === lastHole, then call chooseHole(holes) again because you don't want to return the same hole.
+  if (hole === lastHole){
+    chooseHole(holes);
+  }
+  // 4. if hole is not the same as the lastHole, then keep track of it (lastHole = hole) and return the hole.
+  lastHole = hole;
+  return hole;
 }
 
 /**
@@ -85,7 +120,13 @@ function chooseHole(holes) {
 */
 function gameOver() {
   // TODO: Write your code here
-
+  if (time>0){
+    timeoutId = showUp();
+    return timeoutId;
+  } else {
+    gameStopped = stopGame();
+    return gameStopped;
+  }
 }
 
 /**
@@ -98,8 +139,8 @@ function gameOver() {
 *
 */
 function showUp() {
-  let delay = 0; // TODO: Update so that it uses setDelay()
-  const hole = 0;  // TODO: Update so that it use chooseHole()
+  let delay = setDelay(difficulty); // TODO: Update so that it uses setDelay()
+  const hole = chooseHole(holes);  // TODO: Update so that it use chooseHole()
   return showAndHide(hole, delay);
 }
 
@@ -113,12 +154,13 @@ function showUp() {
 */
 function showAndHide(hole, delay){
   // TODO: call the toggleVisibility function so that it adds the 'show' class.
+  toggleVisibility(hole);
 
   const timeoutID = setTimeout(() => {
     // TODO: call the toggleVisibility function so that it removes the 'show' class when the timer times out.
-
+    toggleVisibility(hole);
     gameOver();
-  }, 0); // TODO: change the setTimeout delay to the one provided as a parameter
+  }, delay); // TODO: change the setTimeout delay to the one provided as a parameter
   return timeoutID;
 }
 
@@ -130,7 +172,7 @@ function showAndHide(hole, delay){
 */
 function toggleVisibility(hole){
   // TODO: add hole.classList.toggle so that it adds or removes the 'show' class.
-
+  hole.classList.toggle("show");
   return hole;
 }
 
@@ -146,7 +188,11 @@ function toggleVisibility(hole){
 */
 function updateScore() {
   // TODO: Write your code here
-
+  // Increment the points global variable by 1 point
+  points++;
+  // Update score.textContent with points.
+  score.textContent = points;
+  // Return points;
   return points;
 }
 
@@ -159,8 +205,8 @@ function updateScore() {
 */
 function clearScore() {
   // TODO: Write your code here
-  // points = 0;
-  // score.textContent = points;
+   points = 0;
+   score.textContent = points;
   return points;
 }
 
@@ -172,7 +218,10 @@ function clearScore() {
 function updateTimer() {
   // TODO: Write your code here.
   // hint: this code is provided to you in the instructions.
-
+  if (time > 0){
+    time -= 1;
+    timerDisplay.textContent = time;
+  }
   return time;
 }
 
@@ -184,10 +233,17 @@ function updateTimer() {
 */
 function startTimer() {
   // TODO: Write your code here
-  // timer = setInterval(updateTimer, 1000);
+  timer = setInterval(updateTimer, 1000);
   return timer;
 }
 
+function endTimer(){
+  time = 0;
+  timerDisplay.textContent = time;
+  setEventListeners();
+  stopGame();
+}
+
 /**
 *
 * This is the event handler that gets called when a player
@@ -198,7 +254,7 @@ function startTimer() {
 */
 function whack(event) {
   // TODO: Write your code here.
-  // call updateScore()
+  updateScore()
   return points;
 }
 
@@ -209,7 +265,7 @@ function whack(event) {
 */
 function setEventListeners(){
   // TODO: Write your code here
-
+  moles.forEach( mole => mole.addEventListener('click',whack));
   return moles;
 }
 
@@ -231,25 +287,33 @@ function setDuration(duration) {
 *
 */
 function stopGame(){
-  // stopAudio(song);  //optional
+  stopAudio(song);  //optional
   clearInterval(timer);
   return "game stopped";
 }
 
+
 /**
 *
 * This is the function that starts the game when the `startButton`
 * is clicked.
 *
 */
 function startGame(){
-  //setDuration(10);
-  //showUp();
+  play();
+  clearScore();
+  setDuration(10);
+  showUp();
+  startTimer();
+  setEventListeners();
   return "game started";
 }
 
 startButton.addEventListener("click", startGame);
-
+endButton.addEventListener("click", endTimer);
+easyButton.addEventListener("click", setDelay(easyButton));
+normalButton.addEventListener("click", setDelay(normalButton));
+hardButton.addEventListener("click", setDelay(hardButton));
 
 // Please do not modify the code below.
 // Used for testing purposes.

diff --git a/src/styles.css b/src/styles.css
@@ -7,31 +7,55 @@ html {
   -o-background-size: cover;
   background-size: cover;
   z-index:0;
-  overflow: hidden;
+  overflow: scroll;
 }
 
 h1 {
   text-align: center;
-  font-size: 90px;
-  font-family: "Comic Sans MS", "Comic Sans", cursive;
+  font-size: 150px;
+  font-family: "Amatic SC", "Comic Sans", cursive;
   color: white;
-  -webkit-text-stroke: 2px black;
+  -webkit-text-stroke: 5px black;
 }
 
 h2 {
   text-align: center;
-  font-size: 40px;
+  font-size: 30px;
+  font-family: "Special Elite", cursive;
   color: white;
-  -webkit-text-stroke: 1px black;
+  -webkit-text-stroke: 2px steelblue;
 }
 
-#start {
+button {
     text-align: center;
     font-size: 30px;
+    font-family: "Special Elite", cursive;
+    border-radius: 15%;
+    padding-top: 10px;
+}
+
+button:focus {
+  background-color: navajowhite;
 }
 
 #timer{
-    color: white;
+  color: white;
+  -webkit-text-stroke: 2px steelblue;
+}
+
+.menu{
+  width: 400px;
+  height: 60px;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 auto;
+}
+
+.menuList{
+  box-sizing: border-box;
+  color: white;
+  cursor: pointer;
+  flex: 1 0 10%;
 }
 
 .grid {
@@ -40,7 +64,7 @@ h2 {
   display: flex;
   flex-wrap: wrap;
   margin: 0 auto;
-  /*cursor: url('./assets/mallet.png'), pointer;*/
+  cursor: url('/assets/mallet.png'), pointer;
 }
 
 .hole {
@@ -78,5 +102,5 @@ h2 {
 
 .hole.show .mole {
   top: 0;
-  /*transform: scale(1.1);*/
+  transform: scale(1.1);
 }