From 652a126d049d9e0545dbb0d264d5eeeb72f5915a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Balogh=20Barnab=C3=A1s?= <balogh.barnabas2008@gmail.com>
Date: Mon, 1 Dec 2025 19:28:22 +0100
Subject: [PATCH] Add countdown timer for shop opening

---
 src/routes/dashboard/market/+page.svelte | 55 ++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
diff --git a/src/routes/dashboard/market/+page.svelte b/src/routes/dashboard/market/+page.svelte
index 7cc89d6..91f0e82 100644
--- a/src/routes/dashboard/market/+page.svelte
+++ b/src/routes/dashboard/market/+page.svelte
@@ -1,11 +1,66 @@
 <script lang="ts">
 	import Head from '$lib/components/Head.svelte';
+	import { onMount, onDestroy } from 'svelte';
 
 	let { data } = $props();
+
+	let timeLeft = $state({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+	let interval: ReturnType<typeof setInterval>;
+
+	const targetDate = new Date('2025-12-15T23:59:00-05:00').getTime();
+
+	function updateTimer() {
+		const now = new Date().getTime();
+		const distance = targetDate - now;
+
+		if (distance < 0) {
+			timeLeft = { days: 0, hours: 0, minutes: 0, seconds: 0 };
+			if (interval) clearInterval(interval);
+			return;
+		}
+
+		timeLeft = {
+			days: Math.floor(distance / (1000 * 60 * 60 * 24)),
+			hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
+			minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
+			seconds: Math.floor((distance % (1000 * 60)) / 1000)
+		};
+	}
+
+	onMount(() => {
+		updateTimer();
+		interval = setInterval(updateTimer, 1000);
+	});
+
+	onDestroy(() => {
+		if (interval) clearInterval(interval);
+	});
 </script>
 
 <Head title="Market" />
 
 <h1 class="mt-5 mb-3 font-hero text-3xl font-medium">Market</h1>
 
+<div class="my-12 flex flex-col items-center justify-center">
+	<h2 class="mb-6 font-hero text-xl text-primary-300 md:text-2xl">Shop Opens In</h2>
+	<div class="grid grid-cols-2 gap-4 text-center font-hero text-primary-50 md:grid-cols-4">
+		<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
+			<span class="mb-2 text-4xl md:text-5xl">{timeLeft.days}</span>
+			<span class="text-xs text-primary-400 md:text-sm">DAYS</span>
+		</div>
+		<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
+			<span class="mb-2 text-4xl md:text-5xl">{timeLeft.hours}</span>
+			<span class="text-xs text-primary-400 md:text-sm">HOURS</span>
+		</div>
+		<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
+			<span class="mb-2 text-4xl md:text-5xl">{timeLeft.minutes}</span>
+			<span class="text-xs text-primary-400 md:text-sm">MINS</span>
+		</div>
+		<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
+			<span class="mb-2 text-4xl md:text-5xl">{timeLeft.seconds}</span>
+			<span class="text-xs text-primary-400 md:text-sm">SECS</span>
+		</div>
+	</div>
+</div>
+
 <p>Market score: {data.user.shopScore}</p>
\ No newline at end of file
