A responsive, touch-friendly resource companion app designed for the board game Moon Colony Bloodbath. Built with React and Tailwind CSS, this application replaces physical tokens with a streamlined digital dashboard, perfect for a tablet placed in the center of the playing area.

https://mooncolony.netlify.app/

Here is a live version, you're welcome to use directly or you can launch your own copy (See Deployment section):

The main 4-player interface in Dark Mode

In-game menu with Quickstart rules and Options

Mission Setup Modal for configuring players

High-contrast Light Mode for bright environments

• Table-Optimized UI: A 4-quadrant split-screen layout designed to be accessible from all sides of the table.
• Head-to-Head Orientation: Top sectors are rotated 180° for players sitting across the table, while bottom sectors face the near side.
• Resource Management: Tracks People, Money, and Food with massive, easy-to-hit touch targets designed for quick interaction.
• Auto-Save Progress: Game state automatically persists to localStorage - your game picks up exactly where you left off if you close the browser.
• Player Configuration: Supports 2, 3, or 4 player setups. Unused sectors are visually disabled/grayed out.
• Visual Themes: Switch seamlessly between a gritty Sci-Fi Dark Mode and a clean High-Contrast Light Mode.
• Digital Rules Reference: Includes a built-in Quickstart guide tab for easy rule lookups during play.

• React 19
• Tailwind CSS
• Lucide React Icons

Open the app on a tablet or large phone, place it in the middle of your game table, select the number of players, and start the bloodbath!

npm install
npm run dev

The app will be available at http://localhost:5173

This app uses Vite for building and can be deployed to any static hosting service.

Via Git:

1. Push your code to GitHub/GitLab/Bitbucket
2. Go to netlify.com and sign in
3. Click "Add new site" → "Import an existing project"
4. Connect your repository
5. Configure build settings:
   • Build command: npm run build
   • Publish directory: dist
6. Click "Deploy site"

Via CLI:

npm install -g netlify-cli
npm run build
netlify deploy --prod

Via Drag & Drop:

1. Run npm run build locally
2. Go to app.netlify.com/drop
3. Drag the dist folder onto the page

1. Push your code to GitHub
2. Go to vercel.com and sign in
3. Click "New Project" and import your repository
4. Vercel will auto-detect Vite settings
5. Click "Deploy"

1. Install the gh-pages package: npm install --save-dev gh-pages
2. Add to package.json scripts:

   "deploy": "npm run build && gh-pages -d dist"

3. Run npm run deploy
4. Enable GitHub Pages in your repository settings