Finish rock paper scissors

wilyJ80 · Jan 6, 2024 · f95b500 · f95b500
1 parent 12a807a
commit f95b500
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 33 deletions.
diff --git a/rockpaperscissors/index.html b/rockpaperscissors/index.html
@@ -5,10 +5,11 @@
 	<title>Rock Paper Scissors</title>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<script src="./script.js"></script>
+	<script src="./script.js" defer></script>
 </head>
 
 <body>
+	<div class="placeholder"></div>
 </body>
 
 </html>
diff --git a/rockpaperscissors/script.js b/rockpaperscissors/script.js
@@ -1,59 +1,53 @@
+let playerWins = 0,
+computerWins = 0;
+let currentRound = 0;
+
 function getComputerChoice() {
-	let choice = Math.floor(Math.random() * 3);
+	const choice = Math.floor(Math.random() * 3);
 
 	if (choice === 0) {
 		return "Rock";
 	} else if (choice === 1) {
 		return "Paper";
-	} else if (choice === 2){
+	} else if (choice === 2) {
 		return "Scissors";
 	}
 }
 
 function playRound(playerSelection, computerSelection) {
-
 	// Testing using Regex
 	const rockRegex = /rock/i;
 	const paperRegex = /paper/i;
 	const scissorsRegex = /scissors/i;
 
 	// Regex test: player chooses rock
 	if (rockRegex.test(playerSelection)) {
-
 		if (rockRegex.test(computerSelection)) {
 			return "TIE!";
-
 		} else if (paperRegex.test(computerSelection)) {
 			return "You lose! Paper beats Rock!";
-
 		} else if (scissorsRegex.test(computerSelection)) {
 			return "You win! Rock beats Scissors!";
 		}
 	}
 
 	// Regex test: player chooses paper
 	if (paperRegex.test(playerSelection)) {
-
 		if (rockRegex.test(computerSelection)) {
 			return "You win! Paper beats Rock!";
-
 		} else if (paperRegex.test(computerSelection)) {
 			return "TIE!";
-
 		} else if (scissorsRegex.test(computerSelection)) {
 			return "You lose! Scissors beat Paper!";
 		}
 	}
 
 	// Regex test: player chooses scissors
 	if (scissorsRegex.test(playerSelection)) {
-
 		if (rockRegex.test(computerSelection)) {
 			return "You lose! Rock beats Scissors!";
-
 		} else if (paperRegex.test(computerSelection)) {
 			return "You win! Scissors beats Paper!";
-
 		} else if (scissorsRegex.test(computerSelection)) {
 			return "TIE!";
 		}
@@ -64,35 +58,66 @@ function playRound(playerSelection, computerSelection) {
 }
 
 function game() {
-
-	let playerWins = 0, computerWins = 0;
 	/* let count = 0;
 	while (count < 5) {
 		console.log("Round " + (count + 1)); */
 
-		let playerChoice = prompt("Rock, Paper, Scissors?");
-		let computerChoice = getComputerChoice();
+	// playerChoice changed to work with event listener
+	// let playerChoice = prompt("Rock, Paper, Scissors?");
 
-		let result = playRound(playerChoice, computerChoice);
-		console.log(result);
+	const rockBtn = document.createElement("button");
+	const paperBtn = document.createElement("button");
+	const scissorsBtn = document.createElement("button");
 
-		if (result.startsWith("You win")) {
-			playerWins++;
-			// count++;
+	rockBtn.textContent = "ROCK";
+	paperBtn.textContent = "PAPER";
+	scissorsBtn.textContent = "SCISSORS";
 
-		} else if (result.startsWith("You lose")) {
-			computerWins++;
-			// count++;
-		}
-	// }
+	document.body.appendChild(rockBtn);
+	document.body.appendChild(paperBtn);
+	document.body.appendChild(scissorsBtn);
 
-	// Final game outcome
-	if (playerWins > computerWins) {
-		console.log("Congrats! You win the game!");
+	const buttons = document.querySelectorAll("button");
 
-	} else {
-		console.log("Sorry. The machine wins. Try again.");
-	}
+	buttons.forEach((button) => {
+		button.addEventListener("click", () => {
+			if (currentRound < 5) {
+
+				const computerChoice = getComputerChoice();
+				const playerChoice = button.textContent;
+				const result = playRound(playerChoice, computerChoice);
+				// console.log(result);
+
+				const resultDiv = document.createElement("div");
+				resultDiv.textContent = result;
+				document.body.appendChild(resultDiv);
+
+				if (result.startsWith("You win")) {
+					playerWins++;
+				} else if (result.startsWith("You lose")) {
+					computerWins++;
+				}
+
+				currentRound++;
+
+				if (currentRound === 5) {
+
+					const finalResultDiv = document.createElement('div');
+					// Final game outcome
+					if (playerWins > computerWins) {
+						finalResultDiv.textContent = "Congrats! You win the game!";
+					} else if (computerWins > playerWins) {
+						finalResultDiv.textContent = "Sorry. The machine wins. Try again.";
+					}
+
+					document.body.appendChild(finalResultDiv);
+				}
+			}
+		});
+	});
+
+	// let result = playRound(playerChoice, computerChoice);
+	// }
 }
 
 game();