Merge pull request #190 from Mehul237/main

Update Roack-Paper-Scissors game User interface
shrey141102 · Jan 4, 2024 · 2fa3147 · 2fa3147
2 parents cb231d9 + e1d2fd0
commit 2fa3147
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 157 deletions.
diff --git a/Rock Paper Scissor/app.js b/Rock Paper Scissor/app.js
@@ -0,0 +1,68 @@
+let userScore = 0;
+let compScore = 0;
+
+const choices = document.querySelectorAll(".choice");
+const msg = document.querySelector("#msg");
+
+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 drawGame = () => {
+  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";
+  }
+};
+
+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;
+    }
+    showWinner(userWin, userChoice, compChoice);
+  }
+};
+
+choices.forEach((choice) => {
+  choice.addEventListener("click", () => {
+    const userChoice = choice.getAttribute("id");
+    playGame(userChoice);
+  });
+});
diff --git a/Rock Paper Scissor/images/paper.png b/Rock Paper Scissor/images/paper.png
diff --git a/Rock Paper Scissor/images/rock.png b/Rock Paper Scissor/images/rock.png
diff --git a/Rock Paper Scissor/images/scissors.png b/Rock Paper Scissor/images/scissors.png
diff --git a/Rock Paper Scissor/index.html b/Rock Paper Scissor/index.html
@@ -1,27 +1,39 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>replit</title>
-    <link href="style.css" rel="stylesheet" type="text/css" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rock Paper Scissors Game</title>
+    <link rel="stylesheet" href="style.css" />
   </head>
-
   <body>
-    <div class="wrapper">
-      <div class="buttons">
-        <button class="rpsButton" value="Rock">✊</button>
-        <button class="rpsButton" value="Paper">🤚</button>
-        <button class="rpsButton" value="Scissors">✌️</button>
+    <h1>Rock Paper Scissors</h1>
+    <div class="choices">
+      <div class="choice" id="rock">
+        <img src="./images/rock.png" />
+      </div>
+      <div class="choice" id="paper">
+        <img src="./images/paper.png" />
       </div>
-      <div class="resultContainer">
-        <div id="player-score"></div>
-        <div id="hands"></div>
-        <div id="result"></div>
-        <button id="endGameButton">🔴</button>
+      <div class="choice" id="scissors">
+        <img src="./images/scissors.png" />
       </div>
     </div>
 
-    <script src="script.js"></script>
+    <div class="score-board">
+      <div class="score">
+        <p id="user-score">0</p>
+        <p>You</p>
+      </div>
+      <div class="score">
+        <p id="comp-score">0</p>
+        <p>Comp</p>
+      </div>
+    </div>
+
+    <div class="msg-container">
+      <p id="msg">Play your move</p>
+    </div>
+    <script src="app.js"></script>
   </body>
 </html>
diff --git a/Rock Paper Scissor/script.js b/Rock Paper Scissor/script.js
diff --git a/Rock Paper Scissor/style.css b/Rock Paper Scissor/style.css
@@ -1,38 +1,68 @@
-html, body {
-  height: 100%;
-  width: 100%;
+* {
+  margin: 0;
   padding: 0;
-  margin:0;
+  text-align: center;
+}
+
+h1 {
+  background-color: #081b31;
+  color: #fff;
+  height: 5rem;
+  line-height: 5rem;
 }
 
-.wrapper {
-  background: #1c1c1c;
-  color: white;
+.choice {
+  height: 165px;
+  width: 165px;
+  border-radius: 50%;
   display: flex;
+  justify-content: center;
   align-items: center;
+}
+
+.choice:hover {
+  cursor: pointer;
+  background-color: #081b31;
+}
+
+img {
+  height: 150px;
+  width: 150px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.choices {
+  display: flex;
   justify-content: center;
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
+  align-items: center;
+  gap: 3rem;
+  margin-top: 5rem;
 }
 
-.buttons {
+.score-board {
   display: flex;
-  gap: 20px;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  margin-top: 3rem;
+  gap: 5rem;
 }
 
-button {
-  height: 100px;
-  width: 100px;
-  font-size: 48px;
-  border-radius: 30px;
-  cursor: pointer;
-
+#user-score,
+#comp-score {
+  font-size: 4rem;
 }
 
-.resultContainer {
-  font-size: 2rem;
-  text-align: center;
-  margin-top: 20px;
+.msg-container {
+  margin-top: 5rem;
 }
 
+#msg {
+  background-color: #081b31;
+  color: #fff;
+  font-size: 2rem;
+  display: inline;
+  padding: 1rem;
+  border-radius: 1rem;
+}