feat: improved date

src/lib/Date.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	const { date }: { date: Date } = $props();
+	const difference = new Date().getTime() / 1000 - date.getTime() / 1000;
+	const seconds = ~~(difference % 60);
+	const minutes = ~~(difference / 60) % 60;
+	const hours = ~~(difference / 3600) % 24;
+	const days = ~~(difference / 86400);
+</script>
+
+<p class="group underline">
+	<span class="group-hover:hidden">
+		about
+		{#if minutes == 0}
+			<span>{seconds}s</span>
+		{:else if hours == 0}
+			<span>{minutes}m</span>
+		{:else if days == 0}
+			<span>{hours}h</span>
+		{:else}
+			<span>{days}d</span>
+		{/if}
+		ago
+	</span>
+	<span class="hidden group-hover:block">
+		{date.toLocaleString()}
+	</span>
+</p>

src/lib/Footer.svelte

@@ -1,8 +1,14 @@
 <footer class="bg-medium">
-	<div class="mx-auto w-full max-w-screen-xl p-4">
+	<div class="mx-auto flex w-full max-w-screen-xl flex-col p-4 md:flex-row md:justify-between">
 		<p>
 			made with <a href="https://svelte.dev/">sveltekit</a>, powered by
 			<a href="https://cloudflare.com/">cloudflare</a>
 		</p>
+
+		<p>
+			you can find the repo of the website <a href="https://tea.metatable.sh/meta/yukiotoko-webui"
+				>here</a
+			>
+		</p>
 	</div>
 </footer>

src/lib/Room.svelte

@@ -5,6 +5,7 @@
 	import GameVersion from './GameVersion.svelte';
 	import Separator from './Separator.svelte';
 	import type { Room } from './types';
+	import Date from './Date.svelte';
 
 	let { room }: { room: Room } = $props();
 
@@ -43,7 +44,7 @@
 			{room.players.length} / 4
 			<Separator />
 			<Calendar class="inline-block w-6" />
-			{room.createdAt.toLocaleString()}
+			<Date date={room.createdAt} />
 		</p>
 
 		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:grid-rows-2">