diff --git a/css/main.css b/css/main.css index d5290d7..1b029a3 100644 --- a/css/main.css +++ b/css/main.css @@ -55,3 +55,45 @@ button:active { #status { margin-top: 20px; } + +#statusRound { + margin-top: 20px; + color: blue; +} + +#statusGame { + margin-top: 20px; + color: red; +} + + +.scoreboardround { + width: 14em; + margin: auto; + color: blue; + border: 1px solid blue; +} +.scoreboardround h2 { + border-bottom: 1px solid blue; + margin: 0; + padding: 10px; +} +.scoreboardround table { + margin: 10px auto; + width: 100%; + border-collapse: collapse; +} +.scoreboardround th, .scoreboard td { + text-align: center; +} +.scoreboardround td { + font-size: 3em; + padding: 0 20px; +} + +.reloadgame { + color:red; +} +.statusgame { + color:red; +} diff --git a/index.html b/index.html index 1d98654..5154daf 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,9 @@

Rock, Paper, or Scissors?

A steam-powered bot has challenged you to a game. Rock beats scissors, scissors beats paper, and paper beats rock.

+

+ First one to get to 10 wins the round. +

Scoreboard

@@ -31,19 +34,46 @@

Scoreboard

- +

Choose Wisely

- - - - - - - + + +
+
+
+ +
+
+
+
+

Rounds

+ + + + + + + + + + + + + +
00
YouBot
+
+
+
+
+ +
- + diff --git a/js/main.js b/js/main.js index 5382523..ef5b7eb 100644 --- a/js/main.js +++ b/js/main.js @@ -1,2 +1,179 @@ $(function () { + +// Rockpaperscissorsgame logic + +// users presses choice +//bot generates number +//compare and score game +//increment player score +//keep track of total +//display results +//reset display when new choice is made + +const choices = ["rock","paper",'scissors'] // bot choices + +let playerScore = 0 +let botScore = 0 +let playerBonus = 0 +let botBonus = 0 +let playerRoundScore = 0 +let botRoundScore = 0 +let playerGameScore = 0 +let botGameScore = 0 +let gameCounter = 10 +let output = "" // status output +let outputRound= "" // status of Round + +$('.scoreboardround').hide() +$('.scoreboardgame').hide() +$('#playagain').hide() +$('#reloadgame').hide() + + +$(".choice-buttons").on("click", function (e) { + event.preventDefault(); + + $('#status').text(" ") + $('#bonus').text(" ") + + const playerChoice = event.target.id + const botChoice = choices[Math.floor(Math.random() * choices.length)] + +// console.log(`Player chose ${playerChoice}, Bot chose ${botChoice} `) + + output += "

You played "+playerChoice+",The bot played "+botChoice+".

" + + if (playerChoice === botChoice) { + output += "

You tied

" + + } + // PLAYER LOSES + else if ((playerChoice === "rock" && botChoice === "paper") || (playerChoice === "paper" && botChoice === "scissors") || (playerChoice === "scissors" && botChoice === "rock") ) { + + output += "

You Lose :(

" + botScore = botScore + 1 + // Bonus Requirement 3 + botBonus = botBonus+ 1 + playerBonus = 0 + + if (botBonus >= 3) { + botScore = botScore + 2 + $('#bonus').html("

Bot got two bonus points for winning 3 hand in a row

") + botBonus = 0 + playerBonus = 0 + } + + } + + // PLAYER WINS + + else if ((playerChoice === "paper" && botChoice === "rock") || (playerChoice === "scissors" && botChoice === "paper") || (playerChoice === "rock" && botChoice === "scissors") ) { + + output += "

You Win :)

" + playerScore = playerScore + 1 + + // Bonus Requirement 3 + playerBonus = playerBonus + 1 + botBonus = 0 + + if (playerBonus >= 3) { + + playerScore = playerScore + 2 + $('#bonus').html("

You got two bonus points for winning 3 hands in a row

") + botBonus = 0 + playerBonus = 0 + } + // End Bonus Requirement 3 + } + +// Display Message and Scores + + $('#humanScore').text(playerScore) + $('#computerScore').text(botScore) + $('#status').html(output) + + +// Bonus Requirement 1 + if (playerScore >= 10 || botScore >= 10 ) { + + $('#statusRound').text(" ") + $('.scoreboardround').show() + $('#statusround').show() + $('#playagain').show() + $(".choice-buttons").attr("disabled", true); + + if (playerScore >= 10) { + playerRoundScore = playerRoundScore +1 + $('#statusround').html("

You won the round with a score of: "+playerScore+"

") + $('#humanScoreRound').text(playerRoundScore) + + } + if (botScore >= 10) { + botRoundScore = botRoundScore + 1 + $('#statusround').html("

Bot won the round with a score of: "+botScore+"

") + $('#computerScoreRound').text(botRoundScore) + } + } +// End Bonus Requirement 1 + +// Bonus Requirement 2 + + if (playerRoundScore >= 2 || botRoundScore >= 2 ) { + + $('#statusgame').text(" ") + $('.scoreboardgame').show() + $('#statusgame').show() + $(".choice-buttons").attr("disabled", true); + + if (playerRoundScore >= 2) { + $('#statusgame').html("

You won the game by winning "+playerRoundScore+" rounds

") + $('#humanScoreGame').text(playerRoundScore) + } + if (botRoundScore >= 2) { + $('#statusgame').html("

Bot won the game by winning "+botRoundScore+" rounds

") + $('#computerScoreGame').text(botRoundScore) + } + $('#playagain').hide() + $('#reloadgame').show() +} +// End Bonus Requirement 2 + + +}) + +$("#reset").on("click", function (e) { + event.preventDefault(); + //console.log("reset clicked") + $('#playagain').hide() + + $(".choice-buttons").attr("disabled", false); + playerScore = 0 + botScore = 0 + + $('#statusround').text(" ") + $('#statusgame').text(" ") + $('#status').text(" ") +}) + +$("#reload").on("click", function (e) { + event.preventDefault(); + + // console.log("reload clicked") + $('#playagain').hide() + $(".choice-buttons").attr("disabled", false); + + playerScore = 0 + botScore = 0 + playerRoundScore = 0 + botRoundScore = 0 + + + $('#statusround').text(" ") + $('#statusgame').text(" ") + $('#status').text(" ") + $('#reloadgame').hide() + +}) + + })