Responsive & portrait layouts

Aspect-ratio-aware scenes without branching in business code.

Responsive layout is a scene concern — not a store, not a phase, not a domain concern. Keep it there.

Pattern

• Listen to window.resize in the scene.
• Compute a layout (portrait / landscape / narrow / wide) and apply it to the reel container + HUD positions.
• Keep reel-cell dimensions in one file (src/view/scenes/layout.ts) so every subsystem reads from the same source.

Don't

• Branch on aspect ratio inside presenters or phases.
• Keep per-orientation duplicates of stores or phases.
• Recompute cell bounds in overlays. Call reelSet.getCellBounds(reel, row).

Breakpoints

Slot clients typically have two or three layouts: landscape desktop, landscape phone, portrait phone. Branch at the layout level and flow everything else from there. Don't try to interpolate — designers want each layout tuned.

Iframe embedding

RGS lobbies load slot clients in iframes with fixed aspect ratios. Verify your CSP and postMessage origin. Test with a narrow container in dev (?frame=narrow) before shipping.