diff --git a/html/index.php b/html/index.php index 6d6b8a9..a76c429 100644 --- a/html/index.php +++ b/html/index.php @@ -10,12 +10,14 @@ function renderChoice(): void { $csrfToken = $_SESSION["csrfToken"]; - if (isset($_GET["ajax"])) { + $ajax = isset($_GET["ajax"]); + + if ($ajax) { include __DIR__ . "/../view/fragments/mobSelection.php"; } else { $title = "Test"; $content = function() use ($left, $right, $csrfToken) { - include __DIR__ . "/../view/fragments/mobSelection.php"; + include __DIR__ . "/../view/pages/mobSelection.php"; }; include __DIR__ . "/../view/layout.php"; diff --git a/html/styles/main.css b/html/styles/main.css index 3021d84..71a635e 100644 --- a/html/styles/main.css +++ b/html/styles/main.css @@ -15,6 +15,10 @@ h1 { text-align: center; } +.choice { + position: relative; +} + .selection { display: flex; flex-direction: row; @@ -26,11 +30,20 @@ h1 { .separator { flex-grow: 1; - font-size: 5vw; position: relative; } -.separator .or, .separator .spinner { +.middle { + width: 100%; + position: absolute; + top: 0; + height: 100%; + user-select: none; + z-index: -100; +} + +.middle .or, .middle .spinner { + font-size: 5vw; position: absolute; top: 50%; width: 100%; @@ -40,7 +53,7 @@ h1 { transition: opacity 0.5s; } -.separator .spinner { +.middle .spinner { opacity: 0; } @@ -51,7 +64,7 @@ h1 { opacity: 0; } -.separator .spinner img { +.middle .spinner img { animation-name: spinner; animation-duration: 1s; animation-iteration-count: infinite; diff --git a/resources/js/img-preload.ext.js b/resources/js/img-preload.ext.js index 415408b..8e3b8e2 100644 --- a/resources/js/img-preload.ext.js +++ b/resources/js/img-preload.ext.js @@ -4,18 +4,18 @@ console.log("module loaded"); htmx.defineExtension('img-preload', { onEvent: (name, event) => { - if (event.target.getAttribute("hx-ext") !== "img-preload") { + if ((event?.target?.getAttribute("hx-ext") ?? "") !== "img-preload") { return; } - const spinner = [...document.querySelectorAll( + const getSpinners = () => [...document.querySelectorAll( event.target.getAttribute("data-preload-spinner") ?? ".img-preload" )]; switch (name) { case 'htmx:trigger': - spinner.forEach(s => s.classList.add("img-preload")); + getSpinners().forEach(s => s.classList.add("img-preload")); break; case 'htmx:beforeOnLoad': event.detail.shouldSwap = false; @@ -33,11 +33,11 @@ htmx.defineExtension('img-preload', { Promise.all(imagePromises) .then(() => { - spinner.forEach(s => s.classList.remove("img-preload")); htmx.swap(event.detail.target, event.detail.xhr.response, { swapStyle: "outerHTML", transition: true, }); + getSpinners().forEach(s => s.classList.remove("img-preload")) }) .catch(error => { console.error('Error loading images:', error); diff --git a/view/fragments/mob.php b/view/fragments/mob.php index fcbe4bf..21a37e4 100644 --- a/view/fragments/mob.php +++ b/view/fragments/mob.php @@ -3,12 +3,12 @@ $mob ??= []; $csrfToken ??= ""; ?> -
- -
+
+ +

<?= $mob[" src="/images/mobs/"> -
- \ No newline at end of file + +
diff --git a/view/fragments/mobSelection.php b/view/fragments/mobSelection.php index 6c20dc1..55b369b 100644 --- a/view/fragments/mobSelection.php +++ b/view/fragments/mobSelection.php @@ -1,25 +1,16 @@ -
-

- Which do you like better? -

-
- -
-
- OR -
-
- spinner -
-
- +
+ +
+
diff --git a/view/pages/mobSelection.php b/view/pages/mobSelection.php new file mode 100644 index 0000000..0c5b7cd --- /dev/null +++ b/view/pages/mobSelection.php @@ -0,0 +1,18 @@ +
+

+ Which do you like better? +

+ +
+
+ OR +
+
+ spinner +
+
+