From 2f85e439a59ffc755e44d75bedb95a72d7d3fae1 Mon Sep 17 00:00:00 2001
From: ssyyhhrr <44934807+ssyyhhrr@users.noreply.github.com>
Date: Fri, 17 Jun 2022 16:57:03 +0100
Subject: [PATCH] Driver Input

---
 app.js              |  2 +-
 assets/css/main.css | 47 ++++++++++++++++++++++++++++++++++++++-------
 assets/js/main.js   | 18 ++++++++++++++++-
 3 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/app.js b/app.js
index 4d64dae..aa2a6a3 100644
--- a/app.js
+++ b/app.js
@@ -42,9 +42,9 @@ async function updateDrivers() {
                     drivers[driver.Driver.driverId].constructor = driver.Constructors[0].name
                 } else if (driver.Driver.hasOwnProperty("permanentNumber")) {
                     drivers[driver.Driver.driverId] = {
-                        "permanentNumber": driver.Driver.permanentNumber,
                         "firstName": driver.Driver.givenName,
                         "lastName": driver.Driver.familyName,
+                        "permanentNumber": driver.Driver.permanentNumber,
                         "age": getAge(driver.Driver.dateOfBirth),
                         "firstYear": i,
                         "nationality": driver.Driver.nationality,
diff --git a/assets/css/main.css b/assets/css/main.css
index 65177d0..c637b58 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -87,20 +87,27 @@ input[type=text] {
 }
 
 .header {
-    color: white;
-    font-family: "FormulaOne";
-    border: 0px !important;
+    outline: 0px !important;
     vertical-align: bottom;
     background-color: transparent !important;
 }
 
-.text {
-    position: absolute;
+.header .text {
     bottom: 0;
     left: 0;
+    line-height: normal !important;
+    vertical-align: bottom !important;
+}
+
+.text {
+    line-height: 50px;
+    vertical-align: middle;
+    position: absolute;
     width: 50px;
     margin-left: auto;
     margin-right: auto;
+    color: white;
+    font-family: "FormulaOne";
 }
 
 .row {
@@ -112,8 +119,8 @@ input[type=text] {
     background-color: #171717;
     height: 50px;
     width: 50px;
-    border: 2px solid #3a3a3c;
-    margin: 3px;
+    outline: 2px solid #3a3a3c;
+    margin: 4px;
     text-align: center;
     position: relative;
 }
@@ -123,4 +130,30 @@ input[type=text] {
     margin-left: auto;
     margin-right: auto;
     width: 380px;
+}
+
+@keyframes shake {
+    0% {
+        transform: translateX(0);
+    }
+
+    20% {
+        transform: translateX(-10px);
+    }
+
+    40% {
+        transform: translateX(10px);
+    }
+
+    60% {
+        transform: translateX(-10px);
+    }
+
+    80% {
+        transform: translateX(10px);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
 }
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index 4eda471..d686f82 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -123,7 +123,23 @@ document.addEventListener("keyup", function (event) {
                 }
             })
 
-            document.getElementById("myInput").value = ""
+            if (top > 0.5) {
+                document.getElementById("myInput").value = ""
+                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)
+                for (let i = 0; i < 6; i++) {
+                    frames[i].innerHTML = `<div class="guess text">${Object.values(obj)[i + 2]}</div > `
+                }
+                console.log(obj)
+            }
+            else {
+                let element = document.getElementById("myInput")
+                element.style.removeProperty("animation")
+                setTimeout(() => element.style.animation = "shake .5s", 100)
+            }
         }
     }
 });