Guess who game #335
Guess who game #335
Conversation
There was a problem hiding this comment.
All in all the game is playable, and works as it should! My favourite part was the timer as I did not manage to add that. There are some shortcuts that could be made to make the code shorter, so I recommend removing and adding to see if it effects the code in the end of the week if there is time. It looks like you understood the assignment and put an effort into it, great job on this project!
|
|
||
| //declaring a clock counter for the website, it starts at 2 minutes and counts down to 0 | ||
| // In minute format, sarting at 02:00 | ||
| let time = 120 |
There was a problem hiding this comment.
I like the timer function, as I did not do that myself! Made the page more alive and interactive. Stressed me out through ;)
| } | ||
|
|
||
| // This function should be invoked when you click on 'Find Out' button. | ||
| const checkQuestion = () => { | ||
| const { category, value } = currentQuestion | ||
| const { category, value } = currentQuestion // MISSING PIECE THAT FINALLY MADE THE FILTER WORK..currentQuestion is an object with two properties: category and value. Declaring these two variables and assigning them to the properties of currentQuestion object makes it possible to use them in the if statement below. |
There was a problem hiding this comment.
I found this complicated, you explain it well here
| `Yes, the person has ${value} hair! Keep all people that have ${value} hair.` | ||
| ) | ||
| charactersInPlay = charactersInPlay.filter((person) => person[category] === value) |
There was a problem hiding this comment.
From playing your game a few times, it looks like you did the filtering correctly. However, the values could be paid more attention to. None of the caracters match the value red hair, while there is no value for hidden hair or orange and purple hair. This makes it harder to filter away the wrong options.
|
|
||
| findOutButton.addEventListener('click', checkQuestion) | ||
|
|
||
| playAgainButton.addEventListener('click', start) |
There was a problem hiding this comment.
I see you mentioned some of this in your readme - the play again (after guessing) and the restart (while playting) buttons work well (you have the event listeners set up), however the game does not reset. The scroll down menu should go back to "please choose an option" and timer should start. The secret person does change however. Perhaps the end of my code can help you here - notice the start function being called once more:
//Restart game
restartButton.addEventListener('click', start)
//Play again from the win/ lose site
playAgainButton.addEventListener('click', () => {
winOrLose.style.display = "none"
start()
| //Game board should be rendered on the screen | ||
| generateBoard(); | ||
| setSecret(); | ||
| //startTimer(); // can't get this to work together with findout dropdown filter |
There was a problem hiding this comment.
It could be helpful to console log when the start function is being called, as it is easier to spot errors in restart / play again
| alert( | ||
| `No, the person doesn't have ${value} hair! Remove all people that have ${value} hair.` | ||
| ) | ||
| charactersInPlay = charactersInPlay.filter((person) => person[category] !== value) | ||
| } | ||
| } |
There was a problem hiding this comment.
Stenli left this comment for me - I found it useful as I used the same approach as you, so passing it on:
the readability of your filterCharacters function can be improved by avoiding the repetition of alert messages. You can create a single alert message and use template literals to make the code cleaner.
like the following :
const filterCharacters = (keep) => {
const { category, value } = currentQuestion;
let message;
if (category === 'accessories') {
message = person wears ${value};
} else if (category === 'other') {
message = person wears ${value};
} else if (category === 'hair') {
message = person has ${value} hair;
} else if (category === 'eyes') {
message = person has ${value} eyes;
}
if (keep) {
alert(Yes, the ${message}! Keep all people who ${message});
} else {
alert(No, the ${message}! Remove all people who ${message});
}
| // 4. Hide the game board | ||
| board.style.display = 'none'; |
There was a problem hiding this comment.
Do you need both of these? I think display flex should overwrite the board
Almost finished, has a few issues when restarting game.