Friends & Social System

Relevant source files

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

• components/friends-page.tsx
• types/friends.ts
• components/user-profile.tsx
• components/gifts-page.tsx
• components/chat-panel.tsx
• components/game-menu.tsx

The Friends & Social System is a core feature of the application, designed to facilitate player interaction and community building. It allows users to manage a friends list, handle friend requests, search for other players, and engage in social activities like messaging and sending gifts. The entire system is encapsulated within a full-screen UI component, accessible from various points in the application, such as the main game menu.

Currently, the system operates using mock data for demonstration purposes, with backend logic simulated on the client side. The primary component, FriendsPage, serves as the central hub for all friend-related activities, integrating with other social modules like the User Profile, Gifting, and Chat.

Core Architecture

The social system is primarily driven by the FriendsPage React component, which manages its own state for the UI, search queries, and active tabs. It relies on data structures defined in types/friends.ts to model friends and friend requests.

Component & Data Flow

The following diagram illustrates the high-level structure of the FriendsPage component and its internal data flow.

This diagram shows that the FriendsPage component uses local state to manage the UI. It renders lists based on mock data arrays (mockFriends, mockRequests), which conform to the Friend and FriendRequest interfaces.

Sources: components/friends-page.tsx:25-28, 31-118, types/friends.ts

Data Models

The social system's data structures are defined in types/friends.ts. These interfaces provide a strict type definition for friends, friend requests, and aggregated friend statistics.

Friend Interface

This interface represents a single user in the context of a friends list.

Field	Type	Description
id	string	Unique identifier for the friend.
name	string	The friend's display name.
avatar	string (optional)	URL to the friend's avatar image.
level	number	The friend's current player level.
chips	number	The friend's current chip count.
isOnline	boolean	Indicates if the friend is currently online.
lastSeen	Date (optional)	Timestamp of when the friend was last online.
currentTable	string (optional)	The name of the table the friend is currently playing at.
status	"playing" | "idle" | "away" (optional)	The friend's current activity status.
vipLevel	number	The friend's VIP level.
country	string	The friend's country.
Sources: types/friends.ts:1-13

FriendRequest Interface

This interface represents a pending friend request from one user to another.

Field	Type	Description
id	string	Unique identifier for the request.
from	Friend	The Friend object of the user who sent the request.
to	Friend	The Friend object of the user who received the request.
timestamp	Date	When the request was sent.
status	"pending" | "accepted" | "rejected"	The current status of the request.
Sources: types/friends.ts:15-21

FriendsPage Component

This is the main UI component for the social system, accessible via the GameMenu. It provides a tabbed interface for managing friends, handling requests, and adding new friends.

Sources: components/friends-page.tsx, components/game-menu.tsx:49-55

UI and State

The component is built using React and useState for state management. Key state variables include:

• searchQuery: Stores the current value of the search input field.
• selectedTab: Manages which tab (friends, requests, or search) is currently active.

The UI is divided into three main tabs:

1. Friends Tab

This is the default view, displaying a searchable list of the user's friends.

• Online Status: Shows the total number of friends and how many are online in the header.
• Friend Card: Each friend is displayed with their name, level, chip count, VIP status, and online status.
• Actions: Each friend has a dropdown menu with actions:
  • Send Message
  • Send Gift
  • Invite to Game (if online and not playing)
  • Remove Friend

Sources: components/friends-page.tsx:26-27, 185-224, 307-331

2. Requests Tab

This tab displays a list of incoming friend requests.

• Notification Badge: A badge on the tab shows the number of pending requests.
• Request Card: Each request shows the sender's name, level, and chip count.
• Actions: Each request has "Accept" and "Decline" buttons.

Sources: components/friends-page.tsx:230-236, 396-440

3. Add Tab

This tab provides functionality for finding and adding new friends.

• Player Search: An input field allows searching for players by username or ID.
• Suggested Friends: A list of suggested friends is displayed, showing mutual friend counts.

Sources: components/friends-page.tsx:443-497

User Flow: Handling a Friend Request

The sequence diagram below shows the user interaction flow for accepting a friend request. The backend interaction is currently mocked within the component.

Integrated Social Features

The Friends system is tightly integrated with other social modules within the application.

Chat System

The "Send Message" action on a friend's profile is the entry point to the chat system. While the friends-page.tsx component initiates the action, the ChatPanel component handles the actual messaging functionality, including displaying messages and handling input.

• The ChatPanel component uses a Sheet from shadcn/ui to slide in from the side.
• It displays an unread message count on its trigger button.

Sources: components/friends-page.tsx:319-322, components/chat-panel.tsx:20-31, 74-81

Gifting System

Users can send gifts to friends directly from the friends list. The GiftsPage component allows users to view all gifts they have received, filter them, and see which ones are available for sale.

• The "Send Gift" action is present in the friend action menu.
• The GiftsPage provides a detailed view of received gifts, including who sent them and when.

*Sources: components/friends-page.tsx:323-326, components/gifts-page.tsx *

User Profile Integration

The UserProfile component displays social information that complements the friends system, such as the "Big Fans" section, which lists top players who have interacted with the profile.

• The "Big Fans" section shows the top 3 fans based on chip interactions.
• This provides a social ranking element outside of the direct friends list.

Sources: components/user-profile.tsx:300-327

Summary

The Friends & Social System is a comprehensive suite of features that forms the social backbone of the "Hold-em-or-Fold-em-Poker" application. It is architected around the central FriendsPage component, which provides a user-friendly, tab-based interface for managing friends, requests, and discovering new players. The system is well-integrated with other modules like Chat, Gifting, and User Profiles to create a cohesive social experience. Although currently implemented with mock data, the clear data models in types/friends.ts and component-based structure provide a solid foundation for future backend integration.