From f0428ef2547b8d5d0223bceaa0d08f54ebfbd617 Mon Sep 17 00:00:00 2001
From: Sanket Parab <123058949+Sanket-825@users.noreply.github.com>
Date: Mon, 30 Dec 2024 12:22:20 +0530
Subject: [PATCH] Update app.js

Added the reset button to reset the game.
---
 StonePaperScissors/app.js | 115 ++++++++++++++++++++++----------------
 1 file changed, 68 insertions(+), 47 deletions(-)

diff --git a/StonePaperScissors/app.js b/StonePaperScissors/app.js
index d49fa55..3634a4e 100644
--- a/StonePaperScissors/app.js
+++ b/StonePaperScissors/app.js
@@ -1,63 +1,84 @@
 let userScore = 0;
-let compScore = 0;
+let compScore = 0; 
 
-const choices = document.querySelectorAll(".choice");
-const msg = document.querySelector("#msg");
+let choices = document.querySelectorAll(".choice");
+let msg = document.querySelector("#msg");
+const resetButton = document.querySelector("#reset-btn");
 
 const userScorePara = document.querySelector("#user-score");
 const compScorePara = document.querySelector("#comp-score");
 
 const genCompChoice = () => {
-  const options = ["rock", "paper", "scissors"];
-  const randIdx = Math.floor(Math.random() * 3);
-  return options[randIdx];
-};
+    const options = ["rock", "paper", "scissors"];
+    const randmIndx = Math.floor(Math.random() * 3);
+    return options[randmIndx];
+}
 
-const drawGame = () => {
-  msg.innerText = "Game was Draw. Play again.";
-  msg.style.backgroundColor = "#081b31";
-};
+const Draw = () => {
+    console.log("Game was Draw");
+    msg.innerText = `Game Was Draw! Play Again.`
+    msg.style.backgroundColor = "#081b31";
+}
 
 const showWinner = (userWin, userChoice, compChoice) => {
-  if (userWin) {
-    userScore++;
-    userScorePara.innerText = userScore;
-    msg.innerText = `You win! Your ${userChoice} beats ${compChoice}`;
-    msg.style.backgroundColor = "green";
-  } else {
-    compScore++;
-    compScorePara.innerText = compScore;
-    msg.innerText = `You lost. ${compChoice} beats your ${userChoice}`;
-    msg.style.backgroundColor = "red";
-  }
-};
+    if(userWin){
+        console.log("You Win!");
+        userScore++;
+        userScorePara.innerText = userScore;
+        msg.innerText = `You Win!, Your ${userChoice} beats ${compChoice} `;
+        msg.style.backgroundColor = "green";
+    }
+    else{
+        console.log("You Loose!");
+        compScore++;
+        compScorePara.innerText = compScore;
+        msg.innerText = `You Loose!, ${compChoice} beats your ${userChoice}`;
+        msg.style.backgroundColor = "red";
+    }
+}
 
 const playGame = (userChoice) => {
-  //Generate computer choice
-  const compChoice = genCompChoice();
-
-  if (userChoice === compChoice) {
-    //Draw Game
-    drawGame();
-  } else {
-    let userWin = true;
-    if (userChoice === "rock") {
-      //scissors, paper
-      userWin = compChoice === "paper" ? false : true;
-    } else if (userChoice === "paper") {
-      //rock, scissors
-      userWin = compChoice === "scissors" ? false : true;
-    } else {
-      //rock, paper
-      userWin = compChoice === "rock" ? false : true;
+    console.log(`user choice is: ${userChoice}`)
+    // Genereate Computer Choice 
+    const compChoice = genCompChoice();
+    console.log(`computer choice is: ${compChoice}`)
+
+    if(userChoice === compChoice){
+        //Draw Game
+        Draw();
     }
-    showWinner(userWin, userChoice, compChoice);
-  }
-};
+    else{
+        let userWin = true;
+        if(userChoice === "rock"){
+            //scissors, paper
+            userWin = compChoice === "paper" ? false:true;
+        }
+        else if(userChoice === "paper"){
+            // rock, scissors
+            userWin = compChoice === "scissors" ? false:true;
+        }
+        else{
+            // rock, paper
+            compChoice === "rock" ? false : true;
+        }
+        showWinner(userWin, userChoice, compChoice);
+    }
+}
 
 choices.forEach((choice) => {
-  choice.addEventListener("click", () => {
-    const userChoice = choice.getAttribute("id");
-    playGame(userChoice);
+    // console.log(choice);
+    choice.addEventListener("click", () => {
+        const userChoice = choice.getAttribute("id")
+        // console.log("choice was clicked", userChoice);
+        playGame(userChoice);
+    })
+})
+
+resetButton.addEventListener("click", () => {
+    userScore = 0;
+    compScore = 0;
+    userScorePara.innerText = userScore;
+    compScorePara.innerText = compScore;
+    msg.innerText = "Play your move";
+    msg.style.backgroundColor = "rgba(208, 106, 208, 1)";
   });
-});