LocalStorage

assets/js/main.js

@@ -112,16 +112,6 @@ function autocomplete(inp, arr) {
 let driversObj = {}
 let drivers = []
 
-fetch(`${window.location.href}/drivers.json`).then(res => {
-    res.json().then(result => {
-        driversObj = result
-        Object.entries(result).forEach(driver => {
-            drivers.push(driver[1].firstName + " " + driver[1].lastName)
-        })
-        autocomplete(document.getElementById("myInput"), drivers);
-    })
-})
-
 document.addEventListener("keyup", async function (event) {
     if (event.keyCode === 13) {
         let value = document.getElementById("myInput").value
@@ -141,78 +131,20 @@ document.addEventListener("keyup", async function (event) {
             })
 
             if (potential == 1 || document.getElementsByClassName("autocomplete-items")[0].children.length == 1 && value.replace(/[0-9]/g, '') != "") {
+                if (localStorage.guesses == null) {
+                    localStorage.guesses = JSON.stringify([guess])
+                }
+                else {
+                    let guesses = JSON.parse(localStorage.guesses)
+                    guesses.push(guess)
+                    localStorage.guesses = JSON.stringify(guesses)
+                }
                 document.getElementById("myInput").value = ""
                 var x = document.getElementsByClassName("autocomplete-items");
                 for (var i = 0; i < x.length; i++) {
                     x[i].parentNode.removeChild(x[i]);
                 }
-                let obj = {}
+                submit(guess)
-                Object.entries(driversObj).forEach(driver => {
-                    if (driver[1].firstName + " " + driver[1].lastName == guess) obj = driver[1]
-                })
-                let frames = Array.from(document.getElementsByClassName("frame")).filter(x => x.childNodes.length == 0)
-                frames[0].innerHTML = `<div class="guess text">${obj.code}</div>`
-                frames[1].innerHTML = `<img class="flag" src="./flags/${Object.values(obj)[0 + 3]}.svg">`
-                frames[2].innerHTML = `<img class="team" src="./logos/${Object.values(obj)[1 + 3][Object.values(obj)[1 + 3].length - 1]}.webp">`
-                for (let i = 2; i < 6; i++) {
-                    frames[i + 1].innerHTML = `<div class="guess text">${Object.values(obj)[i + 3]}</div>`
-                }
-                let answer = await fetch(`${window.location.href}driver?driver=${obj.firstName + " " + obj.lastName}`)
-                let json = await answer.json()
-                let won = true
-                Object.values(json).forEach(async (answer, index) => {
-                    if (answer != 1) won = false
-                    setTimeout(() => {
-                        if (answer == 0) frames[index + 1].classList.add("down")
-                        else if (answer == 1) frames[index + 1].classList.add("correct")
-                        else if (answer == 2) frames[index + 1].classList.add("up")
-                        else if (answer == 3) frames[index + 1].classList.add("incorrect")
-                        else if (answer == 4) frames[index + 1].classList.add("previous")
-                    }, index * 250)
-                })
-                if (won || Array.from(document.getElementsByClassName("frame")).filter(x => x.childNodes.length == 0).length == 0) {
-                    let data = await fetch(`${window.location.href}winner`)
-                    let winner = await data.json()
-                    let gg = document.getElementsByClassName("input")[0]
-                    gg.classList.remove("input")
-                    gg.classList.add("gg")
-                    let greeting = won ? "Congratulations!" : "Bwoah."
-                    gg.innerHTML = `<h2>${greeting}</h2><div class="p"><h5>The driver was</h5><h4> ${winner.winner}!</h4></div><div class="p timer"><h3>Next Stewardle</h3></div><div class="p"><h4 id="time">00:00:00:000</h4></div>`
-                    // Set the date we're counting down to
-                    let d = new Date()
-                    var countDownDate = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate() + 1, 0, 0, 0));
-
-                    // Update the count down every 1 second
-                    var x = setInterval(function () {
-
-                        // Get today's date and time
-                        var now = new Date().getTime();
-
-                        // Find the distance between now and the count down date
-                        var distance = countDownDate - now;
-
-                        // Time calculations for days, hours, minutes and seconds
-                        const millisecond = 1
-                        const second = 1000
-                        const minute = second * 60
-                        const hour = minute * 60
-                        const day = hour * 24;
-                        let hours = Math.trunc((distance % day) / hour)
-                        let minutes = Math.trunc((distance % hour) / minute)
-                        let seconds = Math.trunc((distance % minute) / second)
-                        let milliseconds = secondsLeft = Math.trunc((distance % second) / millisecond)
-
-                        // Display the result in the element with id="demo"
-                        document.getElementById("time").innerHTML = ("0" + hours).slice(-2) + ":"
-                            + ("0" + minutes).slice(-2) + ":" + ("0" + seconds).slice(-2) + ":" + ("00" + milliseconds).slice(-3);
-
-                        // If the count down is finished, write some text
-                        if (distance < 0) {
-                            clearInterval(x);
-                            document.getElementById("time").innerHTML = "EXPIRED";
-                        }
-                    }, 1);
-                }
             }
             else {
                 shake()
@@ -227,6 +159,82 @@ function shake() {
     setTimeout(() => element.style.animation = "shake .5s", 100)
 }
 
+async function submit(guess) {
+    return new Promise(async (res, rej) => {
+        let obj = {}
+        Object.entries(driversObj).forEach(driver => {
+            if (driver[1].firstName + " " + driver[1].lastName == guess) obj = driver[1]
+        })
+        let frames = Array.from(document.getElementsByClassName("frame")).filter(x => x.childNodes.length == 0)
+        frames[0].innerHTML = `<div class="guess text">${obj.code}</div>`
+        frames[1].innerHTML = `<img class="flag" src="./flags/${Object.values(obj)[0 + 3]}.svg">`
+        frames[2].innerHTML = `<img class="team" src="./logos/${Object.values(obj)[1 + 3][Object.values(obj)[1 + 3].length - 1]}.webp">`
+        for (let i = 2; i < 6; i++) {
+            frames[i + 1].innerHTML = `<div class="guess text">${Object.values(obj)[i + 3]}</div>`
+        }
+        let answer = await fetch(`${window.location.href}driver?driver=${obj.firstName + " " + obj.lastName}`)
+        let json = await answer.json()
+        let won = true
+        Object.values(json).forEach(async (answer, index) => {
+            if (answer != 1) won = false
+            setTimeout(() => {
+                if (answer == 0) frames[index + 1].classList.add("down")
+                else if (answer == 1) frames[index + 1].classList.add("correct")
+                else if (answer == 2) frames[index + 1].classList.add("up")
+                else if (answer == 3) frames[index + 1].classList.add("incorrect")
+                else if (answer == 4) frames[index + 1].classList.add("previous")
+            }, index * 250)
+        })
+        if (won || Array.from(document.getElementsByClassName("frame")).filter(x => x.childNodes.length == 0).length == 0) {
+            let data = await fetch(`${window.location.href}winner`)
+            let winner = await data.json()
+            let gg = document.getElementsByClassName("input")[0]
+            if (gg != null) {
+                gg.classList.remove("input")
+                gg.classList.add("gg")
+                let greeting = won ? "Congratulations!" : "Bwoah."
+                gg.innerHTML = `<h2>${greeting}</h2><div class="p"><h5>The driver was</h5><h4> ${winner.winner}!</h4></div><div class="p timer"><h3>Next Stewardle</h3></div><div class="p"><h4 id="time">00:00:00:000</h4></div>`
+            }
+
+            // Set the date we're counting down to
+            let d = new Date()
+            var countDownDate = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate() + 1, 0, 0, 0));
+
+            // Update the count down every 1 second
+            var x = setInterval(function () {
+
+                // Get today's date and time
+                var now = new Date().getTime();
+
+                // Find the distance between now and the count down date
+                var distance = countDownDate - now;
+
+                // Time calculations for days, hours, minutes and seconds
+                const millisecond = 1
+                const second = 1000
+                const minute = second * 60
+                const hour = minute * 60
+                const day = hour * 24;
+                let hours = Math.trunc((distance % day) / hour)
+                let minutes = Math.trunc((distance % hour) / minute)
+                let seconds = Math.trunc((distance % minute) / second)
+                let milliseconds = secondsLeft = Math.trunc((distance % second) / millisecond)
+
+                // Display the result in the element with id="demo"
+                document.getElementById("time").innerHTML = ("0" + hours).slice(-2) + ":"
+                    + ("0" + minutes).slice(-2) + ":" + ("0" + seconds).slice(-2) + ":" + ("00" + milliseconds).slice(-3);
+
+                // If the count down is finished, write some text
+                if (distance < 0) {
+                    clearInterval(x);
+                    document.getElementById("time").innerHTML = "EXPIRED";
+                }
+            }, 1);
+        }
+        res()
+    })
+}
+
 function similarity(s1, s2) {
     var longer = s1;
     var shorter = s2;
@@ -308,4 +316,19 @@ function close() {
         backdrop.style.zIndex = -1
         canOpen = true
     }, 500)
-}
+}
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    fetch(`${window.location.href}/drivers.json`).then(res => {
+        res.json().then(result => {
+            driversObj = result
+            Object.entries(result).forEach(driver => {
+                drivers.push(driver[1].firstName + " " + driver[1].lastName)
+            })
+            autocomplete(document.getElementById("myInput"), drivers);
+            JSON.parse(localStorage.guesses).forEach(async guess => {
+                await submit(guess)
+            })
+        })
+    })
+})