2025-summer/team-1
12
Fork 0
Code Issues Pull requests Projects Releases Activity

Add custom code insertion during room creation

Browse source
This commit is contained in:
Leonardo Segala 2025-08-02 13:10:51 +02:00
parent c3d30a1cc8
commit 278a2d94a8
1 changed files with 17 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

43
frontend/src/routes/room/create/+page.svelte
View file

@ -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}
>