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 exit = onExit ?? reset;
|
||||||
const vw = useViewportWidth();
|
const vw = useViewportWidth();
|
||||||
// Pull the played-card pile inward on narrow screens so it clears the side stacks.
|
// 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 { phase, players, hakem, trump, turn, currentTrick } = game;
|
||||||
|
|
||||||
const legalMovesList = useMemo(
|
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" />
|
<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) */}
|
{/* 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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -426,11 +428,13 @@ function TrickArea({
|
|||||||
winner,
|
winner,
|
||||||
phase,
|
phase,
|
||||||
scale = 1,
|
scale = 1,
|
||||||
|
cardSize = "md",
|
||||||
}: {
|
}: {
|
||||||
trick: { seat: Seat; card: Card }[];
|
trick: { seat: Seat; card: Card }[];
|
||||||
winner: Seat | null;
|
winner: Seat | null;
|
||||||
phase: string;
|
phase: string;
|
||||||
scale?: number;
|
scale?: number;
|
||||||
|
cardSize?: "sm" | "md" | "lg";
|
||||||
}) {
|
}) {
|
||||||
const { front } = useCardSkins();
|
const { front } = useCardSkins();
|
||||||
return (
|
return (
|
||||||
@@ -455,7 +459,7 @@ function TrickArea({
|
|||||||
: undefined,
|
: undefined,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<PlayingCard card={pc.card} size="md" front={front} />
|
<PlayingCard card={pc.card} size={cardSize} front={front} />
|
||||||
</motion.div>
|
</motion.div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
@@ -65,7 +65,8 @@ export function ProfileScreen() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<ScreenShell>
|
<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 */}
|
{/* identity */}
|
||||||
<motion.div
|
<motion.div
|
||||||
|
|||||||
Reference in New Issue
Block a user