Lobby & Navigation UI

Relevant source files

The following files were used as context for generating this wiki page:

• app/page.tsx
• components/lobby.tsx
• components/table-selection.tsx
• components/tournament-lobby.tsx
• components/seat-selection.tsx
• components/game-menu.tsx

The Lobby & Navigation UI serves as the central hub for players, providing the primary interface for game selection, table entry, and access to auxiliary features. It is the user's first point of interaction after authentication, guiding them into different game modes such as cash games and tournaments. The system is built around a state machine that manages the current view, transitioning the user through a logical flow from the main lobby, to table or tournament selection, seat selection, and finally to the poker table itself.

This system is composed of several key React components that render conditionally based on the application's state. The main Home component in app/page.tsx orchestrates this flow, managing the currentView state to display the appropriate UI to the user at each step of their journey into a game.

Core Architecture

The navigation architecture is managed by the main Home component, which acts as a view controller. It uses a currentView state variable to determine which primary component to render.

Sources: app/page.tsx:10-13

State Management

The primary navigation logic is controlled by a set of state variables within the Home component.

State Variable	Type	Description	Source File
currentView	PageView	A string enum that determines the currently visible component (e.g., "lobby", "cash", "table").	app/page.tsx:10
selectedGameMode	"cash" | "allin" | "mtt" | "sng"	Stores the game mode chosen by the user from the main lobby.	app/page.tsx:11
selectedTable	StakeTable | null	Holds the data for the cash game table selected by the user.	app/page.tsx:12

The PageView type defines all possible views the application can be in:
"lobby" | "cash" | "allin" | "mtt" | "sng" | "seat-selection" | "table" | "store"

Sources: app/page.tsx:9

Application Flow

The user progresses through a series of views, managed by state changes triggered by user actions. The typical flow for joining a cash game is Lobby -> Table Selection -> Seat Selection -> Poker Table.

The following diagram illustrates the primary navigation flow controlled by the Home component.

Sources: app/page.tsx:15-53

Key Navigation Components

The UI is composed of several distinct components, each responsible for a specific part of the user's journey.

Component	Purpose	Source File
HomeLobby	The main entry screen with game mode selection and main navigation links.	components/lobby.tsx
TableSelection	A dialog for selecting a cash game table based on stakes and other criteria.	components/table-selection.tsx
TournamentLobby	An interface for browsing and registering for tournaments.	components/tournament-lobby.tsx
SeatSelection	A visual interface for choosing an available seat at a selected cash game table.	components/seat-selection.tsx
GameMenu	A slide-out menu providing access to global features like settings, friends, and stats.	components/game-menu.tsx

Home Lobby

The HomeLobby component is the initial screen. It presents the main game modes and a persistent bottom navigation bar.

Sources: components/lobby.tsx

Features:

• Profile Display: Shows the local player's name and a profile button.
  Sources: components/lobby.tsx:20-23
• Store Button: A prominent button to navigate to the in-game store.
  Sources: components/lobby.tsx:26-31
• Game Mode Selection: Four main buttons allow the user to navigate to different game types:
  • Cash
  • All in
  • MTT (Multi-Table Tournament)
  • SNG (Sit and Go)
    Sources: components/lobby.tsx:45-72
• Bottom Navigation: A fixed bar at the bottom with icons for Friends, Club, Chat, and Settings.
  Sources: components/lobby.tsx:76-99

Sources: components/lobby.tsx:17-101

Table Selection

When a user selects "Cash" or "All in" from the lobby, the TableSelection component is displayed. It allows users to browse and select a table to join.

Sources: components/table-selection.tsx

Features:

• View Modes: Tables can be displayed in a "grid" or "list" format. The view mode can be toggled, and it defaults to a horizontal scrollable grid on mobile.
  Sources: components/table-selection.tsx:22, 252-264
• Table Data: Each table is represented by the StakeTable interface.
• Affordability Check: The UI visually indicates whether the player has enough chips to meet the minimum buy-in for a table. Unaffordable tables are disabled and styled differently.
  Sources: components/table-selection.tsx:149-151, 186-187
• Player Information: Displays the player's current chip count for reference.
  Sources: components/table-selection.tsx:246-250

StakeTable Interface

This interface defines the structure for each cash game table object.

Property	Type	Description
id	string	Unique identifier for the table.
name	string	Display name of the table (e.g., "Micro Stakes").
smallBlind	number	The small blind amount.
bigBlind	number	The big blind amount.
minBuyIn	number	The minimum chips required to join.
maxBuyIn	number	The maximum chips a player can bring to the table.
currentPlayers	number	The number of players currently at the table.
maxPlayers	number	The maximum capacity of the table.
isVip	boolean	Indicates if the table is for VIP players only.
difficulty	"Beginner" | "Intermediate" | "Advanced" | "Expert"	The skill level classification of the table.
gameMode	GameMode	The type of game being played (e.g., "omaha", "allin").

Sources: components/table-selection.tsx:14-26

Tournament Lobby

The TournamentLobby component is shown for "MTT" and "SNG" game modes. It lists available tournaments and allows players to register.

Sources: components/tournament-lobby.tsx

Features:

• Tournament Listing: Displays a list of available tournaments with various configurations (Heads-Up, Turbo, Bounty, Regular).
  Sources: components/tournament-lobby.tsx:28-87
• Tournament Details: For each tournament, it shows:
  • Buy-in and Prize Pool
  • Player count (min/max)
  • Late registration time
  • Prize structure
  • Special features (e.g., Bounty amount)
    Sources: components/tournament-lobby.tsx:226-281
• Registration Status: If a player registers for a tournament, a status panel appears showing the number of registered players and a progress bar. A "Start Tournament" button becomes active once the minimum number of players is reached.
  Sources: components/tournament-lobby.tsx:146-200

TournamentConfig Data

The component uses a TournamentConfig object to define each tournament's properties.

Property	Type	Description
id	string	Unique identifier for the tournament.
name	string	Display name of the tournament.
buyIn	number	The cost to enter the tournament.
startingChips	number	The number of chips each player starts with.
maxPlayers	number	The maximum number of players.
minPlayers	number	The minimum players required to start.
blindStructure	BlindLevel[]	The schedule of blind increases.
prizePoolPercentages	number[]	The payout structure for top finishers.
tournamentType	"headsup" | "turbo" | "bounty" | "regular"	The specific type of tournament.
bountyAmount	number (optional)	The chip bonus for eliminating a player in bounty tournaments.

Sources: components/tournament-lobby.tsx:28-87

Seat Selection

After a user selects a cash game table from TableSelection, they are presented with the SeatSelection component. This provides a visual representation of the poker table and allows the user to choose an empty seat.

Sources: components/seat-selection.tsx

The user flow from table selection to joining the game is as follows:

Sources: app/page.tsx:29-37, components/table-selection.tsx:160-165, components/seat-selection.tsx:102-107

Features:

• Visual Table Layout: Displays a poker table with 6 seats positioned around it.
  Sources: components/seat-selection.tsx:109-120, 169-245
• Seat Status: Each seat is visually distinct based on its status:
  • Occupied: Shows the player's name, chip count, and is not clickable.
  • Available: Is clickable and prompts the user to take the seat.
  • Selected: Highlighted to indicate the user's choice before confirmation.
    Sources: components/seat-selection.tsx:176-244
• Confirmation: A "Confirm Seat" button, which is enabled only after a seat is selected, finalizes the choice and transitions the user to the PokerTable.
  Sources: components/seat-selection.tsx:254-264

Game Menu

The GameMenu is a global navigation element accessible from the poker table. It's a slide-out panel that provides access to various non-gameplay features.

Sources: components/game-menu.tsx

Menu Items:

• Settings
• Friends
• How to Play
• Statistics
• Tournaments
• Send Gifts
• Leave Table

Sources: components/game-menu.tsx:64-121

The menu manages its own internal state to show other full-screen components like StatsDashboard, TournamentLobby, and FriendsPage when their respective buttons are clicked.

Sources: components/game-menu.tsx:20-22, 32-47