From 2a63a527f0a95e39902fb24412c296825f7d218d Mon Sep 17 00:00:00 2001
From: Leonardo Segala <leonardosegala2006@gmail.com>
Date: Sat, 2 Aug 2025 11:47:26 +0200
Subject: [PATCH 1/2] Add room creation page

---
 frontend/src/routes/+page.svelte             |  7 +-
 frontend/src/routes/room/create/+page.svelte | 92 ++++++++++++++++++++
 2 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/routes/room/create/+page.svelte

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 29ee432..e8fb789 100644
--- a/frontend/src/routes/+page.svelte
+++ b/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>
diff --git a/frontend/src/routes/room/create/+page.svelte b/frontend/src/routes/room/create/+page.svelte
new file mode 100644
index 0000000..c69b19e
--- /dev/null
+++ b/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>

From 350f44b19485e1ac660024dc87ab2078ea64d92e Mon Sep 17 00:00:00 2001
From: Mat12143 <skymatt12@gmail.com>
Date: Sat, 2 Aug 2025 11:49:49 +0200
Subject: [PATCH 2/2] feat: stop on next song + start on empty queue

---
 frontend/src/routes/admin/[id]/+page.svelte |  9 +++++++++
 frontend/src/routes/room/[id]/+page.svelte  |  1 -
 frontend/src/routes/room/[id]/+page.ts      | 12 +++---------
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/src/routes/admin/[id]/+page.svelte b/frontend/src/routes/admin/[id]/+page.svelte
index 959e1be..07d6f0e 100644
--- a/frontend/src/routes/admin/[id]/+page.svelte
+++ b/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) {
diff --git a/frontend/src/routes/room/[id]/+page.svelte b/frontend/src/routes/room/[id]/+page.svelte
index 839d5a7..76984f3 100644
--- a/frontend/src/routes/room/[id]/+page.svelte
+++ b/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()
 
diff --git a/frontend/src/routes/room/[id]/+page.ts b/frontend/src/routes/room/[id]/+page.ts
index 969ffc5..1f9f77d 100644
--- a/frontend/src/routes/room/[id]/+page.ts
+++ b/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")
 }