Spaces:
Runtime error
Runtime error
File size: 3,268 Bytes
536b6c6 4c8fc93 536b6c6 35d6c3b bc15a99 5ba6620 536b6c6 35d6c3b 536b6c6 5ba6620 536b6c6 d16a2c1 5ba6620 536b6c6 35d6c3b 331e32b 35d6c3b 331e32b 35d6c3b bc15a99 4c8fc93 dd24c08 4c8fc93 35d6c3b 536b6c6 35d6c3b 19722de 67cbe97 19722de 67cbe97 19722de 5ba6620 19722de 2d4904b 19722de 2d4904b 19722de bc15a99 19722de 35d6c3b 19722de 536b6c6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<script lang="ts">
import { page } from '$app/stores';
import Room from '$lib/Icons/Room.svelte';
import Pin from '$lib/Icons/Pin.svelte';
import People from '$lib/Icons/People.svelte';
import { onMount } from 'svelte';
import { selectedRoomID } from '$lib/store';
import { MAX_CAPACITY } from '$lib/constants';
import { useRooms } from '$lib/liveblocks';
import type { RoomResponse } from '$lib/types';
export let isLoading = false;
let boxEl: HTMLElement;
const rooms = useRooms();
let collapsed = true;
$: selectedRoom = $rooms.find((room) => room.room_id === $selectedRoomID);
$: loadingRooms = $rooms.length > 0;
function clickHandler(event: Event) {
if (!boxEl.contains(event.target as Node)) {
collapsed = true;
}
}
onMount(() => {
window.addEventListener('pointerdown', clickHandler, true);
return () => {
window.removeEventListener('pointerdown', clickHandler, true);
};
});
function changeRoom(room: RoomResponse) {
$selectedRoomID = room.room_id;
collapsed = true;
$page.url.searchParams.set('roomid', room.room_id);
window.location.search = `?${$page.url.searchParams.toString()}`;
}
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="min-w-[25ch]">
{#if loadingRooms}
<div
class="text-xs rounded md:text-smtext-gray-700 py-1 font-medium tracking-tight relative z-0
{isLoading ? 'opacity-50' : ''}"
title="Choose a different room"
bind:this={boxEl}
>
{#if !collapsed}
<div class="absolute left-0 right-0 bottom-full rounded-xl bg-blue-600 px-1">
<ul class="relative overflow-y-scroll max-h-72">
<li class="grid-row gap-2 pb-3 sticky top-0 py-2">
<Room />
<span> room </span>
<People />
<span> players </span>
</li>
{#each $rooms as room}
<li>
<!-- svelte-ignore a11y-invalid-attribute -->
<a
href="#"
on:click|preventDefault={() => changeRoom(room)}
class="grid-row gap-2 hover:bg-gray-300
{room.room_id === $selectedRoomID ? 'text-black' : ''}"
>
<span>
{#if room.room_id === $selectedRoomID}
<Pin />
{/if}
</span>
<span>room {room.id} </span>
<span />
<span>{room.users_count} / {MAX_CAPACITY}</span>
</a>
</li>
{/each}
</ul>
<div class="border-t-2 border-t-gray-400 border-opacity-50" />
</div>
{/if}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class={isLoading ? 'cursor-wait' : 'cursor-pointer'}
on:click={() => (isLoading ? null : (collapsed = !collapsed))}
>
{#if selectedRoom}
<div class="grid-row gap-2">
<Room />
<span>
room {selectedRoom?.id}
</span>
<People />
<span>
{selectedRoom?.users_count} / {MAX_CAPACITY}
</span>
</div>
{:else}
<div class="grid-row gap-2">
<Room />
<span>
Loading...
<People />
<span> ... / ... </span>
</span>
</div>
{/if}
</div>
</div>
{/if}
</div>
<style lang="postcss" scoped>
.grid-row {
display: grid;
grid-template-columns: 0.5fr 2fr 0.5fr 2fr;
align-items: center;
justify-items: flex-start;
}
</style>
|