Spaces:
Runtime error
Runtime error
File size: 2,578 Bytes
536b6c6 35d6c3b 536b6c6 35d6c3b 536b6c6 4408af3 536b6c6 35d6c3b d16a2c1 35d6c3b 536b6c6 35d6c3b 536b6c6 35d6c3b 67cbe97 35d6c3b d16a2c1 35d6c3b 67cbe97 4408af3 67cbe97 35d6c3b 67cbe97 35d6c3b 536b6c6 35d6c3b 536b6c6 35d6c3b 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 |
<script lang="ts">
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';
export let isLoading = false;
let boxEl: HTMLElement;
let rooms = Array(20)
.fill(0)
.map((_, i) => ({ label: `room ${i}`, total: ~~Math.random() * 20, capacity: 20 }));
let selectedRoomID = 0;
let collapsed = true;
$: selectedRoom = rooms[selectedRoomID];
function clickHandler(event: Event) {
if (!boxEl.contains(event.target as Node)) {
collapsed = true;
}
}
onMount(() => {
window.addEventListener('click', clickHandler, true);
return () => {
window.removeEventListener('click', clickHandler, true);
};
});
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="text-xs md:text-sm bg-violet-100 text-violet-900 px-3 py-1 font-mono font-medium tracking-tight relative z-0 min-w-[25ch]
{isLoading ? 'opacity-50' : ''}
{collapsed ? 'rounded-xl' : 'rounded-b-xl'}"
title="Choose a different room"
bind:this={boxEl}
>
{#if !collapsed}
<div
class="absolute z-20 left-0 right-0 bottom-full rounded-t-xl bg-violet-100 px-1 overflow-y-scroll max-h-80"
>
<ul class="relative">
<li class="grid-row gap-2 pb-3 sticky top-0 bg-violet-100 py-2">
<Room />
<span> room </span>
<People />
<span> players </span>
</li>
{#each rooms as room, i}
<li>
<!-- svelte-ignore a11y-invalid-attribute -->
<a
href="#"
on:click|preventDefault={() => {
selectedRoomID = i;
collapsed = true;
}}
class="grid-row gap-2 hover:bg-gray-300
{i === selectedRoomID ? 'text-green-600' : ''}"
>
<span>
{#if i === selectedRoomID}
<Pin />
{/if}
</span>
<span> {room.label} </span>
<span />
<span>{room.total} / {room.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="grid-row gap-2 relative
{isLoading ? 'cursor-wait' : 'cursor-pointer'}"
on:click={() => (isLoading ? null : (collapsed = !collapsed))}
>
<Room />
<span> {selectedRoom.label} </span>
<People />
<span> {selectedRoom.total} / {selectedRoom.capacity} </span>
</div>
</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>
|