User Profiles & Statistics
Relevant source files
The following files were used as context for generating this wiki page:
The User Profile and Statistics system provides players with a comprehensive overview of their identity, progress, and performance within the "Hold-em or Fold-em Poker" application. It serves as a central hub for players to view their game statistics, track achievements, manage social connections, and customize their public-facing information. This system is designed to enhance player engagement by providing tangible feedback on their gameplay and a sense of progression.
The profile is composed of several interconnected components, including a main profile view, a detailed statistics dashboard, an achievements page, and a gifts page. Navigation between these components is managed within the UserProfile component, which acts as the main entry point and container for all user-centric data displays.
Component Architecture
The user profile feature is built around a primary UserProfile component that conditionally renders more detailed views like StatsDashboard, AchievementsPage, and GiftsPage. This architecture keeps the main profile view clean and performant while allowing users to drill down into specific areas of interest.
The diagram below illustrates the relationship between these components.
This diagram shows that the UserProfile component serves as a parent that can launch the StatsDashboard, AchievementsPage, or GiftsPage based on user interaction.
Sources: components/user-profile.tsx:73-81, components/user-profile.tsx:244-248, components/user-profile.tsx:283-285, components/user-profile.tsx:363-365
User Interaction Flow
The following sequence diagram demonstrates a typical user flow, starting from viewing the main profile and navigating to the detailed statistics dashboard.
User Profile View
The UserProfile component is the main screen for displaying a player's information. It aggregates data from various sources into a single, cohesive view.
Sources: components/user-profile.tsx
Key Sections
- Profile Header: Displays the user's avatar, name, verification status, country, language, VIP level, player level, and chip count.
- Bio: A user-editable text area for personal information. If it's the user's own profile, an edit button allows them to modify their bio.
- Data Summary: A clickable card that shows a high-level summary of key statistics (Total Hands, Max Profit, Win Rate) and navigates to the
StatsDashboard. - Achievements Summary: A grid showing the icons of the user's most recent achievements. Clicking this section navigates to the
AchievementsPage. - Big Fans: Displays the top 3 "fans" of the player, showing their avatar, name, and chips.
- Gifts Summary: Shows a collection of recently received gifts and navigates to the
GiftsPage.
Profile Data Structure
The UserProfile component receives a profile object containing all the necessary data. While a formal type definition is not present in the provided files, its structure can be inferred from its usage.
| Field | Type | Description | Source File |
|---|---|---|---|
id | string | Unique identifier for the player. | components/user-profile.tsx:96 |
name | string | Player's display name. | components/user-profile.tsx:130 |
avatar | string | URL for the player's avatar image. | components/user-profile.tsx:114 |
isVerified | boolean | Indicates if the player has a verified account. | components/user-profile.tsx:131 |
country | string | Player's country. | components/user-profile.tsx:135 |
language | string | Player's preferred language. | components/user-profile.tsx:136 |
vipLevel | number | The player's VIP level. | components/user-profile.tsx:140 |
level | number | The player's current experience level. | components/user-profile.tsx:143 |
levelProgress | number | Percentage progress towards the next level. | components/user-profile.tsx:148 |
chips | number | The player's total chip count. | components/user-profile.tsx:153 |
bio | string | A short, user-editable biography. | components/user-profile.tsx:216 |
stats | object | An object containing player statistics. | components/user-profile.tsx:257 |
achievements | array | An array of unlocked achievement objects. | components/user-profile.tsx:290 |
bigFans | array | An array of "fan" objects. | components/friends-page.tsx:32 |
giftsReceived | array | An array of received gift objects. | components/gifts-page.tsx:21 |
Bio Editing
The profile features an in-place editing mechanism for the user's bio.
- State: The component uses
isEditingBioandbioTextstate variables to manage the editing mode and text content. - Actions:
- Clicking the
Edit2icon setsisEditingBiototrue, displaying a<textarea>. handleSaveBioupdates the profile's bio and setsisEditingBiotofalse.handleCancelBioreverts any changes and exits editing mode.
- Clicking the
Sources: components/user-profile.tsx:26-27, components/user-profile.tsx:64-71, components/user-profile.tsx:180-218
Statistics Dashboard
The StatsDashboard component provides a detailed, game-mode-specific view of a player's performance statistics. It is currently populated with mock data.
Sources: components/stats-dashboard.tsx
Key Features
- Game Mode Selector: A horizontal list of buttons allows the user to filter stats for different game modes (
NLH,OMAHA,AOF,SNG,3PIN). - Primary Stats: Displays "Total Hands" and "Max Profit" in a prominent grid.
- Detailed Stats: A grid of cards, each showing a specific statistic (e.g., Win Rate, VPIP, PFR) with its value and a corresponding progress bar.
- Best Hand Display: Showcases the player's best-ever hand with card visuals.
- Stat Definitions: A section at the bottom provides definitions for poker acronyms like VPIP, PFR, and WTSD.
PlayerStats Data Model
The statistics are based on a PlayerStats object. The structure is defined by mock data within the component.
This diagram shows the structure of the PlayerStats object and its relationship with BestHand and Card objects.
Sources: components/stats-dashboard.tsx:16-34
Displayed Statistics
The dashboard visualizes several key poker metrics. The colors for the progress bars are derived from the application's theme.
| Statistic | Description | Color Class | Source File |
|---|---|---|---|
| Win Rate | Percentage of hands won. | bg-chart-2 | components/stats-dashboard.tsx:160 |
| VPIP | Voluntarily Put money In Pot | bg-destructive | components/stats-dashboard.tsx:172 |
| PFR | Pre-Flop Raise rate | bg-chart-4 | components/stats-dashboard.tsx:184 |
| WTSD | Went To ShowDown | bg-chart-2 | components/stats-dashboard.tsx:196 |
| Re-raise Rate | Re-raise opponents | bg-chart-3 | components/stats-dashboard.tsx:208 |
| C-bet Rate | Continuation bet rate | bg-chart-1 | components/stats-dashboard.tsx:220 |
Sources: components/stats-dashboard.tsx:236-252, app/globals.css:21-25
Achievements Page
The AchievementsPage component displays all possible achievements, showing which ones the player has unlocked and their progress toward locked ones.
Sources: components/achievements-page.tsx
Key Features
- Completion Summary: A card at the top shows the total number of unlocked achievements and a progress bar for overall completion.
- Category Tabs: Users can filter achievements by categories like "All", "Wins", "Hands", "Special", "Streaks", and "VIP".
- Achievement List: A scrollable list of achievements. Each item displays:
- Icon and Name
- Description
- Rarity (Common, Rare, Epic, Legendary), indicated by border color and a badge.
- Lock status (unlocked achievements are fully visible, locked ones are dimmed with a lock icon).
- Progress bar for locked achievements.
Achievement Data Structure
Each achievement object contains the following properties, as inferred from the component's mock data.
| Property | Type | Description | Source File |
|---|---|---|---|
id | string | Unique identifier for the achievement. | components/achievements-page.tsx:29 |
name | string | The name of the achievement. | components/achievements-page.tsx:30 |
icon | string | An emoji or icon representing the achievement. | components/achievements-page.tsx:31 |
description | string | A short description of how to earn the achievement. | components/achievements-page.tsx:32 |
rarity | string | Rarity level: common, rare, epic, legendary. | components/achievements-page.tsx:33 |
unlocked | boolean | true if the player has earned the achievement. | components/achievements-page.tsx:34 |
progress | number | Current progress towards a locked achievement. | components/achievements-page.tsx:35 |
total | number | The total value needed to unlock the achievement. | components/achievements-page.tsx:36 |
category | string | The category the achievement belongs to (e.g., wins, hands). | components/achievements-page.tsx:37 |
Conclusion
The User Profile and Statistics system is a cornerstone of the player experience in "Hold-em or Fold-em Poker". By presenting a rich, detailed, and visually engaging summary of a player's journey, it fosters a sense of accomplishment and provides clear metrics for improvement. The modular component-based architecture allows for easy extension and maintenance, ensuring that new statistics, achievements, or social features can be integrated smoothly in the future. The current implementation, while using mock data, lays a solid foundation for a dynamic, data-driven profile system.