https://word-wiz.netlify.app/scripts/script.js

1//NAMESPACE: To keep app contained
2const wizApp = {}
3
4// =============== GLOBAL STATES  =============== //
5wizApp.guessedWords = [];
6wizApp.totalScore = [];
7wizApp.currentRoundNum = 0;
8wizApp.nextRoundNum = 1;
9wizApp.category = [
10  // ANIMALS
11  [
12    { //chicken
13      type: `Chicken`,
14      words: [`kfc`, `wing`, `feather`, `beak`, `peak`, `fly`, `peck`],
15      score: 0
16    },
17    { //cow
18      type: `Cow`,
19      words: [`steak`, `moo`],
20      score: 0
21    },
22    { //fish
23      type: `Fish`,
24      words: [`wet`, `ocean`, `gill`, `gills`],
25      score: 0
26    }
27  ]
28];
29
30// Animal References
31wizApp.animalCategory = wizApp.category[0];
32wizApp.chicken = wizApp.animalCategory[0];
33wizApp.cow = wizApp.animalCategory[1];
34wizApp.fish = wizApp.animalCategory[2];
35
36wizApp.finalChickenWords = wizApp.chicken.words;
37wizApp.finalCowWords = wizApp.cow.words;
38wizApp.finalFishWords = wizApp.fish.words;
39
40wizApp.chickenObjsFromAPI = [];
41wizApp.cowObjsFromAPI = [];
42wizApp.fishObjsFromAPI = [];
43
44
45// =============== API CALLS  =============== //
46//Keys needed for iterating through the four different endpoints
47wizApp.wordTypeKey = [`rel_jjb=`, `rel_jja=`, `rel_trg=`, `ml=`];
48
49// Function to filter through array to remove duplicate words
50wizApp.uniqueArr = function (arr) {
51  return arr.filter(function (item, index) {
52    return arr.indexOf(item) >= index;
53  })
54};
55
56// ajax call
57wizApp.getWords = (wordType, animal) => {
58  return $.ajax({
59    url: `https://api.datamuse.com//words?${wordType}${animal}`,
60    dataType: `json`,
61    method: `GET`
62  })
63};
64
65// Chicken API call
66wizApp.compiledChickenArr = [];
67for (let i = 0; i <= 3; i++) {
68  chickenObjsFromAPI = [];
69  wizApp.chickenObjsFromAPI.push(wizApp.getWords(wizApp.wordTypeKey[i], `chicken`));
70}
71// WHEN the call has been settled THEN push arrays for adj, noun, target words, and means like words (4 arrays) into one array.. then take the arrays and only pull out the content that matters (i.e. only the words) ..then clean the array and filter out the duplicates and push to the final array
72$.when(...wizApp.chickenObjsFromAPI).then((...chickenWords) => {
73  const pulledArray = chickenWords.map(word => {
74    return word[0];
75  });
76  for (i = 0; i <= 3; i++) {
77    pulledArray[i].forEach(chick => {
78      wizApp.compiledChickenArr.push(chick.word);
79    });
80  }
81  cleanChickenArr = wizApp.uniqueArr(wizApp.compiledChickenArr);
82  wizApp.chicken.words.push(...cleanChickenArr);
83});
84
85
86// Cow API call
87wizApp.compiledCowArr = [];
88for (let i = 0; i <= 3; i++) {
89  wizApp.cowObjsFromAPI.push(wizApp.getWords(wizApp.wordTypeKey[i], `cow`));
90}
91$.when(...wizApp.cowObjsFromAPI).then((...cowWords) => {
92  const pulledArray = cowWords.map(word => {
93    return word[0];
94  });
95  for (i = 0; i <= 3; i++) {
96    pulledArray[i].forEach(cow => {
97      wizApp.compiledCowArr.push(cow.word);
98    });
99  }
100  cleanCowArr = wizApp.uniqueArr(wizApp.compiledCowArr);
101  wizApp.cow.words.push(...cleanCowArr);
102});
103
104
105// Fish API call
106wizApp.compiledFishResults = [];
107for (let i = 0; i <= 3; i++) {
108  wizApp.fishObjsFromAPI.push(wizApp.getWords(wizApp.wordTypeKey[i], `fish`));
109}
110$.when(...wizApp.fishObjsFromAPI)
111  .then((...fishWords) => {
112    const pulledArray = fishWords.map((word) => {
113      return word[0];
114    })
115    for (i = 0; i <= 3; i++) {
116      pulledArray[i].forEach((fish) => {
117        wizApp.compiledFishResults.push(fish.word)
118      });
119    }
120    cleanFishArray = wizApp.uniqueArr(wizApp.compiledFishResults);
121    wizApp.fish.words.push(...cleanFishArray)
122  });
123
124
125// =============== GAME FUNCTIONS  =============== //
126//Form to handle user's guesses
127wizApp.handleSubmit = (animalCategory, animalScore) => {
128  // Grab the user's guess from input field
129  let userInput = $(`input`).val().toLowerCase();
130  // Reset input field to nothing after user submits
131  $(`input`).val(``);
132  // Check user's guess against current list and if correct, add one
133  if (animalCategory.includes(userInput) && !wizApp.guessedWords.includes(userInput)) {
134    animalScore.score += 1;
135    wizApp.guessedWords.push(userInput);
136    // Append correct guesses and colour them green
137    $(`.user-guesses`).append(`<li class="correct">${userInput}</li>`);
138    // Update score
139    $(`.score-counter`).html(`<p>${animalScore.score}</p>`);
140  } else {
141    // If inputs do not match, still append but leave red
142    $(`.user-guesses`).append(`<li class="wrong">${userInput}</li>`);
143  }
144};
145
146// Set-up for cycling through rounds
147wizApp.round = () => {
148  // show / hide the appropirate screens
149  $(`.intro-screen`).addClass(`hide`);
150  $(`.game-center`).removeClass(`hide`);
151  // hide footer on mobile so the keyboard doesn't push it up into 
152  if ($(window).width() <= 768) {
153    $(`footer`).addClass(`hide`);
154  }
155  // increase the round number and next round number
156  wizApp.currentRoundNum += 1;
157  wizApp.nextRoundNum += 1;
158  // dynamically change the round numbers in the game
159  $(`h2 span`).html(`${wizApp.currentRoundNum}`);
160  // only show chicken words at round 1, cow words at round 2, fish words at round 3
161  if (wizApp.currentRoundNum === 1) {
162    wizApp.displayGameCountdown(wizApp.chicken);
163  } else if (wizApp.currentRoundNum === 2) {
164    wizApp.displayGameCountdown(wizApp.cow);
165  } else if (wizApp.currentRoundNum === 3) {
166    wizApp.displayGameCountdown(wizApp.fish);
167  };
168};
169
170// Countdown screen for each round
171wizApp.displayGameCountdown = animal => {
172  // show the user's score
173  $(`.score-counter`).html(`<p>${animal.score}</p>`);
174  $(`.countdown-screen`).removeClass(`hide`);
175  // Reset input field to nothing before each round
176  $(`input`).val(``);
177  // Set the count-down timer to 3
178  let timeLeft = 3;
179  let timer = setInterval(function () {
180    $(`.three-sec-timer`).html(timeLeft);
181    timeLeft -= 1;
182    if (timeLeft < 0) {
183      timeLeft = 3;
184      // when the timer runs out run the play game function and reset the timer
185      wizApp.playGame(animal);
186      window.clearInterval(timer);
187      $(`.three-sec-timer`).html(``);
188    }
189    // Run the timer at 1sec intervals
190  }, 1000);
191};
192
193// Play the game
194wizApp.playGame = animal => {
195  // Append the animal type to the round title
196  $(`.category-word`).html(`${animal.type}`);
197  // Hide the countdown screen
198  $(`.countdown-screen`).addClass(`hide`);
199  // show game play screen
200  $(`.game-play-screen`).removeClass(`hide`);
201  // Automatically sets user input field to be focused on load
202  $(`#user-input`).focus();

203  // Start timer for the game rounds
204  let timeLeft = 20;
205  let timer = setInterval(function () {
206    $(`.play-timer`).html(timeLeft);
207    timeLeft -= 1;
208    if (timeLeft === 0) {
209      $(`.game-play-screen`).addClass(`hide`);
210      window.clearInterval(timer);
211      $(`.play-timer`).html(``);
212      wizApp.displayRoundResultScreen(animal);
213      //reset the guessedWords to an empty array for next round
214      wizApp.guessedWords = [];
215    }
216  }, 1000);
217};
218
219// Display user score for the round
220wizApp.displayRoundResultScreen = (animal) => {
221  $(`.round-result-screen`).removeClass(`hide`);
222  $(`.game-play-screen`).addClass('hide');
223  $(`.next-round-btn`).focus();
224  // Update values and display round results
225  $(`.round-result-screen p span`).html(`${animal.score}`);
226  wizApp.totalScore.push(animal.score);
227  $(`h2 span`).html(`${wizApp.currentRoundNum}`);
228  if (wizApp.currentRoundNum === 3) {
229    // Auto-focus on next-round button and change the text
230    $(`.next-round-btn`).html(`Did you out-wiz our Wizard?`).on(`click`, function () {
231      wizApp.displayTotalScoreScreen();
232    });
233    if ($(window).width() <= 340) {
234      $(`.next-round-btn`).html(`Go to results!`);
235    }
236  } else {
237    $(`.next-round-btn span`).html(`${wizApp.nextRoundNum}`);
238  }
239  $(`form`).attr(`id`, `round-${wizApp.nextRoundNum}`)
240}
241
242// Display final user score
243wizApp.displayTotalScoreScreen = () => {
244  $(`.final-result-screen`).removeClass(`hide`);
245  $(`.game-center`).addClass(`hide`);
246  const sum = wizApp.totalScore.reduce((total, a) => total + a, 0);
247  $(`p span`).html(`${sum}`);
248  // Custom messages for user based on their score
249  if (sum <= 9) {
250    $(`.result-msg`).html(`Sorry, you totally got out-wized by our wizard! Study up and better luck next time!`)
251  } else if (sum >= 10 && sum <= 17) {
252    $(`.result-msg`).html(`Not too shabby. But you're gonna need to study a bit more to out-wiz our Wizard!`)
253  } else if (sum >= 18 && sum <= 24) {
254    $(`.result-msg`).html(`Great job! You're on the same level as our wizard but didn't quite out-wiz him! Sad.`)
255  } else if (sum >= 25) {
256    $(`.result-msg`).html(`Well, aren't you a smarty-pants? You out-wized our wizard with your extraordinary score! Congratulations!`)
257  }
258};
259
260// Event listeners for game functionality
261wizApp.eventListeners = () => {
262  // Auto focus on start button and start the first round on click
263  $(`.start-btn`).focus().on(`click`, function () {
264    wizApp.round();
265  });
266  // If user is on rounds 1 or 2, go to next round
267  if (wizApp.currentRoundNum < 3) {
268    // Auto-focus on next-round button
269    $(`.next-round-btn`).focus().on(`click`, function () {
270      $(`.round-result-screen`).addClass(`hide`);
271      $(`li`).addClass(`hidden`);
272      wizApp.round();
273    });
274  } // If on final round (3), go to the final results score screen
275  else if (wizApp.currentRoundNum === 3) {
276    // Auto-focus on next-round button
277    $(`.next-round-btn`).focus().on(`click`, function () {
278      $(`.game-center`).addClass(`hide`);
279      $(`.game-play-screen`).addClass(`hide`);
280      $(`.round-result-screen`).addClass(`hide`);
281      $(`.final-result-screen`).removeClass(`hide`);
282      wizApp.displayTotalScoreScreen();
283    });
284  };
285
286  // Form handling for user user guesses
287  $(`form`).on(`submit`, function (event) {
288    // Prevent the default behaviour
289    event.preventDefault();
290    const round = event.target.id;
291    if (round === `round-1`) {
292      wizApp.handleSubmit(wizApp.finalChickenWords, wizApp.chicken);
293    } else if (round === `round-2`) {
294      wizApp.handleSubmit(wizApp.finalCowWords, wizApp.cow);
295    } else {
296      wizApp.handleSubmit(wizApp.finalFishWords, wizApp.fish);
297    }
298  });
299
300  // Auto-focus and reset the game when play again button is clicked
301  $(`.play-again-btn`).focus().on(`click`, function () {
302    window.location.reload();
303  });
304};
305
306// Initialise the game
307wizApp.init = () => {
308  wizApp.eventListeners();
309};
310
311// DOC READY: Only run when DOM elements have loaded
312$(function () {
313  wizApp.init();
314});