From b8f271fdb20cd005b330c0679baa671daa65903d Mon Sep 17 00:00:00 2001
From: metamethods <tabledmetamethods@gmail.com>
Date: Tue, 31 Dec 2024 21:21:05 -0800
Subject: [PATCH] feat: improved date

---
 src/lib/Date.svelte | 27 +++++++++++++++++++++++++++
 src/lib/Room.svelte |  3 ++-
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/Date.svelte

diff --git a/src/lib/Date.svelte b/src/lib/Date.svelte
new file mode 100644
index 0000000..fb13030
--- /dev/null
+++ b/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>
diff --git a/src/lib/Room.svelte b/src/lib/Room.svelte
index 4325088..5f23deb 100644
--- a/src/lib/Room.svelte
+++ b/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">