quick ui cleanup
This commit is contained in:
parent
af4dbdea91
commit
be9470d669
3 changed files with 74 additions and 81 deletions
|
|
@ -20,17 +20,19 @@
|
|||
const tournaments = $derived(() => sortTournaments(tournamentList));
|
||||
|
||||
function upsertTournament(tournament: TournamentInfo) {
|
||||
const index = tournamentList.findIndex((item) => item.id === tournament.id);
|
||||
const index = tournamentList.findIndex((item: { id: number }) => item.id === tournament.id);
|
||||
if (index >= 0) {
|
||||
tournamentList = tournamentList.map((item, idx) => (idx === index ? tournament : item));
|
||||
tournamentList = tournamentList.map((item: any, idx: any) =>
|
||||
idx === index ? tournament : item
|
||||
);
|
||||
return;
|
||||
}
|
||||
tournamentList = [...tournamentList, tournament];
|
||||
}
|
||||
|
||||
function removeTournament(id: number) {
|
||||
if (!tournamentList.some((item) => item.id === id)) return;
|
||||
tournamentList = tournamentList.filter((item) => item.id !== id);
|
||||
if (!tournamentList.some((item: { id: number }) => item.id === id)) return;
|
||||
tournamentList = tournamentList.filter((item: { id: number }) => item.id !== id);
|
||||
}
|
||||
|
||||
function formatDate(value: string | null) {
|
||||
|
|
@ -63,10 +65,10 @@
|
|||
return `${count} ${count === 1 ? 'spelare' : 'spelare'}`;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const stop = listenToTournamentEvents(upsertTournament, removeTournament, {
|
||||
endpoint: '/api/public-events'
|
||||
});
|
||||
onMount(() => {
|
||||
const stop = listenToTournamentEvents(upsertTournament, removeTournament, {
|
||||
endpoint: '/api/public-events'
|
||||
});
|
||||
return () => {
|
||||
stop();
|
||||
};
|
||||
|
|
@ -80,66 +82,59 @@ onMount(() => {
|
|||
<div class="min-h-screen bg-slate-950 text-slate-100">
|
||||
<div class="mx-auto max-w-6xl space-y-12 px-4 py-16 sm:py-20">
|
||||
<header class="space-y-3 text-center">
|
||||
<p class="text-xs uppercase tracking-[0.4em] text-indigo-300">VBytes LAN</p>
|
||||
<p class="text-xs tracking-[0.4em] text-indigo-300 uppercase">VBytes LAN</p>
|
||||
<h1 class="text-4xl font-bold sm:text-5xl">Turneringar</h1>
|
||||
<p class="mx-auto max-w-2xl text-base text-slate-300">
|
||||
Samla laget, följ brackets i realtid och håll koll på allt som händer under turneringarna.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{#if tournaments().length > 0}
|
||||
<div class="flex flex-wrap justify-center gap-8">
|
||||
{#each tournaments() as tournament}
|
||||
<article class="group w-full max-w-md flex flex-col rounded-3xl border border-slate-800 bg-gradient-to-br from-slate-900/80 via-slate-900/70 to-slate-900/50 p-8 shadow-xl transition duration-200 hover:-translate-y-1 hover:border-indigo-400/70 hover:shadow-indigo-500/25">
|
||||
<div class="flex items-center justify-between gap-3 text-xs uppercase tracking-wide">
|
||||
<span class="font-semibold text-indigo-200">{tournament.game}</span>
|
||||
<span class="rounded-full border border-slate-700 px-3 py-1 text-[0.7rem] font-semibold text-slate-300">
|
||||
{registrationSummary(tournament)}
|
||||
</span>
|
||||
</div>
|
||||
<h2 class="mt-4 text-3xl font-semibold text-slate-50">{tournament.title}</h2>
|
||||
{#if tournament.tagline}
|
||||
<p class="mt-3 text-base text-slate-300">{tournament.tagline}</p>
|
||||
{:else if tournament.description}
|
||||
<p class="mt-3 text-base text-slate-400">{tournament.description}</p>
|
||||
{/if}
|
||||
<dl class="mt-6 space-y-3 text-sm text-slate-300">
|
||||
{#if tournament.start_at}
|
||||
<div class="flex items-center gap-3 text-[0.95rem]">
|
||||
<span class="text-indigo-200">Start:</span>
|
||||
<span>{formatDate(tournament.start_at) ?? tournament.start_at}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if tournament.location}
|
||||
<div class="flex items-center gap-3 text-[0.95rem]">
|
||||
<span class="text-indigo-200">Plats:</span>
|
||||
<span>{tournament.location}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if tournament.contact}
|
||||
<div class="flex items-center gap-3 text-[0.95rem]">
|
||||
<span class="text-indigo-200">Kontakt:</span>
|
||||
<span>{tournament.contact}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</dl>
|
||||
<div class="mt-auto pt-8">
|
||||
{#if tournament.slug}
|
||||
<a
|
||||
href={`/tournament/${tournament.slug}`}
|
||||
class="inline-flex items-center justify-center rounded-full bg-indigo-500 px-5 py-2 text-sm font-semibold uppercase tracking-wide text-white transition hover:bg-indigo-600"
|
||||
<a href={`/tournament/${tournament.slug}`}>
|
||||
<article
|
||||
class="group flex w-full max-w-md flex-col rounded-3xl border border-slate-800 bg-gradient-to-br from-slate-900/80 via-slate-900/70 to-slate-900/50 p-8 shadow-xl transition duration-200 hover:-translate-y-1 hover:border-indigo-400/70 hover:shadow-indigo-500/25"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-3 text-xs tracking-wide uppercase">
|
||||
<span class="font-semibold text-indigo-200">{tournament.game}</span>
|
||||
<span
|
||||
class="rounded-full border border-slate-700 px-3 py-1 text-[0.7rem] font-semibold text-slate-300"
|
||||
>
|
||||
Visa turnering
|
||||
</a>
|
||||
{:else}
|
||||
<span class="text-xs text-slate-500">Ingen publik sida tillgänglig.</span>
|
||||
{registrationSummary(tournament)}
|
||||
</span>
|
||||
</div>
|
||||
<h2 class="mt-4 text-3xl font-semibold text-slate-50">{tournament.title}</h2>
|
||||
{#if tournament.tagline}
|
||||
<p class="mt-3 text-base text-slate-300">{tournament.tagline}</p>
|
||||
{:else if tournament.description}
|
||||
<p class="mt-3 text-base text-slate-400">{tournament.description}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</article>
|
||||
<dl class="mt-6 space-y-3 text-sm text-slate-300">
|
||||
{#if tournament.start_at}
|
||||
<div class="flex items-center gap-3 text-[0.95rem]">
|
||||
<span class="text-indigo-200">Start:</span>
|
||||
<span>{formatDate(tournament.start_at) ?? tournament.start_at}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if tournament.location}
|
||||
<div class="flex items-center gap-3 text-[0.95rem]">
|
||||
<span class="text-indigo-200">Plats:</span>
|
||||
<span>{tournament.location}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if tournament.contact}
|
||||
<div class="flex items-center gap-3 text-[0.95rem]">
|
||||
<span class="text-indigo-200">Kontakt:</span>
|
||||
<span>{tournament.contact}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</dl>
|
||||
</article>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<p class="rounded-2xl border border-dashed border-slate-700 bg-slate-900/40 px-6 py-12 text-center text-sm text-slate-400">
|
||||
<p
|
||||
class="rounded-2xl border border-dashed border-slate-700 bg-slate-900/40 px-6 py-12 text-center text-sm text-slate-400"
|
||||
>
|
||||
Inga turneringar är publicerade ännu. Kom tillbaka senare!
|
||||
</p>
|
||||
{/if}
|
||||
|
|
@ -147,7 +142,7 @@ onMount(() => {
|
|||
<div class="text-center">
|
||||
<a
|
||||
href="/admin"
|
||||
class="inline-flex items-center justify-center rounded-full bg-indigo-500 px-6 py-3 text-sm font-semibold uppercase tracking-wide text-white transition hover:bg-indigo-600"
|
||||
class="inline-flex items-center justify-center rounded-full bg-indigo-500 px-6 py-3 text-sm font-semibold tracking-wide text-white uppercase transition hover:bg-indigo-600"
|
||||
>
|
||||
Till admin
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -418,11 +418,6 @@
|
|||
Anmälan bekräftad
|
||||
</h2>
|
||||
<p class="text-sm text-slate-300">Du är registrerad till {tournament.title}.</p>
|
||||
{#if signup.successRegistrationId}
|
||||
<p class="text-xs tracking-wide text-indigo-200 uppercase">
|
||||
Anmälan #{signup.successRegistrationId}
|
||||
</p>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<section
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
<script lang="ts">
|
||||
import type {
|
||||
TournamentRegistrationDetail,
|
||||
TournamentSignupField
|
||||
} from '$lib/types';
|
||||
import type { TournamentRegistrationDetail, TournamentSignupField } from '$lib/types';
|
||||
|
||||
const props = $props<{ data: TournamentRegistrationDetail }>();
|
||||
const { tournament, registration } = props.data;
|
||||
|
|
@ -39,18 +36,20 @@
|
|||
<div class="min-h-screen bg-slate-950 text-slate-100">
|
||||
<div class="mx-auto flex min-h-screen max-w-4xl flex-col gap-8 px-4 py-12">
|
||||
<header class="space-y-4 rounded-2xl bg-slate-900/70 p-6 text-center shadow-lg">
|
||||
<p class="text-xs uppercase tracking-[0.4em] text-indigo-300">VBytes LAN</p>
|
||||
<p class="text-xs tracking-[0.4em] text-indigo-300 uppercase">VBytes LAN</p>
|
||||
<h1 class="text-3xl font-bold sm:text-4xl">Anmälan bekräftad</h1>
|
||||
<p class="text-sm text-slate-300">Du är registrerad till {tournament.title}.</p>
|
||||
<p class="text-xs uppercase tracking-wide text-indigo-200">
|
||||
Skapad {formatDateTime(registration.created_at) ?? registration.created_at}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section class="grid gap-4 rounded-2xl border border-slate-800 bg-slate-900/60 p-6 md:grid-cols-2">
|
||||
<section
|
||||
class="grid gap-4 rounded-2xl border border-slate-800 bg-slate-900/60 p-6 md:grid-cols-2"
|
||||
>
|
||||
<div class="space-y-3">
|
||||
<h2 class="text-lg font-semibold text-slate-100">Turnering</h2>
|
||||
<p class="text-sm text-slate-300"><span class="font-medium text-slate-100">Spel:</span> {tournament.game}</p>
|
||||
<p class="text-sm text-slate-300">
|
||||
<span class="font-medium text-slate-100">Spel:</span>
|
||||
{tournament.game}
|
||||
</p>
|
||||
{#if tournament.start_at}
|
||||
<p class="text-sm text-slate-300">
|
||||
<span class="font-medium text-slate-100">Start:</span>
|
||||
|
|
@ -59,7 +58,8 @@
|
|||
{/if}
|
||||
{#if tournament.location}
|
||||
<p class="text-sm text-slate-300">
|
||||
<span class="font-medium text-slate-100">Plats:</span> {tournament.location}
|
||||
<span class="font-medium text-slate-100">Plats:</span>
|
||||
{tournament.location}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -75,7 +75,8 @@
|
|||
{/if}
|
||||
{#if tournament.contact}
|
||||
<p class="text-sm text-slate-300">
|
||||
<span class="font-medium text-slate-100">Kontakt:</span> {tournament.contact}
|
||||
<span class="font-medium text-slate-100">Kontakt:</span>
|
||||
{tournament.contact}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -84,14 +85,16 @@
|
|||
<section class="space-y-4 rounded-2xl border border-slate-800 bg-slate-900/60 p-6">
|
||||
<h2 class="text-lg font-semibold text-slate-100">Anmälningsuppgifter</h2>
|
||||
{#if entryFields.length === 0}
|
||||
<p class="rounded-md border border-dashed border-slate-700 px-4 py-3 text-sm text-slate-300">
|
||||
<p
|
||||
class="rounded-md border border-dashed border-slate-700 px-4 py-3 text-sm text-slate-300"
|
||||
>
|
||||
Den här turneringen kräver inga uppgifter utöver spelare.
|
||||
</p>
|
||||
{:else}
|
||||
<div class="grid gap-3 md:grid-cols-2">
|
||||
{#each entryFields as field}
|
||||
<div class="rounded-md border border-slate-800 bg-slate-900 px-4 py-3">
|
||||
<p class="text-xs uppercase tracking-wide text-indigo-200">{field.label}</p>
|
||||
<p class="text-xs tracking-wide text-indigo-200 uppercase">{field.label}</p>
|
||||
<p class="mt-1 text-sm text-slate-100">{fieldValue(entryValues, field) || '—'}</p>
|
||||
</div>
|
||||
{/each}
|
||||
|
|
@ -113,7 +116,9 @@
|
|||
<div class="space-y-3">
|
||||
{#each participantValues as participant, index}
|
||||
<div class="rounded-md border border-slate-800 bg-slate-900 px-4 py-3">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-indigo-200">Spelare {index + 1}</p>
|
||||
<p class="text-xs font-semibold tracking-wide text-indigo-200 uppercase">
|
||||
Spelare {index + 1}
|
||||
</p>
|
||||
<ul class="mt-2 space-y-1 text-sm text-slate-100">
|
||||
{#each participantFields as field}
|
||||
<li>
|
||||
|
|
@ -129,9 +134,7 @@
|
|||
</section>
|
||||
|
||||
<footer class="mt-auto flex flex-col gap-3 text-center text-sm text-slate-400">
|
||||
<p>
|
||||
Behöver du uppdatera informationen? Kontakta arrangören eller skicka in en ny anmälan.
|
||||
</p>
|
||||
<p>Behöver du uppdatera informationen? Kontakta arrangören eller skicka in en ny anmälan.</p>
|
||||
<div class="flex flex-wrap justify-center gap-3">
|
||||
<a
|
||||
href="/"
|
||||
|
|
|
|||
Loading…
Reference in a new issue