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

Elins Guess who? #332

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

Elins Guess who? #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8149d26
made the board load!
Soygirt Sep 8, 2023
24743d5
not sure whats new, but finished almost all of step 4 in the instruct…
Soygirt Sep 9, 2023
f21bd90
time to start on the filtering in filterCharacters!
Soygirt Sep 9, 2023
991a02f
managed to get all the filters in the right place (I think). Doesn't …
Soygirt Sep 9, 2023
d4d9737
Project basically finished, except from if/else other and accessories…
Soygirt Sep 9, 2023
9079e48
fixed the filtering. This is the end result!
Soygirt Sep 10, 2023
44faefa
Included a link to the project
Soygirt Sep 10, 2023
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
12 changes: 7 additions & 5 deletions README.md
View file
Open in desktop
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.
120 changes: 64 additions & 56 deletions code/index.html
View file
Open in desktop
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>
Copy link

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

<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>
111 changes: 69 additions & 42 deletions code/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -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.
Copy link

Choose a reason for hiding this comment

The 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];
Copy link

Choose a reason for hiding this comment

The 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) {
Copy link

Choose a reason for hiding this comment

The 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>`
Copy link

Choose a reason for hiding this comment

The 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.
Copy link

Choose a reason for hiding this comment

The 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.
Copy link

Choose a reason for hiding this comment

The 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.
11 changes: 7 additions & 4 deletions code/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
/* Global css variables used for colors */
:root {
--primary: #a259ff;
--secondary: #b0a6ff;
--primary: #4c5a4b;
--secondary: #789476;
}

body {
display: flex;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
background-color: rgb(231, 240, 227);
}

h1 {
font-size: 42px;
font-weight: 500;
line-height: 48px;
margin: 10px 0;
color: white;
color: rgb(255, 255, 255);
}

.question-section {
Expand Down Expand Up @@ -186,9 +187,11 @@ button {
width: 100%;
min-height: 0;
}

button {
padding: 8px 16px;
}

h1 {
font-size: 24px;
line-height: 30px;
Expand Down Expand Up @@ -230,4 +233,4 @@ button {
color: var(--primary);
border: none;
}
}
}
2 changes: 2 additions & 0 deletions instructions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ currentQuestion = {

We need to set this up with variables `category` and `value` instead of hardcoded values since the actual data will be available to detect thanks to `questions.options[questions.selectedIndex]`.



We've helped you to set up the `category` variable. Make sure to properly create `value` variable!

## Step 4 - Time to find out the answer to your questions!
Expand Down