+ );
+}
+
+/** games of older tournaments that were played before groups and the bracket existed */
+function PlainGames({ games, empty }: { games: GameData[]; empty: string }) {
+ if (games.length === 0) {
+ return (
+
+ Qualification is not finished: {qualProgress.left} match
+ {qualProgress.left === 1 ? "" : "es"} left. Only the places decided
+ so far ({qualProgress.bracket.places.length} of {seeding.length})
+ will be saved, and no bonuses are granted.
+
+ )}
+
+
+
+
+
+
+ );
+}
+
+/** deletes a tournament created by mistake; the server refuses once a game is finished */
+export function DeleteTourButton({
+ tour,
+ onDeleted,
+}: {
+ tour: { id: string; name: string };
+ onDeleted: () => void;
+}) {
+ const { showError, showConfirm } = useToast();
+ const { mutateAsync: deleteTour, isPending } = $tabletennis.useMutation(
+ "post",
+ "/delete-tour",
+ { onError: (e) => showError("Error", formatApiErrorMessage(e)) },
+ );
+
+ async function handleDelete() {
+ const ok = await showConfirm({
+ title: "Delete tournament",
+ message: `Delete ${tour.name}? No game has been played yet, so no rating changes. This cannot be undone.`,
+ confirmText: "Delete",
+ cancelText: "Keep",
+ type: "warning",
+ });
+ if (!ok) return;
+ try {
+ await deleteTour({ params: { query: { tour_id: tour.id } } });
+ onDeleted();
+ } catch {
+ // toast shown by onError
+ }
+ }
+
+ return (
+
+ );
+}
diff --git a/src/components/tabletennis/MergeGuestModal.tsx b/src/components/tabletennis/MergeGuestModal.tsx
new file mode 100644
index 00000000..dd19ba78
--- /dev/null
+++ b/src/components/tabletennis/MergeGuestModal.tsx
@@ -0,0 +1,150 @@
+import { useMemo, useState } from "react";
+import { $tabletennis, tabletennisTypes } from "@/api/tabletennis";
+import { formatApiErrorMessage } from "@/api/helpers/create-query-client";
+import { Modal } from "@/components/common/Modal.tsx";
+import { useToast } from "@/components/toast";
+import { useTabletennisRefresh } from "./useTabletennisRefresh";
+
+type SchemaPlayer = tabletennisTypes.SchemaPlayer;
+
+/** Hands a guest over to a registered player: by a picked nickname or by email */
+export function MergeGuestModal({
+ open,
+ onOpenChange,
+ guest,
+}: {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ guest: SchemaPlayer;
+}) {
+ const [query, setQuery] = useState("");
+ const [picked, setPicked] = useState(null);
+ const refresh = useTabletennisRefresh();
+ const { showSuccess, showError } = useToast();
+
+ const { data } = $tabletennis.useQuery("get", "/players");
+ const registered = useMemo(
+ () =>
+ (
+ (data as unknown as { players?: SchemaPlayer[] } | undefined)
+ ?.players ?? []
+ ).filter((p) => !p.placeholder),
+ [data],
+ );
+
+ const isEmail = query.includes("@");
+ const suggestions = useMemo(() => {
+ const lower = query.trim().toLowerCase();
+ if (!lower || isEmail || picked) return [];
+ return registered
+ .filter((p) => p.nickname.toLowerCase().includes(lower))
+ .slice(0, 8);
+ }, [registered, query, isEmail, picked]);
+
+ const { mutate, isPending } = $tabletennis.useMutation(
+ "post",
+ "/merge-guest",
+ {
+ onSuccess: (res) => {
+ const tours = (res as { tournaments?: number }).tournaments ?? 0;
+ showSuccess(
+ "Guest linked",
+ `${guest.nickname} → ${picked?.nickname ?? query.trim()}, ${tours} tournament${tours === 1 ? "" : "s"} moved`,
+ );
+ refresh();
+ handleOpenChange(false);
+ },
+ onError: (e) => showError("Error", formatApiErrorMessage(e)),
+ },
+ );
+
+ function handleOpenChange(value: boolean) {
+ if (!value) {
+ setQuery("");
+ setPicked(null);
+ }
+ onOpenChange(value);
+ }
+
+ function handleSubmit(e: React.FormEvent) {
+ e.preventDefault();
+ const target = picked
+ ? { player_id: picked.innohassle_id }
+ : isEmail
+ ? { email: query.trim() }
+ : null;
+ if (!target) return;
+ mutate({ params: { query: { guest_id: guest.innohassle_id, ...target } } });
+ }
+
+ return (
+
+
+
+ );
+}
diff --git a/src/components/tabletennis/PlayerActionMenu.tsx b/src/components/tabletennis/PlayerActionMenu.tsx
index 31e85bd0..9d5fd925 100644
--- a/src/components/tabletennis/PlayerActionMenu.tsx
+++ b/src/components/tabletennis/PlayerActionMenu.tsx
@@ -1,4 +1,16 @@
import { useState } from "react";
+import {
+ autoUpdate,
+ flip,
+ FloatingPortal,
+ offset,
+ shift,
+ useClick,
+ useDismiss,
+ useFloating,
+ useInteractions,
+ useRole,
+} from "@floating-ui/react";
import { $tabletennis, tabletennisTypes } from "@/api/tabletennis";
import {
formatApiErrorMessage,
@@ -6,35 +18,54 @@ import {
} from "@/api/helpers/create-query-client";
import { Modal } from "@/components/common/Modal.tsx";
import { useToast } from "@/components/toast";
-import { useQueryClient } from "@tanstack/react-query";
+import { MergeGuestModal } from "./MergeGuestModal";
+import { useTabletennisRefresh } from "./useTabletennisRefresh";
type SchemaPlayer = tabletennisTypes.SchemaPlayer;
-/** RTTF: a starting rating is a multiple of 25 and at least 100 */
-const MIN_START_RATING = 100;
-const START_RATING_STEP = 25;
+/** a beginner reaching this rating becomes advanced automatically (backend) */
+const ADVANCED_RATING = 350;
+
+/** a whole number from 0, or null */
+function parseRating(raw: string): number | null {
+ const trimmed = raw.trim();
+ if (!/^\d+$/.test(trimmed)) return null;
+ const value = Number(trimmed);
+ return Number.isSafeInteger(value) ? value : null;
+}
export function PlayerActionMenu({
player,
}: {
player: SchemaPlayer & { is_active: boolean };
}) {
+ const [menuOpen, setMenuOpen] = useState(false);
const [confirmOpen, setConfirmOpen] = useState(false);
const [ratingOpen, setRatingOpen] = useState(false);
- const [rating, setRating] = useState(MIN_START_RATING);
- const queryClient = useQueryClient();
+ const [ratingInput, setRatingInput] = useState("");
+ const [mergeOpen, setMergeOpen] = useState(false);
+ const refresh = useTabletennisRefresh();
const { showSuccess, showError } = useToast();
+ // the menu is rendered in a portal, so it floats over the page instead of
+ // stretching the scrollable table it is opened from
+ const { refs, floatingStyles, context } = useFloating({
+ placement: "bottom-end",
+ open: menuOpen,
+ onOpenChange: setMenuOpen,
+ middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],
+ whileElementsMounted: autoUpdate,
+ });
+ const { getReferenceProps, getFloatingProps } = useInteractions([
+ useClick(context),
+ useDismiss(context),
+ useRole(context, { role: "menu" }),
+ ]);
+
const { mutate, isPending } = $tabletennis.useMutation("post", "/set-status");
const { mutate: setRatingMutate, isPending: settingRating } =
$tabletennis.useMutation("post", "/set-rating");
- function refreshPlayers() {
- queryClient.invalidateQueries({
- queryKey: $tabletennis.queryOptions("get", "/players").queryKey,
- });
- }
-
function handleError(error: unknown, action: string) {
if (isApiHttpError(error) && error.httpCode === 403) {
showError("Access denied", `Only administrators can ${action}`);
@@ -43,17 +74,18 @@ export function PlayerActionMenu({
}
}
- const currentStatus = player.status.toLowerCase();
- // beginner (or no status yet) can be upgraded, advanced can be downgraded back
- const targetStatus: "advanced" | "beginner" | null =
- currentStatus === "beginner" || currentStatus === ""
- ? "advanced"
- : currentStatus === "advanced"
- ? "beginner"
- : null;
+ // advanced can be downgraded back, everyone else can be upgraded
+ const targetStatus: "advanced" | "beginner" =
+ player.status.toLowerCase() === "advanced" ? "beginner" : "advanced";
+
+ const rating = parseRating(ratingInput);
+
+ function openFromMenu(open: (value: boolean) => void) {
+ setMenuOpen(false);
+ open(true);
+ }
function handleConfirm() {
- if (!targetStatus) return;
mutate(
{
params: {
@@ -70,7 +102,7 @@ export function PlayerActionMenu({
"Status updated",
`${player.nickname} is now ${targetStatus}`,
);
- refreshPlayers();
+ refresh();
setConfirmOpen(false);
},
onError: (error) => handleError(error, "change player status"),
@@ -79,12 +111,13 @@ export function PlayerActionMenu({
}
function openRating() {
- const current = Math.round(player.rating / START_RATING_STEP);
- setRating(Math.max(MIN_START_RATING, current * START_RATING_STEP));
- setRatingOpen(true);
+ setRatingInput(String(player.rating));
+ openFromMenu(setRatingOpen);
}
- function handleSetRating() {
+ function handleSetRating(e: React.FormEvent) {
+ e.preventDefault();
+ if (rating === null || rating === player.rating) return;
setRatingMutate(
{
params: { query: { innohassle_id: player.innohassle_id, rating } },
@@ -92,7 +125,7 @@ export function PlayerActionMenu({
{
onSuccess: () => {
showSuccess("Rating updated", `${player.nickname}: ${rating}`);
- refreshPlayers();
+ refresh();
setRatingOpen(false);
},
onError: (error) => handleError(error, "change player rating"),
@@ -102,45 +135,63 @@ export function PlayerActionMenu({
return (
<>
-
- RTTF: the organiser assigns a newcomer's starting rating, a
- multiple of 25 and at least 100. Current rating of{" "}
- {player.nickname}: {player.rating}.
-
+ Check {field.unresolved.length} player
+ {field.unresolved.length === 1 ? "" : "s"}: pick the right one, fix
+ the email, add as a guest, or remove.
+
+ {field.unresolved.map((row) => {
+ const nickname = guestNickname(row.text);
+ // an existing player with this name: offer them instead of a duplicate guest
+ const candidates =
+ row.code === "already_in_tournament"
+ ? []
+ : field
+ .matchesOf(nickname)
+ .filter((c) => !field.picked.some((p) => p.id === c.id));
+ return (
+
- Qualification is not finished: {qualProgress.left} match
- {qualProgress.left === 1 ? "" : "es"} left. Only the places
- decided so far ({qualProgress.bracket.places.length} of{" "}
- {activeTour.qual_seeding?.length ?? 0}) will be saved, and no
- bonuses are granted.
+ {activeTours.length === 0 ? (
+
+
+
+ {isAdmin
+ ? "No active tournaments. Create one to start managing groups and the qualification bracket."
+ : "No active tournament at the moment."}