From 278a2d94a851efee1e3ee52d08da1c1567659a35 Mon Sep 17 00:00:00 2001
From: Leonardo Segala <leonardosegala2006@gmail.com>
Date: Sat, 2 Aug 2025 13:10:51 +0200
Subject: [PATCH] Add custom code insertion during room creation

---
 frontend/src/routes/room/create/+page.svelte | 43 ++++++++------------
 1 file changed, 17 insertions(+), 26 deletions(-)

diff --git a/frontend/src/routes/room/create/+page.svelte b/frontend/src/routes/room/create/+page.svelte
index c69b19e..d0009f3 100644
--- a/frontend/src/routes/room/create/+page.svelte
+++ b/frontend/src/routes/room/create/+page.svelte
@@ -9,9 +9,7 @@
 
     let name: string = $state()
     let range: number = $state()
-
-    const privateStyle = "bg-red-500"
-    const publicStyle = "bg-green-500"
+    let pin: number = $state()
 
     async function createRoom() {
         if (creating) {
@@ -22,16 +20,12 @@
             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 res = await fetch(
+            `/api/room/new?name=${encodeURIComponent(name)}&coords=${coord.latitude},${coord.longitude}&range=${encodeURIComponent(range ?? "100")}&pin=${encodeURIComponent(pin ?? "")}`,
+            { method: "POST" }
+        )
 
         const json = await res.json()
 
@@ -50,8 +44,10 @@
     <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"
+            placeholder="Room name (Required)"
+            class="{name
+                ? ''
+                : 'border-2 border-red-500'} p-2 text-xl rounded-md 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
@@ -67,21 +63,16 @@
             <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>
+        <input
+            bind:value={pin}
+            type="number"
+            max="9999"
+            placeholder="PIN  (none if public)"
+            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"
+        />
 
         <button
+            type="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}
         >