Chore Door was a fun project - however I was a little bit frustrated to see that it was not including how to implement the functionalities to update the current streak and best streak, as presented in the final version of the game at the beginning of the project.
Therefore I challenged myself into adding them and since I couldn’t find any topic on this, I thought I would share my solution here.
Because it has its importance for the JS part, I’ll copy here the HTML addition - an extra table to insert after the start div and before the script tag:
<table class="score-row">
<tr>
<th class="score-text">Current Streak:</th>
<th class="score-text">Best Streak:</th>
</tr>
<tr>
<th id="current-streak" class="score-box">0</th>
<th id="highest-streak" class="score-box">0</th>
</tr>
</table>
And here is my JS code:
let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');
let botDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg';
let beachDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg';
let spaceDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg';
let closedDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg';
let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
let startButton = document.getElementById('start');
let currentlyPlaying = true;
let currentStreak = 0;
let bestStreak = 0;
const isBot = (door) => {
if (door.src === botDoorPath) {
return true;
} else {
return false;
}
}
const isClicked = (door) => {
if (door.src === closedDoorPath) {
return false;
} else {
return true;
}
};
const playDoor = (door) => {
numClosedDoors--;
if (numClosedDoors === 0) {
gameOver('win');
updateScore();
updateBestStreak();
} else if (isBot(door)) {
gameOver();
}
}
const randomChoreDoorGenerator = () => {
const choreDoor = Math.floor(Math.random() * numClosedDoors);
if (choreDoor === 1) {
openDoor1 = botDoorPath;
openDoor2 = beachDoorPath;
openDoor3 = spaceDoorPath;
} else if (choreDoor === 2) {
openDoor2 = botDoorPath;
openDoor3 = beachDoorPath;
openDoor1 = spaceDoorPath;
} else {
openDoor3 = botDoorPath;
openDoor1 = beachDoorPath;
openDoor2 = spaceDoorPath;
}
};
doorImage1.onclick = () => {
if (!isClicked(doorImage1) && currentlyPlaying) {
doorImage1.src = openDoor1;
playDoor(doorImage1);
}
}
doorImage2.onclick = () => {
if (!isClicked(doorImage2) && currentlyPlaying) {
doorImage2.src = openDoor2;
playDoor(doorImage2);
}
}
doorImage3.onclick = () => {
if (!isClicked(doorImage3) && currentlyPlaying) {
doorImage3.src = openDoor3;
playDoor(doorImage3);
}
}
const startRound = () => {
doorImage1.src = closedDoorPath;
doorImage2.src = closedDoorPath;
doorImage3.src = closedDoorPath;
numClosedDoors = 3;
startButton = document.getElementById('start');
currentStreak = 0;
document.getElementById('current-streak').innerHTML = currentStreak;
currentlyPlaying = true;
randomChoreDoorGenerator();
}
startButton.onclick = () => {
if (!currentlyPlaying) {
startRound();
}
}
const gameOver = (status) => {
if (status === 'win') {
startButton.innerHTML = 'You win! Play again?';
} else {
startButton.innerHTML = 'Game over! Play again?';
}
currentlyPlaying = false;
}
const updateScore = () => {
currentStreak++;
document.getElementById('current-streak').innerHTML = currentStreak;
}
const updateBestStreak = () => {
if (currentStreak) {
bestStreak++;
}
document.getElementById('highest-streak').innerHTML = bestStreak;
}
startRound();
In short, I:
- Declared two more ‘counter’ variables
currentStreakandbestStreak - Created
updateScore()to increment thecurrentStreakby 1 and change the innerHTML accordingly - Called
updateScore()insideplayDoor()by wrapping it inside the ‘winning’ condition - Created
updateBestStreak()to increment thebestStreakby 1 every time thecurrentStreakis not 0, and change the innerHTML accordingly - Called
updateBestStreak()afterupdateScore()insideplayDoor()by wrapping it inside the ‘winning’ condition - Reset the
currentStreakto 0 and the innerHTML of that element instartRound()
After some hiccups and testing, it works as expected 
However I suppose the code could be made more synthetic and readable in some places, but all my attempts at trying to shorten it or use more variables resulted in breaking something in the game, so I left it at that!
I need to go back to the CSS modules and refresh myself.
