settings + reinvite players to lobby
This commit is contained in:
@@ -26,169 +26,211 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-5xl">
|
||||
<!-- Welcome -->
|
||||
<div>
|
||||
<h1 class="text-2xl font-700 tracking-tight">
|
||||
{#if data.user}
|
||||
Welcome back, <span class="text-accent">{data.user.name}</span>
|
||||
{:else}
|
||||
Welcome to <span class="text-accent">VASH</span>
|
||||
{/if}
|
||||
<!-- ── LANDING PAGE (not logged in) ── -->
|
||||
{#if !data.user}
|
||||
<div class="flex min-h-[70vh] flex-col items-center justify-center text-center">
|
||||
<div
|
||||
class="font-800 mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-accent text-2xl text-surface-900"
|
||||
>
|
||||
V
|
||||
</div>
|
||||
<h1 class="text-4xl font-800 tracking-tight">
|
||||
Welcome to <span class="text-accent">Vash Esports</span>
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-text-secondary">Automated esports match management for osu!</p>
|
||||
<p class="mt-3 max-w-md text-text-secondary">
|
||||
Automated tournament match management for osu! — lobbies, mappools, picks, bans, and
|
||||
ELO tracking all in one place.
|
||||
</p>
|
||||
<a
|
||||
href="/login"
|
||||
class="font-600 mt-8 rounded-lg bg-accent px-6 py-3 text-surface-900 transition-colors hover:bg-accent-hover"
|
||||
>
|
||||
Sign in with osu!
|
||||
</a>
|
||||
<p class="mt-4 text-xs text-text-secondary">
|
||||
Uses your osu! account. No extra registration needed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="mt-6 grid grid-cols-4 gap-3">
|
||||
<div class="rounded-lg border border-border bg-surface-800 p-4">
|
||||
<p class="text-2xl font-800 tabular-nums text-text-primary">{data.stats.matches}</p>
|
||||
<p class="mt-1 text-xs text-text-secondary">Total Matches</p>
|
||||
<!-- ── DASHBOARD (logged in) ── -->
|
||||
{:else}
|
||||
<div class="mx-auto max-w-5xl">
|
||||
<div>
|
||||
<h1 class="text-2xl font-700 tracking-tight">
|
||||
Welcome back, <span class="text-accent">{data.user.name}</span>
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-text-secondary">Automated esports match management for osu!</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-border bg-surface-800 p-4">
|
||||
<p class="text-2xl font-800 tabular-nums text-green-400">{data.stats.finished}</p>
|
||||
<p class="mt-1 text-xs text-text-secondary">Completed</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-border bg-surface-800 p-4">
|
||||
<p class="text-2xl font-800 tabular-nums text-text-primary">{data.stats.teams}</p>
|
||||
<p class="mt-1 text-xs text-text-secondary">Teams</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-border bg-surface-800 p-4">
|
||||
<p class="text-2xl font-800 tabular-nums text-text-primary">{data.stats.mappools}</p>
|
||||
<p class="mt-1 text-xs text-text-secondary">Mappools</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Matches -->
|
||||
{#if data.liveMatches.length > 0}
|
||||
<div class="mt-8">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative h-2 w-2">
|
||||
<div class="absolute inset-0 animate-ping rounded-full bg-green-400 opacity-75"></div>
|
||||
<div class="relative h-2 w-2 rounded-full bg-green-400"></div>
|
||||
<!-- Stats -->
|
||||
<div class="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
<div class="rounded-lg border border-border bg-surface-800 p-4">
|
||||
<p class="text-2xl font-800 tabular-nums text-text-primary">{data.stats.matches}</p>
|
||||
<p class="mt-1 text-xs text-text-secondary">Total Matches</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-border bg-surface-800 p-4">
|
||||
<p class="text-2xl font-800 tabular-nums text-green-400">{data.stats.finished}</p>
|
||||
<p class="mt-1 text-xs text-text-secondary">Completed</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-border bg-surface-800 p-4">
|
||||
<p class="text-2xl font-800 tabular-nums text-text-primary">{data.stats.teams}</p>
|
||||
<p class="mt-1 text-xs text-text-secondary">Teams</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-border bg-surface-800 p-4">
|
||||
<p class="text-2xl font-800 tabular-nums text-text-primary">{data.stats.mappools}</p>
|
||||
<p class="mt-1 text-xs text-text-secondary">Mappools</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Matches -->
|
||||
{#if data.liveMatches.length > 0}
|
||||
<div class="mt-8">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative h-2 w-2">
|
||||
<div class="absolute inset-0 animate-ping rounded-full bg-green-400 opacity-75"></div>
|
||||
<div class="relative h-2 w-2 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
<h2 class="text-sm font-600">Live Now</h2>
|
||||
</div>
|
||||
<h2 class="text-sm font-600">Live Now</h2>
|
||||
</div>
|
||||
<div class="mt-3 flex flex-col gap-2">
|
||||
{#each data.liveMatches as m}
|
||||
{@const p1 = m.participants[0]}
|
||||
{@const p2 = m.participants[1]}
|
||||
{@const sc = stateConfig[m.state]}
|
||||
<a
|
||||
href="/matches/{m.id}"
|
||||
class="flex items-center gap-4 rounded-lg border border-green-500/20 bg-surface-800 p-4 transition-all hover:border-green-500/40 hover:bg-surface-700"
|
||||
>
|
||||
<div class="flex flex-1 items-center gap-3">
|
||||
{#if p1?.team.avatarUrl}
|
||||
<img src={p1.team.avatarUrl} alt="" class="h-8 w-8 rounded-full" />
|
||||
{/if}
|
||||
<span class="text-sm font-600">{p1?.team.name ?? '?'}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xl font-800 tabular-nums">{p1?.score ?? 0}</span>
|
||||
<span class="text-xs text-text-secondary">vs</span>
|
||||
<span class="text-xl font-800 tabular-nums">{p2?.score ?? 0}</span>
|
||||
</div>
|
||||
<div class="flex flex-1 items-center justify-end gap-3">
|
||||
<span class="text-sm font-600">{p2?.team.name ?? '?'}</span>
|
||||
{#if p2?.team.avatarUrl}
|
||||
<img src={p2.team.avatarUrl} alt="" class="h-8 w-8 rounded-full" />
|
||||
{/if}
|
||||
</div>
|
||||
<span class="flex items-center gap-1.5 text-xs font-500 {sc?.color ?? ''}">
|
||||
{#if sc?.dot}
|
||||
<span class="h-1.5 w-1.5 rounded-full {sc.dot}"></span>
|
||||
{/if}
|
||||
{sc?.label}
|
||||
</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-8 grid grid-cols-3 gap-4">
|
||||
<!-- Quick Actions -->
|
||||
<div class="col-span-1">
|
||||
<h2 class="text-sm font-600">Quick Actions</h2>
|
||||
<div class="mt-3 flex flex-col gap-2">
|
||||
<a
|
||||
href="/matches"
|
||||
class="flex items-center gap-3 rounded-lg border border-border bg-surface-800 p-3 transition-colors hover:border-accent/40 hover:bg-surface-700"
|
||||
>
|
||||
<span class="flex h-8 w-8 items-center justify-center rounded-md bg-accent/10 text-accent">⚔</span>
|
||||
<div>
|
||||
<p class="text-sm font-600">New Match</p>
|
||||
<p class="text-xs text-text-secondary">Start a 1v1</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/mappools"
|
||||
class="flex items-center gap-3 rounded-lg border border-border bg-surface-800 p-3 transition-colors hover:border-accent/40 hover:bg-surface-700"
|
||||
>
|
||||
<span class="flex h-8 w-8 items-center justify-center rounded-md bg-purple-500/10 text-purple-400">♫</span>
|
||||
<div>
|
||||
<p class="text-sm font-600">Mappools</p>
|
||||
<p class="text-xs text-text-secondary">Build a pool</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/teams"
|
||||
class="flex items-center gap-3 rounded-lg border border-border bg-surface-800 p-3 transition-colors hover:border-accent/40 hover:bg-surface-700"
|
||||
>
|
||||
<span class="flex h-8 w-8 items-center justify-center rounded-md bg-blue-500/10 text-blue-400">⚑</span>
|
||||
<div>
|
||||
<p class="text-sm font-600">Teams</p>
|
||||
<p class="text-xs text-text-secondary">Manage rosters</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="col-span-2">
|
||||
<h2 class="text-sm font-600">Recent Matches</h2>
|
||||
<div class="mt-3 flex flex-col gap-2">
|
||||
{#each data.recentMatches as m}
|
||||
{@const p1 = m.participants[0]}
|
||||
{@const p2 = m.participants[1]}
|
||||
{@const config = m.config as { bestOf: number }}
|
||||
{@const sc = stateConfig[m.state]}
|
||||
<a
|
||||
href="/matches/{m.id}"
|
||||
class="flex items-center gap-3 rounded-lg border border-border bg-surface-800 p-3 transition-colors hover:border-accent/30 hover:bg-surface-700"
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-600">{p1?.team.name ?? '?'}</span>
|
||||
{#if m.state === 'FINISHED'}
|
||||
<span class="text-xs font-700 tabular-nums {(p1?.score ?? 0) > (p2?.score ?? 0) ? 'text-green-400' : 'text-text-secondary'}">{p1?.score ?? 0}</span>
|
||||
<span class="text-xs text-text-secondary">-</span>
|
||||
<span class="text-xs font-700 tabular-nums {(p2?.score ?? 0) > (p1?.score ?? 0) ? 'text-green-400' : 'text-text-secondary'}">{p2?.score ?? 0}</span>
|
||||
{:else}
|
||||
<span class="text-xs text-text-secondary">vs</span>
|
||||
<div class="mt-3 flex flex-col gap-2">
|
||||
{#each data.liveMatches as m}
|
||||
{@const p1 = m.participants[0]}
|
||||
{@const p2 = m.participants[1]}
|
||||
{@const sc = stateConfig[m.state]}
|
||||
<a
|
||||
href="/matches/{m.id}"
|
||||
class="flex items-center gap-4 rounded-lg border border-green-500/20 bg-surface-800 p-4 transition-all hover:border-green-500/40 hover:bg-surface-700"
|
||||
>
|
||||
<div class="flex flex-1 items-center gap-3">
|
||||
{#if p1?.team.avatarUrl}
|
||||
<img src={p1.team.avatarUrl} alt="" class="h-8 w-8 rounded-full" />
|
||||
{/if}
|
||||
<span class="text-sm font-600">{p2?.team.name ?? '?'}</span>
|
||||
<span class="text-sm font-600">{p1?.team.name ?? '?'}</span>
|
||||
</div>
|
||||
<p class="mt-0.5 text-xs text-text-secondary">
|
||||
{m.name ? `${m.name} · ` : ''}BO{config.bestOf}
|
||||
· {timeAgo(m.finishedAt ?? m.createdAt)}
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xl font-800 tabular-nums">{p1?.score ?? 0}</span>
|
||||
<span class="text-xs text-text-secondary">vs</span>
|
||||
<span class="text-xl font-800 tabular-nums">{p2?.score ?? 0}</span>
|
||||
</div>
|
||||
<div class="flex flex-1 items-center justify-end gap-3">
|
||||
<span class="text-sm font-600">{p2?.team.name ?? '?'}</span>
|
||||
{#if p2?.team.avatarUrl}
|
||||
<img src={p2.team.avatarUrl} alt="" class="h-8 w-8 rounded-full" />
|
||||
{/if}
|
||||
</div>
|
||||
<span class="flex items-center gap-1.5 text-xs font-500 {sc?.color ?? ''}">
|
||||
{#if sc?.dot}
|
||||
<span class="h-1.5 w-1.5 rounded-full {sc.dot}"></span>
|
||||
{/if}
|
||||
{sc?.label}
|
||||
</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-8 grid gap-4 lg:grid-cols-3">
|
||||
<!-- Quick Actions -->
|
||||
<div class="lg:col-span-1">
|
||||
<h2 class="text-sm font-600">Quick Actions</h2>
|
||||
<div class="mt-3 flex flex-col gap-2">
|
||||
<a
|
||||
href="/matches"
|
||||
class="flex items-center gap-3 rounded-lg border border-border bg-surface-800 p-3 transition-colors hover:border-accent/40 hover:bg-surface-700"
|
||||
>
|
||||
<span class="flex h-8 w-8 items-center justify-center rounded-md bg-accent/10 text-accent"
|
||||
>⚔</span
|
||||
>
|
||||
<div>
|
||||
<p class="text-sm font-600">New Match</p>
|
||||
<p class="text-xs text-text-secondary">Start a 1v1</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/mappools"
|
||||
class="flex items-center gap-3 rounded-lg border border-border bg-surface-800 p-3 transition-colors hover:border-accent/40 hover:bg-surface-700"
|
||||
>
|
||||
<span
|
||||
class="flex h-8 w-8 items-center justify-center rounded-md bg-purple-500/10 text-purple-400"
|
||||
>♫</span
|
||||
>
|
||||
<div>
|
||||
<p class="text-sm font-600">Mappools</p>
|
||||
<p class="text-xs text-text-secondary">Build a pool</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="/teams"
|
||||
class="flex items-center gap-3 rounded-lg border border-border bg-surface-800 p-3 transition-colors hover:border-accent/40 hover:bg-surface-700"
|
||||
>
|
||||
<span
|
||||
class="flex h-8 w-8 items-center justify-center rounded-md bg-blue-500/10 text-blue-400"
|
||||
>⚑</span
|
||||
>
|
||||
<div>
|
||||
<p class="text-sm font-600">Teams</p>
|
||||
<p class="text-xs text-text-secondary">Manage rosters</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="lg:col-span-2">
|
||||
<h2 class="text-sm font-600">Recent Matches</h2>
|
||||
<div class="mt-3 flex flex-col gap-2">
|
||||
{#each data.recentMatches as m}
|
||||
{@const p1 = m.participants[0]}
|
||||
{@const p2 = m.participants[1]}
|
||||
{@const config = m.config as { bestOf: number }}
|
||||
{@const sc = stateConfig[m.state]}
|
||||
<a
|
||||
href="/matches/{m.id}"
|
||||
class="flex items-center gap-3 rounded-lg border border-border bg-surface-800 p-3 transition-colors hover:border-accent/30 hover:bg-surface-700"
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-600">{p1?.team.name ?? '?'}</span>
|
||||
{#if m.state === 'FINISHED'}
|
||||
<span
|
||||
class="text-xs font-700 tabular-nums {(p1?.score ?? 0) > (p2?.score ?? 0)
|
||||
? 'text-green-400'
|
||||
: 'text-text-secondary'}">{p1?.score ?? 0}</span
|
||||
>
|
||||
<span class="text-xs text-text-secondary">-</span>
|
||||
<span
|
||||
class="text-xs font-700 tabular-nums {(p2?.score ?? 0) > (p1?.score ?? 0)
|
||||
? 'text-green-400'
|
||||
: 'text-text-secondary'}">{p2?.score ?? 0}</span
|
||||
>
|
||||
{:else}
|
||||
<span class="text-xs text-text-secondary">vs</span>
|
||||
{/if}
|
||||
<span class="text-sm font-600">{p2?.team.name ?? '?'}</span>
|
||||
</div>
|
||||
<p class="mt-0.5 text-xs text-text-secondary">
|
||||
{m.name ? `${m.name} · ` : ''}BO{config.bestOf}
|
||||
· {timeAgo(m.finishedAt ?? m.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if m.state === 'FINISHED' && m.winnerId}
|
||||
{@const winner = m.participants.find((p: any) => p.teamId === m.winnerId)}
|
||||
<span class="text-xs text-green-400">🏆 {winner?.team.name}</span>
|
||||
{/if}
|
||||
|
||||
<span class="text-xs {sc?.color ?? 'text-text-secondary'}">{sc?.label}</span>
|
||||
</a>
|
||||
{:else}
|
||||
<div class="rounded-lg border border-dashed border-border py-8 text-center">
|
||||
<p class="text-sm text-text-secondary">
|
||||
No matches yet. <a href="/matches" class="text-accent hover:underline">Create one</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if m.state === 'FINISHED' && m.winnerId}
|
||||
{@const winner = m.participants.find((p: any) => p.teamId === m.winnerId)}
|
||||
<span class="text-xs text-green-400">🏆 {winner?.team.name}</span>
|
||||
{/if}
|
||||
|
||||
<span class="text-xs {sc?.color ?? 'text-text-secondary'}">{sc?.label}</span>
|
||||
</a>
|
||||
{:else}
|
||||
<div class="rounded-lg border border-dashed border-border py-8 text-center">
|
||||
<p class="text-sm text-text-secondary">No matches yet. <a href="/matches" class="text-accent hover:underline">Create one</a></p>
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user