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 name: string = $state()
let range: number = $state() let range: number = $state()
let pin: number = $state()
const privateStyle = "bg-red-500"
const publicStyle = "bg-green-500"
async function createRoom() { async function createRoom() {
if (creating) { if (creating) {
@ -22,16 +20,12 @@
return return
} }
let pin
if (privateRoom) {
pin = Math.floor(Math.random() * 10000)
} else {
pin = ""
}
creating = true 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() const json = await res.json()
@ -50,8 +44,10 @@
<div class="flex flex-col gap-3 w-1/2"> <div class="flex flex-col gap-3 w-1/2">
<input <input
bind:value={name} bind:value={name}
placeholder="Room name" placeholder="Room name (Required)"
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" 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 <input
@ -67,21 +63,16 @@
<span>{coord.latitude},{coord.longitude}</span> <span>{coord.latitude},{coord.longitude}</span>
</p> </p>
<div class="flex flex-row items-center gap-2"> <input
Public Room: bind:value={pin}
<button class="cursor-pointer w-10 h-10 rounded-lg duration-200 flex items-center justify-center {privateRoom ? privateStyle : publicStyle}" onclick={() => (privateRoom = !privateRoom)}> type="number"
{#if privateRoom} max="9999"
<X /> placeholder="PIN (none if public)"
{:else} 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"
<Check /> />
{/if}
</button>
{#if !privateRoom}
<p class="text-sm italic">The room is flagged as public, everyone can join</p>
{/if}
</div>
<button <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" 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} onclick={createRoom}
> >