diff --git a/html/images/gras.png b/html/images/gras.png new file mode 100644 index 0000000..2230015 Binary files /dev/null and b/html/images/gras.png differ diff --git a/html/index.php b/html/index.php index 31c1219..6d6b8a9 100644 --- a/html/index.php +++ b/html/index.php @@ -9,16 +9,26 @@ function renderChoice(): void { [$left, $right] = [$_SESSION["left"], $_SESSION["right"]]; $csrfToken = $_SESSION["csrfToken"]; - $title = "Test"; - $content = function() use ($left, $right, $csrfToken) { - include __DIR__ . "/../view/fragments/mobSelection.php"; - }; - include __DIR__ . "/../view/layout.php"; + if (isset($_GET["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/layout.php"; + } } function reload(): void { - header("LOCATION: /"); + if (isset($_GET["ajax"])) { + header("LOCATION: ?ajax"); + } else { + header("LOCATION: /"); + } + http_send_status(303); } diff --git a/html/styles/main.css b/html/styles/main.css index 3ef2386..3021d84 100644 --- a/html/styles/main.css +++ b/html/styles/main.css @@ -30,14 +30,44 @@ h1 { position: relative; } -.separator div { +.separator .or, .separator .spinner { position: absolute; top: 50%; width: 100%; text-align: center; transform: translate(0%, -50%); + opacity: 1; + transition: opacity 0.5s; } +.separator .spinner { + opacity: 0; +} + +.img-preload .spinner { + opacity: 1; +} +.img-preload .or { + opacity: 0; +} + +.separator .spinner img { + animation-name: spinner; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6); +} + +@keyframes spinner { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + + .mob { width: 40vw; height: 42vw; diff --git a/resources/js/htmx.js b/resources/js/htmx.js new file mode 100644 index 0000000..594d63d --- /dev/null +++ b/resources/js/htmx.js @@ -0,0 +1,5 @@ +import htmx from 'htmx.org'; + +console.log("htmx loaded"); +//htmx.logAll(); +window.htmx = htmx; \ No newline at end of file diff --git a/resources/js/img-preload.ext.js b/resources/js/img-preload.ext.js new file mode 100644 index 0000000..415408b --- /dev/null +++ b/resources/js/img-preload.ext.js @@ -0,0 +1,48 @@ +import htmx from 'htmx.org'; + +console.log("module loaded"); + +htmx.defineExtension('img-preload', { + onEvent: (name, event) => { + if (event.target.getAttribute("hx-ext") !== "img-preload") { + return; + } + + const spinner = [...document.querySelectorAll( + event.target.getAttribute("data-preload-spinner") + ?? ".img-preload" + )]; + + switch (name) { + case 'htmx:trigger': + spinner.forEach(s => s.classList.add("img-preload")); + break; + case 'htmx:beforeOnLoad': + event.detail.shouldSwap = false; + + const parser = new DOMParser(); + const doc = parser.parseFromString(event.detail.xhr.response, 'text/html'); + const imagePromises = [...doc.getElementsByTagName('img')] + .map(img => img.src) + .map(src => new Promise((resolve, reject) => { + const image = new Image(); + image.onload = resolve; + image.onerror = reject; + image.src = src; + })); + + 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, + }); + }) + .catch(error => { + console.error('Error loading images:', error); + }); + break; + } + } +}); \ No newline at end of file diff --git a/resources/js/index.js b/resources/js/index.js index e4731a7..8ccc9ec 100644 --- a/resources/js/index.js +++ b/resources/js/index.js @@ -1,3 +1,2 @@ -import htmx from 'htmx.org'; - -window.htmx = htmx; \ No newline at end of file +import './htmx'; +import './img-preload.ext'; diff --git a/resources/js/package-lock.json b/resources/js/package-lock.json index d6c5ed2..86f08bc 100644 --- a/resources/js/package-lock.json +++ b/resources/js/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.1", "license": "MIT", "dependencies": { - "htmx.org": "^1.9.12" + "htmx.org": "^2.0.1" }, "devDependencies": { "esbuild": "0.23.0" @@ -439,9 +439,9 @@ } }, "node_modules/htmx.org": { - "version": "1.9.12", - "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-1.9.12.tgz", - "integrity": "sha512-VZAohXyF7xPGS52IM8d1T1283y+X4D+Owf3qY1NZ9RuBypyu9l8cGsxUMAG5fEAb/DhT7rDoJ9Hpu5/HxFD3cw==" + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.1.tgz", + "integrity": "sha512-wO/rWlveSLD2mzRS9Em0v5hlsi6r21iUvaS17GPMgehBbM7eoQmqGQCkscsM67poF24zONgq3gQv+q/cgCHn2w==" } } } diff --git a/resources/js/package.json b/resources/js/package.json index edaec9b..ca52e5e 100644 --- a/resources/js/package.json +++ b/resources/js/package.json @@ -10,7 +10,7 @@ "author": "", "license": "MIT", "dependencies": { - "htmx.org": "^1.9.12" + "htmx.org": "^2.0.1" }, "devDependencies": { "esbuild": "0.23.0" diff --git a/view/fragments/mob.php b/view/fragments/mob.php index b053247..fcbe4bf 100644 --- a/view/fragments/mob.php +++ b/view/fragments/mob.php @@ -3,9 +3,11 @@ $mob ??= []; $csrfToken ??= ""; ?> -
+ -
+

<?= $mob[" src="/images/mobs/">
diff --git a/view/fragments/mobSelection.php b/view/fragments/mobSelection.php index a65003b..6c20dc1 100644 --- a/view/fragments/mobSelection.php +++ b/view/fragments/mobSelection.php @@ -1,20 +1,25 @@ -

- Which do you like better? -

-
- -
-
- OR +
+

+ Which do you like better? +

+
+ +
+
+ OR +
+
+ spinner +
+
-