mirror of
https://git.suyu.dev/suyu/website.git
synced 2025-12-24 00:04:37 +01:00
54 lines
1.8 KiB
Svelte
54 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import type { IRoom } from "$types/rooms";
|
|
|
|
export let room: IRoom;
|
|
</script>
|
|
|
|
<div
|
|
class="relative flex h-full w-full overflow-hidden rounded-[2.25rem] border-2 border-solid border-[#ffffff34] bg-[#110d10] p-6 shadow-lg shadow-[#00000028]"
|
|
>
|
|
<div
|
|
class="absolute left-0 top-0 z-20 h-full w-full opacity-25 blur-sm"
|
|
style="background-image: url({room.game
|
|
?.bannerUrl}); background-size: cover; background-position: center center;
|
|
--mask-image: linear-gradient(
|
|
to right,
|
|
rgba(0, 0, 0, 0.1) 50%,
|
|
rgba(0, 0, 0, 1) 100%
|
|
); mask-image: var(--mask-image); -webkit-mask-image: var(--mask-image);
|
|
"
|
|
/>
|
|
<div class="relative z-30 flex items-stretch gap-6">
|
|
{#if room.game?.iconUrl}
|
|
<img
|
|
src={room.game.iconUrl}
|
|
alt="Icon for '{room.preferredGameName}'"
|
|
class="w-[100px] rounded-2xl object-cover"
|
|
/>
|
|
{/if}
|
|
<div class="flex flex-col">
|
|
<h2 class="mb-2 text-[20px] leading-[1.41] md:text-[28px] md:leading-[1.1]">
|
|
{room.name}
|
|
<span class="ml-1 text-base font-normal text-gray-300"
|
|
>({room.game?.name || "No preferred game"})</span
|
|
>
|
|
</h2>
|
|
<p class="flex-grow">{room.description}</p>
|
|
<div class="mt-2 text-sm text-gray-300">
|
|
{room.players.length} / {room.maxPlayers} | {#if room.players.length > 4}
|
|
{#each room.players.slice(0, 4) as player}
|
|
{player.nickname}{#if player !== room.players[3]},{" "}
|
|
{/if}
|
|
{/each}
|
|
and {room.players.length - 4}
|
|
{room.players.length - 4 === 1 ? "other" : "others"}
|
|
{:else}
|
|
{#each room.players as player}
|
|
{player.nickname}{#if player !== room.players[room.players.length - 1]},{" "}
|
|
{/if}
|
|
{/each}
|
|
{/if} | {room.hasPassword ? "Private" : "Public"} | {room.address}:{room.port}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|