From e0f864347b15745c16fa88a9f6375009ae523a6e Mon Sep 17 00:00:00 2001
From: Nathaniel Tampus <contact@nize.ph>
Date: Tue, 13 Jun 2023 12:41:20 +0800
Subject: [PATCH] clarify game end reason in user profile history

---
 client/src/app/user/[name]/page.tsx | 179 +++++++++++++++-------------
 1 file changed, 94 insertions(+), 85 deletions(-)

diff --git a/client/src/app/user/[name]/page.tsx b/client/src/app/user/[name]/page.tsx
index 7a768b5..cb6cc6c 100644
--- a/client/src/app/user/[name]/page.tsx
+++ b/client/src/app/user/[name]/page.tsx
@@ -64,93 +64,102 @@ export default async function Profile({ params }: { params: { name: string } })
       <div>
         <h2 className="mb-1 text-lg font-bold">Recent games</h2>
         <ul className="bg-base-300 flex h-[60vh] flex-col gap-1 overflow-y-scroll rounded-lg">
-          {data.recentGames.map((game) => (
-            <li
-              key={game.id}
-              className="border-base-100 flex flex-wrap items-center justify-between gap-8 border-b-2 p-3"
-            >
-              <div className="flex w-72 justify-between">
-                <div className="flex flex-col">
-                  <span className="flex items-center gap-1 text-sm">
-                    White
-                    {game.winner === "white" && (
-                      <span className="badge badge-xs badge-success">winner</span>
-                    )}
-                  </span>
-                  <a
-                    className={
-                      "font-bold" +
-                      (typeof game.white?.id === "number"
-                        ? " text-primary link-hover"
-                        : " cursor-default")
-                    }
-                    href={
-                      typeof game.white?.id === "number" && game.white?.id !== data.id
-                        ? `/user/${game.white?.name}`
-                        : undefined
-                    }
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {game.white?.name}
-                  </a>
-                </div>
-                <div className="flex flex-col items-end">
-                  <span className="flex items-center gap-1 text-sm">
-                    {game.winner === "black" && (
-                      <span className="badge badge-xs badge-success">winner</span>
-                    )}
-                    Black
-                  </span>
-                  <a
-                    className={
-                      "font-bold" +
-                      (typeof game.black?.id === "number"
-                        ? " text-primary link-hover"
-                        : " cursor-default")
-                    }
-                    href={
-                      typeof game.black?.id === "number" && game.black?.id !== data.id
-                        ? `/user/${game.black?.name}`
-                        : undefined
-                    }
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {game.black?.name}
-                  </a>
-                </div>
-              </div>
+          {data.recentGames.map((game) => {
+            let endReason = game.endReason as string;
+            if (endReason === "repetition") {
+              endReason = "threefold repetition";
+            } else if (endReason === "insufficient") {
+              endReason = "insufficient material";
+            }
 
-              <div className="flex-grow text-end text-xs">{game.endReason}</div>
-
-              <div className="flex flex-grow flex-col text-end">
-                <span className="text-xs">
-                  Started
-                  <span className="font-bold">
-                    {" "}
-                    {new Date(game.startedAt as number).toLocaleString()}
-                  </span>
-                </span>
-                <span className="text-xs">
-                  Ended
-                  <span className="font-bold">
-                    {" "}
-                    {new Date(game.endedAt as number).toLocaleString()}
-                  </span>
-                </span>
-              </div>
-
-              <a
-                className="btn btn-ghost flex-grow"
-                href={`/archive/${game.id}`}
-                target="_blank"
-                rel="noopener noreferrer"
+            return (
+              <li
+                key={game.id}
+                className="border-base-100 flex flex-wrap items-center justify-between gap-8 border-b-2 p-3"
               >
-                Review game
-              </a>
-            </li>
-          ))}
+                <div className="flex w-72 justify-between">
+                  <div className="flex flex-col">
+                    <span className="flex items-center gap-1 text-sm">
+                      White
+                      {game.winner === "white" && (
+                        <span className="badge badge-xs badge-success">winner</span>
+                      )}
+                    </span>
+                    <a
+                      className={
+                        "font-bold" +
+                        (typeof game.white?.id === "number"
+                          ? " text-primary link-hover"
+                          : " cursor-default")
+                      }
+                      href={
+                        typeof game.white?.id === "number" && game.white?.id !== data.id
+                          ? `/user/${game.white?.name}`
+                          : undefined
+                      }
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {game.white?.name}
+                    </a>
+                  </div>
+                  <div className="flex flex-col items-end">
+                    <span className="flex items-center gap-1 text-sm">
+                      {game.winner === "black" && (
+                        <span className="badge badge-xs badge-success">winner</span>
+                      )}
+                      Black
+                    </span>
+                    <a
+                      className={
+                        "font-bold" +
+                        (typeof game.black?.id === "number"
+                          ? " text-primary link-hover"
+                          : " cursor-default")
+                      }
+                      href={
+                        typeof game.black?.id === "number" && game.black?.id !== data.id
+                          ? `/user/${game.black?.name}`
+                          : undefined
+                      }
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {game.black?.name}
+                    </a>
+                  </div>
+                </div>
+
+                <div className="flex-grow text-end text-xs">{endReason}</div>
+
+                <div className="flex flex-grow flex-col text-end">
+                  <span className="text-xs">
+                    Started
+                    <span className="font-bold">
+                      {" "}
+                      {new Date(game.startedAt as number).toLocaleString()}
+                    </span>
+                  </span>
+                  <span className="text-xs">
+                    Ended
+                    <span className="font-bold">
+                      {" "}
+                      {new Date(game.endedAt as number).toLocaleString()}
+                    </span>
+                  </span>
+                </div>
+
+                <a
+                  className="btn btn-ghost flex-grow"
+                  href={`/archive/${game.id}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Review game
+                </a>
+              </li>
+            );
+          })}
         </ul>
       </div>
     </div>