Display of scraped elo results

app/[locale]/elo/FetchResultsForm.tsx

@@ -1,54 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useTranslations } from "next-intl";
-import { FormProvider, useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { TextField } from "@/components/form/TextField";
-import { fetchTournamentResultsSchema } from "@/schemas";
-import { trpc } from "@/utils/trpc";
-
-type FetchResultsFormValues = z.infer<typeof fetchTournamentResultsSchema>;
-
-export const FetchResultsForm = () => {
-  const t = useTranslations("Elo");
-  const fetchResults = trpc.fetchTournamentResults.useMutation();
-
-  const form = useForm<FetchResultsFormValues>({
-    resolver: zodResolver(fetchTournamentResultsSchema),
-  });
-
-  const onSubmit = async (input: FetchResultsFormValues) => {
-    try {
-      const result = await fetchResults.mutateAsync(input);
-      console.log(result);
-    } catch (err: unknown) {
-      console.log(err);
-    }
-  };
-
-  return (
-    <FormProvider {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <div className="flex items-end gap-4">
-          <TextField
-            name="url"
-            label={t("resultsUrlLabel")}
-            placeholder={t("resultsUrlLabel")}
-            required
-          />
-          <button
-            disabled={form.formState.isSubmitting}
-            type="submit"
-            className="rounded-lg border border-transparent 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"
-          >
-            {t("fetchResultsButton")}
-          </button>
-        </div>
-      </form>
-    </FormProvider>
-  );
-};

app/[locale]/elo/ManualEloForm.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+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 { SelectField } from "@/components/form/SelectField";
+import { TextField } from "@/components/form/TextField";
+import { getNewRating } from "@/utils/eloCalculator";
+
+const resultsSchema = z.object({
+  currentElo: z.number().int().positive(),
+  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: {
+      kFactor: "20",
+      games: [{}],
+    },
+  });
+
+  const {
+    fields: gameFields,
+    append: appendGame,
+    remove: removeGame,
+  } = useFieldArray({
+    control: form.control,
+    name: "games",
+  });
+
+  const onSubmit = async (data: EloFormValues) => {};
+
+  const [currentElo, kFactor, games] = form.watch([
+    "currentElo",
+    "kFactor",
+    "games",
+  ]);
+
+  type Deltas = {
+    rating: number;
+    deltas: { rating: number; delta: number | undefined }[];
+  };
+
+  const calculations = !Number.isNaN(currentElo)
+    ? (games ?? []).reduce<Deltas>(
+        (acc, game) => {
+          if (!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;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-2">
+          <TextField
+            name="currentElo"
+            label={t("currentEloLabel")}
+            placeholder={t("currentEloPlaceholder")}
+            type="number"
+            required
+          />
+
+          <SelectField
+            name="kFactor"
+            label={t("yourKFactorLabel")}
+            options={["40", "20", "10"].map((k) => ({
+              value: k,
+              label: k,
+            }))}
+            isClearable={false}
+            required
+          />
+        </div>
+
+        <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={i} className="flex w-full flex-col">
+                <div key={i} className="flex w-full items-center space-x-2">
+                  <div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-2">
+                    <TextField
+                      name={`games.${i}.opponentElo`}
+                      placeholder={t("opponentEloPlaceholder")}
+                      type="number"
+                      required
+                    />
+
+                    <div className="flex items-center space-x-2">
+                      <SelectField
+                        name={`games.${i}.result`}
+                        placeholder={t("gameResultPlaceholder")}
+                        options={["win", "draw", "loss"].map((result) => ({
+                          value: result,
+                          label: t("gameResult", { result }),
+                        }))}
+                        isClearable={false}
+                        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",
+                    )}
+                  >
+                    {Math.round(deltas[i]!.rating)} (
+                    <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>
+
+        <div className="mt-8 flex justify-end">
+          <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>
+  );
+};

app/[locale]/elo/TournamentResults.tsx

@@ -0,0 +1,213 @@
+"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">
+        {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) {
+            result = t("whiteWin");
+          } else result = t("blackWin");
+
+          return (
+            <tr 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>
+          );
+        })}
+      </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>
+      )}
+    </>
+  );
+};

app/[locale]/elo/page.tsx

@@ -1,99 +1,85 @@
 "use client";
 
+import { useState } from "react";
+
 import { zodResolver } from "@hookform/resolvers/zod";
+import { isEmpty } 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 Link from "next/link";
+import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
 
+import { Spinner } from "@/components/Spinner";
 import { SelectField } from "@/components/form/SelectField";
 import { TextField } from "@/components/form/TextField";
-import { getNewRating } from "@/utils/eloCalculator";
+import { fetchTournamentResultsSchema } from "@/schemas";
+import { trpc } from "@/utils/trpc";
 
-import { FetchResultsForm } from "./FetchResultsForm";
+import { ManualEloForm } from "./ManualEloForm";
+import { TournamentResults } from "./TournamentResults";
 
-const resultsSchema = z.object({
-  currentElo: z.number().int().positive(),
+const formSchema = fetchTournamentResultsSchema.extend({
+  player: z.string().optional(),
   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>>;
+type FetchResultsFormValues = z.infer<typeof formSchema>;
 
 export default function Elo() {
   const t = useTranslations("Elo");
+  type TranslationKey = Parameters<typeof t>[0];
 
-  const form = useForm<EloFormValues>({
-    resolver: zodResolver(resultsSchema),
+  const [formInput, setFormInput] = useState<FetchResultsFormValues>({
+    url: "",
+    kFactor: "20",
+  });
+
+  const hasUrl = !isEmpty(formInput?.url.trim());
+
+  const {
+    data: allResults,
+    isFetching,
+    error,
+  } = trpc.fetchTournamentResults.useQuery(
+    {
+      url: formInput?.url.trim(),
+    },
+    {
+      refetchOnWindowFocus: false,
+      staleTime: Infinity,
+      cacheTime: 10 * 60 * 1000,
+      enabled: hasUrl,
+      retry: false,
+    },
+  );
+
+  const playerOptions = (allResults ?? []).map((player) => ({
+    value: player.id,
+    label: player.name,
+  }));
+
+  const form = useForm<FetchResultsFormValues>({
+    resolver: zodResolver(fetchTournamentResultsSchema),
     defaultValues: {
       kFactor: "20",
-      games: [{}],
     },
   });
 
-  const {
-    fields: gameFields,
-    append: appendGame,
-    remove: removeGame,
-  } = useFieldArray({
-    control: form.control,
-    name: "games",
-  });
+  const [player, kFactor] = form.watch(["player", "kFactor"]);
+  const playerResults = allResults?.find((p) => p.id === player);
 
-  const onSubmit = async (data: EloFormValues) => {};
-
-  const [currentElo, kFactor, games] = form.watch([
-    "currentElo",
-    "kFactor",
-    "games",
-  ]);
-
-  type Deltas = {
-    rating: number;
-    deltas: { rating: number; delta: number | undefined }[];
+  const onSubmit = async (input: FetchResultsFormValues) => {
+    setFormInput(input);
   };
 
-  const calculations = !Number.isNaN(currentElo)
-    ? (games ?? []).reduce<Deltas>(
-        (acc, game) => {
-          if (!Number.isNaN(game?.opponentElo) && game?.result) {
-            const result =
-              game?.result === "win" ? 1 : game?.result === "loss" ? 0 : 0.5;
+  const clearForm = () => {
+    form.setValue("url", "");
+    setFormInput({ ...formInput, url: "" });
+  };
 
-            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;
+  if (error) {
+    console.error(error);
+  }
 
   return (
     <section className="grid place-items-center bg-white pb-20 dark:bg-gray-800">
@@ -108,124 +94,101 @@ export default function Elo() {
           {t("info")}
         </p>
 
-        <div className="mb-10">
-          <FetchResultsForm />
-        </div>
+        {hasUrl && !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 onSubmit={form.handleSubmit(onSubmit)}>
-            <div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-2">
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <div className="flex items-end gap-4">
               <TextField
-                name="currentElo"
-                label={t("currentEloLabel")}
-                placeholder={t("currentEloPlaceholder")}
-                type="number"
-                required
+                name="url"
+                label={t("resultsUrlLabel")}
+                placeholder={t("resultsUrlLabel")}
               />
-
-              <SelectField
-                name="kFactor"
-                label={t("kFactorLabel")}
-                options={["40", "20", "10"].map((k) => ({
-                  value: k,
-                  label: k,
-                }))}
-                required
-              />
-            </div>
-
-            <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={i} className="flex w-full flex-col">
-                    <div key={i} className="flex w-full items-center space-x-2">
-                      <div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-2">
-                        <TextField
-                          name={`games.${i}.opponentElo`}
-                          placeholder={t("opponentEloPlaceholder")}
-                          type="number"
-                          required
-                        />
-
-                        <div className="flex items-center space-x-2">
-                          <SelectField
-                            name={`games.${i}.result`}
-                            placeholder={t("gameResultPlaceholder")}
-                            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",
-                        )}
-                      >
-                        {Math.round(deltas[i]!.rating)} (
-                        <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>
-
-            <div className="mt-8 flex justify-end">
               <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"
+                disabled={form.formState.isSubmitting}
+                type="submit"
+                className="rounded-lg border border-transparent 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")}
+                {t("fetchResultsButton")}
               </button>
             </div>
+
+            {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="/contactez-nous">
+                          {chunks}
+                        </Link>
+                      ),
+                    })}
+              </div>
+            )}
+
+            {!isFetching && playerOptions.length > 0 && (
+              <div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-2">
+                <SelectField
+                  name="player"
+                  required
+                  label={t("choosePlayerLabel")}
+                  placeholder={t("choosePlayerPlaceholder")}
+                  options={playerOptions}
+                  isClearable={false}
+                />
+
+                <SelectField
+                  name="kFactor"
+                  label={t("kFactorLabel")}
+                  options={["40", "20", "10"].map((k) => ({
+                    value: k,
+                    label: k,
+                  }))}
+                  isClearable={false}
+                  required
+                />
+              </div>
+            )}
           </form>
         </FormProvider>
 
-        <div></div>
+        {hasUrl && !isFetching && player && playerResults && !error && (
+          <TournamentResults
+            playerId={player}
+            kFactor={parseInt(kFactor)}
+            results={allResults ?? []}
+          />
+        )}
+
+        {((!hasUrl && !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>
   );