Cash Games & Table Selection

The Cash Games & Table Selection system is the primary user flow for players to join a non-tournament poker game. It guides the user from the main lobby, through selecting a game type and stakes, to choosing a specific seat at a table before gameplay begins. This process is managed by a state machine within the main Home component, which conditionally renders a series of modal-like components (TableSelection, SeatSelection) to create a seamless, step-by-step experience.

This flow is designed to be intuitive, providing clear information about table stakes, player counts, and buy-in requirements. It also handles different game modes like standard "Cash" games and the fast-paced "All-in or Fold" variant. The final step transitions the user to the PokerTable component, where the actual game is played.

System Architecture and User Flow

The entire process is orchestrated by the Home component in app/page.tsx. This component acts as a state controller, managing the currentView state to determine which part of the flow is visible to the user. The user progresses through a series of components, each responsible for a specific stage of the selection process.

Sources: app/page.tsx:10-14

State Management

The core of the navigation is the currentView state, which can hold one of the following PageView values:

| View (PageView) | Component Rendered - - Description -
| lobby | HomeLobby - The main entry point, showing different game modes. -
| cash, allin | TableSelection - Displays a list of available cash game tables for the selected mode. -
| seat-selection | SeatSelection - Shows a visual representation of the selected table for seat choice. -
| mtt, sng | TournamentLobby - Handles tournament registration (out of scope for this document). -
| table | PokerTable - The final destination where the game is played. -
| store | Store - The in-game store for purchasing chips/diamonds. -

Sources: app/page.tsx:9-14, 60-98

User Flow Diagram

This diagram illustrates the sequence of views and user actions from the lobby to the poker table.

Components

1. Home Lobby (lobby.tsx)

The HomeLobby is the initial screen. It presents the user with several game mode choices. For cash games, the relevant options are "NLH" (which corresponds to 'cash') and "ALL IN OR FOLD". Clicking one of these buttons triggers the onNavigate callback, which updates the currentView in the parent Home component, initiating the table selection flow.

Sources: components/lobby.tsx, app/page.tsx:16-25

2. Table Selection (table-selection.tsx)

This component is displayed as a dialog after the user selects a cash game mode. It fetches and displays a list of available tables (StakeTable) matching the chosen game mode.

Key Features

• Dynamic Views: Supports both a "grid" and "list" view, with the grid view on mobile featuring a horizontal scroll. The view mode is toggled via the viewMode state.
• Affordability Check: The canAffordTable function checks if the playerChips are greater than or equal to the table's minBuyIn. Tables the player cannot afford are visually disabled and show how many more chips are needed.
• Table Information: Each table card displays crucial information:
  • Table Name
  • Blinds (Small/Big)
  • Buy-in Range (Min/Max)
  • Player Count (Current/Max)
  • Difficulty Badge (Beginner, Intermediate, etc.)
  • VIP status
• Mobile Optimization: The component detects mobile viewports (isMobile state) and adjusts its layout, including offering a more compact list view and horizontal scrolling for the grid view.

Sources: components/table-selection.tsx:24, 31, 198, 214, 348

StakeTable Data Structure

The StakeTable interface defines the properties for each available cash game table.

Sources: components/table-selection.tsx:10-21

Table Selection Flow

3. Seat Selection (seat-selection.tsx)

After a table is chosen, the SeatSelection component is rendered. It presents a visual representation of the poker table with all its seats, allowing the user to pick an empty spot.

Key Features

• Visual Table: A graphical representation of a poker table is shown, with seats positioned around it.
• Seat Status: Seats are clearly marked as either occupied (showing player info) or available.
• Interactive Seats: Available seats are clickable. Clicking an available seat marks it as selectedSeat.
• Player Information: Occupied seats display the player's name, chip count, and a VIP icon if applicable.
• Confirmation: A "Confirm Seat" button becomes active once a seat is selected, which triggers the onSelectSeat callback and transitions the view to the PokerTable.

Sources: components/seat-selection.tsx:28-30, 95-99, 277-287

Seat Data Structure

The Seat interface defines the properties for each seat at the table.

Seat Selection Flow

Conclusion

The Cash Games & Table Selection system provides a structured and user-friendly pathway for players to join a game. By breaking the process into distinct, manageable steps—lobby, table selection, and seat selection—the application ensures players have all the necessary information to make informed decisions about the game they wish to join. The state management in app/page.tsx is central to this flow, acting as a simple but effective router that guides the user from one component to the next, culminating in the instantiation of the PokerTable where gameplay commences.