JSFiddle - React, Tailwind, and code Playground
JavaScript
//Global variables
var randomWord;
var listOfWords;
var attemptNumber;
var completionNumber;
var populationNumber;
var gridSize;
var successSound;
var failSound;
var moveSound;
var hitSound;
var missSound;
var hintSound;
var hintPic;
var hintPicTitle;
var bgMusic;
var animation = false;
var score = {
right: 0,
wrong: 0
};
function getXSpaces(numOfSpaces) {
var answer = "";
for (var i = 0; i < numOfSpaces; i++) {
answer += " ";
}
return answer;
}
function getWordToFitIn(spaceAvail, wordlist) {
var foundIndex = -1;
//loops until function param returns true.
var answer;
$.each(wordlist, function (index, word) {
if (word.length <= spaceAvail) {
foundIndex = index;
answer = word;
return false; // stops the loop
}
});
// if none found return blank word of remaining space size
if (foundIndex == -1) {
answer = getXSpaces(spaceAvail);
//remove a blank from list if found
$.each(wordlist, function (index, word) {
if (word[0] == " ") {
foundIndex = index;
return false;
}
});
}
//remove the word from the list
if (foundIndex != -1) {
wordlist.splice(foundIndex, 1);
}
return answer;
}
function createGrid() {
//Extracts the <ul> data attributes from the mark-up
$('ul').each(function () {
populationNumber.push($(this).data('population-number'));
completionNumber.push($(this).data('completion-number'));
attemptNumber.push($(this).data('attempt-number'));
gridSize.push($(this).data('grid-size'));
});
if (populationNumber > 6) {
populationNumber = 6;
}
if (completionNumber > 6) {
completionNumber = 6;
}
//Determines grid size from "data-grid-size" attribute and adds size class
if ($('#wordlist').data('grid-size') == "large") {
var gridColumns = 6;
var...