Add UI for the game

Asmatzaile · Aug 29, 2022 · 2ffb629 · 2ffb629
1 parent 9bbda04
commit 2ffb629
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -3,9 +3,20 @@
 <head>
     <meta charset="UTF-8">
     <title>Rock Paper Scissors</title>
-    <script src="./script.js"></script>
+    <script src="./script.js" defer></script>
 </head>
 <body>
-
+
+    <main>
+        <p id="player-scoreboard">Player score: 0</p>
+        <p id="computer-scoreboard">Computer score: 0</p>
+        <button id="rock">Rock</button>
+        <button id="paper">Paper</button>
+        <button id="scissors">Scissors</button>
+    </main>
+
+    <div id="div">
+
+    </div>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,6 +1,22 @@
-function getPlayerChoice() {
-    return wordToNum(prompt("Rock, paper or scissors?: "));
-}
+// function getPlayerChoice() {
+//     return wordToNum(prompt("Rock, paper or scissors?: "));
+// }
+
+let playerText;
+let computerText;
+
+let playerScore = 0;
+let computerScore = 0;
+
+let playerOldScore = 0;
+let computerOldScore = 0;
+
+
+let resetInNextRound = false;
+
+const playerScoreBoard = document.querySelector('#player-scoreboard');
+const computerScoreBoard = document.querySelector('#computer-scoreboard');
+
 
 function getComputerChoice() {
     return Math.floor(Math.random()*3);
@@ -29,51 +45,83 @@ function wordToNum(word) {
     }
 }
 
-function playRound(playerSelection, computerSelection) {
-return result = ((((playerSelection-computerSelection)+1)%3+3)%3-1)
-}
+function playRound(playerSelection) {
+
+    if (resetInNextRound === true) reset();
 
+    const computerNumber = getComputerChoice();
+    const playerNumber = wordToNum(playerSelection);
 
+    playerText = numToWord(playerNumber);
+    computerText = numToWord(computerNumber);
 
+    result = ((((playerNumber-computerNumber)+1)%3+3)%3-1);
 
-function game() {
-    let playerScore = 0;
-    let computerScore = 0;
+    updateScore(result);
+    roundAnnounce(result);
+    if (playerScore < 5 && computerScore < 5) return;
+    triggerEndGame();
+}
 
-    for (let i = 0; i < 5; i++) {
-        let playerSelection = getPlayerChoice();
-        let computerSelection = getComputerChoice();
-        let roundResult = playRound(playerSelection, computerSelection);
+function getRoundText(roundResult) {
+    if (roundResult === 1) {
+        return (`You win! ${playerText} beats ${computerText}!`);
+    }
+    if (roundResult === -1) {
+        return (`You lose! ${playerText} is beaten by ${computerText}`);
+    }
+        return (`It's a tie! You both chose ${playerText}`);
+}
 
-        let playerText = numToWord(playerSelection);
-        let computerText = numToWord(computerSelection);
-
-        if (roundResult === 1) {
-            playerScore++;
-            console.log(`You win! ${playerText} beats ${computerText}!`);
-        } else if (roundResult === -1) {
-            computerScore++;
-            console.log(`You lose! ${playerText} is beaten by ${computerText}`);
-        } else {
-            console.log(`It's a tie! You both chose ${playerText}`);
-        }
+function updateScore(roundResult) {
+    if (roundResult === 1) playerScore++;
+    if (roundResult === -1) computerScore++;
+    updateScoreBoard();
+}
 
-        console.log("Player Score: " + playerScore);
-        console.log("Computer Score: " + computerScore);
+function updateScoreBoard() {
+    if (playerScore !== playerOldScore) {
+        playerScoreBoard.textContent = `Player score: ${playerScore}`;
+        playerOldScore = playerScore;
     }
+    if (computerScore !== computerOldScore) {
+        computerScoreBoard.textContent = `Computer score: ${computerScore}`;
+        computerOldScore = computerScore;
+    }
+}
 
-    console.log("GAME ENDED!")
-    reportWinner();
+const div = document.querySelector("#div");
 
+function triggerEndGame() {
+    const para = document.createElement('p');
+    let winner;
+    if (playerScore>computerScore) {winner = "player";}
+    else if (computerScore>playerScore) {winner = "computer";}
+    para.textContent = `${winner.toUpperCase()} WINS!`;
+    div.appendChild(para);
+    resetInNextRound = true;
+}
 
 
-    function reportWinner() {
-        if (playerScore>computerScore) {
-            console.log("PLAYER WINS!")
-        } else if (playerScore<computerScore) {
-            console.log("COMPUTER WINS!")
-        } else {
-            console.log("IT'S A TIE!")
-        }
-    }
+
+const buttons = document.querySelectorAll("button");
+
+buttons.forEach((button) => {
+    button.addEventListener('click', () => playRound(button.id));
+});
+
+
+
+function roundAnnounce(roundResult) {
+    const para = document.createElement('p');
+    para.textContent = getRoundText(roundResult);
+    div.appendChild(para);
+}
+
+function reset() {
+    div.textContent = "";
+    playerScore = 0;
+    computerScore = 0;
+    updateScoreBoard();
+    resetInNextRound = false;
 }