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/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">