In-Game Store
Relevant source files
The following files were used as context for generating this wiki page:The In-Game Store is a core monetization feature within the "Hold-em-or-Fold-em-Poker" application. It provides a user interface for players to purchase virtual goods, primarily in-game currencies like "Coins" and "Diamonds," as well as a "VIP Premium" subscription using real money. These currencies are essential for player progression, allowing them to enter higher-stakes games, buy virtual gifts, and access exclusive content.
The store is implemented as a full-screen modal component, accessible from the main Lobby. It is organized into three main sections: Coins, Diamonds, and Subscription, managed through a tabbed interface. The component is responsible for displaying available packages, player balances, and handling the purchase flow.
Sources: components/store.tsx, components/lobby.tsx:11
Component Architecture
The store functionality is encapsulated within the Store React component. It is designed as a client-side component ("use client") and manages its own state for tab selection.
Sources: components/store.tsx:1, components/store.tsx:18
Component Props
The Store component accepts the following props to integrate with the parent application state:
| Prop | Type | Description |
|---|---|---|
onClose | () => void | A callback function to close the store interface. |
playerChips | number | The player's current balance of coins (chips). |
playerDiamonds | number | The player's current balance of diamonds. |
Sources: components/store.tsx:12-16
Internal State
The component uses React's useState hook to manage the currently active tab.
const [selectedTab, setSelectedTab] = useState<"coins" | "diamonds" | "subscription">("coins");
This state determines which TabsContent section is rendered, showing either coin packages, diamond packages, or the subscription offer.
Sources: components/store.tsx:18
Component Flow
The following diagram illustrates the basic user flow for accessing and interacting with the store.
This diagram shows the flow from the lobby, through tab selection in the store, to initiating a purchase.
Sources: components/lobby.tsx:21-24, components/store.tsx:18, 122, 143, 154, 252
Data Structures
The items available for purchase in the store are defined by specific data structures, likely outlined in types/store.ts.
Sources: components/store.tsx:10
CoinPackage
This interface defines the structure for a coin package available for purchase.
| Field | Type | Description |
|---|---|---|
id | string | A unique identifier for the package. |
baseAmount | number | The standard number of coins in the package. |
bonusPercentage | number | The percentage of bonus coins added. |
totalAmount | number | The total coins received (baseAmount + bonus). |
bonusTickets | number | The number of bonus tickets included. |
price | number | The real-money price of the package. |
bestValue? | boolean | (Optional) Marks the package as the best value offer. |
popular? | boolean | (Optional) Marks the package as a popular choice. |
Sources: components/store.tsx:10, types/store.ts
DiamondPackage
This interface defines the structure for a diamond package.
| Field | Type | Description |
|---|---|---|
id | string | A unique identifier for the package. |
amount | number | The number of diamonds in the package. |
bonusPercentage | number | The percentage of bonus diamonds added. |
price | number | The real-money price of the package. |
popular? | boolean | (Optional) Marks the package as a popular choice. |
Sources: components/store.tsx:10, types/store.ts
The following class diagram visualizes these data structures.
Sources: components/store.tsx:29-93, types/store.ts
Store Sections
The store is divided into three main tabs, each serving a different purpose.
Sources: components/store.tsx:122
Coins Tab
This is the default tab, allowing players to purchase "Coins" (also referred to as "chips"). It displays the player's current coin balance and a list of available CoinPackage items.
- Balance Display: Shows the
playerChipsprop, formatted for readability. - Packages: Renders a list of
coinPackages, each with details like total amount, bonus percentage, and price. - Badges: Special packages are highlighted with "BEST VALUE" or "POPULAR" badges to guide user choice.
The available coin packages are hardcoded within the component:
| ID | Total Amount | Bonus | Price | Special Badge |
|---|---|---|---|---|
mega | 3,850,000,000 | 157% | $99.99 | Best Value |
super | 1,680,000,000 | 124% | $49.99 | Popular |
large | 1,050,000,000 | 100% | $35.99 | - |
medium | 535,000,000 | 70% | $19.99 | - |
small | 220,000,000 | 47% | $9.99 | - |
starter | 90,000,000 | 20% | $4.99 | - |
mini | 30,000,000 | 0% | $1.99 | - |
Sources: components/store.tsx:29-93, 163, 182-189
Diamonds Tab
This tab allows players to purchase "Diamonds," a premium currency. It functions similarly to the Coins tab, displaying the playerDiamonds balance and a list of DiamondPackage items.
The available diamond packages are:
| ID | Amount | Bonus | Price | Special Badge |
|---|---|---|---|---|
d1 | 14,000 | 100% | $99.99 | - |
d2 | 6,000 | 50% | $49.99 | Popular |
d3 | 3,200 | 25% | $24.99 | - |
d4 | 1,200 | 20% | $9.99 | - |
d5 | 600 | 0% | $4.99 | - |
d6 | 120 | 0% | $0.99 | - |
Sources: components/store.tsx:95-102, 257, 269-276
Subscription Tab
This section is dedicated to the "VIP Premium" subscription, which offers recurring benefits to players for a monthly fee.
The listed benefits of the VIP subscription are:
- Daily bonus chips x2
- Exclusive VIP tables
- Priority support
- Special gifts & rewards
The subscription is priced at $9.99 per month.
Sources: components/store.tsx:307-324
System Integration
The In-Game Store does not operate in isolation. It is invoked by other components and the currency it provides is consumed throughout the application.
This diagram shows how the Store is opened from the Lobby and how the currency it provides (playerChips) is used by the UserProfile, GiftShop, and TableSelection components.
Lobby Integration
The HomeLobby component contains the primary entry point to the store. A "Store" button, when clicked, triggers the onOpenStore callback prop, which is responsible for mounting and displaying the Store component.
Sources: components/lobby.tsx:11, 21-24
Gift Shop Integration
The GiftShop component allows players to buy virtual gifts for other players using in-game chips. It receives the playerChips balance as a prop to determine which gifts the player can afford. This creates a direct consumption loop for the currency purchased in the store.
Sources: components/gift-shop.tsx:11, 201
Table Selection Integration
The TableSelection component, which allows players to join a poker table, uses the playerChips prop to determine if a player can afford the minimum buy-in for a selected table. If the player has insufficient chips, the UI indicates how many more are needed, implicitly encouraging a visit to the store.
Sources: components/table-selection.tsx:25, 126-128, 230-233
Conclusion
The In-Game Store is a critical e-commerce module within the application, serving as the primary driver for monetization. It provides a clear, tab-based interface for purchasing two types of virtual currency (Coins and Diamonds) and a recurring VIP subscription. The component is well-structured, defining its data models for purchasable items and integrating with other game systems like the Lobby, Gift Shop, and Table Selection, which consume the currencies it provides. This creates a complete economic loop, encouraging players to engage with the store to enhance their gameplay experience.