From 9f47e134b246729f6463302e387b8e8910fffc35 Mon Sep 17 00:00:00 2001
From: Fionera <fionera@fionera.de>
Date: Wed, 15 Nov 2023 05:00:28 +0100
Subject: [PATCH] blafoo

---
 web/src/challange/challanger.js |  4 ----
 web/src/challange/loader.js     | 15 +++++++++++++++
 web/src/main.js                 |  3 ++-
 web/src/style.scss              | 32 ++++++++++++++------------------
 4 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/web/src/challange/challanger.js b/web/src/challange/challanger.js
index 66e4ca5..9394331 100644
--- a/web/src/challange/challanger.js
+++ b/web/src/challange/challanger.js
@@ -44,10 +44,6 @@ export async function doChallenge() {
     loader.stop(!!result);
     if (result) {
         loader.showError(result);
-        return;
     }
 
-    setTimeout(() => {
-        window.location.reload();
-    }, 3000);
 }
diff --git a/web/src/challange/loader.js b/web/src/challange/loader.js
index 8d2d31c..cfa88a3 100644
--- a/web/src/challange/loader.js
+++ b/web/src/challange/loader.js
@@ -35,4 +35,19 @@ export function stop(failed = false) {
     failed
         ? cross.style.display = "block"
         : checkmark.style.display = "block";
+
+    if (failed) {
+        return;
+    }
+
+    let countdown = 4;
+    const interval = setInterval(() => {
+        countdown--;
+
+        setChallengeInfo(`Reloading in ${countdown}...`);
+        if (countdown === 0) {
+            clearInterval(interval);
+            window.location.reload();
+        }
+    }, 1000);
 }
diff --git a/web/src/main.js b/web/src/main.js
index f0a93c3..e8bebdd 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -6,7 +6,8 @@ import {doChallenge} from "./challange/challanger";
     window.addEventListener("DOMContentLoaded", async () => {
         if (!navigator.cookieEnabled) {
             const noCookie = document.getElementById("no-cookie");
-            if (noCookie) noCookie.style.display = "block";
+            noCookie.style.display = "block";
+            return;
         }
 
         await doChallenge();
diff --git a/web/src/style.scss b/web/src/style.scss
index 6fd4767..2713fd6 100644
--- a/web/src/style.scss
+++ b/web/src/style.scss
@@ -96,7 +96,7 @@ $circleSize: 3em;
     display: none;
 
     &.draw::after {
-        animation-duration: 800ms;
+        animation-duration: 500ms;
         animation-timing-function: ease;
         animation-name: checkmark;
         transform: scaleX(-1) rotate(135deg);
@@ -105,13 +105,13 @@ $circleSize: 3em;
     &::after {
         content: "";
         opacity: 1;
-        height: 3.5em;
-        width: 1.75em;
+        height: 2em;
+        width: 1em;
         transform-origin: left top;
         border-right: 3px solid #000;
         border-top: 3px solid #000;
-        left: 1.75em;
-        top: 3.5em;
+        left: 0.5em;
+        top: 1.75em;
         position: absolute;
     }
 }
@@ -127,12 +127,12 @@ $circleSize: 3em;
     &::after, &::before {
         content: '';
         position: absolute;
-        width: 3px;
-        height: $circleSize;
+        width: 2px;
+        height: 2em;
         background: #000;
         top: 50%;
         left: 50%;
-        margin-top: calc($circleSize / 2 * -1);
+        margin-top: -1em;
         margin-left: -1.5px;
     }
 
@@ -141,7 +141,7 @@ $circleSize: 3em;
     }
 
     &.draw::after, &.draw::before {
-        animation-duration: 800ms;
+        animation-duration: 500ms;
         animation-timing-function: ease;
         animation-name: drawCross;
     }
@@ -162,19 +162,15 @@ $circleSize: 3em;
         width: 0;
         opacity: 1;
     }
-    20% {
+    50% {
+
         height: 0;
-        width: 1.75em;
-        opacity: 1;
-    }
-    40% {
-        height: 3.5em;
-        width: 1.75em;
+        width: 1em;
         opacity: 1;
     }
     100% {
-        height: 3.5em;
-        width: 1.75em;
+        height: 2em;
+        width: 1em;
         opacity: 1;
     }
 }