Add a description of the k-factor

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>
+  );
+};

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>

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>