team-1/frontend/src/routes/+page.svelte

<script lang="ts">
    import RoomComponent from "$lib/components/RoomComponent.svelte"
    import { get_coords } from "$lib/gps"
    import { parseRoom, type Room } from "$lib/types"
    import { Plus } from "@lucide/svelte"
    import { onMount } from "svelte"

    let rooms: Room[] = $state([])

    onMount(async () => {
        let { coords, error } = await get_coords()
        if (error != null || coords == null) coords = { latitude: 46.6769043, longitude: 11.1851585 }

        let res = await fetch(`/api/room?lat=${coords.latitude}&lon=${coords.longitude}`)
        let json = await res.json()
        for (let room of json) rooms.push(await parseRoom(room))
    })
</script>

<div class="flex flex-col items-center gap-2">
    <div class="flex flex-row items-center gap-4 py-4">
        <img src="icon_small.png" class="h-12 w-12" alt="chillbox icon" />
        <span class="lilita-one-regular text-6xl font-bold">ChillBox</span>
    </div>

    <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">
        <span> New Room </span>
        <Plus />
    </button>

    <div class="flex flex-col gap-2">
        {#each rooms as room}
            <RoomComponent {room} />
        {/each}
    </div>
</div>