From fde6b2656925eb7f0eff031aa348cd5e9f7c7de0 Mon Sep 17 00:00:00 2001
From: glazk0 <43091603+glazk0@users.noreply.github.com>
Date: Wed, 29 Jan 2025 14:17:26 +0100
Subject: [PATCH] feat: timer

---
 src/lib/components/timer.svelte               | 50 +++++++++++++++++++
 src/routes/(app)/+layout.svelte               |  8 ++-
 src/routes/(app)/+page.svelte                 |  6 +--
 src/routes/(app)/chapters/+page.svelte        |  6 +--
 .../(app)/chapters/[chapterId]/+page.svelte   |  6 +--
 .../chapters/[chapterId]/groups/+page.svelte  | 29 ++++++-----
 .../[chapterId]/groups/[name]/+page.server.ts | 28 +++++++++++
 .../[chapterId]/groups/[name]/+page.svelte    |  8 ++-
 .../[chapterId]/groups/new/+page.svelte       |  8 +--
 .../puzzle/[puzzleId]/+page.svelte            | 11 ++--
 src/routes/(app)/leaderboard/+page.svelte     |  6 +--
 src/routes/(auth)/+layout.svelte              | 10 ++--
 src/routes/(auth)/login/+page.svelte          |  6 +--
 src/routes/(auth)/register/+page.svelte       |  6 +--
 src/routes/(auth)/reset-password/+page.svelte |  6 +--
 src/routes/+layout.svelte                     | 11 ++--
 16 files changed, 127 insertions(+), 78 deletions(-)
 create mode 100644 src/lib/components/timer.svelte
 create mode 100644 src/routes/(app)/chapters/[chapterId]/groups/[name]/+page.server.ts

diff --git a/src/lib/components/timer.svelte b/src/lib/components/timer.svelte
new file mode 100644
index 0000000..69a9e88
--- /dev/null
+++ b/src/lib/components/timer.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+
+	type Props = {
+		date: string;
+		class?: string;
+	};
+
+	let { date, class: className }: Props = $props();
+
+	let days = $state(0);
+	let hours = $state(0);
+	let minutes = $state(0);
+	let seconds = $state(0);
+
+	let time = new Date(date).getTime();
+
+	let interval = setInterval(() => {
+		let now = new Date().getTime();
+		let distance = time - now;
+
+		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);
+
+		if (distance < 0) {
+			clearInterval(interval);
+		}
+	}, 1000);
+
+	onDestroy(() => {
+		clearInterval(interval);
+	});
+</script>
+
+<span class={className}>
+	{#if days > 0}
+		{days}d
+	{/if}
+	{#if hours > 0}
+		{hours}h
+	{/if}
+	{#if minutes > 0}
+		{minutes}m
+	{/if}
+	{#if seconds > 0}
+		{seconds}s
+	{/if}
+</span>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index f8e8537..04389c8 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import type { LayoutProps } from './$types';
 
 	import AppSidebar from '$lib/components/app-sidebar.svelte';
+	import Breadcrumb from '$lib/components/breadcrumb.svelte';
 	import * as Sidebar from '$lib/components/ui/sidebar';
 	import { Toaster } from '$lib/components/ui/sonner';
-	import Breadcrumb from '$lib/components/breadcrumb.svelte';
 
-	type Props = { children: Snippet };
-
-	let { children }: Props = $props();
+	let { children }: LayoutProps = $props();
 </script>
 
 <Sidebar.Provider>
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 3fc3042..3028fef 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
-	import type { PageData } from './$types';
+	import type { PageProps } from './$types';
 
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 
-	type Props = { data: PageData };
-
-	let { data }: Props = $props();
+	let { data }: PageProps = $props();
 </script>
 
 <section class="flex w-full flex-col gap-4">
diff --git a/src/routes/(app)/chapters/+page.svelte b/src/routes/(app)/chapters/+page.svelte
index 535af94..d19ef87 100644
--- a/src/routes/(app)/chapters/+page.svelte
+++ b/src/routes/(app)/chapters/+page.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
-	import type { PageData } from './$types';
+	import type { PageProps } from './$types';
 
 	import Chapter from '$lib/components/chapter.svelte';
 	import { Input } from '$lib/components/ui/input';
 
-	type Props = { data: PageData };
-
-	let { data }: Props = $props();
+	let { data }: PageProps = $props();
 
 	// TODO: Handle search query
 
diff --git a/src/routes/(app)/chapters/[chapterId]/+page.svelte b/src/routes/(app)/chapters/[chapterId]/+page.svelte
index de36737..3c90966 100644
--- a/src/routes/(app)/chapters/[chapterId]/+page.svelte
+++ b/src/routes/(app)/chapters/[chapterId]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { PageData, Snapshot } from './$types';
+	import type { PageProps, Snapshot } from './$types';
 
 	import BarChart from 'lucide-svelte/icons/bar-chart-2';
 	import Users from 'lucide-svelte/icons/users';
@@ -7,9 +7,7 @@
 	import Puzzle from '$lib/components/puzzle.svelte';
 	import Button from '$lib/components/ui/button/button.svelte';
 
-	type Props = { data: PageData };
-
-	let { data }: Props = $props();
+	let { data }: PageProps = $props();
 
 	// TODO: Refactor, this is for event purpose only, this is a mess
 
diff --git a/src/routes/(app)/chapters/[chapterId]/groups/+page.svelte b/src/routes/(app)/chapters/[chapterId]/groups/+page.svelte
index 1bdaa5d..16bb763 100644
--- a/src/routes/(app)/chapters/[chapterId]/groups/+page.svelte
+++ b/src/routes/(app)/chapters/[chapterId]/groups/+page.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
+	import type { PageProps } from './$types';
+
 	import { enhance } from '$app/forms';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
-	import type { ActionData, PageData } from './$types';
+
+	import { toast } from 'svelte-sonner';
 
 	import Code from 'lucide-svelte/icons/code';
 	import Loader from 'lucide-svelte/icons/loader-circle';
@@ -12,28 +15,24 @@
 
 	import Button from '$lib/components/ui/button/button.svelte';
 	import Input from '$lib/components/ui/input/input.svelte';
-	import { toast } from 'svelte-sonner';
 
-	type Props = {
-		data: PageData;
-		form: ActionData;
-	};
-
-	let { data, form }: Props = $props();
+	let { data, form }: PageProps = $props();
 
 	let limit = 6;
 
 	let name = $state('');
 	let submitting = $state(false);
 
-	const filteredGroups = $derived(data.groups.filter((group) => {
-		const regex = new RegExp(name, 'i');
-		return regex.test(group.name);
-	}));
+	const filteredGroups = $derived(
+		data.groups.filter((group) => {
+			const regex = new RegExp(name, 'i');
+			return regex.test(group.name);
+		})
+	);
 
-	const hasGroup = $derived(page.data.user?.groups.some((g) =>
-		data.groups.map((g) => g.name).includes(g.name)
-	));
+	const hasGroup = $derived(
+		page.data.user?.groups.some((g) => data.groups.map((g) => g.name).includes(g.name))
+	);
 
 	$effect(() => {
 		if (form?.message) {
diff --git a/src/routes/(app)/chapters/[chapterId]/groups/[name]/+page.server.ts b/src/routes/(app)/chapters/[chapterId]/groups/[name]/+page.server.ts
new file mode 100644
index 0000000..f2c27bd
--- /dev/null
+++ b/src/routes/(app)/chapters/[chapterId]/groups/[name]/+page.server.ts
@@ -0,0 +1,28 @@
+import type { PageServerLoad } from "./$types";
+import { API_URL } from "$env/static/private";
+
+import { redirect } from "@sveltejs/kit";
+
+import type { Chapter } from "$lib/types";
+
+export const load: PageServerLoad = async ({ locals, fetch, params: { chapterId } }) => {
+  if (!locals.user) {
+    redirect(302, "/login");
+  }
+
+  let chapter: Chapter | null = null;
+
+  const res = await fetch(API_URL + `/chapter/${chapterId}`);
+
+  if (!res.ok) {
+    redirect(302, "/chapters");
+  }
+
+  chapter = await res.json();
+
+  if (!chapter || !chapter.show && !(chapter.start && chapter.end)) redirect(302, "/chapter/" + chapterId)
+
+  return {
+    chapter
+  }
+};
diff --git a/src/routes/(app)/chapters/[chapterId]/groups/[name]/+page.svelte b/src/routes/(app)/chapters/[chapterId]/groups/[name]/+page.svelte
index fe90504..0b15ad3 100644
--- a/src/routes/(app)/chapters/[chapterId]/groups/[name]/+page.svelte
+++ b/src/routes/(app)/chapters/[chapterId]/groups/[name]/+page.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
 	import { page } from '$app/state';
 
+	import type { PageProps } from './$types';
+
 	import { onDestroy, onMount } from 'svelte';
 	import { derived } from 'svelte/store';
 
-	
+	import Timer from '$lib/components/timer.svelte';
+
 	import { createStateStore } from '$lib/stores/state';
 	import { connectWebSocket } from '$lib/stores/websocket';
 
+	let { data }: PageProps = $props();
+
 	type Broadcast = {
 		message: string;
 	};
@@ -38,6 +43,7 @@
 				Ici vous pouvez voir les messages envoyés par les administrateurs
 			</p>
 		</div>
+		<Timer class="text-xl font-bold" date={data.chapter.end!} />
 	</header>
 	<ul class="flex flex-col gap-2">
 		{#if broadcasts.length === 0}
diff --git a/src/routes/(app)/chapters/[chapterId]/groups/new/+page.svelte b/src/routes/(app)/chapters/[chapterId]/groups/new/+page.svelte
index b2fa06a..5ce1ada 100644
--- a/src/routes/(app)/chapters/[chapterId]/groups/new/+page.svelte
+++ b/src/routes/(app)/chapters/[chapterId]/groups/new/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { PageData } from './$types';
+	import type { PageProps } from './$types';
 
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { superForm } from 'sveltekit-superforms/client';
@@ -10,11 +10,7 @@
 	import Loader from 'lucide-svelte/icons/loader-circle';
 	import { formSchema } from './schema';
 
-	type Props = {
-		data: PageData;
-	};
-
-	let { data }: Props = $props();
+	let { data }: PageProps = $props();
 
 	const form = superForm(data.form, {
 		validators: zodClient(formSchema),
diff --git a/src/routes/(app)/chapters/[chapterId]/puzzle/[puzzleId]/+page.svelte b/src/routes/(app)/chapters/[chapterId]/puzzle/[puzzleId]/+page.svelte
index e1d4514..e11af9a 100644
--- a/src/routes/(app)/chapters/[chapterId]/puzzle/[puzzleId]/+page.svelte
+++ b/src/routes/(app)/chapters/[chapterId]/puzzle/[puzzleId]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import './prism-night-owl.css';
 
-	import type { PageData } from './$types';
+	import type { PageProps } from './$types';
 
 	import { enhance } from '$app/forms';
 
@@ -11,15 +11,10 @@
 	import { Input } from '$lib/components/ui/input';
 
 	import { goto } from '$app/navigation';
-	import { toast } from 'svelte-sonner';
 	import { page } from '$app/state';
+	import { toast } from 'svelte-sonner';
 
-	type Props = {
-		data: PageData;
-	};
-
-	// export let data: PageData;
-	let { data }: Props = $props();
+	let { data }: PageProps = $props();
 
 	let submitting = $state(false);
 </script>
diff --git a/src/routes/(app)/leaderboard/+page.svelte b/src/routes/(app)/leaderboard/+page.svelte
index 894faef..c8aebea 100644
--- a/src/routes/(app)/leaderboard/+page.svelte
+++ b/src/routes/(app)/leaderboard/+page.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
-	import type { PageData } from './$types';
+	import type { PageProps } from './$types';
 
 	import { LEADERBOARD } from '$lib/constants';
 	import { cn } from '$lib/utils';
 
-	type Props = { data: PageData };
-
-	let { data }: Props = $props();
+	let { data }: PageProps = $props();
 </script>
 
 <section class="flex h-full w-full flex-col gap-4">
diff --git a/src/routes/(auth)/+layout.svelte b/src/routes/(auth)/+layout.svelte
index b6c5c6d..889ea8d 100644
--- a/src/routes/(auth)/+layout.svelte
+++ b/src/routes/(auth)/+layout.svelte
@@ -1,13 +1,9 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	
+	import type { LayoutProps } from './$types';
+
 	import { Toaster } from '$lib/components/ui/sonner';
 
-	type Props = {
-		children: Snippet;
-	};
-
-	let { children }: Props = $props();
+	let { children }: LayoutProps = $props();
 </script>
 
 <div class="container flex h-screen">
diff --git a/src/routes/(auth)/login/+page.svelte b/src/routes/(auth)/login/+page.svelte
index 619ac8b..3b353a2 100644
--- a/src/routes/(auth)/login/+page.svelte
+++ b/src/routes/(auth)/login/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
 
-	import type { PageData } from './$types';
+	import type { PageProps } from './$types';
 
 	import Loader from 'lucide-svelte/icons/loader-circle';
 	import { superForm } from 'sveltekit-superforms';
@@ -12,9 +12,7 @@
 
 	import { formSchema } from './schema';
 
-	type Props = { data: PageData };
-
-	let { data }: Props = $props();
+	let { data }: PageProps = $props();
 
 	const links = [
 		{ href: `/register${page.url.search}`, name: "S'inscrire" },
diff --git a/src/routes/(auth)/register/+page.svelte b/src/routes/(auth)/register/+page.svelte
index 9c051d1..541b7ba 100644
--- a/src/routes/(auth)/register/+page.svelte
+++ b/src/routes/(auth)/register/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import type { PageData } from './$types';
+	import type { PageProps } from './$types';
 
 	import { fade } from 'svelte/transition';
 
@@ -14,9 +14,7 @@
 
 	import { formConfirmationSchema, formSchema } from './schema';
 
-	type Props = { data: PageData };
-
-	let { data }: Props = $props();
+	let { data }: PageProps = $props();
 
 	const links = [{ href: `/login${page.url.search}`, name: 'Se connecter' }];
 
diff --git a/src/routes/(auth)/reset-password/+page.svelte b/src/routes/(auth)/reset-password/+page.svelte
index d5a9c9a..e426b5f 100644
--- a/src/routes/(auth)/reset-password/+page.svelte
+++ b/src/routes/(auth)/reset-password/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import type { PageData } from './$types';
+	import type { PageProps } from './$types';
 
 	import { fade } from 'svelte/transition';
 
@@ -14,9 +14,7 @@
 
 	import { formConfirmationSchema, formSchema } from './schema';
 
-	type Props = { data: PageData };
-
-	let { data }: Props = $props();
+	let { data }: PageProps = $props();
 
 	const links = [{ href: `/login${page.url.search}`, name: 'Se connecter' }];
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9844976..db00b4a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,15 +1,10 @@
 <script lang="ts">
 	import '../app.css';
-
-	import type { Snippet } from 'svelte';
-
+	
 	import Metadata from '$lib/components/metadata.svelte';
+	import type { LayoutProps } from './$types';
 
-	type Props = {
-		children: Snippet;
-	};
-
-	let { children }: Props = $props();
+	let { children }: LayoutProps = $props();
 </script>
 
 <Metadata />