[frontend] Add stats to user page (#166)

frontend/app/ui/user/match-history.tsx

@@ -1,6 +1,7 @@
 import { MatchDetailEntity, getMatchHistory } from "@/app/lib/actions";
 import Link from "next/link";
 import { Avatar } from "./avatar";
+import ProfileItem from "./profile-item";
 
 function MatchDetailItem({
   detail,
@@ -32,8 +33,7 @@ function MatchDetailItem({
 export default async function MatchHistory({ userId }: { userId: number }) {
   const history = await getMatchHistory(userId);
   return (
-    <div className="flex flex-col gap-2">
-      <div className="text-xl font-bold">Match History</div>
+    <ProfileItem title="Match History">
       <div className="flex flex-col gap-2">
         {history.map((match) => {
           return (
@@ -51,6 +51,6 @@ export default async function MatchHistory({ userId }: { userId: number }) {
           );
         })}
       </div>
-    </div>
+    </ProfileItem>
   );
 }

frontend/app/ui/user/profile-item.tsx

@@ -0,0 +1,14 @@
+export default async function ProfileItem({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="text-xl font-bold">{title}</div>
+      {children}
+    </div>
+  );
+}

frontend/app/ui/user/stats.tsx

@@ -0,0 +1,62 @@
+import { getMatchHistory } from "@/app/lib/actions";
+import ProfileItem from "./profile-item";
+
+async function getStats(userId: number) {
+  const history = await getMatchHistory(userId);
+  const wins = history.filter(
+    (m) =>
+      m.result == "COMPLETE" &&
+      m.players.some((p) => p.user.id === userId && p.winLose === "WIN"),
+  ).length;
+  const losses = history.filter(
+    (m) =>
+      m.result == "COMPLETE" &&
+      m.players.some((p) => p.user.id === userId && p.winLose === "LOSE"),
+  ).length;
+  const winRate = wins / (wins + losses);
+  const winRatePercent = Math.round(winRate * 100);
+  const loseRatePercent = 100 - winRatePercent;
+  const incompletes = history.filter((m) => m.result == "INCOMPLETE").length;
+  const totalPointsWon = history.reduce((sum, m) => {
+    return sum + (m.players.find((p) => p.user.id === userId)?.score ?? 0);
+  }, 0);
+  const totalPointsLost = history.reduce((sum, m) => {
+    return sum + (m.players.find((p) => p.user.id !== userId)?.score ?? 0);
+  }, 0);
+  return {
+    wins,
+    losses,
+    winRatePercent,
+    loseRatePercent,
+    incompletes,
+    totalPointsWon,
+    totalPointsLost,
+  };
+}
+
+export default async function Stats({ userId }: { userId: number }) {
+  const {
+    wins,
+    losses,
+    winRatePercent,
+    loseRatePercent,
+    incompletes,
+    totalPointsWon,
+    totalPointsLost,
+  } = await getStats(userId);
+  return (
+    <ProfileItem title="Stats">
+      <div className="flex flex-col gap-1">
+        <div>
+          Win: {wins} ({winRatePercent}%)
+        </div>
+        <div>
+          Lose: {losses} ({loseRatePercent}%)
+        </div>
+        <div>Incomplete Match: {incompletes}</div>
+        <div>Total Points Won: {totalPointsWon}</div>
+        <div>Total Points Lost: {totalPointsLost}</div>
+      </div>
+    </ProfileItem>
+  );
+}

frontend/app/user/[id]/page.tsx

@@ -8,6 +8,7 @@ import MatchHistory from "@/app/ui/user/match-history";
 import MatchRequestButton from "@/app/ui/user/match-request-button";
 import RejectFriendButton from "@/app/ui/user/reject-friend-request-button";
 import RemoveFriendButton from "@/app/ui/user/remove-friend-button";
+import Stats from "@/app/ui/user/stats";
 
 export default async function FindUser({
   params: { id },
@@ -50,6 +51,7 @@ export default async function FindUser({
           <MatchRequestButton id={userId} />
         </>
       )}
+      <Stats userId={userId} />
       <MatchHistory userId={userId} />
       <div className="bg-secondary">Friends</div>
     </div>