Spaces:
Runtime error
Runtime error
File size: 2,546 Bytes
536b6c6 35d6c3b 536b6c6 35d6c3b 536b6c6 4408af3 536b6c6 35d6c3b 67cbe97 35d6c3b 536b6c6 35d6c3b 536b6c6 35d6c3b 67cbe97 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 |
<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 = false;
$: 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'}"
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>
|