Stan Runge
d5448d9a94
Some checks failed
Test and deploy staging / staging (push) Failing after 14s
- run sv migrate sveltekit-3: config moves into vite.config.ts, $lib becomes #lib, $env/dynamic becomes $app/env/private via src/env.ts, $app/environment becomes $app/env, hook types move to @sveltejs/kit/hooks - env vars stay optional (the migrator defaulted them to ''), and BANCHO_MODE, which it missed, is declared and passed to simulatorEnabled - handleError only logs and masks unknown errors; Kit 3 now routes 404s and error(...) through it too - json()/text() become Response.json()/new Response(); goto keepFocus/noScroll becomes reset: false; invalidateAll becomes refreshAll; page.url is copied before mutating - replace adapter-node with @sveltejs/adapter-bun; prod-server.ts wraps Bun.serve to add native WebSockets (bunSockets) for /ws paths, since the generated server has no websocket option - drop the Kit readdir patch: Kit 3 sorts route entries itself - match view and broadcast pages use the live score modules BREAKING CHANGE: requires SvelteKit 3, TypeScript 6 and Bun 1.4; the build output is build/index.js from adapter-bun, started through prod-server.ts. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
65 lines
2.1 KiB
Svelte
65 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { fly } from 'svelte/transition';
|
|
import { SIDE_COLORS, flagUrl, initials } from '#lib/components/match/theme.js';
|
|
import type { OverlayProps } from './context';
|
|
|
|
const { data }: OverlayProps = $props();
|
|
const view = $derived(data.view);
|
|
</script>
|
|
|
|
{#if view}
|
|
<div class="grid size-full grid-cols-2 gap-10">
|
|
{#each view.sides as side, index (side.id)}
|
|
{@const colors = SIDE_COLORS[side.color]}
|
|
<div class="flex flex-col gap-4 {index === 1 ? 'items-end text-right' : ''}">
|
|
<div class="text-5xl font-black tracking-tight" style="color:{colors.text}">
|
|
{side.name}
|
|
</div>
|
|
{#if side.roll != null}<div class="text-2xl text-zinc-300">
|
|
rolled <span class="font-black tabular-nums">{side.roll}</span>
|
|
</div>{/if}
|
|
<div class="flex flex-col gap-3 {index === 1 ? 'items-end' : ''}">
|
|
{#each side.players as player, n (player.id)}
|
|
<div
|
|
in:fly={{ x: index === 0 ? -60 : 60, delay: n * 120, duration: 500 }}
|
|
class="flex items-center gap-4 rounded-2xl border border-white/10 bg-zinc-950/80 p-3 pr-6 {index ===
|
|
1
|
|
? 'flex-row-reverse pr-3 pl-6'
|
|
: ''}"
|
|
style="box-shadow:inset {index === 0 ? '5px' : '-5px'} 0 0 {colors.solid}"
|
|
>
|
|
{#if player.avatarUrl}
|
|
<img src={player.avatarUrl} alt="" class="size-16 rounded-xl object-cover" />
|
|
{:else}
|
|
<div
|
|
class="grid size-16 place-items-center rounded-xl text-xl font-bold"
|
|
style="background:{colors.soft}"
|
|
>
|
|
{initials(player.name)}
|
|
</div>
|
|
{/if}
|
|
<div>
|
|
<div
|
|
class="flex items-center gap-2 text-2xl font-bold {index === 1
|
|
? 'flex-row-reverse'
|
|
: ''}"
|
|
>
|
|
{#if flagUrl(player.countryCode)}<img
|
|
src={flagUrl(player.countryCode)}
|
|
alt=""
|
|
class="h-4"
|
|
/>{/if}
|
|
{player.osuName ?? player.name}
|
|
</div>
|
|
<div class="text-lg text-zinc-400 tabular-nums">
|
|
{player.rating ?? ''}{player.inLobby ? ' · in lobby' : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|