blafoo

DropMorePackets · Nov 15, 2023 · 9f47e13 · 9f47e13
1 parent fdaf3ef
commit 9f47e13
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
     }
 }