jason/polaris-task-force
1
0
Fork 0
Code Issues Wiki Activity

feat(poker): contain-fit 4:3 felt sizing and fullscreen portal parity with blackjack

Browse source 
Co-authored-by: Sisyphus <sisyphus@ohmyopencode.dev>
This commit is contained in:
Jason Fraley 2026-09-14 19:24:59 -04:00
parent c4b19bf8e5
commit 90070abb2e
3 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/app/(frontend)/styles.css
View file

@ -1402,13 +1402,20 @@
bottom: auto; bottom: auto;
} }
/* Fullscreen contain-fit: absolute with zero insets + auto margins sizes the
felt to the largest 4:3 rectangle inside the viewport area (the same rules
browsers use for replaced elements), so it can never collapse to content
size and never overflow. Must stay after .poker-felt-table to win the
width tie. */
.poker-felt-fullscreen { .poker-felt-fullscreen {
min-height: max(76vh, 42rem); position: absolute;
border-radius: 50% / 48%; inset: 0;
} margin: auto;
width: auto;
.poker-felt-fullscreen::after { height: auto;
border-radius: 50% / 46%; max-width: 100%;
max-height: 100%;
aspect-ratio: 4 / 3;
} }
.poker-seat-panel { .poker-seat-panel {

4
src/components/frontend/minigames/poker/PokerFeltCanvas.tsx
View file

@ -114,8 +114,8 @@ export function PokerFeltCanvas({
<div className="poker-table-stage"> <div className="poker-table-stage">
<div <div
className={cn( className={cn(
"poker-felt-table relative min-h-[36rem] overflow-hidden p-4 sm:min-h-[42rem]", "poker-felt-table poker-felt relative aspect-[4/3] overflow-hidden p-4",
fullscreen && "poker-felt-fullscreen", fullscreen ? "poker-felt-fullscreen" : "min-h-[40rem] w-full max-w-[56rem]",
)} )}
> >
{opponents.map((player: PublicPlayerView, opponentIndex) => { {opponents.map((player: PublicPlayerView, opponentIndex) => {

4
src/components/frontend/minigames/poker/PokerGameTable.tsx
View file

@ -121,7 +121,7 @@ export function PokerGameTable({
if (!mounted) return null; if (!mounted) return null;
return createPortal( return createPortal(
<div className="fixed inset-0 z-50 flex flex-col gap-3 overflow-auto bg-black/92 p-4 backdrop-blur-sm"> <div className="fixed inset-0 z-50 flex flex-col gap-3 overflow-hidden bg-black/92 p-4 backdrop-blur-sm">
<div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border border-white/15 bg-black/60 p-3 backdrop-blur-sm"> <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border border-white/15 bg-black/60 p-3 backdrop-blur-sm">
<div className="flex min-w-0 items-center gap-2"> <div className="flex min-w-0 items-center gap-2">
<span className="truncate font-semibold text-white">{tableName}</span> <span className="truncate font-semibold text-white">{tableName}</span>
@ -159,7 +159,7 @@ export function PokerGameTable({
)} )}
</div> </div>
</div> </div>
{feltCanvas} <div className="relative min-h-0 flex-1">{feltCanvas}</div>
</div>, </div>,
document.body, document.body,
); );