fix(mobile): smaller trick cards on phones; drop duplicate XP bar on Profile
- 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:
@@ -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>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user