Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Alternative control flow #3

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Alternative control flow #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
319ddf8
Made minor changes
badsketch Sep 6, 2022
ef02628
Removed returns since these are event handlers
badsketch Sep 7, 2022
64744f8
Used data structure for outcomes
badsketch Sep 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 61 additions & 106 deletions RPS.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,127 +15,86 @@ 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);
playerCPUDraw(playerScore, cpuScore);
return 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);
}
else if (playerChoice == 'rock' && cpuChoice === 'scissors') {
winnerOfRound = 'You win! Rock beats scissors!';
console.log(winnerOfRound);
cpuButtonHighlight(cpuScissors);
playerIncrementScore(playerScore, playerScoreElement);
return 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]

]
Comment on lines +20 to +27
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pros:
We have a central place to modify results if we were to extend this. What if we put a spin on this game and reverse the outcomes? So paper > scissors > rock > paper. We could change the values here instead of modifying all the if/else. Also what if we wanted to add a new choice, say 'sword', that beats scissors and paper. We could easily change the values here, but having a separate handler with if/else would result in exponentially more branches to write out.

Cons:
Pretty difficult to read. Converting the button click to it's value and then a numerical choice for the indices (lines 30-34 below) has a lot of indirection that can be confusing.


function determineResult(player, cpu) {
// rock = 0, paper = 1, scissors = 2
const choice = {
"rock": 0,
"paper": 1,
"scissors": 2
}
Comment on lines +31 to 35
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this choice to integer mapping I'm using isn't so great. There's a type of data structure called an ENUM in other languages including TypeScript that would have been a good fit of mapping. They're generally a good strategy when you want to represent something using an integer, which is generally more robust than using strings, which can be prone to error.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://stackoverflow.com/questions/4709175/what-are-enums-and-why-are-they-useful

return winnerOfRound;
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);
playerCPUDraw(playerScore, cpuScore);
return 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);
}
else if (playerChoice == 'paper' && cpuChoice === 'scissors') {
winnerOfRound = 'You lose! Scissors beats paper!';
console.log(winnerOfRound);
cpuButtonHighlight(cpuScissors);
cpuIncrementScore(cpuScore, cpuScoreElement);
return changeBannerText(winnerOfRound);
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();
} else {
bannerText = `You lose! ${cpuChoice} beats ${playerChoice}`;
cpuIncrementScore();
}
return 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);
playerCPUDraw(playerScore, cpuScore);
return 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);
}
else if (playerChoice == 'scissors' && cpuChoice === 'paper') {
winnerOfRound = 'You win! Scissors beats paper!';
console.log(winnerOfRound);
cpuButtonHighlight(cpuPaper);
playerIncrementScore(playerScore, playerScoreElement);
return changeBannerText(winnerOfRound);
}
return 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');
announcementBanner.addEventListener('click', restartGameCycle);
function restartGameCycle () {
location.reload();
}

function changeBannerText(winnerOfRound) {
console.log('The function changeBannerText() is now running....');
if (playerScore < 5 && cpuScore < 5) {
Expand All @@ -154,20 +113,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));
Expand Down Expand Up @@ -254,4 +209,4 @@ function playerCPUDraw(playerScore, cpuScore) {
// }
// }

// Caelan Miller - 2022
// Caelan Miller - 2022
8 changes: 4 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ <h1 class="announcement">RPS - The Battle of the Century</h1>
</header>
<div class="battle-ground">
<div class="player-ground">
<button class="pbtn" id="paper"><img src="static/paper-pngrepo-com.png"/></button>
<button class="pbtn" id="rock"><img src="static/rock-pngrepo-com.png"/></button>
<button class="pbtn" id="scissors"><img src="static/scissors-pngrepo-com.png"/></button>
<button class="pbtn" id="paper" value="paper"><img src="static/paper-pngrepo-com.png"/></button>
<button class="pbtn" id="rock" value="rock"><img src="static/rock-pngrepo-com.png"/></button>
<button class="pbtn" id="scissors" value="scissors"><img src="static/scissors-pngrepo-com.png"/></button>
</div>
<div class="cpu-ground">
<button class="cpu-btn" id="cpu-scissors"><img src="static/scissors-pngrepo-com.png"/></button>
Expand All @@ -53,4 +53,4 @@ <h1 class="announcement">RPS - The Battle of the Century</h1>
</div>
<footer><p>Created by Caelan Miller</p></footer>
</body>
</html>
</html>