From e1e3a716a4527fb2e7a802d8d0243e2832a5f207 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Tue, 16 Jun 2026 08:18:37 +0330
Subject: [PATCH] ui(game): minimal, smaller scoreboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Compact the in-game scoreboard to a single small pill: team label + score with
trick count inline in parens (e.g. "0 (3)"), a thin dot separator, and a tiny
target number — dropping the tall 3-line columns and large fonts. Frees more
HUD room and reads at a glance.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/GameTable.tsx | 36 ++++++++++++------------------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/src/components/GameTable.tsx b/src/components/GameTable.tsx
index 7b88baf..846df64 100644
--- a/src/components/GameTable.tsx
+++ b/src/components/GameTable.tsx
@@ -237,24 +237,13 @@ function Scoreboard() {
   const game = useGameStore((s) => s.game);
   const { t } = useI18n();
   return (
-    <div className="glass rounded-2xl px-2 py-1 gap-1.5 sm:px-4 sm:py-2.5 sm:gap-4 flex items-center shrink min-w-0">
-      <ScoreCol
-        label={t("team.us")}
-        tricks={game.roundTricks[0]}
-        score={game.matchScore[0]}
-        accent="text-teal-400"
-      />
-      <div className="text-cream/30 text-base sm:text-lg font-light shrink-0">/</div>
-      <ScoreCol
-        label={t("team.them")}
-        tricks={game.roundTricks[1]}
-        score={game.matchScore[1]}
-        accent="text-rose-400"
-      />
-      <div className="ltr:ml-1.5 rtl:mr-1.5 sm:ltr:ml-2 sm:rtl:mr-2 ltr:border-l rtl:border-r border-gold-500/20 ltr:pl-2 rtl:pr-2 sm:ltr:pl-3 sm:rtl:pr-3 shrink-0">
-        <div className="text-[9px] sm:text-[10px] text-cream/50 leading-none">{t("home.target")}</div>
-        <div className="gold-text font-bold text-center text-sm sm:text-base leading-tight">{game.targetScore}</div>
-      </div>
+    <div className="glass rounded-xl px-2.5 py-1 flex items-center gap-2 shrink min-w-0">
+      <ScoreCol label={t("team.us")} tricks={game.roundTricks[0]} score={game.matchScore[0]} accent="text-teal-300" />
+      <span className="text-cream/25 text-xs shrink-0">·</span>
+      <ScoreCol label={t("team.them")} tricks={game.roundTricks[1]} score={game.matchScore[1]} accent="text-rose-300" />
+      <span className="ltr:border-l rtl:border-r border-gold-500/15 ltr:pl-2 rtl:pr-2 text-[9px] text-gold-300/70 leading-none text-center shrink-0">
+        {game.targetScore}
+      </span>
     </div>
   );
 }
@@ -270,13 +259,12 @@ function ScoreCol({
   score: number;
   accent: string;
 }) {
-  const { t } = useI18n();
   return (
-    <div className="text-center min-w-8 sm:min-w-14 shrink-0">
-      <div className={cn("text-[10px] sm:text-xs font-semibold truncate", accent)}>{label}</div>
-      <div className="text-base sm:text-2xl font-black leading-none">{score}</div>
-      <div className="text-[9px] sm:text-[10px] text-cream/45 mt-0.5 truncate">
-        {t("score.tricks")}: {tricks}
+    <div className="text-center shrink-0 leading-none">
+      <div className={cn("text-[9px] font-semibold", accent)}>{label}</div>
+      <div className="text-sm font-black leading-tight mt-0.5">
+        {score}
+        <span className="text-[9px] font-normal text-cream/40 ltr:ml-0.5 rtl:mr-0.5">({tricks})</span>
       </div>
     </div>
   );