settings + reinvite players to lobby
This commit is contained in:
@@ -1,7 +1,16 @@
|
||||
import type { LayoutServerLoad } from "./$types";
|
||||
// src/routes/(app)/+layout.server.ts
|
||||
import type { LayoutServerLoad } from './$types';
|
||||
|
||||
export const load: LayoutServerLoad = async ({ locals }) => {
|
||||
return {
|
||||
user: locals.user ?? null
|
||||
user: locals.user
|
||||
? {
|
||||
id: locals.user.id,
|
||||
name: locals.user.name,
|
||||
email: locals.user.email,
|
||||
image: locals.user.image,
|
||||
role: locals.user.role ?? 'player'
|
||||
}
|
||||
: null
|
||||
};
|
||||
};
|
||||
|
||||
@@ -2,16 +2,47 @@
|
||||
import './layout.css';
|
||||
import Sidebar from '$lib/components/Sidebar.svelte';
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
import { page } from '$app/state';
|
||||
|
||||
let { children } = $props();
|
||||
|
||||
const user = $derived(page.data?.user);
|
||||
</script>
|
||||
|
||||
<div class="flex min-h-dvh">
|
||||
<Sidebar />
|
||||
<div class="ml-56 flex flex-1 flex-col">
|
||||
<Header />
|
||||
<main class="flex-1 p-6">
|
||||
{#if user}
|
||||
<!-- Authenticated layout with sidebar -->
|
||||
<div class="flex min-h-dvh">
|
||||
<Sidebar />
|
||||
<div class="ml-56 flex flex-1 flex-col">
|
||||
<Header />
|
||||
<main class="flex-1 p-6">
|
||||
{@render children()}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Unauthenticated: clean layout, no sidebar -->
|
||||
<div class="min-h-dvh">
|
||||
<header
|
||||
class="flex h-14 items-center justify-between border-b border-border bg-surface-900/80 px-6 backdrop-blur-md"
|
||||
>
|
||||
<a href="/" class="flex items-center gap-2.5">
|
||||
<div
|
||||
class="font-800 flex h-8 w-8 items-center justify-center rounded-md bg-accent text-sm text-surface-900"
|
||||
>
|
||||
V
|
||||
</div>
|
||||
<span class="font-700 text-base tracking-tight text-text-primary">Vash Esports</span>
|
||||
</a>
|
||||
<a
|
||||
href="/login"
|
||||
class="font-600 rounded-md bg-accent px-3.5 py-1.5 text-sm text-surface-900 transition-colors hover:bg-accent-hover"
|
||||
>
|
||||
Sign in with osu!
|
||||
</a>
|
||||
</header>
|
||||
<main class="p-6">
|
||||
{@render children()}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -1,26 +1,32 @@
|
||||
// src/routes/(app)/+page.server.ts
|
||||
import { db } from '$lib/server/db';
|
||||
import { match, team, mappool } from '$lib/server/db/schema';
|
||||
import { eq, desc, count, and, inArray } from 'drizzle-orm';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { eq, desc, count, inArray } from 'drizzle-orm';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async ({ locals }) => {
|
||||
if (!locals.user) redirect(302, '/');
|
||||
// ── NOT LOGGED IN → landing page (no redirect loop!) ──
|
||||
if (!locals.user) {
|
||||
return {
|
||||
authenticated: false as const,
|
||||
recentMatches: [],
|
||||
liveMatches: [],
|
||||
stats: { matches: 0, finished: 0, teams: 0, mappools: 0 }
|
||||
};
|
||||
}
|
||||
|
||||
// Recent matches (last 5)
|
||||
// ── LOGGED IN → dashboard data ──
|
||||
const recentMatches = await db.query.match.findMany({
|
||||
with: { participants: { with: { team: true } } },
|
||||
orderBy: desc(match.createdAt),
|
||||
limit: 5
|
||||
});
|
||||
|
||||
// Live matches
|
||||
const liveMatches = await db.query.match.findMany({
|
||||
with: { participants: { with: { team: true } } },
|
||||
where: inArray(match.state, ['LOBBY', 'ROLLING', 'PICKING', 'PLAYING'])
|
||||
});
|
||||
|
||||
// Counts
|
||||
const [matchCount] = await db.select({ count: count() }).from(match);
|
||||
const [teamCount] = await db.select({ count: count() }).from(team);
|
||||
const [poolCount] = await db.select({ count: count() }).from(mappool);
|
||||
@@ -30,6 +36,7 @@ export const load: PageServerLoad = async ({ locals }) => {
|
||||
.where(eq(match.state, 'FINISHED'));
|
||||
|
||||
return {
|
||||
authenticated: true as const,
|
||||
recentMatches,
|
||||
liveMatches,
|
||||
stats: {
|
||||
|
||||
@@ -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}
|
||||
|
||||
61
src/routes/(app)/admin/+page.server.ts
Normal file
61
src/routes/(app)/admin/+page.server.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
// src/routes/(app)/admin/+page.server.ts
|
||||
import { db } from '$lib/server/db';
|
||||
import { user } from '$lib/server/db/auth.schema';
|
||||
import { playerRating } from '$lib/server/db/schema';
|
||||
import { eq, desc } from 'drizzle-orm';
|
||||
import { redirect, error } from '@sveltejs/kit';
|
||||
import { requireRole, setUserRole } from '$lib/server/permissions';
|
||||
import type { PageServerLoad, Actions } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async ({ locals }) => {
|
||||
requireRole(locals, 'admin');
|
||||
|
||||
const users = await db.query.user.findMany({
|
||||
orderBy: desc(user.createdAt)
|
||||
});
|
||||
|
||||
// Fetch ratings for all users
|
||||
const usersWithRatings = await Promise.all(
|
||||
users.map(async (u) => {
|
||||
const rating = await db.query.playerRating.findFirst({
|
||||
where: eq(playerRating.userId, u.id)
|
||||
});
|
||||
return {
|
||||
id: u.id,
|
||||
name: u.name,
|
||||
email: u.email,
|
||||
image: u.image,
|
||||
role: u.role ?? 'player',
|
||||
createdAt: u.createdAt,
|
||||
elo: rating?.elo ?? 1000,
|
||||
wins: rating?.wins ?? 0,
|
||||
losses: rating?.losses ?? 0
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
return { users: usersWithRatings };
|
||||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
setRole: async ({ request, locals }) => {
|
||||
requireRole(locals, 'admin');
|
||||
|
||||
const form = await request.formData();
|
||||
const userId = form.get('userId')?.toString();
|
||||
const role = form.get('role')?.toString();
|
||||
|
||||
if (!userId || !role) return { error: 'User ID and role are required' };
|
||||
if (!['player', 'referee', 'admin'].includes(role)) {
|
||||
return { error: 'Invalid role' };
|
||||
}
|
||||
|
||||
// Prevent demoting yourself
|
||||
if (userId === locals.user!.id && role !== 'admin') {
|
||||
return { error: "You can't demote yourself" };
|
||||
}
|
||||
|
||||
await setUserRole(userId, role as any);
|
||||
return { success: true };
|
||||
}
|
||||
};
|
||||
103
src/routes/(app)/admin/+page.svelte
Normal file
103
src/routes/(app)/admin/+page.svelte
Normal file
@@ -0,0 +1,103 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
let actionError = $state('');
|
||||
|
||||
const roleBadge: Record<string, { label: string; color: string }> = {
|
||||
player: { label: 'Player', color: 'bg-surface-600 text-text-secondary border-border' },
|
||||
referee: {
|
||||
label: 'Referee',
|
||||
color: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'
|
||||
},
|
||||
admin: { label: 'Admin', color: 'bg-red-500/20 text-red-400 border-red-500/30' }
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-4xl">
|
||||
<div>
|
||||
<h1 class="text-2xl font-700 tracking-tight">Admin Panel</h1>
|
||||
<p class="mt-1 text-sm text-text-secondary">
|
||||
{data.users.length} registered user{data.users.length !== 1 ? 's' : ''}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if actionError}
|
||||
<p class="mt-3 text-sm text-red-400">{actionError}</p>
|
||||
{/if}
|
||||
|
||||
<!-- Users Table -->
|
||||
<div class="mt-6 rounded-lg border border-border bg-surface-800">
|
||||
<div class="grid grid-cols-[auto_1fr_auto_auto_auto] gap-4 border-b border-border px-4 py-3">
|
||||
<span class="text-xs font-600 text-text-secondary">Avatar</span>
|
||||
<span class="text-xs font-600 text-text-secondary">User</span>
|
||||
<span class="text-xs font-600 text-text-secondary">ELO</span>
|
||||
<span class="text-xs font-600 text-text-secondary">W/L</span>
|
||||
<span class="text-xs font-600 text-text-secondary">Role</span>
|
||||
</div>
|
||||
|
||||
{#each data.users as u}
|
||||
{@const badge = roleBadge[u.role] ?? roleBadge.player}
|
||||
<div
|
||||
class="grid grid-cols-[auto_1fr_auto_auto_auto] items-center gap-4 border-b border-border/50 px-4 py-3 last:border-b-0"
|
||||
>
|
||||
<!-- Avatar -->
|
||||
{#if u.image}
|
||||
<img src={u.image} alt="" class="h-8 w-8 rounded-full" />
|
||||
{:else}
|
||||
<div
|
||||
class="flex h-8 w-8 items-center justify-center rounded-full bg-surface-600 text-xs font-700 text-text-secondary"
|
||||
>
|
||||
{u.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Name -->
|
||||
<div class="min-w-0">
|
||||
<p class="truncate text-sm font-500">{u.name}</p>
|
||||
<p class="truncate text-xs text-text-secondary">{u.email}</p>
|
||||
</div>
|
||||
|
||||
<!-- ELO -->
|
||||
<span class="text-sm font-600 tabular-nums text-text-primary">{u.elo}</span>
|
||||
|
||||
<!-- W/L -->
|
||||
<span class="text-xs tabular-nums text-text-secondary">
|
||||
<span class="text-green-400">{u.wins}W</span> /
|
||||
<span class="text-red-400">{u.losses}L</span>
|
||||
</span>
|
||||
|
||||
<!-- Role selector -->
|
||||
<form
|
||||
method="post"
|
||||
action="?/setRole"
|
||||
use:enhance={() => {
|
||||
actionError = '';
|
||||
return async ({ result }) => {
|
||||
if (
|
||||
result.type === 'failure' ||
|
||||
(result.type === 'success' && (result.data as any)?.error)
|
||||
) {
|
||||
actionError = (result.data as any)?.error ?? 'Failed to update role';
|
||||
}
|
||||
};
|
||||
}}
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<input type="hidden" name="userId" value={u.id} />
|
||||
<select
|
||||
name="role"
|
||||
value={u.role}
|
||||
onchange={(e) => e.currentTarget.form?.requestSubmit()}
|
||||
class="rounded-md border px-2 py-1 text-xs font-500 {badge.color} cursor-pointer bg-transparent focus:outline-none"
|
||||
>
|
||||
<option value="player" class="bg-surface-800 text-text-primary">Player</option>
|
||||
<option value="referee" class="bg-surface-800 text-text-primary">Referee</option>
|
||||
<option value="admin" class="bg-surface-800 text-text-primary">Admin</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,9 +67,11 @@
|
||||
action="?/createMatch"
|
||||
use:enhance={() => {
|
||||
createError = '';
|
||||
return async ({ result }) => {
|
||||
return async ({ result, update }) => {
|
||||
if (result.type === 'failure' || (result.type === 'success' && (result.data as any)?.error)) {
|
||||
createError = (result.data as any)?.error ?? 'Failed to create match';
|
||||
} else {
|
||||
await update();
|
||||
}
|
||||
};
|
||||
}}
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
import { user } from '$lib/server/db/schema';
|
||||
import { db } from '$lib/server/db';
|
||||
import { getMatchFull, submitRoll, pickMap, cancelMatch } from '$lib/server/match/engine';
|
||||
import { playPickedMap, closeLobby, forceStartGame } from '$lib/server/match/orchestrator';
|
||||
import { getLobby } from '$lib/server/bancho/client';
|
||||
import { error, redirect } from '@sveltejs/kit';
|
||||
import { getBeatmap } from '$lib/server/osu/api';
|
||||
import type { PageServerLoad, Actions } from './$types';
|
||||
import { eq } from 'drizzle-orm';
|
||||
|
||||
|
||||
export const load: PageServerLoad = async ({ params, locals }) => {
|
||||
if (!locals.user) redirect(302, '/');
|
||||
@@ -41,6 +45,28 @@ export const load: PageServerLoad = async ({ params, locals }) => {
|
||||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
reinvite: async ({ params, locals }) => {
|
||||
if (!locals.user) redirect(302, '/');
|
||||
|
||||
const lobby = getLobby(params.id);
|
||||
if (!lobby) return { error: 'No active IRC lobby for this match' };
|
||||
|
||||
const m = await getMatchFull(params.id);
|
||||
|
||||
const invited: string[] = [];
|
||||
for (const p of m.participants) {
|
||||
for (const pl of p.players) {
|
||||
const u = await db.query.user.findFirst({ where: eq(user.id, pl.userId) });
|
||||
if (u?.name) {
|
||||
await lobby.invite(u.name);
|
||||
invited.push(u.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { reinvited: invited };
|
||||
},
|
||||
|
||||
roll: async ({ params, locals }) => {
|
||||
if (!locals.user) redirect(302, '/');
|
||||
|
||||
|
||||
@@ -136,6 +136,27 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Re-invite players -->
|
||||
{#if ['LOBBY', 'ROLLING', 'PICKING', 'PLAYING'].includes(m.state)}
|
||||
<div class="mt-3 flex justify-center">
|
||||
<form method="post" action="?/reinvite" use:enhance={() => {
|
||||
return async ({ result, update }) => {
|
||||
if (result.type === 'success' && (result.data as any)?.reinvited) {
|
||||
// Brief visual feedback — just reload
|
||||
await update();
|
||||
}
|
||||
};
|
||||
}}>
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded-md border border-border px-3 py-1.5 text-xs text-text-secondary transition-colors hover:border-accent/40 hover:text-accent"
|
||||
>
|
||||
📨 Re-invite players to lobby
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- ROLLING MODAL -->
|
||||
{#if m.state === 'ROLLING'}
|
||||
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
|
||||
|
||||
46
src/routes/(app)/settings/+page.server.ts
Normal file
46
src/routes/(app)/settings/+page.server.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
// src/routes/(app)/settings/+page.server.ts
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { auth } from '$lib/server/auth';
|
||||
import { db } from '$lib/server/db';
|
||||
import { playerRating } from '$lib/server/db/schema';
|
||||
import { account } from '$lib/server/db/auth.schema';
|
||||
import { eq, and } from 'drizzle-orm';
|
||||
import type { PageServerLoad, Actions } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async ({ locals }) => {
|
||||
if (!locals.user) redirect(302, '/');
|
||||
|
||||
// Get player rating
|
||||
const rating = await db.query.playerRating.findFirst({
|
||||
where: eq(playerRating.userId, locals.user.id)
|
||||
});
|
||||
|
||||
// Get linked osu! account info
|
||||
const osuAccount = await db.query.account.findFirst({
|
||||
where: and(eq(account.userId, locals.user.id), eq(account.providerId, 'osu'))
|
||||
});
|
||||
|
||||
return {
|
||||
profile: {
|
||||
id: locals.user.id,
|
||||
name: locals.user.name,
|
||||
email: locals.user.email,
|
||||
image: locals.user.image,
|
||||
role: locals.user.role ?? 'player',
|
||||
createdAt: locals.user.createdAt
|
||||
},
|
||||
rating: rating
|
||||
? { elo: rating.elo, wins: rating.wins, losses: rating.losses }
|
||||
: { elo: 1000, wins: 0, losses: 0 },
|
||||
hasOsuLinked: !!osuAccount
|
||||
};
|
||||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
logout: async (event) => {
|
||||
await auth.api.signOut({
|
||||
headers: event.request.headers
|
||||
});
|
||||
redirect(302, '/');
|
||||
}
|
||||
};
|
||||
114
src/routes/(app)/settings/+page.svelte
Normal file
114
src/routes/(app)/settings/+page.svelte
Normal file
@@ -0,0 +1,114 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
const roleBadge: Record<string, { label: string; color: string }> = {
|
||||
player: { label: 'Player', color: 'bg-surface-600 text-text-secondary' },
|
||||
referee: { label: 'Referee', color: 'bg-yellow-500/20 text-yellow-400' },
|
||||
admin: { label: 'Admin', color: 'bg-red-500/20 text-red-400' }
|
||||
};
|
||||
|
||||
const badge = $derived(roleBadge[data.profile.role] ?? roleBadge.player);
|
||||
|
||||
const winRate = $derived(
|
||||
data.rating.wins + data.rating.losses > 0
|
||||
? ((data.rating.wins / (data.rating.wins + data.rating.losses)) * 100).toFixed(1)
|
||||
: '—'
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<h1 class="text-2xl font-700 tracking-tight">Settings</h1>
|
||||
<p class="mt-1 text-sm text-text-secondary">Your profile and account settings</p>
|
||||
|
||||
<!-- Profile Card -->
|
||||
<div class="mt-6 rounded-lg border border-border bg-surface-800 p-6">
|
||||
<div class="flex items-center gap-4">
|
||||
{#if data.profile.image}
|
||||
<img src={data.profile.image} alt={data.profile.name} class="h-16 w-16 rounded-full" />
|
||||
{:else}
|
||||
<div
|
||||
class="flex h-16 w-16 items-center justify-center rounded-full bg-surface-600 text-xl font-700 text-text-secondary"
|
||||
>
|
||||
{data.profile.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="text-lg font-700">{data.profile.name}</h2>
|
||||
<span class="rounded px-2 py-0.5 text-xs font-600 {badge.color}">
|
||||
{badge.label}
|
||||
</span>
|
||||
</div>
|
||||
<p class="mt-0.5 text-sm text-text-secondary">{data.profile.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Connected Accounts -->
|
||||
<div class="mt-6 border-t border-border pt-4">
|
||||
<h3 class="text-xs font-600 text-text-secondary uppercase tracking-wider">Connected Accounts</h3>
|
||||
<div class="mt-3 flex items-center gap-3 rounded-md bg-surface-700 px-4 py-3">
|
||||
<span class="text-lg">🎮</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-500">osu!</p>
|
||||
<p class="text-xs text-text-secondary">
|
||||
{#if data.hasOsuLinked}
|
||||
Connected as {data.profile.name}
|
||||
{:else}
|
||||
Not connected
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
{#if data.hasOsuLinked}
|
||||
<span class="rounded bg-green-500/20 px-2 py-0.5 text-xs font-500 text-green-400">Linked</span>
|
||||
{:else}
|
||||
<a
|
||||
href="/api/auth/osu/login"
|
||||
class="rounded bg-accent px-3 py-1 text-xs font-600 text-surface-900 hover:bg-accent-hover"
|
||||
>
|
||||
Connect
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Card -->
|
||||
<div class="mt-4 rounded-lg border border-border bg-surface-800 p-6">
|
||||
<h3 class="text-xs font-600 text-text-secondary uppercase tracking-wider">Ranked Stats</h3>
|
||||
<div class="mt-4 grid grid-cols-4 gap-4">
|
||||
<div>
|
||||
<p class="text-2xl font-800 tabular-nums text-accent">{data.rating.elo}</p>
|
||||
<p class="mt-1 text-xs text-text-secondary">ELO Rating</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-800 tabular-nums text-green-400">{data.rating.wins}</p>
|
||||
<p class="mt-1 text-xs text-text-secondary">Wins</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-800 tabular-nums text-red-400">{data.rating.losses}</p>
|
||||
<p class="mt-1 text-xs text-text-secondary">Losses</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-800 tabular-nums text-text-primary">{winRate}{winRate !== '—' ? '%' : ''}</p>
|
||||
<p class="mt-1 text-xs text-text-secondary">Win Rate</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Danger Zone -->
|
||||
<div class="mt-4 rounded-lg border border-border bg-surface-800 p-6">
|
||||
<h3 class="text-xs font-600 text-red-400 uppercase tracking-wider">Account</h3>
|
||||
<div class="mt-4">
|
||||
<form method="post" action="?/logout" use:enhance>
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded-md border border-red-500/30 px-4 py-2 text-sm font-500 text-red-400 transition-colors hover:bg-red-500/10"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user