From 90bd9ef5ca0b6b946ca880c760e8f1cb1a24f1fc Mon Sep 17 00:00:00 2001
From: overflowerror <mail@overflowerror.com>
Date: Fri, 2 Aug 2024 22:52:46 +0200
Subject: [PATCH] feat: Change loading animation

---
 html/styles/main.css            | 17 +++++------------
 resources/js/img-preload.ext.js |  9 ++-------
 resources/js/index.js           |  2 ++
 resources/js/spinner.js         | 33 +++++++++++++++++++++++++++++++++
 view/fragments/mob.php          |  2 +-
 view/pages/mobSelection.php     |  6 +++---
 6 files changed, 46 insertions(+), 23 deletions(-)
 create mode 100644 resources/js/spinner.js

diff --git a/html/styles/main.css b/html/styles/main.css
index 4524862..460e314 100644
--- a/html/styles/main.css
+++ b/html/styles/main.css
@@ -50,24 +50,18 @@ h1 {
     text-align: center;
     transform: translate(0%, -50%);
     opacity: 1;
-    transition: opacity 0.5s;
+    transition: opacity 0.2s;
 }
 
-.middle .spinner {
+.loading .or {
     opacity: 0;
 }
 
-.img-preload .spinner {
-    opacity: 1;
-}
-.img-preload .or {
-    opacity: 0;
-}
-
-.middle .spinner img {
+.loading .spinner img {
     animation-name: spinner;
     animation-duration: 1s;
-    animation-iteration-count: infinite;
+    animation-delay: 0.2s;
+    animation-iteration-count: 1;
     animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
 }
 
@@ -80,7 +74,6 @@ h1 {
     }
 }
 
-
 .mob {
     width: 40vw;
     height: 42vw;
diff --git a/resources/js/img-preload.ext.js b/resources/js/img-preload.ext.js
index d88c5aa..9cd7376 100644
--- a/resources/js/img-preload.ext.js
+++ b/resources/js/img-preload.ext.js
@@ -13,14 +13,9 @@ htmx.defineExtension('img-preload', {
             return;
         }
 
-        const getSpinners = () => [...document.querySelectorAll(
-            event.target.getAttribute("data-preload-spinner")
-            ?? ".img-preload"
-        )];
-
         switch (name) {
             case 'htmx:trigger':
-                getSpinners().forEach(s => s.classList.add("img-preload"));
+                [eval][0](event.target.getAttribute("data-loading-callback"));
                 break;
             case 'htmx:beforeOnLoad':
                 event.detail.shouldSwap = false;
@@ -42,7 +37,7 @@ htmx.defineExtension('img-preload', {
                             swapStyle: "outerHTML",
                             transition: true,
                         });
-                        getSpinners().forEach(s => s.classList.remove("img-preload"))
+                        [eval][0](event.target.getAttribute("data-loaded-callback"));
                     })
                     .catch(error => {
                         console.error('Error loading images:', error);
diff --git a/resources/js/index.js b/resources/js/index.js
index 8ccc9ec..91641f7 100644
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -1,2 +1,4 @@
 import './htmx';
 import './img-preload.ext';
+
+import './spinner';
\ No newline at end of file
diff --git a/resources/js/spinner.js b/resources/js/spinner.js
new file mode 100644
index 0000000..24acd72
--- /dev/null
+++ b/resources/js/spinner.js
@@ -0,0 +1,33 @@
+var spinnerActive = false;
+
+const triggerAnimation = () => {
+    setTimeout(() => {
+        document.getElementsByClassName("middle")[0].classList.add("loading");
+    }, 1);
+}
+
+const endAnimation = () => {
+    document.getElementsByClassName("middle")[0].classList.remove("loading");
+}
+
+window.startSpinner = () => {
+    if (spinnerActive) {
+        return
+    }
+    spinnerActive = true;
+    document.getElementsByClassName("middle")[0].classList.add("loading");
+}
+
+window.stopSpinner = () => {
+    spinnerActive = false;
+}
+
+window.addEventListener("load", () => {
+    document.querySelector(".middle .spinner img")
+        .addEventListener("animationend", () => {
+            endAnimation();
+            if (spinnerActive) {
+                triggerAnimation();
+            }
+        });
+});
\ No newline at end of file
diff --git a/view/fragments/mob.php b/view/fragments/mob.php
index c3d605d..cc877e4 100644
--- a/view/fragments/mob.php
+++ b/view/fragments/mob.php
@@ -6,7 +6,7 @@
 <div class="mob" onclick="htmx.trigger(document.forms['<?= $side ?>'], 'submit', {})" id="form-<?= $side ?>">
     <form action="?<?= $side ?>" method="POST" name="<?= $side ?>"
           data-hx-post="?<?= $side ?>&ajax" data-hx-target=".selection" data-hx-swap="outerHTML"
-          data-hx-ext="img-preload" data-preload-spinner=".middle">
+          data-hx-ext="img-preload" data-loading-callback="startSpinner()" data-loaded-callback="stopSpinner()">
         <input type="hidden" name="csrfToken" value="<?= $csrfToken ?>">
         <h2><?= $mob["name"]; ?></h2>
         <img alt="<?= $mob["name"]; ?>" src="/images/mobs/<?= $mob["image"] ?? "_placeholder.png"; ?>">
diff --git a/view/pages/mobSelection.php b/view/pages/mobSelection.php
index 0c5b7cd..0f9ed05 100644
--- a/view/pages/mobSelection.php
+++ b/view/pages/mobSelection.php
@@ -8,11 +8,11 @@
         require_once __DIR__ . "/../fragments/mobSelection.php";
     ?>
     <div class="middle">
-        <div class="or">
-            OR
-        </div>
         <div class="spinner">
             <img src="/images/gras.png" alt="spinner" />
         </div>
+        <div class="or">
+            OR
+        </div>
     </div>
 </div>