diff --git a/game/index.js b/game/index.js index d9249161bc09eacf65532a1921eff814ec1ff60f..0825e09745d832becbee9a3cde95af9ddf12e225 100644 --- a/game/index.js +++ b/game/index.js @@ -13,10 +13,13 @@ buttonStein.addEventListener("click", () => showResults("Stein")); buttonPapier.addEventListener("click", () => showResults("Papier")); buttonSchere.addEventListener("click", () => showResults("Schere")); + const winnerMsgElement = document.getElementById("winner-msg"); -const optionsContainer = document.getElementById("options-container"); +const optionsContainer = document.querySelector(".options-container"); const resetGameBtn = document.getElementById("reset-game-btn"); +resetGameBtn.addEventListener("click", resetGame); + function getRandomComputerResult(){ const number = Math.floor(Math.random()*options.length); return options[number]; @@ -46,10 +49,37 @@ function getRoundResults(playerChoice){ } function showResults(playerChoice) { - roundResultsMessage.innerText = getRoundResults(playerChoice) + roundResultsMessage.innerText = getRoundResults(playerChoice); playerScoreElement.innerText = playerScore; computerScoreElement.innerText = computerScore; + + if(playerScore >= 3){ + winnerMsgElement.innerText = "Spieler hat gewonnen"; + } else if(computerScore >= 3) { + winnerMsgElement.innerText = "Computer hat gewonnen"; + } + if(playerScore >= 3 || computerScore >= 3) { + //CSS aendern + resetGameBtn.style.display = "block"; + optionsContainer.style.display = "none"; + } } +function resetGame(){ + playerScore = 0; + computerScore = 0; + + //HTML updaten + playerScoreElement.innerText = playerScore; + computerScoreElement.innerText = computerScore; + + resetGameBtn.style.display = "none"; + optionsContainer.style.display = "block"; + + winnerMsgElement.innerText = ""; + roundResultsMessage.innerText = ""; +} + +