player card added

src/components/match-history-battle-card.tsx

@@ -1,4 +1,8 @@
+"use client";
+
 import Link from "next/link";
+import { ClickableUserId } from "@/components/clickable-user-id";
+import { formatRcLabelFromCoinsBigInt } from "@/lib/coins-rc";
 
 type PlayerSide = {
   id: number | null;
@@ -12,14 +16,47 @@ type Props = {
   matchId: number;
   statusLabel: string;
   createdAtLabel: string;
-  entryFee: number | null;
-  prizeCc: number | null;
+  /** `matches.entry_fee` as coin string (bigint); RC shown in footer. */
+  entryFeeCoins: string | null;
+  /** Ledger `entry_hold` / player as coin string; null if unknown. */
+  entryHoldPerPlayerCoins: string | null;
+  /** Preformatted `prize_cc` for display (e.g. with grouping). */
+  prizeCcLabel: string;
   left: PlayerSide;
   right: PlayerSide;
   /** May be string when `bigint` is JSON-serialized. */
   winnerId: number | string | null;
 };
 
+function rcLabelFromCoinString(s: string | null): string {
+  if (s == null || String(s).trim() === "") return "—";
+  try {
+    return formatRcLabelFromCoinsBigInt(BigInt(String(s).trim()));
+  } catch {
+    return "—";
+  }
+}
+
+function entryTotalRcLabel(
+  feeCoins: string | null,
+  holdCoins: string | null,
+): string {
+  if (
+    feeCoins == null ||
+    holdCoins == null ||
+    String(feeCoins).trim() === "" ||
+    String(holdCoins).trim() === ""
+  ) {
+    return "—";
+  }
+  try {
+    const sum = BigInt(String(feeCoins).trim()) + BigInt(String(holdCoins).trim());
+    return formatRcLabelFromCoinsBigInt(sum);
+  } catch {
+    return "—";
+  }
+}
+
 function idsMatch(
   a: number | string | null | undefined,
   b: number | string | null | undefined,
@@ -110,7 +147,17 @@ function PlayerPanel({
             {playerLabel(side)}
           </p>
           <p className={`text-[11px] font-semibold tabular-nums ${s.score}`}>
-            ID: {side.id ?? "—"}
+            ID:{" "}
+            {side.id != null ? (
+              <ClickableUserId
+                id={side.id}
+                className="cursor-pointer border-0 bg-transparent p-0 text-[11px] font-semibold text-inherit underline decoration-white/50 underline-offset-2 hover:decoration-white"
+              >
+                {side.id}
+              </ClickableUserId>
+            ) : (
+              "—"
+            )}
           </p>
         </div>
       </div>
@@ -131,12 +178,17 @@ export function MatchHistoryBattleCard({
   matchId,
   statusLabel,
   createdAtLabel,
-  entryFee,
-  prizeCc,
+  entryFeeCoins,
+  entryHoldPerPlayerCoins,
+  prizeCcLabel,
   left,
   right,
   winnerId,
 }: Props) {
+  const entryRc = entryTotalRcLabel(entryFeeCoins, entryHoldPerPlayerCoins);
+  const entryFeeRc = rcLabelFromCoinString(entryFeeCoins);
+  const entryHoldRc = rcLabelFromCoinString(entryHoldPerPlayerCoins);
+  const prizeCcDisplay = prizeCcLabel.trim() === "" ? "—" : prizeCcLabel;
   const hasWinner =
     winnerId != null &&
     winnerId !== "" &&
@@ -181,15 +233,21 @@ export function MatchHistoryBattleCard({
       </div>
 
       <div className="mt-2 flex flex-wrap items-center justify-between gap-2 border-t border-zinc-300/80 pt-1.5 text-xs font-medium text-zinc-700 dark:border-zinc-700 dark:text-zinc-300">
-        <div className="flex flex-wrap gap-2">
+        <div className="flex min-w-0 flex-1 flex-wrap gap-2">
           <span className="rounded bg-zinc-900/10 px-2 py-1 dark:bg-zinc-100/10">
-            Entry {entryFee ?? "—"}
+            Time {createdAtLabel}
           </span>
           <span className="rounded bg-zinc-900/10 px-2 py-1 dark:bg-zinc-100/10">
-            Prize {prizeCc ?? "—"} CC
+            Entry {entryRc}
           </span>
           <span className="rounded bg-zinc-900/10 px-2 py-1 dark:bg-zinc-100/10">
-            {createdAtLabel}
+            Entry hold {entryHoldRc}
+          </span>
+          <span className="rounded bg-zinc-900/10 px-2 py-1 dark:bg-zinc-100/10">
+            Prize {prizeCcDisplay} CC
+          </span>
+          <span className="rounded-md border border-emerald-200/90 bg-emerald-50 px-2 py-1 text-[11px] font-medium text-emerald-600 dark:border-emerald-300/35 dark:bg-emerald-400/15 dark:text-emerald-200">
+            Entry fee {entryFeeRc}
           </span>
         </div>
         <Link