fix(mobile): smaller trick cards on phones; drop duplicate XP bar on Profile
CI/CD / CI - API (dotnet build + engine sim) (push) Successful in 52s
CI/CD / CI - Web (tsc + next build) (push) Successful in 1m4s
CI/CD / Deploy - local stack (db + server + web) (push) Failing after 2m21s

- Game table: played-card pile now uses sm cards on phones (vw<480) + slightly
  tighter scale, so the center trick no longer crowds/overlaps the side seats'
  avatars on a tall portrait screen.
- Profile: the screen showed two XP bars (the global header bar + the identity
  card's detailed bar). Hide the header bar on Profile (showXp=false).

Verified: tsc + next build clean; web rebuilt on :1500.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-07 07:08:12 +03:30
parent 3e0c0ed876
commit 12177d2a33
2 changed files with 9 additions and 4 deletions
+7 -3
View File
@@ -65,7 +65,9 @@ export function GameTable({
const exit = onExit ?? reset;
const vw = useViewportWidth();
// Pull the played-card pile inward on narrow screens so it clears the side stacks.
const trickScale = vw < 360 ? 0.5 : vw < 460 ? 0.64 : 1;
const trickScale = vw < 360 ? 0.5 : vw < 460 ? 0.6 : 1;
// Smaller played cards on phones so the center pile stays clear of the side seats.
const trickCardSize: "sm" | "md" = vw < 480 ? "sm" : "md";
const { phase, players, hakem, trump, turn, currentTrick } = game;
const legalMovesList = useMemo(
@@ -196,7 +198,7 @@ export function GameTable({
<OpponentHand seat={3} className="absolute top-1/2 left-14 sm:left-16 -translate-y-1/2" />
{/* center trick area (offsets scale down on narrow screens) */}
<TrickArea trick={currentTrick} winner={game.lastTrickWinner} phase={phase} scale={trickScale} />
<TrickArea trick={currentTrick} winner={game.lastTrickWinner} phase={phase} scale={trickScale} cardSize={trickCardSize} />
</div>
</div>
@@ -426,11 +428,13 @@ function TrickArea({
winner,
phase,
scale = 1,
cardSize = "md",
}: {
trick: { seat: Seat; card: Card }[];
winner: Seat | null;
phase: string;
scale?: number;
cardSize?: "sm" | "md" | "lg";
}) {
const { front } = useCardSkins();
return (
@@ -455,7 +459,7 @@ function TrickArea({
: undefined,
}}
>
<PlayingCard card={pc.card} size="md" front={front} />
<PlayingCard card={pc.card} size={cardSize} front={front} />
</motion.div>
);
})}
+2 -1
View File
@@ -65,7 +65,8 @@ export function ProfileScreen() {
return (
<ScreenShell>
<ScreenHeader title={t("profile.title")} />
{/* showXp=false: the identity card below already has a detailed XP bar. */}
<ScreenHeader title={t("profile.title")} showXp={false} />
{/* identity */}
<motion.div