Home
Relevant source files
The following files were used as context for generating this wiki page:The Home screen, implemented in the HomeLobby component, serves as the central hub for the "Hold-em-or-Fold-em-Poker" application. After a user logs in, they are directed to this lobby, which acts as the main entry point to all core features, including different poker game modes, the in-game store, user profile management, and social interactions.
The lobby's primary function is to provide clear navigation paths for the user to select a game, manage their account, and interact with other players. It is designed with a distinct header for profile and store access, a central area for game mode selection, and a bottom navigation bar for social and settings features.
Sources: components/lobby.tsx
Architecture and Component Flow
The Home screen is built around the HomeLobby component, which orchestrates navigation to various sub-modules of the application. When a user interacts with an element in the lobby, it triggers a state change in a parent component that renders the corresponding page or modal, such as the TableSelection dialog or the Store page.
The following diagram illustrates the high-level component interaction starting from the HomeLobby.
This diagram shows how the HomeLobby component acts as a dispatcher, launching other major components based on user actions.
Sources: components/lobby.tsx:13-14, components/lobby.tsx:28, components/lobby.tsx:47-78, components/lobby.tsx:83-106
Core Components
The HomeLobby is composed of several distinct UI sections, each providing access to different application features.
Sources: components/lobby.tsx.
Header
The header contains the user's profile information and a direct link to the in-game store.
| Element | Component/Action | Description | Source File |
|---|---|---|---|
| Profile | ProfileButton | Displays the user's avatar and name. Clicking it likely opens the UserProfile component. | components/lobby.tsx:20-23 |
| Store Button | Button | An onClick handler onOpenStore opens the Store component. | components/lobby.tsx:26-31 |
Game Mode Selection
The central part of the lobby displays buttons for the primary game modes available. Clicking any of these buttons triggers the onNavigate callback, which typically leads to the TableSelection component filtered for that game mode.
| Game Mode | onNavigate Parameter | Description | Source File |
|---|---|---|---|
| Cash | 'cash' | Navigates to cash game table selection. | components/lobby.tsx:48-52 |
| All in | 'allin' | Navigates to "All in or Fold" table selection. | components/lobby.tsx:55-59 |
| MTT | 'mtt' | Navigates to Multi-Table Tournament selection. | components/lobby.tsx:62-66 |
| SNG | 'sng' | Navigates to Sit and Go tournament selection. | components/lobby.tsx:69-73 |
Bottom Navigation
A persistent bottom navigation bar provides access to social and utility features.
| Feature | Icon | Description | Source File |
|---|---|---|---|
| Friends | Users | Opens the friends list and management page (FriendsPage). | components/lobby.tsx:84-87 |
| Club | Users | Intended to open a player club/guild feature. | components/lobby.tsx:90-93 |
| Chat | MessageCircle | Opens a global or private chat interface. | components/lobby.tsx:96-99 |
| Settings | Settings | Opens the game settings menu. | components/lobby.tsx:102-105 |
User Navigation Flow
The primary user journey starts from the lobby and branches out into either gameplay, store, or profile management.
This flowchart shows the main navigation paths a user can take from the home lobby.
Sources: components/lobby.tsx, components/table-selection.tsx, components/store.tsx, components/user-profile.tsx, components/friends-page.tsx
Key Navigational Components
Table Selection
When a user selects a game mode, the TableSelection component is displayed as a dialog. It lists available tables, showing stakes, buy-ins, and player counts.
Sources: components/table-selection.tsx
StakeTable Data Structure
This interface defines the properties for each poker table listed in the selection screen.
Sources: components/table-selection.tsx:12-23
Functionality
- Filtering: The component receives a
gameModeprop to display only relevant tables. - Affordability Check: The
canAffordTablefunction checks if theplayerChipsare sufficient to meet theminBuyInof a table. Unaffordable tables are visually disabled. - View Modes: The component supports both a "grid" and a "list" view, which is particularly useful for adapting to mobile screen sizes.
- Selection: Clicking a table marks it as selected, and clicking the "Next" button confirms the choice, triggering the
onSelectTablecallback.
Sources: components/table-selection.tsx:100-102, components/table-selection.tsx:40-44, components/table-selection.tsx:108-113
Store
The Store component is a dedicated screen for in-app purchases. It is organized into tabs for different types of items.
Sources: components/store.tsx
- Tabs: The store is divided into "Coins", "Diamonds", and "Subscription" tabs.
- Packages: It displays various
CoinPackageandDiamondPackageitems, each with a price, amount, and potential bonus. Some packages are highlighted as "Best Value" or "Popular". - Balance Display: The player's current chip and diamond balances are displayed at the top of the respective tabs.
The structure of a coin package is as follows:
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier for the package. |
baseAmount | number | The base number of coins before any bonus. |
bonusPercentage | number | The percentage of bonus coins added. |
totalAmount | number | The total coins received (baseAmount + bonus). |
bonusTickets | number | Number of bonus tickets included. |
price | number | The cost of the package in real currency. |
bestValue | boolean (optional) | Flag for the best value package. |
popular | boolean (optional) | Flag for a popular package. |
Sources: components/store.tsx:15, components/store.tsx:42-69, components/store.tsx:112-119
User Profile
Accessible via the ProfileButton in the lobby header, the UserProfile component displays detailed information about the player, including stats, achievements, and gifts. It serves as a gateway to more detailed views like the StatsDashboard, AchievementsPage, and GiftsPage.
Sources: components/user-profile.tsx, components/lobby.tsx:21
Dependencies
The project utilizes Next.js as its framework and relies on several UI libraries for its components, as defined in package.json.
- Framework:
next - UI Components:
@radix-ui/*,lucide-react - Styling:
tailwindcss,clsx,tailwind-merge - State/Hooks:
react,react-hook-form
Sources: package.json:11-47