🎉 Crude Cards

A Party Game For Horrible People! 🎉

Web Development Series

Welcome to Crude Cards, a real-time, WebSocket-enabled card game designed for both learning and fun! If you've ever played Cards Against Humanity or Apples to Apples, you already know how to play. This project is built with modern web technologies like React, Next.js, and NestJS to demonstrate technical concepts in a fun and engaging way.

🎨 CrudeCards - Game Dev Series

This article provides an overview of the series, explaining what will be covered and the goals of creating a CAH clone.

The process of creating example users and applying

Methods for in-person testing and how to gather and analyze feedback.

Tools and techniques for creating mockups and prototypes, emphasizing their importance.

Detailed explanation of the tech stack and reasons for choosing each technology.

Overview of the application architecture, key components, and their interactions.

Importance of version control and best practices for collaboration.

Setting up continuous integration and deployment pipelines, including tools and best practices.

Building the User Interface with React Basics of React for building the user interface, including component structure and state management.

Introduction to Redux for managing application state, with examples.

Designing the cloud infrastructure using services like Kubernetes and Docker.

Basics of Node.js and Express, including how to structure the backend.

Description here. Beep Beep Boop.

Regular maintenance tasks and best practices for keeping the app up-to-date.

🚀 Browser

🚀 Tech Stack

The tech stack is carefully chosen to showcase modern full-stack development practices. Here's a breakdown:

📖 Game Rules

Kind of Like Cards Against Humanity or Apples to Apples

1. Setup:

   • Players connect to a game session via a room code.
   • One player is selected as the "Dealer" for each round.

2. Gameplay:

   • The Dealer plays a black card with a prompt or question e.g., "Wy can't I sleep at night?")
   • The other players choose the funniest white card from their hand to complete the sentence or answer the question.
   • The Dealer reviews the responses and selects the one they find funniest.

3. Winning:

   • The player whose card is chosen wins that round and earns a point.
   • The first player to reach a predefined number of points wins the game.

4. Additional "Fun":

   • The game is customizable with different rule variations to keep things interesting.

💻 How to Run the Game Locally

1. Clone the repository:

   git clone https://github.com/dandonahoe/crude-cards.git
   

2. Install dependencies:

   pnpm install
   

3. Run the development server:

   pnpm run reset
   

4. Open http://localhost:3000 in your browser to view the game.

%%{init: {'theme': 'dark', 'themeVariables': { 

}}}%%
sequenceDiagram
    participant Browser
    participant GameService
    participant PlayerService
    participant WebSocket

    Browser->>WebSocket: Connect with AuthToken
    WebSocket->>GameService: Handle connection request
    GameService->>PlayerService: Validate AuthToken
    PlayerService->>GameService: Return existing Player (if found)
    
    alt AuthToken is valid and game is active
        GameService->>Browser: Rejoin Player to game (Limbo status)
        GameService->>Browser: Check if Player was the dealer
        alt Player was the dealer
            GameService->>Browser: Restore dealer status (if conditions are met)
        end
    else AuthToken is invalid or outdated
        WebSocket->>GameService: Create new Player
        GameService->>Browser: New Player stays on home page
    end

    alt Dealer leaves mid-game
        GameService->>WebSocket: Wait 30 seconds for rejoin
        alt Dealer rejoined
            GameService->>Browser: Continue game
        else Dealer does not rejoin
            GameService->>Browser: Notify players of game end (all lose)
        end
    end

    alt Player uses game code URL
        GameService->>Browser: Validate AuthToken and game code
        alt Game code matches player's current game
            GameService->>Browser: Player joins Limbo status
            GameService->>Browser: Prompt dealer to accept or skip Player
            alt Dealer accepts Player
                GameService->>Browser: Player joins game
            else Dealer skips Player
                GameService->>Browser: Notify Player of removal
            end
        else Game code does not match current game
            Browser->>GameService: Prompt Player to leave current game
        end
    end

📜 License

This project is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives (CC BY-NC-ND) License with Custom Terms. You can learn from it, share it, and use it for educational purposes, but you must obtain permission for commercial use or any significant modifications.