Merge branch 'main' of https://github.com/dscsnu/labyrinth-2025

RachitKumar205 · RachitKumar205 · commit 749006eb6bf2 · 2025-04-17T19:50:56.000+05:30
diff --git a/frontend/src/app.css b/frontend/src/app.css
@@ -2,6 +2,7 @@
 
 @theme {
     --font-raleway: 'Raleway', sans-serif;
+    --font-philosopher: 'Philosopher', sans-serif;
     --font-neue-machina: 'NeueMachina', sans-serif;
 
     --font-weight-thin: 100;
diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -9,9 +9,9 @@
 		<!-- Google Fonts -->
 		<link rel="preconnect" href="https://fonts.googleapis.com">
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-		<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+		<link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 	</head>
-	<body data-sveltekit-preload-data="hover" class="font-raleway bg-neutral-900">
+	<body data-sveltekit-preload-data="hover" class="font-raleway bg-neutral-900 text-neutral-200">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/frontend/src/lib/components/BorderButton.svelte b/frontend/src/lib/components/BorderButton.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+
+    let {
+        disabled = $bindable(false),
+        class: buttonClass = "",
+        borderStyle = "",
+        onclick = () => {},
+        children
+    } = $props();
+</script>
+
+<div class={`relative h-fit w-fit`}>
+    <button
+        class={twMerge(
+            'bg-white text-black px-6 py-3 font-raleway font-medium rounded-lg',
+            buttonClass
+        )}
+        onclick={() => onclick()}
+    >
+        {@render children()}
+    </button>
+
+    <div class={twMerge(
+        `-z-10 absolute top-[6px] left-[6px] h-full w-full rounded-lg border-2 border-white`,
+        borderStyle
+    )}></div>
+</div>
diff --git a/frontend/src/lib/components/MobileOnly.svelte b/frontend/src/lib/components/MobileOnly.svelte
@@ -1,3 +1,7 @@
 <main class={`h-screen w-screen overflow-hidden flex flex-col justify-center items-center`}>
-    <p>Only Mobile :P</p>
+    <p class={`text-3xl font-philosopher font-bold`}>
+        Please use a mobile device for
+        <span class={`text-labyrinth-purple`}>optimal</span>
+        experience!
+    </p>
 </main>
diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
@@ -3,7 +3,11 @@
     import { fade } from "svelte/transition";
     import { twMerge } from "tailwind-merge";
 
-    let { isOpen = $bindable(), class: modalClass = "", children} = $props();
+    let {
+        isOpen = $bindable(),
+        class: modalClass = "",
+        children
+    } = $props();
     const closeModal = () => isOpen = false;
 </script>
 
@@ -12,7 +16,13 @@
         in:fade={{ duration: 50 }}
         class={`fixed top-0 left-0 z-30 h-screen w-screen grid place-items-center bg-neutral-800/60 backdrop-blur-sm`}
     >
-        <div class={twMerge(`relative z-40 grid place-items-center px-8 py-4 bg-white rounded-md`, modalClass)} use:clickOutside={() => closeModal()}>
+        <div
+            class={twMerge(
+                `relative z-40 grid place-items-center px-8 py-4 bg-white rounded-md`,
+                modalClass
+            )}
+            use:clickOutside={() => closeModal()}
+        >
             <!-- Close modal button -->
             <button class={`absolute top-2 right-2`} aria-label={`Close Modal`} onclick={() => closeModal()}>
                 <svg class={`h-[24px] aspect-square fill-none stroke-current stroke-2 lucide lucide-x-icon lucide-x`} viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/SpellSymbols.svelte b/frontend/src/lib/components/SpellSymbols.svelte
diff --git a/frontend/src/lib/components/StreamListener.svelte b/frontend/src/lib/components/StreamListener.svelte
@@ -1,28 +1,30 @@
-<!-- TODO: Edit component to not try on TeamStore update but poll for connection -->
-
 <script lang="ts">
     import { PUBLIC_BACKEND_URL } from "$env/static/public";
     import { TeamStore } from "$lib/stores/TeamStore";
     import { onMount } from "svelte";
 
     let eventSource: EventSource | null = $state(null);
+    let isConnected: boolean = $state(false);
 
     const cleanup = () => {
         if (eventSource) {
             alert('closing event source');
+            isConnected = false;
             eventSource.close();
             eventSource = null;
         }
     }
 
     const connect = () => {
+        if (isConnected) return;
+
         console.log('Attempting Connection');
         const cleanedUrl = PUBLIC_BACKEND_URL.replace(/\/+$/, '');
         const params = new URLSearchParams({ team_id: $TeamStore!.id })
         eventSource = new EventSource(`${cleanedUrl}/api/eventlistener?${params.toString()}`);
 
-        eventSource.onopen = (event) => {
-            alert('Connection Established')
+        eventSource.onopen = () => {
+            isConnected = true;
         }
 
         eventSource.onmessage = (event) => {
diff --git a/frontend/src/lib/directives/validateInput.svelte.ts b/frontend/src/lib/directives/validateInput.svelte.ts
@@ -6,7 +6,7 @@ export enum ValidationOptions {
     NUMERIC = '0123456789',
     SPACE = ' ',
     SPECIAL_CHARACTERS = ',.!?;:_<>',
-    ALL = ' ,.!?;:_0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
+    ALL = ' ,.!?;:_<>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
 }
 
 export interface IValidationConfig {
diff --git a/frontend/src/lib/stores/DeviceStore.ts b/frontend/src/lib/stores/DeviceStore.ts
@@ -2,7 +2,7 @@ import { browser } from "$app/environment";
 import { writable } from "svelte/store";
 
 const TOKEN_NAME = 'labyrinth-gdsc-device'
-const initialValue = browser ? window.localStorage.getItem(TOKEN_NAME) ?? 'desktop' : 'desktop';
+const initialValue = browser ? window.localStorage.getItem(TOKEN_NAME) ?? 'mobile' : 'mobile';
 const device = writable<Device>(initialValue as Device);
 const setDevice = (value: Device) => {
     if (!browser) return;
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -11,7 +11,7 @@
 	import Toast from "$lib/components/Toast.svelte";
 	import { LoadingStore } from "$lib/stores/LoadingStore";
 	import Loading from "$lib/components/Loading.svelte";
-    import StreamListener from "$lib/components/StreamListener.svelte";
+    import SpellSymbols from "$lib/components/SpellSymbols.svelte";
 
 	let { data, children } = $props();
 	let { supabase, session, user } = $derived(data);
@@ -57,8 +57,9 @@
 		)}
 />
 
-{#if $device === "mobile" || PUBLIC_ENVIRONMENT === "development"}
+{#if $device === "mobile" || PUBLIC_ENVIRONMENT !== "development"}
 	{@render children()}
+	<SpellSymbols />
 {:else}
 	<MobileOnly />
 {/if}
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -1,6 +1,15 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
+    import { fade } from 'svelte/transition';
+
     let { data } = $props();
-    let { supabase, user } = $derived(data);
+    let { supabase } = $derived(data);
+
+    let displaySplash: boolean = $state(true);
+    onMount(() => {
+        const timeout = setTimeout(() => displaySplash = false, 1000);
+        return () => clearTimeout(timeout);
+    })
 
     const handleSignIn = async () => {
         await supabase.auth.signInWithOAuth({
@@ -16,10 +25,41 @@
     }
 </script>
 
-<main class={`h-screen w-screen flex flex-col justify-center items-center`}>
-    {user?.email}
+<main class={`h-screen w-screen grid place-items-center`}>
+    <div class={`w-[80%] flex flex-col justify-center items-center gap-4`}>
+        <p class={`font-philosopher font-bold text-2xl text-white`}>
+            Sign in to unlock your
+            <span class={`text-labyrinth-blue`}>tragic hero</span>
+            act
+        </p>
 
-    <button onclick={() => handleSignIn()} class={`border-2 px-4 py-2 rounded-lg hover:bg-neutral-200`}>
-        Sign In
-    </button>
+        <button
+            onclick={() => handleSignIn()}
+            class={`flex justify-center items-center gap-2 px-5 py-4 rounded-lg border-2 border-neutral-400 bg-neutral-800 active:bg-neutral-700`}
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" class={`h-[24px] aspect-square`} viewBox="0 0 24 24">
+                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+                <path d="M1 1h22v22H1z" fill="none"/>
+            </svg>
+            <p class={`text-lg text-neutral-400`}>Sign In With Google</p>
+        </button>
+    </div>
 </main>
+
+{#if displaySplash}
+    <img
+        transition:fade
+        class={`z-[100] fixed top-0 left-0 h-screen w-screen`}
+        fetchpriority={`high`}
+        src={`/assets/images/splash.webp`}
+        alt={`SplashScreen`}
+    />
+{/if}
+
+<svelte:head>
+    <title>Labyrinth</title>
+    <meta name="description" content="Dive into Labyrinth 2025 — a Scott Pilgrim-inspired treasure hunt across Shiv Nadar University. Battle riddles, defeat evil exes, and race for a ₹50,000 prize. Register now!">
+</svelte:head>
diff --git a/frontend/src/routes/new/+page.svelte b/frontend/src/routes/new/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
+    import BorderButton from "$lib/components/BorderButton.svelte";
     import { validateInput, ValidationOptions } from "$lib/directives/validateInput.svelte";
     import { LoadingStore } from "$lib/stores/LoadingStore";
-    import { UserStore } from "$lib/stores/SupabaseStore";
     import { setTeam, type ITeamData } from "$lib/stores/TeamStore";
     import { addToast } from "$lib/stores/ToastStore";
     import { fetchWithAuth } from "$lib/utils/fetchWithAuth";
@@ -12,7 +12,7 @@
 
     type PageState = 'create' | 'join';
 
-    let pageState: PageState = $state('create');
+    let pageState: PageState = $state('join');
     let teamName: string = $state('');
     let teamId: string = $state('');
 
@@ -133,54 +133,91 @@
     }
 </script>
 
-<main class={`h-screen w-screen flex flex-col justify-center items-center py-4`}>
-    <div class={`w-[90%] flex flex-col p-4 border-2 rounded-lg`}>
-        <div class={`h-fit w-full gap-3 flex justify-center items-center p-4`}>
-            <button class={`px-4 py-2 rounded-lg border-2 ${pageState === 'create' && 'border-green-500'}`} onmousedown={() => pageState = 'create'}>Create Team</button>
-            <button class={`px-4 py-2 rounded-lg border-2 ${pageState === 'join' && 'border-green-500'}`} onmousedown={() => pageState = 'join'}>Join Team</button>
+<main class={`h-screen w-screen flex flex-col justify-center gap-2 pt-16 pb-8 px-4`}>
+    <hgroup>
+        <h1 class={`font-neue-machina font-black text-3xl`}>Registration</h1>
+        <p class={`text-sm`}>Team up in groups of 4 and dive head first into defeating 7 evil exes!</p>
+    </hgroup>
+
+    <div class={`flex flex-col justify-center items-center mt-4`}>
+        <div class={`flex w-full justify-between items-center gap-1 p-1 bg-neutral-800 rounded-full text-lg text-black font-medium`}>
+            <button
+                onclick={() => pageState = 'join'}
+                class={`w-1/2 flex justify-center items-center py-2 px-2 rounded-full transition-colors duration-300 ${pageState === 'join' ? 'text-black bg-white' : 'text-white'}`}
+            >
+                Join
+            </button>
+
+            <button
+                onclick={() => pageState = 'create'}
+                class={`w-1/2 flex justify-center items-center py-2 px-2 rounded-full transition-colors duration-300 ${pageState !== 'join' ? 'text-black bg-white' : 'text-white'}`}
+            >
+                Create
+            </button>
         </div>
+    </div>
 
-        {#if pageState === 'create'}
-            <div class={`flex flex-col gap-4`}>
-                <label for={`team_name`}>Team Name</label>
-                <input
-                    type={`text`}
-                    id={`team_name`}
-                    bind:value={teamName}
-                    class={`w-full border-2 p-2 rounded-lg`}
-                />
-
-                <button onclick={() => createTeam()} class={`w-full border-2 p-2 rounded-lg`}>
-                    Create Team
-                </button>
-            </div>
-        {:else if pageState === 'join'}
-            <div class={`flex flex-col gap-4`}>
-                <label for={`team_name`}>Team Code</label>
-                <input
-                    type={`text`}
-                    id={`team_name`}
-                    bind:value={teamId}
-                    use:validateInput={{
-                        allowed: [ValidationOptions.NUMERIC],
-                        maxLength: 6
-                    }}
-                    class={`w-full border-2 p-2 rounded-lg`}
-                    placeholder="e.g, 123456"
-                />
-
-                <button onclick={() => joinTeam()} class={`w-full border-2 p-2 rounded-lg`}>
-                    Join Team
-                </button>
-            </div>
+    <div class={`flex flex-col justify-center items-center gap-2 mt-2`}>
+        {#if pageState === 'join'}
+            <input
+                id={`team_id`}
+                name={`team_id`}
+                class={`w-[80%] py-4 px-4 text-lg bg-neutral-800 border-2 border-neutral-600 rounded-lg mb-2`}
+                use:validateInput={{
+                    maxLength: 6,
+                    allowed: [ValidationOptions.NUMERIC]
+                }}
+                bind:value={teamId}
+                placeholder={`Team Code`}
+            />
+
+            <BorderButton onclick={() => joinTeam()} class={`px-8 active:bg-neutral-400 flex justify-center items-center gap-2`}>
+                <p class={`font-semibold`}>Join Team</p>
+                <svg xmlns="http://www.w3.org/2000/svg" class={`h-[18px] aspect-square fill-none stroke-3 stroke-current lucide lucide-user-plus-icon lucide-user-plus`} viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
+                    <circle cx="9" cy="7" r="4"/>
+                    <line x1="19" x2="19" y1="8" y2="14"/>
+                    <line x1="22" x2="16" y1="11" y2="11"/>
+                </svg>
+            </BorderButton>
+        {:else}
+            <input
+                id={`team_id`}
+                name={`team_id`}
+                class={`w-[80%] py-4 px-4 text-lg bg-neutral-800 border-2 border-neutral-600 rounded-lg mb-2`}
+                use:validateInput={{
+                    maxLength: 18,
+                    allowed: [ValidationOptions.ALL]
+                }}
+                bind:value={teamName}
+                placeholder={`Team Name`}
+            />
+
+            <BorderButton onclick={() => createTeam()} class={`px-8 active:bg-neutral-400 flex justify-center items-center gap-1`}>
+                <p class={`font-semibold`}>Create Team</p>
+                <svg xmlns="http://www.w3.org/2000/svg" class={`h-[18px] aspect-square fill-none stroke-current stroke-3 lucide lucide-plus-icon lucide-plus`} viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M5 12h14"/>
+                    <path d="M12 5v14"/>
+                </svg>
+            </BorderButton>
         {/if}
     </div>
 
 
-    <div class={`flex flex-col`}>
-        <p>{$UserStore?.email}</p>
-        <button onclick={() => handleSignOut()} class={`border-2 px-4 py-2 rounded-lg`}>
+    <div class={`flex flex-col justify-center items-center text-center gap-2 mt-16`}>
+        <div class={`border-t-2 border-white/20 h-[0.5px] w-full`}></div>
+        <div class={`mt-1`}>
+            <p>Logged in with email</p>
+            <p>{user!.email}</p>
+        </div>
+
+        <button class={`active:bg-neutral-700 border-2 border-labyrinth-red bg-neutral-800/60 transition-colors duration-200 text-labyrinth-neutral-200 px-4 py-2 rounded-lg`}>
             Sign Out
         </button>
     </div>
-</main>
+</main>
+
+<svelte:head>
+    <title>Labyrinth | Team Registration</title>
+    <meta name="description" content="Create or join a team and dive into Labyrinth 2025!">
+</svelte:head>
diff --git a/frontend/static/assets/images/splash.webp b/frontend/static/assets/images/splash.webp

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ export enum ValidationOptions {`
`6`	`6`	`NUMERIC = '0123456789',`
`7`	`7`	`SPACE = ' ',`
`8`	`8`	`SPECIAL_CHARACTERS = ',.!?;:_<>',`
`9`		`- ALL = ' ,.!?;:_0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'`
	`9`	`+ ALL = ' ,.!?;:_<>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`export interface IValidationConfig {`