GamesVerse Platform Documentation (EN)

Overview & Principles

• Simplicity First (KISS): Designed for ease of use, especially for older adults using mobile devices.
• One-Tap Surveys: Create surveys with a single click, featuring real-time autosave (Convex-powered) without unnecessary actions.
• Streamlined Administration: Filter by date range, aggregate by market, and generate immutable snapshot reports.

Routes & Roles

• /games (Public): Browse and play games. Includes search, filtering, and sorting capabilities.
• /preferences (User): Customize appearance, language, and sound settings.
• /privacy (Public): View privacy policy and contact information.
• /terms (Public): Review terms of service.

Data Model

General note: All tables include order: number (for sorting) and active: boolean (for visibility). Convex automatically provides _id and _creationTime.

Core Entities

• Games

  • id: Unique identifier
  • title: Game title
  • slug: URL-friendly identifier
  • thumb: Thumbnail image URL (optional)
  • tags: Array of tags for categorization
  • plays: Number of plays
  • rating: Average rating (0-5)
  • addedAt: Date when added (ISO format)
  • description: Game description (optional)
  • file: URL to the game file (optional)

• Users

  • username: Unique username
  • passwordHash: Hashed password
  • name: Full name
  • phone: Phone number
  • order: Sorting order
  • active: Active status

Constraints & Conventions

• Games:
  • Titles should be unique.
  • When active=false, games are hidden from public view but retain historical data.
• Tags:
  • Tags help categorize games for easier browsing.
• Ratings:
  • Ratings are stored as numbers (0-5) and displayed with one decimal place.
• Plays:
  • Play counts are incremented each time a game is played.

Indexing Recommendations (Minimum)

• Games: by active, by title (unique), by tags.
• Users: by username (unique).

Workflow

Public User (/games)

• Browse games with filtering and sorting options.
• Search for specific games by title.
• View game details including description, tags, rating, and play count.
• Play games directly from the platform.

Authenticated User (/preferences)

• Change appearance settings (light/dark/system theme).
• Switch language (English/Vietnamese).
• Adjust sound settings (background music, volume, track selection).

Additional Features (Optional Toggle)

• Game Recommendations: Suggest games based on user's play history.
• Quick Search: Fast search functionality with sticky alphabet scroll for easy navigation.
• Mobile-First Design: Built with shadcn/ui, Tailwind CSS, and lucide-react for optimal mobile experience.
• Theme Customization: Support for Rose Pine Moon theme using Shiki library.

Theme Integration

The platform now supports the Rose Pine Moon theme through the Shiki library. This theme provides a visually appealing color scheme that enhances the user experience.

Implementation Details

1. Theme Configuration: The theme is configured in content/theme-config.ts, which sets up the Shiki highlighter with the Rose Pine Moon theme.

2. Component Usage: The ThemeDemo.tsx component demonstrates how to use the theme in React components. It loads the highlighter asynchronously and applies the theme to code snippets.

3. CSS Integration: The theme can be applied globally by adding the appropriate CSS classes to the document root.

Usage Example

To use the Rose Pine Moon theme in your components:

import ThemeDemo from '../content/ThemeDemo';

function MyComponent() {
  return (
    <div>
      <h1>My Page</h1>
      <ThemeDemo />
    </div>
 );
}

Next Steps

• Implement packages/backend/convex/schema.ts according to the above model (including order, active, and indexes).
• Develop core mutations/queries: CRUD operations for games and users, real-time updates, and data aggregation.
• Integrate Shiki library for syntax highlighting and theme customization, specifically adding Rose Pine Moon theme support.