diff --git a/main.js b/main.js index 6826f54..8687c51 100644 --- a/main.js +++ b/main.js @@ -19,7 +19,7 @@ for (var i = 0; i < localStorage.length; i++){ var movies = ["A Nightmare on Elm Street","Friday the 13th","Event Horizon","Hellraiser","The Cabin in the Woods","American Psycho","It Follows","Candyman","Child's Play","The Texas Chain Saw Massacre","Alien","Halloween"]; var pix = []; - autocomplete(document.getElementById("guess"), movies); + // autocomplete(document.getElementById("guess"), movies); var gameBeginning = new Date('September 18, 2022 00:00:00'); var countDownTime = new Date(); var present_date = new Date(); @@ -31,7 +31,7 @@ for (var i = 0; i < localStorage.length; i++){ console.log("now: ",present_date); var textResult = "Horrordle #"+dayCount+"\nšŸ”Ŗ"; - +console.log(textResult); function dayCounter(){ dayCount = Math.floor((present_date - gameBeginning) / (1000 * 60 * 60 * 24)); return dayCount; @@ -154,7 +154,7 @@ checkingGuess(); function checkGuess() { console.log("day count:" + dayCount); - let myGuess = guess.value + let myGuess = guess if (myGuess === movieOfTheDay) { if(guessNo==0){localStorage.setItem('firstGuessStat',parseInt(localStorage.getItem('firstGuessStat')) + 1);} if(guessNo==1){localStorage.setItem('secondGuessStat',parseInt(localStorage.getItem('secondGuessStat')) + 1);} @@ -168,7 +168,7 @@ console.log("day count:" + dayCount); document.getElementById("movieName").innerHTML = movieOfTheDay + " āœ…"; document.getElementById("countDown").style.display = "block"; document.getElementById("shareResult").style.display = "block"; - localStorage.setItem("winningGuess", guess.value); + localStorage.setItem("winningGuess", guess); document.getElementById("firstGuess").style.display = "none"; document.getElementById("secondGuess").style.display = "none"; @@ -187,8 +187,8 @@ console.log("day count:" + dayCount); localStorage.setItem('guessNo', guessNo); feedback.textContent = "šŸ©ø " + (3-guessNo) + " guesses remaining"; document.getElementById("movieFrame").src = pix[guessNo]; - firstGuess.textContent = "āŒ" + guess.value; - localStorage.setItem('firstGuess', guess.value); + firstGuess.textContent = "āŒ" + guess; + localStorage.setItem('firstGuess', guess); document.getElementById("firstGuess").style.display = "block"; textResult = textResult + "šŸŸ„"; localStorage.setItem('result', textResult); @@ -197,8 +197,8 @@ console.log("day count:" + dayCount); localStorage.setItem('guessNo', guessNo); feedback.textContent = "šŸ©ø " + (3-guessNo) + " guesses remaining"; document.getElementById("movieFrame").src = pix[guessNo]; - secondGuess.textContent = "āŒ" + guess.value; - localStorage.setItem('secondGuess', guess.value); + secondGuess.textContent = "āŒ" + guess; + localStorage.setItem('secondGuess', guess); document.getElementById("secondGuess").style.display = "block"; textResult = textResult + "šŸŸ„"; localStorage.setItem('result', textResult); @@ -217,110 +217,42 @@ console.log("day count:" + dayCount); } - function autocomplete(inp, arr) { - /*the autocomplete function takes two arguments, - the text field element and an array of possible autocompleted values:*/ - var currentFocus; - /*execute a function when someone writes in the text field:*/ - inp.addEventListener("input", function(e) { - var a, b, i, val = this.value; - /*close any already open lists of autocompleted values*/ - closeAllLists(); - if (!val) { return false;} - currentFocus = -1; - /*create a DIV element that will contain the items (values):*/ - a = document.createElement("DIV"); - a.setAttribute("id", this.id + "autocomplete-list"); - a.setAttribute("class", "autocomplete-items"); - /*append the DIV element as a child of the autocomplete container:*/ - this.parentNode.appendChild(a); - /*for each item in the array...*/ + const autoCompleteJS = new autoComplete({ + placeHolder: "Search for Movies...", + data: { + src: movies + }, + resultItem: { + highlight: true, + }, + events: { + input: { + selection: (event) => { + const selection = event.detail.selection.value; + autoCompleteJS.input.value = selection; + }, + open() { + const position = + autoCompleteJS.input.getBoundingClientRect().bottom + autoCompleteJS.list.getBoundingClientRect().height > + (window.innerHeight || document.documentElement.clientHeight); - for (i = 0; i < arr.length; i++) { - // newArray = arr[i].split(" "); - newArray = arr[i].split(" "); - /*check if the item starts with the same letters as the text field value:*/ - for (var j = 0; j < newArray.length; j++) { - - - if (newArray[j].substr(0, val.length).toUpperCase() == val.toUpperCase()) { - /*create a DIV element for each matching element:*/ - b = document.createElement("DIV"); - - /*make the matching letters bold:*/ - b.innerHTML = newArray.slice(0,j).join(' ') + " " + newArray[j].substr(0, val.length) + ""; - b.innerHTML += newArray[j].substr(val.length) + " " + newArray.slice(j+1,newArray.length).join(' '); - /*insert a input field that will hold the current array item's value:*/ - b.innerHTML += ""; - /*execute a function when someone clicks on the item value (DIV element):*/ - b.addEventListener("click", function(e) { - /*insert the value for the autocomplete text field:*/ - inp.value = this.getElementsByTagName("input")[0].value; - /*close the list of autocompleted values, - (or any other open lists of autocompleted values:*/ - closeAllLists(); - }); - a.appendChild(b); - } - } + if (position) { + autoCompleteJS.list.style.bottom = autoCompleteJS.input.offsetHeight + 8 + "px"; + } else { + // autoCompleteJS.list.style.bottom = -autoCompleteJS.list.offsetHeight - 8 + "px"; + } + }, } - }); - /*execute a function presses a key on the keyboard:*/ - inp.addEventListener("keydown", function(e) { - var x = document.getElementById(this.id + "autocomplete-list"); - if (x) x = x.getElementsByTagName("div"); - if (e.keyCode == 40) { - /*If the arrow DOWN key is pressed, - increase the currentFocus variable:*/ - currentFocus++; - /*and and make the current item more visible:*/ - addActive(x); - } else if (e.keyCode == 38) { //up - /*If the arrow UP key is pressed, - decrease the currentFocus variable:*/ - currentFocus--; - /*and and make the current item more visible:*/ - addActive(x); - } else if (e.keyCode == 13) { - /*If the ENTER key is pressed, prevent the form from being submitted,*/ - e.preventDefault(); - if (currentFocus > -1) { - /*and simulate a click on the "active" item:*/ - if (x) x[currentFocus].click(); - } - } - }); - function addActive(x) { - /*a function to classify an item as "active":*/ - if (!x) return false; - /*start by removing the "active" class on all items:*/ - removeActive(x); - if (currentFocus >= x.length) currentFocus = 0; - if (currentFocus < 0) currentFocus = (x.length - 1); - /*add class "autocomplete-active":*/ - x[currentFocus].classList.add("autocomplete-active"); - } - function removeActive(x) { - /*a function to remove the "active" class from all autocomplete items:*/ - for (var i = 0; i < x.length; i++) { - x[i].classList.remove("autocomplete-active"); - } - } - function closeAllLists(elmnt) { - /*close all autocomplete lists in the document, - except the one passed as an argument:*/ - var x = document.getElementsByClassName("autocomplete-items"); - for (var i = 0; i < x.length; i++) { - if (elmnt != x[i] && elmnt != inp) { - x[i].parentNode.removeChild(x[i]); - } - } - } - /*execute a function when someone clicks in the document:*/ -document.addEventListener("click", function (e) { - closeAllLists(e.target); -}); } +}); +autoCompleteJS.input.addEventListener("selection", function (event) { + const feedback = event.detail; + // Prepare User's Selected Value + guess = event.detail.selection.value + autoCompleteJS.input.value = guess; + // Console log autoComplete data feedback + console.log(event.detail.selection.value); +}); function copyToClipboard() { navigator.clipboard.writeText(textResult).then(() => { @@ -393,7 +325,7 @@ var x = setInterval(function() { countDownTime.setMinutes(0); countDownTime.setSeconds(0); var now = new Date(); - console.log("now: ",now); + // console.log("now: ",now); var remainingTime = countDownTime - now; const second = 1000; const minute = second * 60; @@ -405,8 +337,8 @@ var x = setInterval(function() { document.getElementById("countDown").innerHTML = hoursLeft + "h " + minutesLeft + "m " + secondsLeft + "s "; //console.log(remainingTime); -console.log(localStorage.getItem('day')); -console.log("day count: " + dayCount); +// console.log(localStorage.getItem('day')); +// console.log("day count: " + dayCount); dayCount = Math.floor((now - gameBeginning) / (1000 * 60 * 60 * 24)); if (localStorage.getItem('day')!=dayCount) { window.location.reload();