From b1f5c18ebad501a82dc48ac7c0e0b58a62eacc62 Mon Sep 17 00:00:00 2001 From: ssyyhhrr <44934807+ssyyhhrr@users.noreply.github.com> Date: Sat, 18 Jun 2022 02:33:05 +0100 Subject: [PATCH] Gameplay --- app.js | 37 +++++++++++++------- assets/css/main.css | 83 +++++++++++++++++++++++++++++++++++++++++---- assets/js/main.js | 65 ++++++++++++++++++++++++++++++++--- 3 files changed, 161 insertions(+), 24 deletions(-) diff --git a/app.js b/app.js index 815a821..6bf9643 100644 --- a/app.js +++ b/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], - "age": response[1], - "firstYear": response[2], - "nationality": response[3], - "constructor": response[4], + "nationality": response[0], + "constructor": response[1], + "permanentNumber": response[2], + "age": response[3], + "firstYear": response[4], "wins": response[5] }) }) diff --git a/assets/css/main.css b/assets/css/main.css index 7dac071..2d535db 100644 --- a/assets/css/main.css +++ b/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; - width: 50px; + height: 55px; + 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%; diff --git a/assets/js/main.js b/assets/js/main.js index 7804aab..fc2c120 100644 --- a/assets/js/main.js +++ b/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 = `
${Object.values(obj)[0].charAt(0)}${Object.values(obj)[1].charAt(0)}
` - frames[1].innerHTML = `` - frames[2].innerHTML = `` + frames[0].innerHTML = `
${obj.code}
` + frames[1].innerHTML = `` + frames[2].innerHTML = `` for (let i = 2; i < 6; i++) { - frames[i + 1].innerHTML = `
${Object.values(obj)[i + 2]}
` + frames[i + 1].innerHTML = `
${Object.values(obj)[i + 3]}
` + } + 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 = `

${greeting}

The driver was

${winner.winner}!

Next Stewardle

00:00:00:000

` + // 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 {