Thinkful-Ed · isaimoran · Nov 20, 2023 · Nov 21, 2023 · Nov 21, 2023 · Nov 22, 2023
diff --git a/assets/mouse_rat.jpg b/assets/mouse_rat.jpg
diff --git a/assets/mouse_rat.png b/assets/mouse_rat.png
diff --git a/index.html b/index.html
@@ -3,10 +3,10 @@
     <link rel="stylesheet" href="./src/styles.css">
   </head>
   <body>
-    <h1></h1>
+    <h1 id="title"> Whack-a-Rat!! </h1>
     <div>
       <div>
-        <h2>Click start to play!</h2>
+        <h2>Click <button id="start">start</button> to play!</h2>
       </div>
       <div>
         <h2>score: <span id="score">0</span></h2>
@@ -22,7 +22,27 @@ <h2><span id="timer">0</span> seconds left.</h2>
       <div id="hole1" class="hole">
         <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,14 +2,14 @@ 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 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 time = 10;
 let timer;
 let lastHole = 0;
 let points = 0;
-let difficulty = "hard";
+let difficulty = "normal";
 
 /**
  * Generates a random integer within a range.
@@ -21,7 +21,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;
 }
 
 /**
@@ -40,8 +40,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 {
+		return randomInteger(600, 1200);
+	}
 }
 
 /**
@@ -59,8 +64,13 @@ function setDelay(difficulty) {
  * chooseHole(holes) //> returns one of the 9 holes that you defined
  */
 function chooseHole(holes) {
-  // TODO: Write your code here.
-
+	const index = randomInteger(0, 8);
+	const hole = holes[index];
+	if (hole === lastHole) {
+		return chooseHole(holes);
+	}
+	lastHole = hole;
+	return hole;
 }
 
 /**
@@ -84,8 +94,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 +113,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 +128,12 @@ 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 +145,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 +161,8 @@ function toggleVisibility(hole){
 */
 function updateScore() {
   // TODO: Write your code here
-
+points ++;
+score.textContent = points;
   return points;
 }
 
@@ -159,8 +175,8 @@ function updateScore() {
 */
 function clearScore() {
   // TODO: Write your code here
-  // points = 0;
-  // score.textContent = points;
+  points = 0;
+  score.textContent = points;
   return points;
 }
 
@@ -172,7 +188,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,7 +203,7 @@ function updateTimer() {
 */
 function startTimer() {
   // TODO: Write your code here
-  // timer = setInterval(updateTimer, 1000);
+  timer = setInterval(updateTimer, 1000);
   return timer;
 }
 
@@ -199,6 +218,7 @@ function startTimer() {
 function whack(event) {
   // TODO: Write your code here.
   // call updateScore()
+  updateScore();
   return points;
 }
 
@@ -209,10 +229,12 @@ function whack(event) {
 */
 function setEventListeners(){
   // TODO: Write your code here
-
+moles.forEach(
+  mole => mole.addEventListener('click', whack)
+  );
   return moles;
 }
-
+setEventListeners();
 /**
 *
 * This function sets the duration of the game. The time limit, in seconds,
@@ -233,6 +255,7 @@ function setDuration(duration) {
 function stopGame(){
   // stopAudio(song);  //optional
   clearInterval(timer);
+  time = 10;
   return "game stopped";
 }
 
@@ -243,8 +266,11 @@ function stopGame(){
 *
 */
 function startGame(){
-  //setDuration(10);
-  //showUp();
+  setDuration(10);
+  showUp();
+  clearScore();
+	setEventListeners();
+	startTimer();
   return "game started";
 }
 

diff --git a/src/styles.css b/src/styles.css
@@ -65,7 +65,7 @@ h2 {
 
 .mole {
   /*background:url('./assets/mole.png') bottom center no-repeat;*/
-  background:url('https://github.com/Thinkful-Ed/js-dev-final-capstone-starter/blob/main/assets/mole.png?raw=true') bottom center no-repeat;
+  background:url("https://github.com/isaimoran/js-dev-final-capstone-starter-whack-a-mole/blob/main/assets/mouse_rat.png?raw=true") bottom center no-repeat;
   background-size: 40%;
   position: absolute;
   top: 100%;