- `
- })
-}
+ `;
+ });
+};
// 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)]
-}
+ secret =
+ charactersInPlay[Math.floor(Math.random() * charactersInPlay.length)];
+};
// 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
+ charactersInPlay = CHARACTERS;
// What else should happen when we start the game?
-}
+ generateBoard();
+};
// setting the currentQuestion object when you select something in the dropdown
const selectQuestion = () => {
- const category = questions.options[questions.selectedIndex].parentNode.label
+ const category = questions.options[questions.selectedIndex].parentNode.label;
// 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.
@@ -245,38 +248,36 @@ const selectQuestion = () => {
currentQuestion = {
category: category,
// value: value
- }
-}
+ };
+};
// This function should be invoked when you click on 'Find Out' button.
const checkQuestion = () => {
- const { category, value } = currentQuestion
+ 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') {
-
- } else if (category === 'accessories' || category === 'other') {
-
+ if (category === "hair" || category === "eyes") {
+ } else if (category === "accessories" || category === "other") {
}
-}
+};
// It'll filter the characters array and redraw the game board.
const filterCharacters = (keep) => {
- const { category, value } = currentQuestion
+ const { category, value } = currentQuestion;
// Show the correct alert message for different categories
- if (category === 'accessories') {
+ if (category === "accessories") {
if (keep) {
alert(
`Yes, the person wears ${value}! Keep all people that wears ${value}`
- )
+ );
} else {
alert(
`No, the person doesn't wear ${value}! Remove all people that wears ${value}`
- )
+ );
}
- } else if (category === 'other') {
+ } else if (category === "other") {
// Similar to the one above
} else {
if (keep) {
@@ -301,14 +302,14 @@ const filterCharacters = (keep) => {
*/
// 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.
-}
+};
// If you confirm, this function is invoked
const checkMyGuess = (personToCheck) => {
@@ -316,10 +317,12 @@ const checkMyGuess = (personToCheck) => {
// 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
-}
+};
// Invokes the start function when website is loaded
-start()
+start();
// All the event listeners
-restartButton.addEventListener('click', start)
+restartButton.addEventListener("click", start);
+questions.addEventListener("change", () => console.log(options.value));
+filterButton.addEventListener("click", filterCharacters);
From 1e6e75fd2eb364764cccc61990ca93a7f8726a3b Mon Sep 17 00:00:00 2001
From: Andrej <72137459+andrkavr@users.noreply.github.com>
Date: Wed, 6 Sep 2023 10:47:47 +0200
Subject: [PATCH 02/16] Clear Step 2
---
code/script.js | 2 ++
1 file changed, 2 insertions(+)
diff --git a/code/script.js b/code/script.js
index 00968183..4b9d3051 100644
--- a/code/script.js
+++ b/code/script.js
@@ -235,6 +235,8 @@ const start = () => {
charactersInPlay = CHARACTERS;
// What else should happen when we start the game?
generateBoard();
+ setSecret();
+ console.log(secret);
};
// setting the currentQuestion object when you select something in the dropdown
From cd26b5d8af9fe93281f59372fedadf65ddc3fea7 Mon Sep 17 00:00:00 2001
From: Andrej <72137459+andrkavr@users.noreply.github.com>
Date: Wed, 6 Sep 2023 11:24:03 +0200
Subject: [PATCH 03/16] Clear Step 3
---
code/script.js | 26 ++++++++++++++++++++++----
1 file changed, 22 insertions(+), 4 deletions(-)
diff --git a/code/script.js b/code/script.js
index 4b9d3051..140fccf0 100644
--- a/code/script.js
+++ b/code/script.js
@@ -245,11 +245,11 @@ const selectQuestion = () => {
// 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 =
+ const value = questions.value;
currentQuestion = {
category: category,
- // value: value
+ value: value,
};
};
@@ -257,10 +257,28 @@ const selectQuestion = () => {
const checkQuestion = () => {
const { category, value } = currentQuestion;
+ /*
+ name: "Jack",
+ img: "images/jack.svg",
+ hair: "hidden",
+ eyes: "blue",
+ accessories: ["hat"],
+ othe
+ */
+
// 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") {
+ category === "hair"
+ ? (charactersInPlay = CHARACTERS.filter(
+ (person) => person.hair === value
+ ))
+ : (charactersInPlay = CHARACTERS.filter(
+ (person) => person.eyes === value
+ ));
+ charactersInPlay = CHARACTERS.filter((person) => person.hair === value);
+ generateBoard();
} else if (category === "accessories" || category === "other") {
}
};
@@ -326,5 +344,5 @@ start();
// All the event listeners
restartButton.addEventListener("click", start);
-questions.addEventListener("change", () => console.log(options.value));
-filterButton.addEventListener("click", filterCharacters);
+questions.addEventListener("change", selectQuestion);
+filterButton.addEventListener("click", checkQuestion);
From 995f70f1d33352cbc08c03d26b676c3859b17ae5 Mon Sep 17 00:00:00 2001
From: Andrej <72137459+andrkavr@users.noreply.github.com>
Date: Wed, 6 Sep 2023 12:19:55 +0200
Subject: [PATCH 04/16] add list that progressively filters for each question
---
code/script.js | 16 +++++++++++++---
1 file changed, 13 insertions(+), 3 deletions(-)
diff --git a/code/script.js b/code/script.js
index 140fccf0..98865f82 100644
--- a/code/script.js
+++ b/code/script.js
@@ -205,6 +205,7 @@ const CHARACTERS = [
let secret;
let currentQuestion;
let charactersInPlay;
+let filteredList;
// Draw the game board
const generateBoard = () => {
@@ -271,15 +272,24 @@ const checkQuestion = () => {
// Then invoke filterCharacters
if (category === "hair" || category === "eyes") {
category === "hair"
- ? (charactersInPlay = CHARACTERS.filter(
+ ? (filteredList = charactersInPlay.filter(
(person) => person.hair === value
))
- : (charactersInPlay = CHARACTERS.filter(
+ : (filteredList = charactersInPlay.filter(
(person) => person.eyes === value
));
- charactersInPlay = CHARACTERS.filter((person) => person.hair === value);
+ charactersInPlay = filteredList;
generateBoard();
} else if (category === "accessories" || category === "other") {
+ category === "accessories"
+ ? (filteredList = charactersInPlay.filter((person) =>
+ person.accessories.includes(value)
+ ))
+ : (filteredList = charactersInPlay.filter((person) =>
+ person.other.includes(value)
+ ));
+ charactersInPlay = filteredList;
+ generateBoard();
}
};
From a8d12417b0fc866f8d48aae6f76927b02a9af4c1 Mon Sep 17 00:00:00 2001
From: Andrej <72137459+andrkavr@users.noreply.github.com>
Date: Wed, 6 Sep 2023 12:27:53 +0200
Subject: [PATCH 05/16] add more options to filter characters by
---
code/index.html | 18 ++++++++++++++++--
code/script.js | 8 ++++----
2 files changed, 20 insertions(+), 6 deletions(-)
diff --git a/code/index.html b/code/index.html
index 0479b061..6e3a89f3 100644
--- a/code/index.html
+++ b/code/index.html
@@ -12,7 +12,9 @@
diff --git a/code/script.js b/code/script.js
index 1c19ba39..864b6ccb 100644
--- a/code/script.js
+++ b/code/script.js
@@ -8,6 +8,9 @@ const winOrLoseWrapper = document.querySelector(".win-or-lose-wrapper");
const winOrLoseText = document.getElementById("winOrLoseText");
const playAgain = document.getElementById("playAgain");
const nicelyDone = document.getElementById("nicely-done");
+const guesses = document.getElementById("guess");
+const win = document.getElementById("win");
+const lose = document.getElementById("lose");
// Array with all the characters, as objects
const CHARACTERS = [
@@ -210,6 +213,9 @@ const CHARACTERS = [
let secret;
let currentQuestion;
let charactersInPlay;
+let totalGuesses = 0;
+let totalWins = 0;
+let totalLosses = 0;
// Draw the game board
const generateBoard = () => {
@@ -243,6 +249,8 @@ const start = () => {
generateBoard();
setSecret();
console.log(secret);
+ totalGuesses = 0;
+ guesses.innerHTML = `${totalGuesses}`;
};
// setting the currentQuestion object when you select something in the dropdown
@@ -264,44 +272,60 @@ const selectQuestion = () => {
// This function should be invoked when you click on 'Find Out' button.
const checkQuestion = () => {
- const { category, value } = currentQuestion;
+ if (questions.selectedIndex === 0) {
+ alert(`You have to select an option`);
+ } else {
+ 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
+ // 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") {
- // filterCharacters("hair");
- // } else if (category === "eyes") {
+ filterCharacters(category);
- // }
- console.log(category);
- console.log(value);
- filterCharacters(category);
+ //in order to initialize the generateBoard function properly, charactersInPlay is changed.
- //in order to initialize the generateBoard function properly, charactersInPlay is changed.
+ generateBoard();
- generateBoard();
+ //Increases the amount of total guesses by 1 and displays it in the DOM
+ totalGuesses++;
+ guesses.innerHTML = `${totalGuesses}`;
+ }
};
// It'll filter the characters array and redraw the game board.
const filterCharacters = (keep) => {
const { category, value } = currentQuestion;
- keep = secret[category] === value;
+
+ if (category === "accessories" || category === "other") {
+ keep = secret[category].includes(value);
+ } else {
+ keep = secret[category] === value;
+ }
// Show the correct alert message for different categories
if (category === "accessories") {
if (keep) {
- alert(
- `Yes, the person wears ${value}! Keep all people that wears ${value}`
- );
+ if (value === "hat") {
+ alert(
+ `Yes, the person has a ${value}! Keep all people with a ${value}`
+ );
+ } else {
+ alert(`Yes, the person wears ${value}! Keep all people with ${value}`);
+ }
charactersInPlay = charactersInPlay.filter((person) =>
person.accessories.includes(value)
);
generateBoard();
} else {
- alert(
- `No, the person doesn't wear ${value}! Remove all people that wears ${value}`
- );
+ if (value === "hat") {
+ alert(
+ `No, the person doesn't have a ${value}! Remove all people with a ${value}`
+ );
+ } else {
+ alert(
+ `No, the person doesn't wear ${value}! Remove all people with ${value}`
+ );
+ }
charactersInPlay = charactersInPlay.filter(
(person) => !person.accessories.includes(value)
);
@@ -310,9 +334,16 @@ const filterCharacters = (keep) => {
} else if (category === "other") {
// Similar to the one above
if (keep) {
- alert(
- `Yes, the person has a ${value}! Keep all people that have a ${value}`
- );
+ if (value === "smoker") {
+ alert(
+ `Yes, the person has a smoking habit! Keep all people that have a smoking habit`
+ );
+ } else {
+ alert(
+ `Yes, the person has a ${value}! Keep all people that have a ${value}`
+ );
+ }
+
charactersInPlay = charactersInPlay.filter((person) =>
person.other.includes(value)
);
@@ -329,11 +360,12 @@ const filterCharacters = (keep) => {
} else if (category === "eyes") {
if (keep) {
alert(
- `Yes, the person has a ${value}! Keep all people that have ${value} eyes`
+ `Yes, the person has ${value} eyes! Keep all people that have ${value} eyes`
);
charactersInPlay = charactersInPlay.filter((person) =>
person.eyes.includes(value)
);
+
generateBoard();
} else {
alert(
@@ -408,6 +440,9 @@ const correctGuess = () => {
nicelyDone.style.display = "flex";
winOrLoseWrapper.style.display = "flex";
board.style.display = "none";
+ //Adds 1 to the value of total wins and displays it in the DOM
+ totalWins++;
+ win.innerHTML = `${totalWins}`;
};
const wrongGuess = () => {
@@ -415,6 +450,9 @@ const wrongGuess = () => {
Yea, no. Better luck next time. The correct person was ${secret.name}`;
winOrLoseWrapper.style.display = "flex";
board.style.display = "none";
+ //Adds 1 to the value of total losses and displays it in the DOM
+ totalLosses++;
+ lose.innerHTML = `${totalLosses}`;
};
const resetTheGame = () => {
diff --git a/code/style.css b/code/style.css
index 86d5b204..1f1c4436 100644
--- a/code/style.css
+++ b/code/style.css
@@ -184,6 +184,28 @@ button {
display: none;
}
+/****** Scoreboard ******/
+.scoreboard {
+ color: white;
+ width: 100%;
+ margin-top: 4rem;
+ display: flex;
+ flex-direction: column;
+}
+
+#totalGuesses,
+#totalWins,
+#totalLosses {
+ align-self: center;
+}
+
+#guess,
+#win,
+#lose {
+ display: flex;
+ justify-content: center;
+}
+
@media (max-width: 768px) {
body {
flex-direction: column;
From 7768f4444f31b43a41164672af9dd3051e30fe67 Mon Sep 17 00:00:00 2001
From: Andrej <72137459+andrkavr@users.noreply.github.com>
Date: Sun, 10 Sep 2023 14:35:46 +0200
Subject: [PATCH 11/16] add prompt for player name
---
code/index.html | 2 +-
code/script.js | 20 ++++++++++++++++----
2 files changed, 17 insertions(+), 5 deletions(-)
diff --git a/code/index.html b/code/index.html
index a1de56d6..d4fe5f26 100644
--- a/code/index.html
+++ b/code/index.html
@@ -21,7 +21,7 @@
src="images/guess-who-bubble.png"
alt="Guess Who"
/>
-
+