From 1c07bbbab4b4cb921644b27e2c4ffbde08c77d94 Mon Sep 17 00:00:00 2001 From: Synobbol <97944378+Synobbol@users.noreply.github.com> Date: Mon, 30 Jan 2023 14:59:19 +0100 Subject: [PATCH] create UI --- index.html | 6 ++- script.js | 122 ++++++++++++++++++++++++++++++++++------------------- 2 files changed, 84 insertions(+), 44 deletions(-) diff --git a/index.html b/index.html index 828467c..ad49d0f 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,11 @@ - + + + +
+
\ No newline at end of file diff --git a/script.js b/script.js index da194d7..db0a3d0 100644 --- a/script.js +++ b/script.js @@ -39,62 +39,100 @@ function getComputerChoice(){ return computer; } +const btns = Array.from(document.querySelectorAll('.btn')); +btns.forEach(btn => btn.addEventListener('click', graphicGame)); + +let player = 0; +let computer = 0; +const container = document.querySelector("#content"); +let score = document.createElement("p"); + +score.textContent = `Player score: ${player}/5 - Computer score: ${computer}/5`; +container.appendChild(score); + +function graphicGame(player1, player2){ + if (player < 5 && computer < 5) { + let party = playRound(player1, player2); + + if(party === true){ + player +=1; + } + else if(party === false){ + computer +=1; + } + score.textContent = `Player score: ${player}/5 - Computer score: ${computer}/5`; + + let resultScore = document.createElement("p"); + + if(player === 5){ + resultScore.textContent = "You win!"; + container.appendChild(resultScore); + btns.forEach(btn => btn.disabled = true); + + } + else if(computer === 5){ + resultScore.textContent = "Computer wins!"; + container.appendChild(resultScore); + btns.forEach(btn => btn.disabled = true); + } + + } +} function playRound(playerSelection, computerSelection){ - let result = "It's a Tie!"; - playerSelection = playerSelection.toLowerCase(); + let state = null; + + computerSelection = getComputerChoice(); + playerSelection = playerSelection.target.dataset.word; + //playerSelection = playerSelection.toLowerCase(); + let result = document.createElement("p"); if (playerSelection === "rock" && computerSelection == "paper"){ - result = "You Lose! Paper beats Rock"; - console.log(playerSelection, computerSelection, result); - - return false; + result.textContent = "You Lose! Paper beats Rock"; + state = false; } else if(playerSelection === "paper" && computerSelection == "rock"){ - result = "You Win! Paper beats Rock"; - console.log(playerSelection, computerSelection, result); - - return true; + result.textContent = "You Win! Paper beats Rock"; + state = true; } - else if(playerSelection === "paper" && computerSelection == "scissors"){ - result = "You Lose! Scissors beats Paper"; - console.log(playerSelection, computerSelection, result); - - return false; + else if(playerSelection === "paper" && computerSelection == "scissors"){ + result.textContent = "You Lose! Scissors beats Paper"; + state = false; } else if(playerSelection === "scissors" && computerSelection == "paper"){ - result = "You Win! Scissors beats Paper"; - console.log(playerSelection, computerSelection, result); - - return true; + result.textContent = "You Win! Scissors beats Paper"; + state = true; } else if(playerSelection === "rock" && computerSelection == "scissors"){ - result = "You Win! Rock beats Scissors"; - console.log(playerSelection, computerSelection, result); - - return true; + result.textContent = "You Win! Rock beats Scissors"; + state = true; } else if(playerSelection === "scissors" && computerSelection == "rock"){ - result = "You Lose! Rock beats Scissors"; - console.log(playerSelection, computerSelection, result); - - return false; + result.textContent = "You Lose! Rock beats Scissors"; + state = false; } else{ - console.log(playerSelection, computerSelection,result); - return null; + result.textContent = "It's a Tie!"; + state = null; } - -} -// console.log(playRound("Paper", getComputerChoice())); -function game(){ + container.appendChild(result); + return state; +} + +function game(player1, player2){ let player = 0; let computer = 0; - let win = "You win"; + const container = document.querySelector("#result"); + let score = document.createElement("p"); + let result = document.createElement("p"); + result.textContent = "You win"; - while (player || computer < 5) { - let party = playRound(prompt("Rock, Paper or Scissors?"), getComputerChoice()); + while (player < 5 && computer < 5) { + let party = playRound(player1, player2); + + score.textContent = `Player score: ${player}/5 Computer score: ${computer}/5`; + container.appendChild(score); if(party === true){ player +=1; @@ -102,17 +140,15 @@ function game(){ else if(party === false){ computer +=1; } - - console.log(`Player score: ${player}/5, Computer score: ${computer}/5`); if(player === 5){ - return win = "You win!"; + result.textContent = "You win!"; + container.appendChild(result); } else if(computer === 5){ - return win = "Computer wins!"; + result.textContent = "Computer wins!"; + container.appendChild(result); } } -} - -console.log(game()); \ No newline at end of file +} \ No newline at end of file