t pus:wqMerge branch 'main' of https://repos.hackathon.bz.it/2025-summer/team-1

frontend/src/routes/+page.svelte

@@ -26,7 +26,12 @@
     <img src="/smerdo_radar_bonus.gif" alt="radar" class="h-64 w-64" />
     <span class="animate-pulse text-sm italic">Scanning for rooms near you...</span>
 
-    <button class="fixed right-4 bottom-4 flex flex-row gap-1 rounded-xl bg-light-pine-blue p-2 text-dark-pine-text sm:right-20 md:right-40 lg:right-80 dark:bg-dark-pine-blue">
+    <button
+        onclick={() => {
+            window.location.href = "/room/new"
+        }}
+        class="fixed right-4 bottom-4 flex flex-row gap-1 rounded-xl bg-light-pine-blue p-2 text-dark-pine-text sm:right-20 md:right-40 lg:right-80 dark:bg-dark-pine-blue"
+    >
         <span> New Room </span>
         <Plus />
     </button>

frontend/src/routes/admin/[id]/+page.svelte

@@ -52,6 +52,10 @@
 
         queueSongs = songs
         playingIndex = index
+
+        if (queueSongs.length == 0) {
+            playNext()
+        }
     })
 
     $effect(() => {
@@ -72,6 +76,11 @@
 
         queueSongs = songs
         playingIndex = index
+
+        if (audioController) {
+            audioController.pause()
+            audioController.currentTime = 0
+        }
     }
 
     function seek(e: Event) {

frontend/src/routes/room/[id]/+page.svelte

@@ -9,7 +9,6 @@
     import type { FetchError } from "$lib/types.js"
     import { io, Socket } from "socket.io-client"
     import { get_coords } from "$lib/gps.js"
-    import type { Coordinates } from "$lib/gps.js"
 
     let { data } = $props()
 

frontend/src/routes/room/[id]/+page.ts

@@ -1,13 +1,7 @@
-import { error, type Load, type ServerLoad } from "@sveltejs/kit"
 import type { PageLoad } from "./$types"
-import type { FetchError } from "$lib/util"
-import { parseSuggestion, type Suggestion } from "$lib/types"
 
-export const load: PageLoad = async ({ params }) => {
-    if (params.id) {
-        return {
-            roomId: params.id,
-        }
+export const load: PageLoad = ({ params, url }) => {
+    return {
+        roomId: params.id || "",
     }
-    error(400, "Please provide a room id")
 }

frontend/src/routes/room/create/+page.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+    import { get_coords } from "$lib/gps"
+    import { X, Check, Plus } from "@lucide/svelte"
+    import { onMount } from "svelte"
+
+    let privateRoom: boolean = $state(true)
+    let coord = $state({ latitude: 0, longitude: 0 })
+    let creating: boolean = $state(false)
+
+    let name: string = $state()
+    let range: number = $state()
+
+    const privateStyle = "bg-red-500"
+    const publicStyle = "bg-green-500"
+
+    async function createRoom() {
+        if (creating) {
+            return
+        }
+
+        if (!name) {
+            return
+        }
+
+        let pin
+        if (privateRoom) {
+            pin = Math.floor(Math.random() * 10000)
+        } else {
+            pin = ""
+        }
+
+        creating = true
+
+        const res = await fetch(`/api/room/new?name=${encodeURIComponent(name)}&coords=${coord.latitude},${coord.longitude}&range=${encodeURIComponent(range ?? "100")}&pin=${pin}`, { method: "POST" })
+
+        const json = await res.json()
+
+        window.location.href = `/admin/${json.room_id}`
+    }
+
+    onMount(async () => {
+        const res = await get_coords()
+        coord = res.coords ?? { latitude: 46.6769043, longitude: 11.1851585 }
+    })
+</script>
+
+<form class="flex flex-col items-center">
+    <h1 class="text-4xl my-10">Create Room</h1>
+
+    <div class="flex flex-col gap-3 w-1/2">
+        <input
+            bind:value={name}
+            placeholder="Room name"
+            class="p-2 text-xl rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 duration-100 outline-none focus:ring-2"
+        />
+
+        <input
+            bind:value={range}
+            type="number"
+            min="10"
+            placeholder="Range (in meters)"
+            class="p-2 text-xl rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 duration-100 outline-none focus:ring-2"
+        />
+
+        <p>
+            Room Coordinates:
+            <span>{coord.latitude},{coord.longitude}</span>
+        </p>
+
+        <div class="flex flex-row items-center gap-2">
+            Public Room:
+            <button class="cursor-pointer w-10 h-10 rounded-lg duration-200 flex items-center justify-center {privateRoom ? privateStyle : publicStyle}" onclick={() => (privateRoom = !privateRoom)}>
+                {#if privateRoom}
+                    <X />
+                {:else}
+                    <Check />
+                {/if}
+            </button>
+            {#if !privateRoom}
+                <p class="text-sm italic">The room is flagged as public, everyone can join</p>
+            {/if}
+        </div>
+
+        <button
+            class="cursor-pointer flex flex-row items-center justify-center gap-3 border border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 duration-100 rounded-lg h-10 font-bold"
+            onclick={createRoom}
+        >
+            CREA
+            <Plus />
+        </button>
+    </div>
+</form>