feat: add time controls, correspondence games, and tournament mode
**Zeitmodi (Blitz/Rapid):** - 5, 10, 30 Min Zeitkontrolle bei Spielerstellung - Server-seitige Uhren: Zeit wird bei jedem Zug abgezogen - Timeout-Erkennung via claimTimeout Socket-Event - Schachuhr-Anzeige in GamePage (rot bei < 30s) - Turnierspiele erhalten automatisch Zeitkontrolle **Tagespartien (Correspondence):** - Neue DB-Tabelle correspondence_game - REST API: erstellen, beitreten, Zug machen, aufgeben - Seite /correspondence: Liste aktiver Tagespartien - Seite /correspondence/[code]: Spielen mit interaktivem Brett - Einladungslink teilen, Gegner tritt via Link bei **Turniermodus (Round-Robin):** - Neue DB-Tabellen: tournament, tournament_player, tournament_round - Round-Robin Paarungen mit Circle-Methode - Turnier erstellen: /tournament/create - Turnierliste: /tournament - Turnierseite /tournament/[code]: Standings, Runden, Spiele - Automatische Aktivisierung der nächsten Runde - Turnierspiele werden als normale activeGames erstellt - Ergebnisse aktualisieren Punkte automatisch Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Michess
211
client/src/app/tournament/[code]/page.tsx
Normal file
211
client/src/app/tournament/[code]/page.tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
"use client";
|
||||
|
||||
import { useSession } from "@/context/session";
|
||||
import { fetchTournament, joinTournament, startTournament } from "@/lib/tournament";
|
||||
import type { Tournament, TournamentRound } from "@michess/types";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
export default function TournamentDetailPage() {
|
||||
const { user } = useSession();
|
||||
const params = useParams();
|
||||
const code = params.code as string;
|
||||
|
||||
const [tournament, setTournament] = useState<Tournament | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [actionLoading, setActionLoading] = useState(false);
|
||||
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
async function load() {
|
||||
const t = await fetchTournament(code);
|
||||
setTournament(t);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
load().then(() => setLoading(false));
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [code]);
|
||||
|
||||
// Auto-refresh every 10 seconds when active
|
||||
useEffect(() => {
|
||||
if (tournament?.status === "active") {
|
||||
intervalRef.current = setInterval(load, 10000);
|
||||
}
|
||||
return () => {
|
||||
if (intervalRef.current) clearInterval(intervalRef.current);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [tournament?.status]);
|
||||
|
||||
async function handleJoin() {
|
||||
if (!user?.id) return;
|
||||
setActionLoading(true);
|
||||
const updated = await joinTournament(code);
|
||||
if (updated) setTournament(updated);
|
||||
setActionLoading(false);
|
||||
}
|
||||
|
||||
async function handleStart() {
|
||||
if (!user?.id) return;
|
||||
setActionLoading(true);
|
||||
const updated = await startTournament(code);
|
||||
if (updated) setTournament(updated);
|
||||
setActionLoading(false);
|
||||
}
|
||||
|
||||
function statusBadge(status: Tournament["status"]) {
|
||||
if (status === "waiting") return <span className="badge badge-warning">Wartet auf Spieler</span>;
|
||||
if (status === "active") return <span className="badge badge-success">Aktiv</span>;
|
||||
return <span className="badge badge-ghost">Beendet</span>;
|
||||
}
|
||||
|
||||
function resultLabel(r: TournamentRound) {
|
||||
if (!r.result) return <span className="opacity-40">–</span>;
|
||||
if (r.result === "draw") return <span className="badge badge-ghost badge-sm">Remis</span>;
|
||||
return (
|
||||
<span className="badge badge-success badge-sm">
|
||||
{r.result === "white" ? r.whiteName : r.blackName}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-center py-16">
|
||||
<span className="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!tournament) {
|
||||
return <div className="flex justify-center py-16 text-error">Turnier nicht gefunden.</div>;
|
||||
}
|
||||
|
||||
const isHost = tournament.hostId === user?.id;
|
||||
const isJoined = tournament.players?.some((p) => p.userId === user?.id);
|
||||
const canStart = isHost && tournament.status === "waiting" && (tournament.players?.length ?? 0) >= 2;
|
||||
|
||||
// Group rounds
|
||||
const rounds: Record<number, TournamentRound[]> = {};
|
||||
for (const r of tournament.rounds ?? []) {
|
||||
if (!rounds[r.round!]) rounds[r.round!] = [];
|
||||
rounds[r.round!].push(r);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 w-full max-w-2xl px-4 py-8">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">{tournament.name}</h1>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
{statusBadge(tournament.status)}
|
||||
{tournament.timeControl
|
||||
? <span className="text-sm opacity-60">{tournament.timeControl} Min/Spieler</span>
|
||||
: <span className="text-sm opacity-60">Keine Uhr</span>}
|
||||
{tournament.status === "active" && (
|
||||
<span className="text-sm opacity-60">Runde {tournament.currentRound}/{tournament.totalRounds}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{tournament.status === "waiting" && user?.id && !isJoined && (
|
||||
<button
|
||||
className={"btn btn-secondary btn-sm" + (actionLoading ? " loading" : "")}
|
||||
onClick={handleJoin}
|
||||
disabled={actionLoading}
|
||||
>
|
||||
Beitreten
|
||||
</button>
|
||||
)}
|
||||
{canStart && (
|
||||
<button
|
||||
className={"btn btn-primary btn-sm" + (actionLoading ? " loading" : "")}
|
||||
onClick={handleStart}
|
||||
disabled={actionLoading}
|
||||
>
|
||||
Turnier starten
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Standings */}
|
||||
<div className="card bg-base-200 shadow-sm">
|
||||
<div className="card-body py-3 px-4">
|
||||
<h2 className="font-bold text-lg mb-2">Tabelle</h2>
|
||||
{!tournament.players?.length ? (
|
||||
<p className="text-sm opacity-60">Noch keine Spieler.</p>
|
||||
) : (
|
||||
<table className="table table-sm w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Spieler</th>
|
||||
<th className="text-right">Punkte</th>
|
||||
<th className="text-right">Partien</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tournament.players.map((p, i) => (
|
||||
<tr key={p.userId} className={p.userId === user?.id ? "bg-base-300" : ""}>
|
||||
<td>{i + 1}</td>
|
||||
<td>{p.userName}</td>
|
||||
<td className="text-right font-mono">{p.score}</td>
|
||||
<td className="text-right opacity-60">{p.gamesPlayed}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rounds */}
|
||||
{Object.keys(rounds).length > 0 && (
|
||||
<div className="flex flex-col gap-4">
|
||||
{Object.entries(rounds).map(([roundNum, games]) => (
|
||||
<div key={roundNum} className="card bg-base-200 shadow-sm">
|
||||
<div className="card-body py-3 px-4">
|
||||
<h3 className="font-semibold mb-2">
|
||||
Runde {roundNum}
|
||||
{parseInt(roundNum) === tournament.currentRound && tournament.status === "active" && (
|
||||
<span className="badge badge-success badge-sm ml-2">Aktuell</span>
|
||||
)}
|
||||
</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
{games.map((g) => {
|
||||
const isMyGame = g.whiteId === user?.id || g.blackId === user?.id;
|
||||
return (
|
||||
<div key={g.id} className="flex items-center justify-between gap-2 text-sm">
|
||||
<span>
|
||||
<span className={g.whiteId === user?.id ? "font-bold" : ""}>{g.whiteName}</span>
|
||||
<span className="opacity-40 mx-2">vs</span>
|
||||
<span className={g.blackId === user?.id ? "font-bold" : ""}>{g.blackName}</span>
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{resultLabel(g)}
|
||||
{isMyGame && g.gameCode && !g.result && (
|
||||
<Link href={`/${g.gameCode}`} className="btn btn-xs btn-primary">
|
||||
Spielen
|
||||
</Link>
|
||||
)}
|
||||
{g.gameCode && g.result && (
|
||||
<Link href={`/${g.gameCode}`} className="btn btn-xs btn-ghost">
|
||||
Ansehen
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
107
client/src/app/tournament/create/page.tsx
Normal file
107
client/src/app/tournament/create/page.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
"use client";
|
||||
|
||||
import { useSession } from "@/context/session";
|
||||
import { createTournament } from "@/lib/tournament";
|
||||
import { useRouter } from "next/navigation";
|
||||
import type { FormEvent } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function CreateTournamentPage() {
|
||||
const { user } = useSession();
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function handleSubmit(e: FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
if (!user?.id) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const form = e.target as HTMLFormElement;
|
||||
const name = (form.elements.namedItem("name") as HTMLInputElement).value.trim();
|
||||
const timeControlVal = parseInt((form.elements.namedItem("timeControl") as HTMLSelectElement).value);
|
||||
const maxPlayers = parseInt((form.elements.namedItem("maxPlayers") as HTMLSelectElement).value);
|
||||
|
||||
if (!name) {
|
||||
setError("Bitte einen Namen eingeben.");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const tournament = await createTournament(name, timeControlVal > 0 ? timeControlVal : undefined, maxPlayers);
|
||||
if (tournament?.code) {
|
||||
router.push(`/tournament/${tournament.code}`);
|
||||
} else {
|
||||
setError("Turnier konnte nicht erstellt werden.");
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (!user?.id) {
|
||||
return (
|
||||
<div className="flex flex-col items-center py-16 gap-4">
|
||||
<p className="text-lg">Bitte einloggen um ein Turnier zu erstellen.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 w-full max-w-md px-4 py-8">
|
||||
<h1 className="text-2xl font-bold">Turnier erstellen</h1>
|
||||
|
||||
<form className="card bg-base-200 shadow" onSubmit={handleSubmit}>
|
||||
<div className="card-body gap-4">
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text">Name</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
className="input input-bordered"
|
||||
placeholder="z.B. MiChess Open 2026"
|
||||
maxLength={128}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text">Bedenkzeit</span>
|
||||
</label>
|
||||
<select name="timeControl" className="select select-bordered">
|
||||
<option value="0">Keine Uhr</option>
|
||||
<option value="5">5 Min (Blitz)</option>
|
||||
<option value="10">10 Min (Blitz)</option>
|
||||
<option value="30">30 Min (Rapid)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text">Max. Spieler</span>
|
||||
</label>
|
||||
<select name="maxPlayers" className="select select-bordered" defaultValue="8">
|
||||
<option value="4">4</option>
|
||||
<option value="6">6</option>
|
||||
<option value="8">8</option>
|
||||
<option value="12">12</option>
|
||||
<option value="16">16</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{error && <div className="alert alert-error text-sm">{error}</div>}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className={"btn btn-primary" + (loading ? " loading" : "")}
|
||||
disabled={loading}
|
||||
>
|
||||
Erstellen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
97
client/src/app/tournament/page.tsx
Normal file
97
client/src/app/tournament/page.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
"use client";
|
||||
|
||||
import { useSession } from "@/context/session";
|
||||
import { fetchTournaments, joinTournament } from "@/lib/tournament";
|
||||
import type { Tournament } from "@michess/types";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function TournamentPage() {
|
||||
const { user } = useSession();
|
||||
const [tournaments, setTournaments] = useState<Tournament[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [joiningCode, setJoiningCode] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTournaments().then((t) => {
|
||||
setTournaments(t);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
async function handleJoin(code: string) {
|
||||
if (!user?.id) return;
|
||||
setJoiningCode(code);
|
||||
const updated = await joinTournament(code);
|
||||
if (updated) {
|
||||
setTournaments((prev) => prev.map((t) => (t.code === code ? updated : t)));
|
||||
}
|
||||
setJoiningCode(null);
|
||||
}
|
||||
|
||||
function statusBadge(status: Tournament["status"]) {
|
||||
if (status === "waiting") return <span className="badge badge-warning badge-sm">Wartet</span>;
|
||||
if (status === "active") return <span className="badge badge-success badge-sm">Aktiv</span>;
|
||||
return <span className="badge badge-ghost badge-sm">Beendet</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 w-full max-w-2xl px-4 py-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold">Turniere</h1>
|
||||
{user?.id && (
|
||||
<Link href="/tournament/create" className="btn btn-primary btn-sm">
|
||||
Turnier erstellen
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<span className="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
) : tournaments.length === 0 ? (
|
||||
<div className="text-center opacity-60 py-8">Keine aktiven Turniere.</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-3">
|
||||
{tournaments.map((t) => {
|
||||
const isJoined = t.players?.some((p) => p.userId === user?.id);
|
||||
return (
|
||||
<div key={t.code} className="card bg-base-200 shadow-sm">
|
||||
<div className="card-body py-3 px-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-bold">{t.name}</span>
|
||||
{statusBadge(t.status)}
|
||||
</div>
|
||||
<div className="text-xs opacity-60">
|
||||
{t.players?.length ?? 0}/{t.maxPlayers} Spieler
|
||||
{t.timeControl ? ` · ${t.timeControl} Min` : " · Keine Uhr"}
|
||||
{t.status === "active" ? ` · Runde ${t.currentRound}/${t.totalRounds}` : ""}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{t.status === "waiting" && user?.id && !isJoined && (
|
||||
<button
|
||||
className={"btn btn-sm btn-secondary" + (joiningCode === t.code ? " loading" : "")}
|
||||
onClick={() => handleJoin(t.code!)}
|
||||
disabled={joiningCode === t.code}
|
||||
>
|
||||
Beitreten
|
||||
</button>
|
||||
)}
|
||||
<Link href={`/tournament/${t.code}`} className="btn btn-sm btn-outline">
|
||||
Details
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user