From a82616bd342a43198475478ec3ae7f5e89065154 Mon Sep 17 00:00:00 2001
From: Timothy Armes <tim@timothyarmes.com>
Date: Tue, 19 Sep 2023 10:09:21 +0200
Subject: [PATCH] Add a description of the k-factor

---
 app/[locale]/elo/KFactor.tsx       | 54 ++++++++++++++++++++++++++++++
 app/[locale]/elo/ManualEloForm.tsx |  4 +++
 app/[locale]/elo/page.tsx          | 45 ++++++++++++++-----------
 messages/en.json                   |  9 +++++
 messages/fr.json                   | 17 +++++++---
 5 files changed, 105 insertions(+), 24 deletions(-)
 create mode 100644 app/[locale]/elo/KFactor.tsx

diff --git a/app/[locale]/elo/KFactor.tsx b/app/[locale]/elo/KFactor.tsx
new file mode 100644
index 0000000..20334cf
--- /dev/null
+++ b/app/[locale]/elo/KFactor.tsx
@@ -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>
+  );
+};
diff --git a/app/[locale]/elo/ManualEloForm.tsx b/app/[locale]/elo/ManualEloForm.tsx
index c56333f..5442371 100644
--- a/app/[locale]/elo/ManualEloForm.tsx
+++ b/app/[locale]/elo/ManualEloForm.tsx
@@ -12,6 +12,8 @@ import { SelectField } from "@/components/form/SelectField";
 import { TextField } from "@/components/form/TextField";
 import { getNewRating } from "@/utils/eloCalculator";
 
+import { KFactor } from "./KFactor";
+
 const resultsSchema = z.object({
   currentElo: z.number().int().positive(),
   kFactor: z.enum(["40", "30", "20", "15", "10"]),
@@ -122,6 +124,8 @@ export const ManualEloForm = () => {
           />
         </div>
 
+        <KFactor className="mt-2" />
+
         <h3 className="my-4 text-lg text-gray-900 dark:text-white">
           {t("resultsTitle")}
         </h3>
diff --git a/app/[locale]/elo/page.tsx b/app/[locale]/elo/page.tsx
index e069983..9ad6bef 100644
--- a/app/[locale]/elo/page.tsx
+++ b/app/[locale]/elo/page.tsx
@@ -15,6 +15,7 @@ import { TextField } from "@/components/form/TextField";
 import { fetchTournamentResultsSchema } from "@/schemas";
 import { trpc } from "@/utils/trpc";
 
+import { KFactor } from "./KFactor";
 import { ManualEloForm } from "./ManualEloForm";
 import { TournamentResults } from "./TournamentResults";
 
@@ -112,7 +113,7 @@ export default function Elo() {
               <TextField
                 name="url"
                 label={t("resultsUrlLabel")}
-                placeholder={t("resultsUrlPlaceholder")}
+                placeholder={t("resultsUrlLabel")}
               />
               <button
                 disabled={form.formState.isSubmitting}
@@ -144,26 +145,30 @@ export default function Elo() {
             )}
 
             {!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}
-                />
+              <div>
+                <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
-                />
+                  <SelectField
+                    name="kFactor"
+                    label={t("kFactorLabel")}
+                    options={["40", "20", "10"].map((k) => ({
+                      value: k,
+                      label: k,
+                    }))}
+                    isClearable={false}
+                    required
+                  />
+                </div>
+
+                <KFactor className="mt-2" />
               </div>
             )}
           </form>
diff --git a/messages/en.json b/messages/en.json
index 25e9a1a..be3096c 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -155,6 +155,15 @@
     "finalRating": "Final Rating: {rating} (<delta></delta>)",
     "noChangeInfo": "Note that {noChangeCount, plural, one {one of the games} other {# of the games}} resulted in no change to the Elo.  Forfeited games and games played against players that do not yet have a FIDE rating are not included in the calculation.",
 
+    "kFactorTitle": "What is the K-Factor?",
+    "kFactorInfo1": "The purpose of the K-factor is to determine how much a player's chess rating should change after each game. It is based on the number of rated games a player has completed. This system helps ensure that players' ratings accurately reflect their skill levels while accommodating both new and experienced players.",
+    "kFactorInfo2": "Under FIDE, the K-factor is:",
+    "kFactorInfo3": "40 for a player new to the rating list until he has completed events with at least 30 games.",
+    "kFactorInfo4": "20 as long as a player's rating remains under 2400.",
+    "kFactorInfo5": "10 once a player's published rating has reached 2400 and remains at that level subsequently, even if the rating drops below 2400.",
+    "kFactorInfo6": "40 for all players until their 18th birthday, as long as their rating remains under 2300.",
+    "kFactorInfo7": "20 for RAPID and BLITZ ratings for all players.",
+
     "unknownError": "We were unable to fetch results from this URL. Please <contact>contact us</contact> if the problem persists.",
     "ERR_TOURNAMENT_NOT_FOUND": "Tournament not found",
     "ERR_NO_TOURNAMENT_ID": "The link you provided is incorrect"
diff --git a/messages/fr.json b/messages/fr.json
index 193811b..73ea09e 100644
--- a/messages/fr.json
+++ b/messages/fr.json
@@ -131,8 +131,8 @@
 
     "currentEloLabel": "Votre Elo actuel",
     "currentEloPlaceholder": "Elo",
-    "yourKFactorLabel": "Votre coefficient",
-    "kFactorLabel": "Coefficient",
+    "yourKFactorLabel": "Votre coefficient K",
+    "kFactorLabel": "Coefficient K",
     "resultsTitle": "Résultats",
     "opponentEloPlaceholder": "Classement de l'adversaire",
     "gameResultPlaceholder": "Résultat...",
@@ -153,10 +153,19 @@
     "draw": "½ - ½",
     "whiteWin": "1 - 0",
     "blackWin": "0 - 1",
-    "initialRating": "Classement initial : {rating}",
-    "finalRating": "Classement final : {rating} (<delta></delta>)",
+    "initialRating": "Classement initial\u00a0: {rating}",
+    "finalRating": "Classement final\u00a0: {rating} (<delta></delta>)",
     "noChangeInfo": "Notez que {noChangeCount, plural, one {une de ces parties n'a pas modifié l'Elo.} other {# de ces parties n'ont pas modifié l'Elo.}}. Les parties perdues par forfait et les parties jouées contre des joueurs qui n'ont pas encore de classement FIDE ne sont pas prises en compte dans le calcul.",
 
+    "kFactorTitle": "Qu'est-ce que le coefficient K\u00a0?",
+    "kFactorInfo1": "Le but du coefficient K est de déterminer dans quelle mesure le classement aux échecs d'un joueur devrait changer après chaque partie. Il est basé sur le nombre de parties classées qu'un joueur a complétées. Ce système vise à garantir que les classements des joueurs reflètent avec précision leur niveau de compétence tout en tenant compte à la fois des joueurs débutants et expérimentés.",
+    "kFactorInfo2": "Sous la FIDE, le coefficient K est le suivant\u00a0:",
+    "kFactorInfo3": "<b>40</b> pour un joueur nouvellement inscrit au classement tant qu'il n'a pas participé à des événements avec au moins 30 parties.",
+    "kFactorInfo4": "<b>20</b> tant que le classement d'un joueur reste inférieur à 2400.",
+    "kFactorInfo5": "<b>10</b> une fois que le classement publié d'un joueur a atteint 2400 et reste à ce niveau par la suite, même s'il redescend en dessous de 2400.",
+    "kFactorInfo6": "<b>40</b> pour tous les joueurs jusqu'à leur 18e anniversaire, tant que leur classement reste inférieur à 2300.",
+    "kFactorInfo7": "<b>20</b> pour les classements RAPIDE et BLITZ pour tous les joueurs.",
+
     "unknownError": "Nous n'avons pas pu récupérer les résultats à partir de cette URL. Veuillez <contact>nous contacter</contact> si le problème persiste.",
     "ERR_TOURNAMENT_NOT_FOUND": "Tournoi introuvable",
     "ERR_NO_TOURNAMENT_ID": "L'identifiant du tournoi fourni est incorrect"