aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorhitlerrip <git@hitler.rip>2025-07-30 13:50:31 +0200
committerhitlerrip <git@hitler.rip>2025-07-30 13:50:31 +0200
commit331a9d02736d74a627748db017171174da3374d0 (patch)
tree7b2f4c815a79a450d0c7c0867ceaed0b7620238c
parentd8fea23aaac78ff66eecb58bf3e7c621f7aa6c33 (diff)
downloadhitler-clicker-331a9d02736d74a627748db017171174da3374d0.tar.gz
hitler-clicker-331a9d02736d74a627748db017171174da3374d0.tar.bz2
hitler-clicker-331a9d02736d74a627748db017171174da3374d0.zip
visual improvements
- added nice images - added transition animations to numbers - added active: styles to button
Diffstat
-rw-r--r--frontend/hitler-clicker/krita/hitler.krabin0 -> 2269152 bytes
-rw-r--r--frontend/hitler-clicker/src/app.html2
-rw-r--r--frontend/hitler-clicker/src/routes/+page.svelte20
-rw-r--r--frontend/hitler-clicker/src/routes/play/+page.svelte73
-rw-r--r--frontend/hitler-clicker/static/churchill-blush.pngbin0 -> 434497 bytes
-rw-r--r--frontend/hitler-clicker/static/churchill-idle.pngbin0 -> 352575 bytes
-rw-r--r--frontend/hitler-clicker/static/hitler-blush.pngbin0 -> 434497 bytes
-rw-r--r--frontend/hitler-clicker/static/hitler-idle.pngbin0 -> 352575 bytes
-rw-r--r--frontend/hitler-clicker/static/stalin-blush.pngbin0 -> 434497 bytes
-rw-r--r--frontend/hitler-clicker/static/stalin-idle.pngbin0 -> 352575 bytes
10 files changed, 71 insertions, 24 deletions
diff --git a/frontend/hitler-clicker/krita/hitler.kra b/frontend/hitler-clicker/krita/hitler.kra
new file mode 100644
index 0000000..be9244a
--- /dev/null
+++ b/frontend/hitler-clicker/krita/hitler.kra
Binary files differ
diff --git a/frontend/hitler-clicker/src/app.html b/frontend/hitler-clicker/src/app.html
index 98ee386..13f084c 100644
--- a/frontend/hitler-clicker/src/app.html
+++ b/frontend/hitler-clicker/src/app.html
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
- <link rel="icon" type="image/png" href="/icon.png" />
+ <link rel="icon" type="image/png" href="/hitler-idle.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hitler Clicker</title>
%sveltekit.head%
diff --git a/frontend/hitler-clicker/src/routes/+page.svelte b/frontend/hitler-clicker/src/routes/+page.svelte
index b05a3b9..c21a283 100644
--- a/frontend/hitler-clicker/src/routes/+page.svelte
+++ b/frontend/hitler-clicker/src/routes/+page.svelte
@@ -7,6 +7,8 @@
* licensed under AGPLv3-or-later; see licenses/code.md for more information
*/
+ import { slide, scale } from 'svelte/transition';
+
import Login from '$lib/login.svelte';
let axis = $state(0);
@@ -39,13 +41,25 @@
<p class="text-2xl">a stupid game where you have to click in order to score points for your team</p>
<h2 class="text-3xl font-bold mt-5 text-amber-900 dark:text-amber-700">࿕ Axis ࿕</h2>
- <h3 class="text-3xl font-bold mb-2 text-amber-900 dark:text-amber-700">{axis}</h3>
+ {#key axis}
+ <div transition:slide>
+ <h3 class="text-3xl font-bold mb-2 text-amber-900 dark:text-amber-700">{axis}</h3>
+ </div>
+ {/key}
<h2 class="text-3xl font-bold mt-5 text-sky-700 dark:text-sky-400">⊙ Allies ⊙</h2>
- <h3 class="text-3xl font-bold mb-2 text-sky-700 dark:text-sky-400">{allies}</h3>
+ {#key allies}
+ <div transition:slide>
+ <h3 class="text-3xl font-bold mb-2 text-sky-700 dark:text-sky-400">{allies}</h3>
+ </div>
+ {/key}
<h2 class="text-3xl font-bold mt-5 text-red-800 dark:text-red-600">☭ Soviets ☭</h2>
- <h3 class="text-3xl font-bold mb-5 text-red-800 dark:text-red-600">{soviets}</h3>
+ {#key soviets}
+ <div transition:slide>
+ <h3 class="text-3xl font-bold mb-5 text-red-800 dark:text-red-600">{soviets}</h3>
+ </div>
+ {/key}
</main>
diff --git a/frontend/hitler-clicker/src/routes/play/+page.svelte b/frontend/hitler-clicker/src/routes/play/+page.svelte
index cbba259..2593fe2 100644
--- a/frontend/hitler-clicker/src/routes/play/+page.svelte
+++ b/frontend/hitler-clicker/src/routes/play/+page.svelte
@@ -7,6 +7,8 @@
* licensed under AGPLv3-or-later; see licenses/code.md for more information
*/
+ import { scale, slide } from 'svelte/transition';
+
import { page } from '$app/state';
import { onMount } from 'svelte';
@@ -75,34 +77,61 @@
{#if response.team === "axis"}
<h2 class="text-3xl font-bold mt-5 text-amber-900 dark:text-amber-700">࿕ Axis ࿕</h2>
- <h3 class="text-3xl font-bold mb-2 text-amber-900 dark:text-amber-700">{axis}</h3>
+ {#key axis}
+ <div transition:slide>
+ <h3 class="text-3xl font-bold mb-2 text-amber-900 dark:text-amber-700">{axis}</h3>
+ </div>
+ {/key}
+
{:else if response.team === "allies"}
<h2 class="text-3xl font-bold mt-5 text-sky-700 dark:text-sky-400">⊙ Allies ⊙</h2>
- <h3 class="text-3xl font-bold mb-2 text-sky-700 dark:text-sky-400">{allies}</h3>
+ {#key allies}
+ <div transition:slide>
+ <h3 class="text-3xl font-bold mb-2 text-sky-700 dark:text-sky-400">{allies}</h3>
+ </div>
+ {/key}
+
{:else if response.team === "soviet"}
<h2 class="text-3xl font-bold mt-5 text-red-800 dark:text-red-600">☭ Soviets ☭</h2>
- <h3 class="text-3xl font-bold mb-5 text-red-800 dark:text-red-600">{soviets}</h3>
+ {#key axis}
+ <div transition:slide>
+ <h3 class="text-3xl font-bold mb-5 text-red-800 dark:text-red-600">{soviets}</h3>
+ </div>
+ {/key}
{/if}
- {#if response.team}
- <input type="image" src="/favicon.svg" alt="click to add points!" class="w-70" onclick={() => {
- fetch("http://localhost:8000/click.php", {
- method: "POST",
- headers: {
- "Accept": "application/json",
- "Content-Type": "application/json",
- },
- body: JSON.stringify({
- "token": token
- })
+ <button class="mt-5 w-70 active:scale-95" onclick={() => {
+ fetch("http://localhost:8000/click.php", {
+ method: "POST",
+ headers: {
+ "Accept": "application/json",
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ "token": token
})
- axis++
- allies++
- soviets++
- contrib++
- }} />
+ })
+ axis++
+ allies++
+ soviets++
+ contrib++
+ }} aria-label="click to add points!">
+
+ {#if response.team === "axis"}
+ <div class="bg-[url(/hitler-idle.png)] active:bg-[url(/hitler-blush.png)] bg-cover w-70 h-70"></div>
+ <div class="bg-[url(/hitler-blush.png)] hidden"></div>
+
+ {:else if response.team === "allies"}
+ <div class="bg-[url(/churchill-idle.png)] active:bg-[url(/churchill-blush.png)] bg-cover w-70 h-70"></div>
+ <div class="bg-[url(/churchill-blush.png)] hidden"></div>
+
+ {:else if response.team === "soviet"}
+ <div class="bg-[url(/stalin-idle.png)] active:bg-[url(/stalin-blush.png)] bg-cover w-70 h-70"></div>
+ <div class="bg-[url(/stalin-blush.png)] hidden"></div>
{/if}
+ </button>
+
<footer class="
flex flex-row justify-between
fixed bottom-0 pb-2 pt-3 px-7 rounded-t-xl w-full max-w-300
@@ -112,7 +141,11 @@
<a href="/" class="text-neutral-800 dark:text-neutral-900 underline">home</a>
]</span>
<p>{response.name}</p>
- <p>contributed: {Number(response.clicks) + contrib}</p>
+ <div>
+ {#key contrib}
+ <p transition:slide>{Number(response.clicks) + contrib}</p>
+ {/key}
+ </div>
</footer>
{:else}
diff --git a/frontend/hitler-clicker/static/churchill-blush.png b/frontend/hitler-clicker/static/churchill-blush.png
new file mode 100644
index 0000000..7130222
--- /dev/null
+++ b/frontend/hitler-clicker/static/churchill-blush.png
Binary files differ
diff --git a/frontend/hitler-clicker/static/churchill-idle.png b/frontend/hitler-clicker/static/churchill-idle.png
new file mode 100644
index 0000000..0ca9764
--- /dev/null
+++ b/frontend/hitler-clicker/static/churchill-idle.png
Binary files differ
diff --git a/frontend/hitler-clicker/static/hitler-blush.png b/frontend/hitler-clicker/static/hitler-blush.png
new file mode 100644
index 0000000..7130222
--- /dev/null
+++ b/frontend/hitler-clicker/static/hitler-blush.png
Binary files differ
diff --git a/frontend/hitler-clicker/static/hitler-idle.png b/frontend/hitler-clicker/static/hitler-idle.png
new file mode 100644
index 0000000..0ca9764
--- /dev/null
+++ b/frontend/hitler-clicker/static/hitler-idle.png
Binary files differ
diff --git a/frontend/hitler-clicker/static/stalin-blush.png b/frontend/hitler-clicker/static/stalin-blush.png
new file mode 100644
index 0000000..7130222
--- /dev/null
+++ b/frontend/hitler-clicker/static/stalin-blush.png
Binary files differ
diff --git a/frontend/hitler-clicker/static/stalin-idle.png b/frontend/hitler-clicker/static/stalin-idle.png
new file mode 100644
index 0000000..0ca9764
--- /dev/null
+++ b/frontend/hitler-clicker/static/stalin-idle.png
Binary files differ
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-13 14:16:42 +0000