Responsive Gameboard Layout
Relevant source files
The following files were used as context for generating this wiki page:
The Responsive Gameboard Layout is a specialized UI system designed to ensure the Dreamcats card game remains playable and visually consistent across a wide range of devices and screen dimensions. It employs a multi-layered approach combining CSS Grid for structural positioning, a custom "scale-to-fit" React hook for overflow management, and dynamic "Compact Mode" adjustments for small viewports.
The layout primarily focuses on a North-West-East-South (N-W-E-S) table arrangement, positioning players around a central area containing the draw and discard piles. This ensures that whether a user is on a mobile phone, tablet, or desktop, the relative positioning of game elements remains intuitive. Sources: README.md:12, src/components/Gameboard.tsx:501-520
Core Architecture
The layout architecture is divided into three primary layers: the Viewport Guard, the Scaling Container, and the Ring Layout.
Viewport Management
The application enforces a strict viewport environment. The global CSS and App.tsx ensure the root container occupies exactly 100dvh (dynamic viewport height) and 100% width, with overflow: hidden to prevent accidental scrolling that could disrupt the game experience. Sources: src/index.css:168-177, README.md:92
Scaling Logic (useScaleToFit)
A critical component of the responsiveness is the useScaleToFit hook. This hook monitors a container and its content, calculating a CSS transform: scale() value to shrink the game board if it exceeds the available viewport space.
The diagram shows the logic flow for calculating the dynamic scale factor to prevent board overflow. Sources: src/hooks/useScaleToFit.ts, src/components/Gameboard.tsx:75-80
Component Distribution
| Component | Description | Placement Logic |
|---|---|---|
| Main Main | Central game area | CSS Grid center (col-2, row-2) |
| Player Hand | Local or opponent cards | N-W-E-S positions based on player index |
| Side Panel | Action log, chat, and scores | Collapsible sidebar (Desktop) or Sheet (Mobile) |
| Control Bar | Settings and exit | Sticky top header |
Sources: src/components/Gameboard.tsx:501-530, src/components/Gameboard.tsx:645-660
Layout Modes
The system dynamically switches between different layout configurations based on screen width and height.
Compact Mode
"Compact Mode" is triggered when the viewport height is less than 860px or the width is less than 1300px. In this mode, the UI reduces spacing and utilizes smaller card scales defined in CSS variables. Sources: src/components/Gameboard.tsx:63-70, src/index.css:260-275
Collaborative Side Panel
The sidebar behavior is responsive to the environment:
- Desktop (> 1400px): The sidebar is visible by default but can be toggled using a
Menubutton. - Small Screens (< 1400px): The sidebar auto-collapses to maximize game space.
- Mobile: The sidebar content is moved into a
Sheetcomponent (drawer) accessible via a hamburger menu.
Sources: src/components/Gameboard.tsx:71-73, src/components/Gameboard.tsx:492-498
Implementation Details
CSS Grid Configuration
The gameboard uses a complex 3x3 grid to manage the circular player arrangement.
Sources: src/components/Gameboard.tsx:501-512
Card Scaling and Transitions
Card sizes are managed via CSS variables that adjust based on media queries and layout state.
/* src/index.css:260-265 */
.game-compact {
--card-scale: 0.85;
}
@media (max-height: 800px) {
.game-compact {
--card-scale: 0.75;
}
}
The layout also utilizes GSAP for animations to ensure that as elements move or scale, the transitions remain performant. This replaced previous animation libraries to improve stability during rapid state changes. Sources: README.md:88, src/components/Gameboard.tsx:288-300
Layout State Management
The UI state is synchronized through the Zustand store, tracking viewport-specific metadata.
| State Field | Type | Description |
|---|---|---|
safeArea | object | Insets for mobile notches (top, right, bottom, left) |
viewportHeight | number | Current pixel height of the viewport |
isMenuOpen | boolean | State of the desktop collapsible sidebar |
isSheetOpen | boolean | State of the mobile drawer |
Sources: src/tests/store.test.ts:182-205, src/tests/selectors.test.ts:60-65
Summary
The Responsive Gameboard Layout combines fixed viewport constraints with fluid scaling logic to deliver a consistent experience. By prioritizing a central grid for piles and using a North-West-East-South seating arrangement that adapts via useScaleToFit, the system handles the inherent complexity of a multiplayer card game layout on diverse hardware.