mirror of
https://github.com/TheRealOwenRees/echecsfrance.git
synced 2026-07-23 04:26:57 +00:00
New front page design
This commit is contained in:
Timothy Armes
@@ -0,0 +1,54 @@
|
||||
import { Disclosure } from "@headlessui/react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { IoChevronForward } from "react-icons/io5";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
type KFactorProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const KFactor = ({ className }: KFactorProps) => {
|
||||
const t = useTranslations("Elo");
|
||||
|
||||
return (
|
||||
<Disclosure>
|
||||
<Disclosure.Button
|
||||
className={twMerge(
|
||||
"flex items-center text-sm text-gray-500 dark:text-neutral-400",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<IoChevronForward className="mr-2 h-4 w-4 transition-transform ui-open:rotate-90 ui-open:transform" />
|
||||
{t("kFactorTitle")}
|
||||
</Disclosure.Button>
|
||||
|
||||
<Disclosure.Panel className="mt-4">
|
||||
<p className="text-sm text-gray-500 dark:text-neutral-400">
|
||||
{t("kFactorInfo1")}
|
||||
</p>
|
||||
<p className="mt-4 text-sm text-gray-500 dark:text-neutral-400">
|
||||
{t("kFactorInfo2")}
|
||||
</p>
|
||||
|
||||
<ul className="mb-8 ml-4 mt-3 list-outside list-disc">
|
||||
{(
|
||||
[
|
||||
"kFactorInfo3",
|
||||
"kFactorInfo4",
|
||||
"kFactorInfo5",
|
||||
"kFactorInfo6",
|
||||
"kFactorInfo7",
|
||||
] as const
|
||||
).map((key) => (
|
||||
<li
|
||||
key={key}
|
||||
className="mt-2 text-sm text-gray-500 dark:text-neutral-400"
|
||||
>
|
||||
{t.rich(key, { b: (str) => <b>{str}</b> })}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Disclosure.Panel>
|
||||
</Disclosure>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,271 @@
|
||||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { isEmpty, isNil, last } from "lodash";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { FormProvider, useFieldArray, useForm } from "react-hook-form";
|
||||
import { IoAdd, IoCloseOutline } from "react-icons/io5";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { z } from "zod";
|
||||
|
||||
import { RadioGroupField } from "@/components/form/RadioGroupField";
|
||||
import { SelectField } from "@/components/form/SelectField";
|
||||
import { TextField } from "@/components/form/TextField";
|
||||
import useFormPersist from "@/hooks/useFormPersist";
|
||||
import { getNewRating } from "@/utils/eloCalculator";
|
||||
|
||||
import { KFactor } from "./KFactor";
|
||||
|
||||
const resultsSchema = z.object({
|
||||
currentElo: z.number().int().positive().nullish(),
|
||||
kFactor: z.enum(["40", "30", "20", "15", "10"]),
|
||||
games: z.array(
|
||||
z.object({
|
||||
opponentElo: z.number().int().positive(),
|
||||
result: z.enum(["win", "draw", "loss"]),
|
||||
}),
|
||||
),
|
||||
});
|
||||
|
||||
type DeepPartial<T> = T extends object
|
||||
? {
|
||||
[P in keyof T]?: DeepPartial<T[P]>;
|
||||
}
|
||||
: T;
|
||||
|
||||
type EloFormValues = DeepPartial<z.infer<typeof resultsSchema>>;
|
||||
|
||||
export const ManualEloForm = () => {
|
||||
const t = useTranslations("Elo");
|
||||
|
||||
const form = useForm<EloFormValues>({
|
||||
resolver: zodResolver(resultsSchema),
|
||||
defaultValues: {
|
||||
currentElo: null,
|
||||
kFactor: "20",
|
||||
games: [{}],
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
fields: gameFields,
|
||||
append: appendGame,
|
||||
remove: removeGame,
|
||||
} = useFieldArray({
|
||||
control: form.control,
|
||||
name: "games",
|
||||
});
|
||||
|
||||
useFormPersist("manualElo", {
|
||||
watch: form.watch,
|
||||
setValue: form.setValue,
|
||||
storage: window.localStorage,
|
||||
});
|
||||
|
||||
const onSubmit = async (data: EloFormValues) => {};
|
||||
|
||||
const [currentElo, kFactor, games] = form.watch([
|
||||
"currentElo",
|
||||
"kFactor",
|
||||
"games",
|
||||
]);
|
||||
|
||||
const isDefault =
|
||||
isEmpty(currentElo) &&
|
||||
kFactor === "20" &&
|
||||
games?.length === 1 &&
|
||||
(isEmpty(games[0]) ||
|
||||
(isEmpty(games[0]?.opponentElo) && isEmpty(games[0]?.result)));
|
||||
|
||||
type Deltas = {
|
||||
rating: number;
|
||||
deltas: { rating: number; delta: number | undefined }[];
|
||||
};
|
||||
|
||||
const calculations = !Number.isNaN(currentElo)
|
||||
? (games ?? []).reduce<Deltas>(
|
||||
(acc, game) => {
|
||||
if (
|
||||
!isNil(game?.opponentElo) &&
|
||||
!Number.isNaN(game?.opponentElo) &&
|
||||
game?.result
|
||||
) {
|
||||
const result =
|
||||
game?.result === "win" ? 1 : game?.result === "loss" ? 0 : 0.5;
|
||||
|
||||
const { delta } = getNewRating(
|
||||
currentElo!,
|
||||
game.opponentElo!,
|
||||
result,
|
||||
parseInt(kFactor!, 10),
|
||||
);
|
||||
return {
|
||||
rating: acc.rating + delta,
|
||||
deltas: [...acc.deltas, { rating: acc.rating + delta, delta }],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
rating: acc.rating,
|
||||
deltas: [...acc.deltas, { rating: acc.rating, delta: undefined }],
|
||||
};
|
||||
},
|
||||
{ rating: currentElo!, deltas: [] },
|
||||
)
|
||||
: { rating: currentElo!, deltas: [] };
|
||||
|
||||
const deltas = calculations.deltas;
|
||||
const hasDeltas = deltas.some((d) => d.delta !== undefined);
|
||||
const totalDelta = Math.round(
|
||||
deltas.reduce((acc, delta) => acc + (delta.delta ?? 0), 0),
|
||||
);
|
||||
|
||||
return (
|
||||
<FormProvider {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<TextField
|
||||
name="currentElo"
|
||||
control={form.control}
|
||||
label={t("currentEloLabel")}
|
||||
placeholder={t("currentEloPlaceholder")}
|
||||
type="number"
|
||||
required
|
||||
/>
|
||||
|
||||
<SelectField
|
||||
name="kFactor"
|
||||
control={form.control}
|
||||
label={t("yourKFactorLabel")}
|
||||
options={["40", "20", "10"].map((k) => ({
|
||||
value: k,
|
||||
label: k,
|
||||
}))}
|
||||
isClearable={false}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<KFactor className="mt-2" />
|
||||
|
||||
<h3 className="my-4 text-lg text-gray-900 dark:text-white">
|
||||
{t("resultsTitle")}
|
||||
</h3>
|
||||
|
||||
<div className="flex w-full flex-col gap-6 sm:gap-2">
|
||||
{gameFields.map((game, i) => {
|
||||
return (
|
||||
<div key={game.id} className="flex w-full flex-col">
|
||||
<div className="flex w-full items-center space-x-2">
|
||||
<div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<TextField
|
||||
name={`games.${i}.opponentElo`}
|
||||
control={form.control}
|
||||
placeholder={t("opponentEloPlaceholder")}
|
||||
type="number"
|
||||
required
|
||||
/>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupField
|
||||
name={`games.${i}.result`}
|
||||
control={form.control}
|
||||
options={["win", "draw", "loss"].map((result) => ({
|
||||
value: result,
|
||||
label: t("gameResult", { result }),
|
||||
}))}
|
||||
required
|
||||
/>
|
||||
{gameFields.length > 1 && (
|
||||
<button
|
||||
className="hidden h-8 w-8 items-center justify-center rounded-md bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-700 sm:flex"
|
||||
type="button"
|
||||
onClick={() => removeGame(i)}
|
||||
>
|
||||
<IoCloseOutline className="h-6 w-6 text-gray-900 transition-all duration-200 hover:text-primary dark:text-neutral-400 hover:dark:text-white" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{gameFields.length > 1 && (
|
||||
<button
|
||||
className="flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-700 sm:hidden"
|
||||
type="button"
|
||||
onClick={() => removeGame(i)}
|
||||
>
|
||||
<IoCloseOutline className="h-6 w-6 text-gray-900 transition-all duration-200 hover:text-primary dark:text-neutral-400 hover:dark:text-white" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{deltas[i]?.delta !== undefined && (
|
||||
<div
|
||||
className={twMerge(
|
||||
"mt-2 flex justify-end text-gray-900 dark:text-neutral-400",
|
||||
gameFields.length > 1 && "mr-10",
|
||||
i === deltas.length - 1 && "font-bold",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={twMerge(
|
||||
deltas[i].delta! > 0 && "text-success",
|
||||
deltas[i].delta! < 0 && "text-error",
|
||||
)}
|
||||
>
|
||||
{deltas[i]!.delta! >= 0 ? "+" : ""}
|
||||
{deltas[i].delta!}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{hasDeltas && (
|
||||
<div className="mt-8 text-right text-lg font-bold text-gray-900 dark:text-neutral-400">
|
||||
{t.rich("finalRating", {
|
||||
rating: Math.round(last(deltas)!.rating),
|
||||
delta: () => (
|
||||
<span
|
||||
className={twMerge(
|
||||
totalDelta! > 0 && "text-success",
|
||||
totalDelta! < 0 && "text-error",
|
||||
)}
|
||||
>
|
||||
{totalDelta >= 0 ? "+" : ""}
|
||||
{totalDelta}
|
||||
</span>
|
||||
),
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-8 flex justify-end gap-4">
|
||||
{!isDefault && (
|
||||
<button
|
||||
onClick={() => {
|
||||
form.reset();
|
||||
}}
|
||||
type="button"
|
||||
className="px-5 py-3 text-center text-sm font-medium text-primary-600 hover:text-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:text-primary-700 dark:focus:ring-primary-800 sm:w-fit"
|
||||
>
|
||||
{t("clearButton")}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
appendGame({});
|
||||
}}
|
||||
type="button"
|
||||
className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
|
||||
>
|
||||
<IoAdd className="mr-2 inline-block h-5 w-5" />
|
||||
{t("addGameButton")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,221 @@
|
||||
"use client";
|
||||
|
||||
import { last } from "lodash";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { getNewRating } from "@/utils/eloCalculator";
|
||||
import { TournamentResultsData } from "@/utils/trpc";
|
||||
|
||||
type TournamentResultsProps = {
|
||||
results: TournamentResultsData;
|
||||
playerId: string;
|
||||
kFactor: number;
|
||||
};
|
||||
|
||||
export const TournamentResults = ({
|
||||
results,
|
||||
playerId,
|
||||
kFactor,
|
||||
}: TournamentResultsProps) => {
|
||||
const t = useTranslations("Elo");
|
||||
|
||||
const playerResults = results?.find((p) => p.id === playerId);
|
||||
if (!playerResults) {
|
||||
return null;
|
||||
}
|
||||
|
||||
type Deltas = {
|
||||
rating: number;
|
||||
deltas: {
|
||||
rating: number;
|
||||
delta: number | undefined;
|
||||
opponentName: string | null;
|
||||
opponentElo: number | null;
|
||||
result: number | null;
|
||||
lostByForfeit: boolean;
|
||||
wonByForfeit: boolean;
|
||||
estimated: boolean;
|
||||
national: boolean;
|
||||
colour: string;
|
||||
}[];
|
||||
};
|
||||
|
||||
const currentElo = playerResults.elo;
|
||||
|
||||
const calculations = !Number.isNaN(currentElo)
|
||||
? (playerResults.results ?? []).reduce<Deltas>(
|
||||
(acc, game) => {
|
||||
const info = {
|
||||
opponentName: game.opponent,
|
||||
opponentElo: game.elo,
|
||||
lostByForfeit: game.lostByForfeit,
|
||||
wonByForfeit: game.wonByForfeit,
|
||||
estimated: game.estimated,
|
||||
national: game.national,
|
||||
colour: game.colour,
|
||||
result: game.result,
|
||||
};
|
||||
|
||||
if (
|
||||
!game.wonByForfeit &&
|
||||
!game.lostByForfeit &&
|
||||
!game.estimated &&
|
||||
!game.national &&
|
||||
game.result !== null
|
||||
) {
|
||||
const { delta } = getNewRating(
|
||||
currentElo!,
|
||||
game.elo!,
|
||||
game.result as 1 | 0 | 0.5,
|
||||
kFactor,
|
||||
);
|
||||
|
||||
return {
|
||||
rating: acc.rating + delta,
|
||||
deltas: [
|
||||
...acc.deltas,
|
||||
{ rating: acc.rating + delta, delta, ...info },
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
rating: acc.rating,
|
||||
deltas: [
|
||||
...acc.deltas,
|
||||
{ rating: acc.rating, delta: undefined, ...info },
|
||||
],
|
||||
};
|
||||
},
|
||||
{ rating: currentElo!, deltas: [] },
|
||||
)
|
||||
: { rating: currentElo!, deltas: [] };
|
||||
|
||||
const deltas = calculations.deltas;
|
||||
const totalDelta = Math.round(
|
||||
deltas.reduce((acc, delta) => acc + (delta.delta ?? 0), 0),
|
||||
);
|
||||
|
||||
const noChangeCount = (deltas ?? []).filter(
|
||||
({ wonByForfeit, lostByForfeit, estimated, national }) =>
|
||||
wonByForfeit || lostByForfeit || estimated || national,
|
||||
).length;
|
||||
|
||||
if (playerResults.estimated || playerResults.national)
|
||||
return <div className="my-8 text-center text-error">{t("needRating")}</div>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="my-8 text-gray-900 dark:text-neutral-400">
|
||||
{t("initialRating", { rating: Math.round(playerResults.elo) })}
|
||||
</div>
|
||||
|
||||
<table className="mt-8 w-full">
|
||||
<tbody>
|
||||
{deltas.map((delta, i) => {
|
||||
const { estimated, national, lostByForfeit, wonByForfeit } = delta;
|
||||
const opponentElo = delta.opponentElo
|
||||
? ` (${delta.opponentElo} ${
|
||||
estimated ? "E" : national ? "N" : "F"
|
||||
})`
|
||||
: "";
|
||||
|
||||
const opponentName = delta.opponentName ? (
|
||||
<span>
|
||||
<span className="whitespace-nowrap font-bold">
|
||||
{delta.opponentName}
|
||||
</span>
|
||||
{opponentElo}
|
||||
</span>
|
||||
) : (
|
||||
"-"
|
||||
);
|
||||
|
||||
const playedWhite = delta.colour === "white";
|
||||
|
||||
const whitePlayer = playedWhite ? playerResults.name : opponentName;
|
||||
const blackPlayer = !playedWhite
|
||||
? playerResults.name
|
||||
: opponentName;
|
||||
const noChange =
|
||||
wonByForfeit || lostByForfeit || estimated || national;
|
||||
|
||||
const forfeit = delta.opponentName === null;
|
||||
|
||||
let result = "";
|
||||
if (wonByForfeit) {
|
||||
result = t("wonByForfeit");
|
||||
} else if (lostByForfeit) {
|
||||
result = t("lostByForfeit");
|
||||
} else if (delta.result === 0.5) {
|
||||
result = t("draw");
|
||||
} else if (
|
||||
(playedWhite && delta.result === 1) ||
|
||||
(!playedWhite && delta.result === 0)
|
||||
) {
|
||||
result = t("whiteWin");
|
||||
} else result = t("blackWin");
|
||||
|
||||
return (
|
||||
<tr key={i} className="text-gray-900 dark:text-neutral-400">
|
||||
{forfeit ? (
|
||||
<td className="pb-2">{t("forfeit")}</td>
|
||||
) : (
|
||||
<td className="pb-2">
|
||||
{whitePlayer}
|
||||
{t("vs")}
|
||||
{blackPlayer}
|
||||
</td>
|
||||
)}
|
||||
<td className="whitespace-nowrap px-2 pb-2 text-center">
|
||||
{!forfeit && result}
|
||||
</td>
|
||||
<td className="pb-2 text-right">
|
||||
{noChange ? (
|
||||
"-"
|
||||
) : (
|
||||
<span
|
||||
className={twMerge(
|
||||
deltas[i].delta! > 0 && "text-success",
|
||||
deltas[i].delta! < 0 && "text-error",
|
||||
)}
|
||||
>
|
||||
{deltas[i]!.delta! >= 0 ? "+" : ""}
|
||||
{deltas[i].delta!}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{noChangeCount > 0 && (
|
||||
<div className="mt-4 rounded border border-gray-500 p-4 text-center text-gray-500 dark:border-neutral-400 dark:text-neutral-400">
|
||||
{t("noChangeInfo", { noChangeCount })}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{deltas.length > 0 && (
|
||||
<div className="mt-8 text-right text-lg font-bold text-gray-900 dark:text-neutral-400">
|
||||
{t.rich("finalRating", {
|
||||
rating: Math.round(last(deltas)!.rating),
|
||||
delta: () => (
|
||||
<span
|
||||
className={twMerge(
|
||||
totalDelta! > 0 && "text-success",
|
||||
totalDelta! < 0 && "text-error",
|
||||
)}
|
||||
>
|
||||
{totalDelta >= 0 ? "+" : ""}
|
||||
{totalDelta}
|
||||
</span>
|
||||
),
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,291 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useMemo } from "react";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { isEmpty, sortBy } from "lodash";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
|
||||
import { Spinner } from "@/components/Spinner";
|
||||
import { SelectField } from "@/components/form/SelectField";
|
||||
import { TournamentSelectField } from "@/components/form/TournamentSelectField";
|
||||
import { fetchTournamentResultsSchema } from "@/schemas";
|
||||
import { Link } from "@/utils/navigation";
|
||||
import { trpc } from "@/utils/trpc";
|
||||
|
||||
import { KFactor } from "./KFactor";
|
||||
import { ManualEloForm } from "./ManualEloForm";
|
||||
import { TournamentResults } from "./TournamentResults";
|
||||
|
||||
const kFactors = ["40", "20", "10"];
|
||||
|
||||
const formSchema = fetchTournamentResultsSchema.extend({
|
||||
tournamentId: z.string().optional(),
|
||||
player: z.string().optional(),
|
||||
kFactor: z.string(),
|
||||
});
|
||||
|
||||
type FetchResultsFormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export default function Elo() {
|
||||
const t = useTranslations("Elo");
|
||||
type TranslationKey = Parameters<typeof t>[0];
|
||||
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const current = useMemo(
|
||||
() => new URLSearchParams(Array.from(searchParams.entries())),
|
||||
[searchParams],
|
||||
);
|
||||
|
||||
const tournamentId = searchParams.get("tId") ?? "";
|
||||
const kFactorParam = searchParams.get("k");
|
||||
const player = searchParams.get("player") ?? "";
|
||||
|
||||
const kFactor =
|
||||
kFactorParam && kFactors.includes(kFactorParam) ? kFactorParam : "20";
|
||||
|
||||
const hasTournamentId = !isEmpty(tournamentId.trim());
|
||||
|
||||
const {
|
||||
data: allResults,
|
||||
isFetching,
|
||||
error,
|
||||
} = trpc.fetchTournamentResults.useQuery(
|
||||
{
|
||||
id: tournamentId?.trim(),
|
||||
},
|
||||
{
|
||||
refetchOnWindowFocus: false,
|
||||
staleTime: Infinity,
|
||||
cacheTime: 10 * 60 * 1000,
|
||||
enabled: hasTournamentId,
|
||||
retry: false,
|
||||
},
|
||||
);
|
||||
|
||||
const playerOptions = sortBy(
|
||||
(allResults ?? []).map((player) => ({
|
||||
value: player.id,
|
||||
label: player.name,
|
||||
})),
|
||||
"label",
|
||||
);
|
||||
|
||||
const form = useForm<FetchResultsFormValues>({
|
||||
resolver: zodResolver(fetchTournamentResultsSchema),
|
||||
defaultValues: {
|
||||
tournamentId: tournamentId ?? "",
|
||||
kFactor: kFactor ?? "20",
|
||||
player: player ?? "",
|
||||
},
|
||||
});
|
||||
|
||||
const clearForm = useCallback(() => {
|
||||
current.delete("tId");
|
||||
current.delete("k");
|
||||
current.delete("player");
|
||||
|
||||
form.setValue("tournamentId", "");
|
||||
form.setValue("kFactor", "20");
|
||||
form.setValue("player", "");
|
||||
|
||||
const search = current.toString();
|
||||
const query = search ? `?${search}` : "";
|
||||
|
||||
router.push(`${pathname}${query}`);
|
||||
}, [current, form, pathname, router]);
|
||||
|
||||
useEffect(() => {
|
||||
// We subscribe to form changes and update the URL parameters
|
||||
const subscription = form.watch((value, { name, type }) => {
|
||||
let update = false;
|
||||
if (type === "change") {
|
||||
if (
|
||||
name === "tournamentId" &&
|
||||
value.tournamentId !== tournamentId &&
|
||||
value.tournamentId
|
||||
) {
|
||||
current.set("tId", value.tournamentId);
|
||||
update = true;
|
||||
} else if (
|
||||
name === "tournamentId" &&
|
||||
value.tournamentId !== tournamentId &&
|
||||
value.tournamentId === null
|
||||
) {
|
||||
clearForm();
|
||||
} else if (
|
||||
name === "player" &&
|
||||
value.player !== player &&
|
||||
value.player
|
||||
) {
|
||||
current.set("player", value.player);
|
||||
update = true;
|
||||
} else if (
|
||||
name === "kFactor" &&
|
||||
value.kFactor !== kFactor &&
|
||||
value.kFactor
|
||||
) {
|
||||
current.set("k", value.kFactor);
|
||||
update = true;
|
||||
}
|
||||
|
||||
if (update) {
|
||||
const search = current.toString();
|
||||
const query = search ? `?${search}` : "";
|
||||
router.replace(`${pathname}${query}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
return () => subscription.unsubscribe();
|
||||
}, [
|
||||
clearForm,
|
||||
current,
|
||||
form,
|
||||
form.watch,
|
||||
kFactor,
|
||||
pathname,
|
||||
player,
|
||||
router,
|
||||
tournamentId,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
// When the URL changes, we update the form values
|
||||
if (tournamentId !== form.getValues("tournamentId")) {
|
||||
form.setValue("tournamentId", tournamentId);
|
||||
}
|
||||
|
||||
if (player !== form.getValues("player")) {
|
||||
form.setValue("player", player);
|
||||
}
|
||||
|
||||
if (kFactor !== form.getValues("kFactor")) {
|
||||
form.setValue("kFactor", form.getValues("kFactor"));
|
||||
}
|
||||
}, [searchParams, form, player, kFactor, tournamentId]);
|
||||
|
||||
if (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
const playerResults = allResults?.find((p) => p.id === player);
|
||||
|
||||
return (
|
||||
<section className="grid place-items-center bg-white pb-20 dark:bg-gray-800">
|
||||
<div className="max-w-xl px-4 py-8 lg:py-16">
|
||||
<h2
|
||||
className="mb-10 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
|
||||
data-test="header2"
|
||||
>
|
||||
{t("title")}
|
||||
</h2>
|
||||
<p className="mb-8 text-center font-light text-gray-500 dark:text-gray-400">
|
||||
{t("info")}
|
||||
</p>
|
||||
|
||||
{hasTournamentId && !isFetching && !error && (
|
||||
<div className="mx-auto mb-8 flex justify-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearForm}
|
||||
className="rounded-lg border border-primary px-3 py-2 text-center text-sm text-primary hover:bg-primary hover:text-white focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:focus:ring-primary-800 sm:w-fit"
|
||||
>
|
||||
{t("enterManualResultsButton")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<FormProvider {...form}>
|
||||
<form className="space-y-8">
|
||||
<TournamentSelectField
|
||||
name="tournamentId"
|
||||
control={form.control}
|
||||
placeholder={t("searchTournamentPlaceholder")}
|
||||
noOptionsMessage={() => t("noTournamentsFound")}
|
||||
/>
|
||||
|
||||
{isFetching && (
|
||||
<div className="mt-8 flex justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="mt-8 text-center text-error">
|
||||
{error.message.startsWith("ERR_")
|
||||
? t(error.message as TranslationKey)
|
||||
: t.rich("unknownError", {
|
||||
contact: (chunks) => (
|
||||
<Link className="underline" href="/contact-us">
|
||||
{chunks}
|
||||
</Link>
|
||||
),
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isFetching && playerOptions.length > 0 && (
|
||||
<div>
|
||||
<div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-2">
|
||||
<SelectField
|
||||
name="player"
|
||||
control={form.control}
|
||||
required
|
||||
label={t("choosePlayerLabel")}
|
||||
placeholder={t("choosePlayerPlaceholder")}
|
||||
options={playerOptions}
|
||||
isClearable={false}
|
||||
/>
|
||||
|
||||
<SelectField
|
||||
name="kFactor"
|
||||
control={form.control}
|
||||
label={t("kFactorLabel")}
|
||||
options={["40", "20", "10"].map((k) => ({
|
||||
value: k,
|
||||
label: k,
|
||||
}))}
|
||||
isClearable={false}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<KFactor className="mt-2" />
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</FormProvider>
|
||||
|
||||
{hasTournamentId &&
|
||||
!isFetching &&
|
||||
player &&
|
||||
playerResults &&
|
||||
!error && (
|
||||
<TournamentResults
|
||||
playerId={player}
|
||||
kFactor={parseInt(kFactor)}
|
||||
results={allResults ?? []}
|
||||
/>
|
||||
)}
|
||||
|
||||
{((!hasTournamentId && !isFetching) || !!error) && (
|
||||
<>
|
||||
<div className="relative my-8">
|
||||
<div className="absolute top-1/2 z-10 h-[1px] w-full bg-gray-500 dark:bg-gray-400" />
|
||||
<div className="relative z-20 mx-auto w-fit bg-white px-2 py-1 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
|
||||
{t("useManualLabel")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ManualEloForm />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user