Getting Started

Relevant source files

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

• package.json
• README.md
• app/layout.tsx
• components/login-form.tsx
• components/signup-form.tsx
• components/lobby.tsx
• lib/poker-engine.ts

This document provides a comprehensive guide for setting up and running the "Hold-em-or-Fold-em-Poker" project locally. It covers the project's structure, dependencies, and the initial steps required to get the application running for development. The project is a Next.js application, built with v0.app, focused on providing a web-based poker game experience.

The application is built using a modern frontend stack including React, Next.js, and Tailwind CSS. It features user authentication, a game lobby, and various poker game interfaces. This guide is intended for developers looking to contribute to the project or understand its initial setup and architecture.

Sources: README.md, package.json

Prerequisites

Before you begin, ensure you have the following installed on your system:

• Node.js (version 22 or later is recommended)
• A package manager like npm, yarn, or pnpm. The examples will use npm.

Sources: package.json:34

Installation

To get started, clone the repository and install the required dependencies using your package manager.

1. Clone the repository:

   git clone https://github.com/amvicioushecs/Hold-em-or-Fold-em-Poker.git
   cd Hold-em-or-Fold-em-Poker
   

2. Install dependencies:
   The project's dependencies are listed in package.json. Run the following command to install them:

   npm install
   

   This will install Next.js, React, Tailwind CSS, and other necessary libraries.

Sources: package.json:10-61

Running the Application

The package.json file contains scripts to run, build, and lint the application.

Available Scripts

Script	Description
build	Builds the application for production.
dev	Starts the development server on localhost:3000.
lint	Runs the Next.js linter.
start	Starts the production server.

Sources: package.json:5-9

Development Mode

To run the application in development mode with hot-reloading, use the dev script:

npm run dev

Once the server is running, you can access the application at http://localhost:3000. The initial page will be the login form.

Sources: package.json:7, components/login-form.tsx

Project Structure

The project follows a standard Next.js app directory structure. Key directories and files include:

This diagram shows the high-level structure of the repository.

• /app: Contains the core application routing, layouts, and pages, following the Next.js App Router paradigm. layout.tsx is the root layout.
• /components: Contains reusable React components used throughout the application, such as forms, UI elements, and game-specific views.
• /lib: Holds utility functions and the core game logic, such as the poker-engine.ts file.
• package.json: Defines project metadata, dependencies, and scripts.

Sources: app/layout.tsx, components/login-form.tsx, lib/poker-engine.ts, package.json

Core Technologies

The project leverages several key libraries and frameworks to function.

Dependency	Role
next	The React framework for server-side rendering and static site generation.
react	The JavaScript library for building user interfaces.
tailwindcss	A utility-first CSS framework for styling.
@radix-ui/react-*	A collection of unstyled, accessible UI components.
lucide-react	A library of simply beautiful icons.
typescript	A typed superset of JavaScript.
zod	A TypeScript-first schema declaration and validation library.
react-hook-form	A library for managing form state and validation.

Sources: package.json:10-61

Application Flow

The initial user experience involves authentication (login or signup) before accessing the main game lobby.

Authentication Flow

The following diagram illustrates the user authentication flow.

This flow shows how a user navigates from the entry point to the main lobby.

• Login/Signup: The user is first presented with a LoginForm. If they don't have an account, they can navigate to the SignupForm. Both forms simulate an API call upon submission and then redirect the user to the main application page (/), which displays the HomeLobby.
• Lobby: After successful authentication, the user lands in the HomeLobby, where they can select a game mode (Cash, All in, MTT, SNG) to proceed.

Sources: components/login-form.tsx:19-31, components/signup-form.tsx:23-41, components/lobby.tsx:14-17

Root Layout and Providers

The root layout in app/layout.tsx wraps the entire application with essential context providers.

// File: app/layout.tsx:25-35
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans antialiased`}>
        <WebRTCProvider>
          <TournamentProvider>{children}</TournamentProvider>
        </WebRTCProvider>
        <Analytics />
      </body>
    </html>
  )
}

The WebRTCProvider and TournamentProvider are available to all child components, managing state for WebRTC connections and tournament data, respectively.

Sources: app/layout.tsx:25-35

Core Game Logic

The core poker game logic is encapsulated in lib/poker-engine.ts. This module is responsible for:

• Creating and shuffling the deck.
• Dealing cards to players based on the game mode (e.g., 2 for Texas Hold'em, 4 for Omaha).
• Dealing community cards (Flop, Turn, River).
• Evaluating poker hands for both Texas Hold'em and Omaha variants.
• Determining the winner(s) of a hand.
• Managing the game state, including player actions (fold, check, call, raise), betting rounds, and pot calculation.

The engine exports several key functions to manage the game lifecycle:

• initializeGame(): Sets up the initial state for a new game.
• startNewHand(): Resets the table for a new hand, rotates the dealer, and posts blinds.
• processAction(): Handles a player's action and advances the game turn.
• determineWinners(): Evaluates all active hands at showdown to find the winner.

Sources: lib/poker-engine.ts