Suyu/website
1
0
Fork 0
mirror of https://git.suyu.dev/suyu/website.git synced 2026-01-05 14:08:08 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

add bgs and rooms stuff

Browse source
This commit is contained in:
not-nullptr 2024-03-16 21:26:27 +00:00
parent 188e38c6ec
commit 7ad700c83d
11 changed files with 100 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

72
src/components/Room.svelte
View file

@ -1,36 +1,54 @@
<script lang="ts">
import type { IRoom } from "$types/rooms";
export let icon: string | undefined;
export let room: IRoom;
</script>
<div class="relative flex h-fit items-center gap-6 rounded-[2.25rem] bg-[#110d10] p-6">
{#if icon}
<img src={icon} alt="Icon for '{room.preferredGameName}'" class="h-[100px] rounded-2xl" />
{/if}
<div>
<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-500"
>({room.preferredGameName || "No preferred game"})</span
>
</h2>
<p>{room.description}</p>
<div class="mt-2 text-sm text-gray-600">
{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
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>