-
Notifications
You must be signed in to change notification settings - Fork 357
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.
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
Elins Guess who? #332
base: main
Are you sure you want to change the base?
Elins Guess who? #332
Changes from all commits
8149d26
24743d5
f21bd90
991a02f
d4d9737
9079e48
44faefa
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,15 @@ | ||
# Project Name | ||
|
||
Replace this readme with your own information about your project. | ||
|
||
Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. | ||
The task was to make a digital version of the classical kids game called Guess who?. | ||
|
||
## The problem | ||
I watched the links and videos provided for this project first, to be able to understand the concept of what I needed to do. In the beginning I found it very confusing and didn't know where to start due to the code that were provided from the start. But I followed the instructions closely, and took small steps every day. I think that was the key for me to be able to start, following the instructions and breaking the project down to small steps. | ||
For this project I relyed on the study material from Technigo, chatGPT, classmates repos at Github and talking to classmates on slack. | ||
If I had more time, I'd definetely make the game about people I know, instead of the provided cartoons! I'd also like to add sound effects, and some nicer looking popups. It'd also be very cool (but way out of my knowledge) to have animated images that kind of response to events that's happening on the screen! | ||
|
||
Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? | ||
|
||
## View it live | ||
|
||
Here's a link to my project: | ||
https://gissevem.netlify.app/ | ||
|
||
Have you deployed your project somewhere? Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,64 +1,72 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Project Name</title> | ||
<link rel="stylesheet" href="style.css" /> | ||
<link | ||
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" | ||
rel="stylesheet" | ||
/> | ||
</head> | ||
<body> | ||
<aside class="question-section"> | ||
<button type="button" id="restart" class="outlined-button">RESTART</button> | ||
|
||
<img | ||
class="guess-who-icon" | ||
src="images/guess-who-bubble.png" | ||
alt="Guess Who" | ||
/> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Project Name</title> | ||
<link rel="stylesheet" href="style.css" /> | ||
<link | ||
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" | ||
rel="stylesheet" /> | ||
</head> | ||
|
||
<h1>Does the person have</h1> | ||
<body> | ||
<aside class="question-section"> | ||
<button type="button" id="restart" class="outlined-button">RESTART</button> | ||
|
||
<select title="questions" id="questions"> | ||
<optgroup label="hair"> | ||
<option value="brown">brown hair</option> | ||
<option value="yellow">yellow hair</option> | ||
<!-- Add the rest of hair colors as options --> | ||
</optgroup> | ||
<optgroup label="eyes"> | ||
<option value="hidden">hidden eyes</option> | ||
<!-- Add the rest of eye colors as options --> | ||
</optgroup> | ||
<optgroup label="accessories"> | ||
<option value="glasses">glasses</option> | ||
<!-- Add the other accessory option here. (hat) --> | ||
</optgroup> | ||
<optgroup label="other"> | ||
<option value="smoker">a smoking habit</option> | ||
</optgroup> | ||
</select> | ||
<img class="guess-who-icon" src="images/guess-who-bubble.png" alt="Guess Who" /> | ||
|
||
<button id="filter" class="filled-button">FIND OUT</button> | ||
</aside> | ||
<h1>Does the person have</h1> | ||
|
||
<section class="board-wrapper"> | ||
<main class="game-board" id="board"></main> | ||
</section> | ||
<select title="questions" id="questions"> | ||
<!--hair--> | ||
<optgroup label="hair"> | ||
<option value="brown">brown hair</option> | ||
<option value="yellow">yellow hair</option> | ||
<option value="hidden">hidden hair</option> | ||
<option value="black">black hair</option> | ||
<option value="grey">grey hair</option> | ||
<option value="orange">orange hair</option> | ||
<option value="purple">purple hair</option> | ||
<option value="white">white hair</option> | ||
</optgroup> | ||
|
||
<section id="winOrLose" class="win-or-lose-wrapper"> | ||
<div class="win-or-lose"> | ||
<img | ||
class="guess-who-icon" | ||
src="images/guess-who-bubble.png" | ||
alt="Guess Who" | ||
/> | ||
<h1 id="winOrLoseText"></h1> | ||
<button type="button" id="playAgain" class="filled-button">PLAY AGAIN</button> | ||
</div> | ||
</section> | ||
<script src="script.js"></script> | ||
</body> | ||
</html> | ||
<!--eyes--> | ||
<optgroup label="eyes"> | ||
<option value="hidden">hidden eyes</option> | ||
<option value="brown">brown eyes</option> | ||
<option value="blue">blue eyes</option> | ||
<option value="green">green eyes</option> | ||
</optgroup> | ||
|
||
<!--accesories--> | ||
<optgroup label="accessories"> | ||
<option value="glasses">glasses</option> | ||
<option value="hat"> a hat</option> | ||
</optgroup> | ||
|
||
<!--smoker--> | ||
<optgroup label="other"> | ||
<option value="smoker">a smoking habit</option> | ||
</optgroup> | ||
</select> | ||
|
||
<button id="filter" class="filled-button">FIND OUT</button> | ||
</aside> | ||
|
||
<section class="board-wrapper"> | ||
<main class="game-board" id="board"></main> | ||
</section> | ||
|
||
<section id="winOrLose" class="win-or-lose-wrapper"> | ||
<div class="win-or-lose"> | ||
<img class="guess-who-icon" src="images/guess-who-bubble.png" alt="Guess Who" /> | ||
<h1 id="winOrLoseText"></h1> | ||
<button type="button" id="playAgain" class="filled-button">PLAY AGAIN</button> | ||
</div> | ||
</section> | ||
<script src="script.js"></script> | ||
</body> | ||
|
||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,6 +2,10 @@ | |
const board = document.getElementById('board') | ||
const questions = document.getElementById('questions') | ||
const restartButton = document.getElementById('restart') | ||
const findOut = document.getElementById('filter') | ||
const winOrLose = document.getElementById('winOrLose') | ||
const guessbtn = document.getElementsByClassName(`filled-button small`) | ||
const playAgain = document.getElementById(`playAgain`) | ||
|
||
// Array with all the characters, as objects | ||
const CHARACTERS = [ | ||
|
@@ -222,104 +226,127 @@ const generateBoard = () => { | |
}) | ||
} | ||
|
||
|
||
// Randomly select a person from the characters array and set as the value of the variable called secret | ||
const setSecret = () => { | ||
secret = charactersInPlay[Math.floor(Math.random() * charactersInPlay.length)] | ||
|
||
//console.log(`secret person is ${secret.name}`); //helped me to see who the secret person is. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I did the same here! and I kept it in my code too, it was vital to have this information when debugging and testing |
||
} | ||
|
||
// This function to start (and restart) the game | ||
const start = () => { | ||
// Here we're setting charactersInPlay array to be all the characters to start with | ||
charactersInPlay = CHARACTERS | ||
// What else should happen when we start the game? | ||
generateBoard(); | ||
setSecret(); | ||
} | ||
|
||
// setting the currentQuestion object when you select something in the dropdown | ||
const selectQuestion = () => { | ||
const category = questions.options[questions.selectedIndex].parentNode.label | ||
|
||
const value = questions.value; | ||
// This variable stores what option group (category) the question belongs to. | ||
// We also need a variable that stores the actual value of the question we've selected. | ||
// const value = | ||
|
||
//a variable that stores the actual value of the question we've selected. | ||
currentQuestion = { | ||
category: category, | ||
// value: value | ||
value: value, | ||
} | ||
} | ||
|
||
// This function should be invoked when you click on 'Find Out' button. | ||
// Function to check the selected question | ||
const checkQuestion = () => { | ||
const { category, value } = currentQuestion | ||
|
||
// Compare the currentQuestion details with the secret person details in a different manner based on category (hair/eyes or accessories/others). | ||
// See if we should keep or remove people based on that | ||
// Then invoke filterCharacters | ||
if (category === 'hair' || category === 'eyes') { | ||
//compares question to the secret person | ||
let keep = false; | ||
|
||
if (category === 'hair' || category === 'eyes') { | ||
keep = value === secret[category]; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't really understand this line, with 2 equals = values, but it works! |
||
} else if (category === 'accessories' || category === 'other') { | ||
|
||
keep = secret[category].includes(value); | ||
} | ||
} | ||
filterCharacters(keep); | ||
}; | ||
|
||
// It'll filter the characters array and redraw the game board. | ||
// This function filters characters array and redraw the game board. | ||
const filterCharacters = (keep) => { | ||
const { category, value } = currentQuestion | ||
// Show the correct alert message for different categories | ||
|
||
//accesories | ||
if (category === 'accessories') { | ||
if (keep) { | ||
charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) | ||
alert( | ||
`Yes, the person wears ${value}! Keep all people that wears ${value}` | ||
) | ||
} else { | ||
charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value)) | ||
alert( | ||
`No, the person doesn't wear ${value}! Remove all people that wears ${value}` | ||
) | ||
} | ||
} //other/smoker | ||
} else if (category === 'other') { | ||
// Similar to the one above | ||
} else { | ||
if (keep) { | ||
// alert popup that says something like: "Yes, the person has yellow hair! Keep all people with yellow hair" | ||
charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) | ||
alert(`Yes! The person is a ${value}! Let's remove all non-smokers!`) | ||
} else { | ||
// alert popup that says something like: "No, the person doesnt have yellow hair! Remove all people with yellow hair" | ||
charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value)) | ||
alert(`Noo, this is a healthy person who's not a ${value}. Let's remove all smokers!`) | ||
} | ||
} | ||
|
||
// Determine what is the category | ||
// filter by category to keep or remove based on the keep variable. | ||
/* | ||
for hair and eyes : | ||
charactersInPlay = charactersInPlay.filter((person) => person[attribute] === value) | ||
or | ||
charactersInPlay = charactersInPlay.filter((person) => person[attribute] !== value) | ||
} else { | ||
if (keep) { //hair and eyes | ||
charactersInPlay = charactersInPlay.filter((person) => person[category] === value) | ||
alert(`Yes! The person has ${value} ${category}! Let's keep all people with ${value} ${category}.`) | ||
|
||
for accessories and other | ||
charactersInPlay = charactersInPlay.filter((person) => person[category].includes(value)) | ||
or | ||
charactersInPlay = charactersInPlay.filter((person) => !person[category].includes(value)) | ||
*/ | ||
} else { | ||
charactersInPlay = charactersInPlay.filter((person) => person[category] !== value) | ||
alert(`No, the person doesn't have ${value} ${category}! Let's remove all people with ${value} ${category}.`) | ||
|
||
} | ||
} | ||
generateBoard(); //generates the board after filtering. | ||
|
||
// Invoke a function to redraw the board with the remaining people. | ||
} | ||
|
||
// when clicking guess, the player first have to confirm that they want to make a guess. | ||
const guess = (personToConfirm) => { | ||
// store the interaction from the player in a variable. | ||
// remember the confirm() ? | ||
// If the player wants to guess, invoke the checkMyGuess function. | ||
const isConfirmed = confirm(`Are you sure you want to guess that ${personToConfirm} is the secret person?`); | ||
|
||
if (isConfirmed) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. i'm wondering if this if statement needs what happens if they do not confirm? |
||
checkMyGuess(personToConfirm) | ||
} | ||
} | ||
|
||
// If you confirm, this function is invoked | ||
// If player confirms, this function is invoked | ||
const checkMyGuess = (personToCheck) => { | ||
// 1. Check if the personToCheck is the same as the secret person's name | ||
// 2. Set a Message to show in the win or lose section accordingly | ||
// 3. Show the win or lose section | ||
// 4. Hide the game board | ||
if (personToCheck === secret.name) { | ||
winOrLose.style.display = "flex"; | ||
board.style.display = 'none'; | ||
winOrLoseText.innerHTML += `<h1>Congratulations! Your guess is right and you WON! 🏆</h1>` | ||
} else { | ||
winOrLose.style.display = "flex"; | ||
board.style.display = 'none'; | ||
winOrLoseText.innerHTML += `<h1>Your guess is unfortunately wrong 😞 Do you wanna try again?</h1>` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this is great, works well, is succinct and easy to understand |
||
} | ||
|
||
} | ||
|
||
// Invokes the start function when website is loaded | ||
start() | ||
start(); | ||
|
||
const replay = () => { | ||
location.reload(); //The location.reload refreshes the page, which was a easy solution to make the game start again. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nice one! I have not used .reload before, you are right it is an easy solution |
||
} | ||
|
||
// All the event listeners | ||
restartButton.addEventListener('click', start) | ||
restartButton.addEventListener('click', start); //resets the board when the restart button is clicked. | ||
|
||
questions.addEventListener('click', selectQuestion); //Does this work? Error in console on website. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. im also wondering about this, doesn't select question get called when you click the findout button? |
||
|
||
findOut.addEventListener('click', checkQuestion); //Invokes the checkQuestion when "find out button" is clicked. | ||
|
||
playAgain.addEventListener(`click`, replay); //loads the board for a new game when the play again button is clicked. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would be cool to write something like "Guess Who?" here