Skip to content

Added ability to have multiple guesser so that the game doesen't stop to wait for the guesser to place his item and case insensitivity #1

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added ability to have multiple guesser so that the game doesen't stop to wait for the guesser to place his item and case insensitivity #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
49 changes: 41 additions & 8 deletions episode_005/password/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,21 @@

*/

//the winners element
const winnersElement = document.querySelector('#winners');
const guesserElement = document.querySelector('#guesser');
const randomWordElement = document.querySelector('#randomWord');
const definitionElement = document.querySelector('#definition');
const gridElement = document.querySelector('.grid');

let currentWord = '';
let currentDefinition = '';
let currentWinner = '';
//it's false vefore the first reset, get set to false everytime
//someone correctly guess and stays false until the next reset.
let canGuess = false;
const images = [];
//the array of winners
const winners=[];

function updateGrid() {
gridElement.innerHTML = '';
Expand Down Expand Up @@ -51,7 +57,8 @@ function resetGame({ word, definition }) {
// reveal one letter of the definition every 10 seconds?
currentWord = word;
currentDefinition = definition;
currentWinner = '';
//after each reset the chat can start to guess again
canGuess=true;
console.log(currentWord);
guesserElement.textContent = '';
randomWordElement.textContent = scrambleWord(word);
Expand All @@ -68,30 +75,56 @@ const client = new tmi.Client({

client.connect();

//function to get the string of winners. It can contain the same
//winner multiple times if it guessed correctly multiple times.
//It's not dinstinct so that everyone can see how many images can place.
function getWinnersString(){
return winners.map(winner => winner.username).join(", ");
}

client.on('message', (channel, tags, message, self) => {
if (!currentWord) return;
const [command, ...args] = message.split(' ');
if (command === '!guess') {
if (currentWinner) return;
//if canGuess it's false it means we are waiting for the game to
//reset either after a correct guess or the first time the page load
if (!canGuess) return;
const guess = args.join(' ');
if (guess === currentWord) {
//lower casing the guess and the current word for case insensitivity
if (guess.toLowerCase() === currentWord.toLowerCase()) {
console.log('WINNER!', guess, tags['display-name']);
randomWordElement.textContent = currentWord;
definitionElement.textContent = currentDefinition;
currentWinner = tags['user-id'];
//push the current winner to the array of winners. Adding userId
//to avoid cheating (like changing the display name) and the display
//name to show the list of winners.
winners.push({
userId: tags['user-id'],
username: tags['display-name']
})
//set the can guess to false
canGuess=false;
//recalculate and show the updated list of winners.
winnersElement.textContent=`Winners: ${getWinnersString()}`;
guesserElement.textContent = `${tags['display-name']} has guessed:`;
//show the correct word and the guesser for 10 seconds than reset the game
setTimeout(()=> getRandomWord().then(resetGame),10000);
} else {
console.log('INCORRECT GUESS!', guess, tags['display-name']);
}
} if (command === '!place' && tags['user-id'] === currentWinner) {
} if (command === '!place' && winners.map(winner => winner.userId).includes(tags['user-id'])) {
//it can enter here only if the command is !place and the id of
//the sender is in the winners array
const [name, row, col] = args;
images.push({
src: 'images/bonsai.png',
row: row || 3,
col: col || 5,
});
updateGrid();
getRandomWord()
.then(resetGame);
//remove one occurence of the "placer" from the winners array
winners.splice(winners.findIndex(elem => elem.userId === tags["user-id"]), 1);
//update the winners element
winnersElement.textContent=`Winners: ${getWinnersString()}`;
}
});
1 change: 1 addition & 0 deletions episode_005/password/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
</head>
<body>
<div class="wrapper">
<div id="winners"></div>
<div id="guesser"></div>
<div id="randomWord"></div>
<div id="definition"></div>
Expand Down
2 changes: 1 addition & 1 deletion episode_005/password/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ body {
text-shadow: 0px 0px 10px #56BC58;
}

#definition, #guesser {
#definition, #guesser, #winners {
font-size: 2vmin;
color: white;
text-shadow: 0px 0px 5px #56BC58;
Expand Down