From 2ffb629bec22730295938c959072c4aa5f417670 Mon Sep 17 00:00:00 2001 From: Gorkasmatzaile Date: Mon, 29 Aug 2022 21:11:35 +0200 Subject: [PATCH] Add UI for the game --- index.html | 15 ++++++- script.js | 124 +++++++++++++++++++++++++++++++++++++---------------- 2 files changed, 99 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index 302a960..eacb8c4 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,20 @@ Rock Paper Scissors - + - + +
+

Player score: 0

+

Computer score: 0

+ + + +
+ +
+ +
\ No newline at end of file diff --git a/script.js b/script.js index f26f0d8..eff870e 100644 --- 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 { + 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; } \ No newline at end of file