Draw with friends!
https://egaite.app

Egaite is a multiplayer drawing game built with Elixir and Phoenix. Players take turns drawing and guessing words, earning points for correct guesses.

• Real-time multiplayer drawing and guessing
• Multiple rounds and players per game
• Points and score tracking
• Play against bots
• Modern Phoenix 1.7+ stack
• Storybook for UI component development

These diagrams illustrate the core structure and process flow of Egaite. They show how game processes are supervised, how channels handle real-time communication, and how the finite state machine manages game state transitions.

graph TD
    GameSupervisor["GameSupervisor (DynamicSupervisor)"]
    GameGenserver["Game GenServer (Coordinator & State Holder)"]
    RulesGenstatem["Rules GenStateMachine (Finite State Machine)"]

    GameSupervisor --> GameGenserver
    GameGenserver --> RulesGenstatem

graph TD
    Frontend["Frontend (Phoenix LiveView/JS)"]
    DrawingChannel["DrawingChannel"]
    ChatChannel["ChatChannel"]
    LiveView["LiveView (subscribes to ChatChannel)"]

    Frontend -- batched points (x, y, color) --> DrawingChannel
    DrawingChannel -- broadcasts points --> Frontend

    Frontend -- chat messages --> ChatChannel
    ChatChannel -- broadcasts messages --> LiveView

stateDiagram-v2
    [*] --> waiting_for_players
    waiting_for_players --> ready_to_start: >= 2 players
    ready_to_start --> round_active: start_round
    round_active --> round_ended: end_round or all guessed
    round_ended --> round_active: start_round (if rounds left)
    round_ended --> game_over: max rounds reached
    waiting_for_players --> game_over: 0 players
    round_active --> game_over: <2 players
    game_over --> [*]

• Elixir & Erlang (see .tool-versions or mix.exs for versions)
• Node.js (for assets)
• Docker & Docker Compose (for deployment)
• PostgreSQL database

1. Install dependencies:

   mix deps.get
   cd assets && npm install

2. Setup the database:

   mix ecto.create
   mix ecto.migrate

3. Start the Phoenix server:

   mix phx.server

   Visit http://localhost:4000 in your browser.

Egaite uses Phoenix Storybook for developing and testing UI components.

To start Storybook locally:

mix storybook.server

Then visit http://localhost:6006.

mix test

This project uses GitHub Actions for CI/CD and Docker Compose for deployment.

• On push to main, tests are run and, if successful, the app is built and deployed using Docker Compose.
• Database migrations and seeds are run automatically during deployment.

See .github/workflows/deploy.yml for details.

Environment variables used in production (see GitHub Actions secrets):

• DATABASE_URL
• POOL_SIZE
• SECRET_KEY_BASE
• PHX_HOST
• PORT
• DNS_CLUSTER_QUERY
• DB_NAME
• DB_USER
• DB_PASSWORD

• Phoenix Framework
• Elixir Lang
• Phoenix Storybook

Ready to draw? Start the server and invite your friends!