From 319ddf8a119a4fc7af40d77ed99d1e384f0bbdff Mon Sep 17 00:00:00 2001 From: badsketch Date: Mon, 5 Sep 2022 22:42:55 -0400 Subject: [PATCH 1/3] Made minor changes --- RPS.js | 43 ++++++++++++++++++------------------------- 1 file changed, 18 insertions(+), 25 deletions(-) diff --git a/RPS.js b/RPS.js index 5ca83f0..63a8e7a 100644 --- a/RPS.js +++ b/RPS.js @@ -29,22 +29,21 @@ function rockChoice () { winnerOfRound = 'Draw, there is no winner'; console.log(winnerOfRound); cpuButtonHighlight(cpuRock); - playerCPUDraw(playerScore, cpuScore); - return changeBannerText(winnerOfRound); + changeBannerText(winnerOfRound); } else if (playerChoice == 'rock' && cpuChoice === 'paper') { winnerOfRound = 'You lose! Paper beats rock!'; console.log(winnerOfRound); cpuButtonHighlight(cpuPaper); - cpuIncrementScore(cpuScore, cpuScoreElement); - return changeBannerText(winnerOfRound); + cpuIncrementScore(); + changeBannerText(winnerOfRound); } else if (playerChoice == 'rock' && cpuChoice === 'scissors') { winnerOfRound = 'You win! Rock beats scissors!'; console.log(winnerOfRound); cpuButtonHighlight(cpuScissors); - playerIncrementScore(playerScore, playerScoreElement); - return changeBannerText(winnerOfRound); + playerIncrementScore(); + changeBannerText(winnerOfRound); } return winnerOfRound; } @@ -63,22 +62,21 @@ function playRoundPaperChoice () { winnerOfRound = 'Draw, there is no winner'; console.log(winnerOfRound); cpuButtonHighlight(cpuPaper); - playerCPUDraw(playerScore, cpuScore); - return changeBannerText(winnerOfRound); + changeBannerText(winnerOfRound); } else if (playerChoice == 'paper' && cpuChoice === 'rock'){ winnerOfRound = 'You win! Paper beats rock!'; console.log(winnerOfRound); cpuButtonHighlight(cpuRock); - playerIncrementScore(playerScore, playerScoreElement); - return changeBannerText(winnerOfRound); + playerIncrementScore(); + changeBannerText(winnerOfRound); } else if (playerChoice == 'paper' && cpuChoice === 'scissors') { winnerOfRound = 'You lose! Scissors beats paper!'; console.log(winnerOfRound); cpuButtonHighlight(cpuScissors); - cpuIncrementScore(cpuScore, cpuScoreElement); - return changeBannerText(winnerOfRound); + cpuIncrementScore(); + changeBannerText(winnerOfRound); } return winnerOfRound; } @@ -97,22 +95,21 @@ function playRoundScissorsChoice() { winnerOfRound = 'Draw, there is no winner'; console.log(winnerOfRound); cpuButtonHighlight(cpuScissors); - playerCPUDraw(playerScore, cpuScore); - return changeBannerText(winnerOfRound); + changeBannerText(winnerOfRound); } else if (playerChoice == 'scissors' && cpuChoice === 'rock') { winnerOfRound = 'You lose! Rock beats scissors!'; console.log(winnerOfRound); cpuButtonHighlight(cpuRock); - cpuIncrementScore(cpuScore, cpuScoreElement); - return changeBannerText(winnerOfRound); + cpuIncrementScore(); + changeBannerText(winnerOfRound); } else if (playerChoice == 'scissors' && cpuChoice === 'paper') { winnerOfRound = 'You win! Scissors beats paper!'; console.log(winnerOfRound); cpuButtonHighlight(cpuPaper); - playerIncrementScore(playerScore, playerScoreElement); - return changeBannerText(winnerOfRound); + playerIncrementScore(); + changeBannerText(winnerOfRound); } return winnerOfRound; } @@ -154,20 +151,16 @@ var playerScore = 0; var cpuScore = 0; const playerScoreElement = document.querySelector('#player-score'); const cpuScoreElement = document.querySelector('#cpu-score'); -function playerIncrementScore (score, scoreElement) { +function playerIncrementScore () { console.log('The function playerIncrementScore() is now running....'); playerScore++; playerScoreElement.innerHTML = `Score: ${playerScore}`; } -function cpuIncrementScore (score, scoreElement) { +function cpuIncrementScore () { console.log('The function cpuIncrementScore() is now running....'); cpuScore++; cpuScoreElement.innerHTML = `Score: ${cpuScore}`; } -function playerCPUDraw(playerScore, cpuScore) { - cpuScore += 0; - playerScore += 0; -} // Legacy Code base // const pbtns = document.querySelectorAll('.pbtn'); // pbtns.forEach(btns => btns.addEventListener('click', playerButtonSelection)); @@ -254,4 +247,4 @@ function playerCPUDraw(playerScore, cpuScore) { // } // } -// Caelan Miller - 2022 \ No newline at end of file +// Caelan Miller - 2022 From ef026287f0c81c92c55af346e611d468215a1124 Mon Sep 17 00:00:00 2001 From: badsketch Date: Wed, 7 Sep 2022 00:22:50 -0400 Subject: [PATCH 2/3] Removed returns since these are event handlers --- RPS.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/RPS.js b/RPS.js index 63a8e7a..a84d630 100644 --- a/RPS.js +++ b/RPS.js @@ -45,7 +45,6 @@ function rockChoice () { playerIncrementScore(); changeBannerText(winnerOfRound); } - return winnerOfRound; } const paperBtn = document.getElementById('paper'); @@ -78,7 +77,6 @@ function playRoundPaperChoice () { cpuIncrementScore(); changeBannerText(winnerOfRound); } - return winnerOfRound; } const scissorsBtn = document.getElementById('scissors'); @@ -111,7 +109,6 @@ function playRoundScissorsChoice() { playerIncrementScore(); changeBannerText(winnerOfRound); } - return winnerOfRound; } const cpuScissors = document.querySelector('#cpu-scissors'); From 64744f8e36ce852bc6a5ed2a87bb188f1a900429 Mon Sep 17 00:00:00 2001 From: badsketch Date: Thu, 8 Sep 2022 22:32:43 -0400 Subject: [PATCH 3/3] Used data structure for outcomes --- RPS.js | 151 ++++++++++++++++++++--------------------------------- index.html | 8 +-- 2 files changed, 62 insertions(+), 97 deletions(-) diff --git a/RPS.js b/RPS.js index a84d630..2bd586e 100644 --- a/RPS.js +++ b/RPS.js @@ -15,114 +15,78 @@ function getCpuChoice () { return cpuChoice; } -const rockBtn = document.getElementById('rock'); -rockBtn.addEventListener('click', rockChoice); -function rockChoice () { - console.log('The function rockChoice() is running....'); - cpuButtonHighlightRemoval(cpuRock); - cpuButtonHighlightRemoval(cpuPaper); - cpuButtonHighlightRemoval(cpuScissors); - let winnerOfRound = ''; - let cpuChoice = getCpuChoice(); - let playerChoice = 'rock'; - if (playerChoice === cpuChoice) { - winnerOfRound = 'Draw, there is no winner'; - console.log(winnerOfRound); - cpuButtonHighlight(cpuRock); - changeBannerText(winnerOfRound); - } - else if (playerChoice == 'rock' && cpuChoice === 'paper') { - winnerOfRound = 'You lose! Paper beats rock!'; - console.log(winnerOfRound); - cpuButtonHighlight(cpuPaper); - cpuIncrementScore(); - changeBannerText(winnerOfRound); - } - else if (playerChoice == 'rock' && cpuChoice === 'scissors') { - winnerOfRound = 'You win! Rock beats scissors!'; - console.log(winnerOfRound); - cpuButtonHighlight(cpuScissors); - playerIncrementScore(); - changeBannerText(winnerOfRound); + +// 0 == tie, 1 == victory, -1 == loss +const resultMatrix = [ + // CPU + // rock, paper, scissors + /*Player rock */[ 0, -1, 1], + /* paper */[ 1, 0, -1], + /* scissors */[-1, 1, 0] + +] + +function determineResult(player, cpu) { + // rock = 0, paper = 1, scissors = 2 + const choice = { + "rock": 0, + "paper": 1, + "scissors": 2 } + const playerVal= choice[player] + const cpuVal = choice[cpu] + return resultMatrix[playerVal][cpuVal] } -const paperBtn = document.getElementById('paper'); -paperBtn.addEventListener('click', playRoundPaperChoice); -function playRoundPaperChoice () { - console.log('The function paperChoice() is running....'); - cpuButtonHighlightRemoval(cpuRock); - cpuButtonHighlightRemoval(cpuPaper); - cpuButtonHighlightRemoval(cpuScissors); - let winnerOfRound = ''; +function playRound(event) { + // remove existing and get new choice + cpuButtonHighlightRemoval(); let cpuChoice = getCpuChoice(); - let playerChoice = 'paper'; - if (playerChoice === cpuChoice) { - winnerOfRound = 'Draw, there is no winner'; - console.log(winnerOfRound); - cpuButtonHighlight(cpuPaper); - changeBannerText(winnerOfRound); - } - else if (playerChoice == 'paper' && cpuChoice === 'rock'){ - winnerOfRound = 'You win! Paper beats rock!'; - console.log(winnerOfRound); - cpuButtonHighlight(cpuRock); + cpuButtonHighlight(cpuChoice); + + let playerChoice = event.currentTarget.value; + + // get result and print banner + const result = determineResult(playerChoice, cpuChoice); + if (result === 0) { + bannerText = 'Draw, there is no winner'; + } else if (result === 1) { + bannerText = `You win! ${playerChoice} beats ${cpuChoice}`; playerIncrementScore(); - changeBannerText(winnerOfRound); - } - else if (playerChoice == 'paper' && cpuChoice === 'scissors') { - winnerOfRound = 'You lose! Scissors beats paper!'; - console.log(winnerOfRound); - cpuButtonHighlight(cpuScissors); + } else { + bannerText = `You lose! ${cpuChoice} beats ${playerChoice}`; cpuIncrementScore(); - changeBannerText(winnerOfRound); } + changeBannerText(bannerText); } +const rockBtn = document.getElementById('rock'); +rockBtn.addEventListener('click', playRound); + +const paperBtn = document.getElementById('paper'); +paperBtn.addEventListener('click', playRound); + const scissorsBtn = document.getElementById('scissors'); -scissorsBtn.addEventListener('click', playRoundScissorsChoice); -function playRoundScissorsChoice() { - console.log('The function paperChoice() is running....'); - cpuButtonHighlightRemoval(cpuRock); - cpuButtonHighlightRemoval(cpuPaper); - cpuButtonHighlightRemoval(cpuScissors); - let winnerOfRound = ''; - let cpuChoice = getCpuChoice(); - let playerChoice = 'scissors'; - if (playerChoice === cpuChoice) { - winnerOfRound = 'Draw, there is no winner'; - console.log(winnerOfRound); - cpuButtonHighlight(cpuScissors); - changeBannerText(winnerOfRound); - } - else if (playerChoice == 'scissors' && cpuChoice === 'rock') { - winnerOfRound = 'You lose! Rock beats scissors!'; - console.log(winnerOfRound); - cpuButtonHighlight(cpuRock); - cpuIncrementScore(); - changeBannerText(winnerOfRound); - } - else if (playerChoice == 'scissors' && cpuChoice === 'paper') { - winnerOfRound = 'You win! Scissors beats paper!'; - console.log(winnerOfRound); - cpuButtonHighlight(cpuPaper); - playerIncrementScore(); - changeBannerText(winnerOfRound); - } -} +scissorsBtn.addEventListener('click', playRound); const cpuScissors = document.querySelector('#cpu-scissors'); const cpuPaper = document.querySelector('#cpu-paper'); const cpuRock = document.querySelector('#cpu-rock'); -function cpuButtonHighlight(cpuBtn) { +function cpuButtonHighlight(cpuChoice) { console.log('The function cpuButtonHighlight() is now running....'); - let cpuSelection = cpuBtn; - cpuSelection.classList.add('cpu-selection'); + if (cpuChoice === "rock") { + cpuRock.classList.add('cpu-selection'); + } else if (cpuChoice === "paper") { + cpuPaper.classList.add('cpu-selection'); + } else { + cpuScissors.classList.add('cpu-selection'); + } } -function cpuButtonHighlightRemoval(cpuBtn){ +function cpuButtonHighlightRemoval(cpuChoice){ console.log('The function cpuButtonHighLightRemoval() is now running'); - let cpuSelection = cpuBtn; - cpuSelection.classList.remove('cpu-selection'); + cpuRock.classList.remove('cpu-selection'); + cpuPaper.classList.remove('cpu-selection'); + cpuScissors.classList.remove('cpu-selection'); } const announcementBanner = document.querySelector('.announcement'); @@ -130,6 +94,7 @@ announcementBanner.addEventListener('click', restartGameCycle); function restartGameCycle () { location.reload(); } + function changeBannerText(winnerOfRound) { console.log('The function changeBannerText() is now running....'); if (playerScore < 5 && cpuScore < 5) { @@ -148,12 +113,12 @@ var playerScore = 0; var cpuScore = 0; const playerScoreElement = document.querySelector('#player-score'); const cpuScoreElement = document.querySelector('#cpu-score'); -function playerIncrementScore () { +function playerIncrementScore() { console.log('The function playerIncrementScore() is now running....'); playerScore++; playerScoreElement.innerHTML = `Score: ${playerScore}`; } -function cpuIncrementScore () { +function cpuIncrementScore() { console.log('The function cpuIncrementScore() is now running....'); cpuScore++; cpuScoreElement.innerHTML = `Score: ${cpuScore}`; diff --git a/index.html b/index.html index b5aea20..4008e61 100644 --- a/index.html +++ b/index.html @@ -41,9 +41,9 @@

RPS - The Battle of the Century

- - - + + +
@@ -53,4 +53,4 @@

RPS - The Battle of the Century

- \ No newline at end of file +