Space Colonization Game

A multiplayer space colonization game built with Next.js, featuring real-time gameplay and WebSocket communication.

Features

• 🚀 Real-time multiplayer gameplay
• 🎮 Host or join game sessions
• 🌌 Space colonization theme
• 📱 Responsive design with Tailwind CSS
• ⚡ Built with Next.js and Turbopack

Tech Stack

• Frontend: Next.js 15, React 19, TypeScript
• Styling: Tailwind CSS, Radix UI components
• Real-time: WebSocket (ws)
• Testing: Playwright for end-to-end testing
• Development: Turbopack for fast builds

Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository
2. Install dependencies:

npm install

Development

Start the development server:

npm run dev

Or run the full application with WebSocket server:

npm run dev:full

Open http://localhost:3000 to see the application.

Available Scripts

• npm run dev - Start Next.js development server
• npm run build - Build the application for production
• npm run start - Start the production server
• npm run lint - Run ESLint
• npm run server - Start the WebSocket server
• npm run dev:full - Start both WebSocket server and Next.js dev server
• npm test - Run Playwright tests
• npm run test:ui - Run tests with interactive UI
• npm run test:debug - Debug tests

Testing

This project uses Playwright for end-to-end testing. Tests cover:

• Homepage functionality (player name input, game navigation)
• Game flow (hosting/joining games)
• UI components (responsiveness, interactions)

Run tests:

# Run all tests
npm test

# Run with UI mode for debugging
npm run test:ui

# Debug specific tests
npm run test:debug

Project Structure

├── app/                 # Next.js app directory
├── components/          # React components
│   └── ui/             # Reusable UI components
├── lib/                # Utility functions
├── tests/              # Playwright test files
├── server.js           # WebSocket server
└── playwright.config.ts # Playwright configuration

Game Flow

1. Player Setup: Enter your name on the homepage
2. Host Game: Create a new game session with a random game code
3. Join Game: Enter a game code to join an existing session
4. Play: Engage in real-time space colonization gameplay

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests: npm test
5. Run linting: npm run lint
6. Submit a pull request