Gameplay

app.js

@@ -64,6 +64,8 @@ schedule.scheduleJob("0 0 * * *", async () => {
         dotd()
     }).catch(e => {
         console.log("API is unreachable! Not updating drivers...")
+        let data = fs.readFileSync("./assets/drivers.json")
+        drivers = JSON.parse(data)
         dotd()
     })
 })
@@ -74,6 +76,8 @@ async function main() {
         dotd()
     }).catch(e => {
         console.log("API is unreachable! Not updating drivers...")
+        let data = fs.readFileSync("./assets/drivers.json")
+        drivers = JSON.parse(data)
         dotd()
     })
     server()
@@ -91,6 +95,7 @@ async function updateDrivers() {
                     drivers[driver.Driver.driverId] = {
                         "firstName": driver.Driver.givenName,
                         "lastName": driver.Driver.familyName,
+                        "code": driver.Driver.code,
                         "nationality": flag[driver.Driver.nationality],
                         "constructor": team[driver.Constructors[0].name],
                         "permanentNumber": driver.Driver.permanentNumber,
@@ -150,6 +155,12 @@ function server() {
         res.render("index")
     })
 
+    app.get("/winner", (req, res) => {
+        res.json({
+            "winner": drivers[driver].firstName + " " + drivers[driver].lastName
+        })
+    })
+
     app.get("/driver", (req, res) => {
         if (!req.query.driver) return res.statusSend(400)
         let search = false
@@ -160,6 +171,14 @@ function server() {
                 let guess = drivers[query]
                 let actual = drivers[driver]
 
+                // nationality
+                if (guess.nationality == actual.nationality) response.push(1) // correct nationality
+                else response.push(3) // incorrect nationality
+
+                // constructor
+                if (guess.constructor == actual.constructor) response.push(1) // correct constructor
+                else response.push(3) // incorrect constructor
+
                 // permanent number
                 if (parseInt(guess.permanentNumber) > parseInt(actual.permanentNumber)) response.push(0) // go down
                 else if (parseInt(guess.permanentNumber) == parseInt(actual.permanentNumber)) response.push(1) // stay the same
@@ -175,14 +194,6 @@ function server() {
                 else if (parseInt(guess.firstYear) == parseInt(actual.firstYear)) response.push(1) // stay the same
                 else if (parseInt(guess.firstYear) < parseInt(actual.firstYear)) response.push(2) // go up
 
-                // nationality
-                if (guess.nationality == actual.nationality) response.push(1) // correct nationality
-                else response.push(0) // incorrect nationality
-
-                // constructor
-                if (guess.constructor == actual.constructor) response.push(1) // correct constructor
-                else response.push(0) // incorrect constructor
-
                 // wins
                 if (parseInt(guess.wins) > parseInt(actual.wins)) response.push(0) // go down
                 else if (parseInt(guess.wins) == parseInt(actual.wins)) response.push(1) // stay the same
@@ -191,11 +202,11 @@ function server() {
         }
         if (!search) return res.sendStatus(400)
         res.json({
-            "permanentNumber": response[0],
+            "nationality": response[0],
-            "age": response[1],
+            "constructor": response[1],
-            "firstYear": response[2],
+            "permanentNumber": response[2],
-            "nationality": response[3],
+            "age": response[3],
-            "constructor": response[4],
+            "firstYear": response[4],
             "wins": response[5]
         })
     })

assets/css/main.css

@@ -10,6 +10,41 @@ h1 {
     text-align: center;
 }
 
+h2 {
+    font-family: "FormulaOne";
+    color: #fff;
+    font-size: 2em;
+    text-align: center;
+    margin: 0;
+}
+
+h3 {
+    font-family: "FormulaOne";
+    color: #fff;
+    font-size: 1.75em;
+    text-align: center;
+    margin: 0;
+    display: inline-block;
+}
+
+h4 {
+    font-family: "FormulaOne";
+    color: #fff;
+    font-size: 1.5em;
+    text-align: center;
+    margin: 0;
+    display: inline-block;
+}
+
+h5 {
+    font-family: "FormulaOne";
+    color: #fff;
+    font-size: 1.25em;
+    text-align: center;
+    margin: 0;
+    display: inline-block;
+}
+
 body {
     font: 16px Arial;
     background-color: #171717;
@@ -78,12 +113,23 @@ input[type=text] {
     color: #ffffff;
 }
 
+.gg .p {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: 0.4em
+}
+
+.timer {
+    margin-top: 1.4em;
+}
+
 .board {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    transform: translateY(-50px);
+    transform: translateY(-55px);
 }
 
 .header {
@@ -100,10 +146,10 @@ input[type=text] {
 }
 
 .text {
-    line-height: 50px;
+    line-height: 55px;
     vertical-align: middle;
     position: absolute;
-    width: 50px;
+    width: 55px;
     margin-left: auto;
     margin-right: auto;
     color: white;
@@ -117,12 +163,37 @@ input[type=text] {
 
 .frame {
     background-color: #171717;
-    height: 50px;
+    height: 55px;
-    width: 50px;
+    width: 55px;
     outline: 2px solid #3a3a3c;
     margin: 4px;
     text-align: center;
     position: relative;
+    transition: all 1s;
+}
+
+#time {
+    font-variant-numeric: tabular-nums;
+}
+
+.incorrect {
+    background-color: #eb4b48;
+    border-radius: 10px;
+}
+
+.correct {
+    background-color: #508b53;
+    border-radius: 10px;
+}
+
+.down {
+    background-color: #4d81e4;
+    border-radius: 0px 0px 20px 20px;
+}
+
+.up {
+    background-color: #e78f3a;
+    border-radius: 20px 20px 0px 0px;
 }
 
 .flag {
@@ -130,7 +201,7 @@ input[type=text] {
 }
 
 .team {
-    width: 50px;
+    width: 55px;
     padding: 5px;
     position: absolute;
     top: 50%;

assets/js/main.js

@@ -108,7 +108,7 @@ fetch(`${window.location.href}/drivers.json`).then(res => {
     })
 })
 
-document.addEventListener("keyup", function (event) {
+document.addEventListener("keyup", async function (event) {
     if (event.keyCode === 13) {
         let value = document.getElementById("myInput").value
         if (value != "") {
@@ -130,11 +130,66 @@ document.addEventListener("keyup", function (event) {
                     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">${Object.values(obj)[0].charAt(0)}${Object.values(obj)[1].charAt(0)}</div>`
+                frames[0].innerHTML = `<div class="guess text">${obj.code}</div>`
-                frames[1].innerHTML = `<img class="flag" src="./flags/${Object.values(obj)[0 + 2]}.svg">`
+                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 + 2]}.webp">`
+                frames[2].innerHTML = `<img class="team" src="./logos/${Object.values(obj)[1 + 3]}.webp">`
                 for (let i = 2; i < 6; i++) {
-                    frames[i + 1].innerHTML = `<div class="guess text"> ${Object.values(obj)[i + 2]}</div>`
+                    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")
+                    }, 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 {