Zoids Battle Arena

A real-time multiplayer battle game where players battle their genrated Zoids in king-of-the-hill combat. Each Zoid has unique stats and type advantages, with combat resolved through turn based dice mechanics. Built with React, Node.js, and WebSocket for live gameplay served from a locally deployed backend via Ngrok.

Features

• King-of-the-hill lobby system where winners stay and defend their position
• Complex Combat mechanics:
  • Type-based weakness and resistance system
  • Variable damage rolls using d4, d6, and d8 dice
  • Stats like accuracy and agility affect combat outcomes
• Monster generation system for unique Zoids
• Responsive design for both desktop and mobile play

Tech Stack

• Frontend: React, TypeScript, Styled Components
• Backend: Node.js, Express, WebSocket
• Deployment: Netlify (Frontend), Local Server (Backend)

Project Structure

├── backend/             # Node.js/Express server
│   ├── server.js       # Main server file
│   └── package.json    # Backend dependencies
├── src/                # React frontend
│   ├── components/     # React components
│   ├── data/          # Game data (zoids, etc.)
│   └── utils/         # Utility functions
├── install.bat        # Installs all dependencies
├── start-backend.bat  # Runs the backend server
└── start-frontend.bat # Runs the React development server

Local Development Setup

1. Make sure you have Node.js installed (version 14 or higher recommended)
2. Clone the repository:

   git clone https://github.com/johnl/zoids.git
   cd zoids

3. Set up your environment variables:
   • Backend: Copy backend/.env.example to backend/.env and add your ngrok auth token
   • Frontend: Create .env.local with your backend URL when deploying
4. Run install.bat to install all dependencies for both frontend and backend

Running the Application Locally

1. Run start-backend.bat to start the backend server (will run on port 3001)
2. Run start-frontend.bat to start the React development server (will run on port 3000)
3. Open http://localhost:3000 in your browser

Deployment

The application uses ngrok to expose the local backend server:

Frontend

• Hosted on Netlify with continuous deployment from the main branch
• Environment variables required in .env.local:
  • REACT_APP_BACKEND_URL: WebSocket backend URL (ngrok-provided URL)
  • Example: REACT_APP_BACKEND_URL=wss://your-tunnel.ngrok.io

Backend

• Runs locally on your server using the provided start-backend.bat
• Uses ngrok to create a secure tunnel to the local server
• Required environment variables in backend/.env:
  • NGROK_AUTH_TOKEN: Your ngrok authentication token from ngrok dashboard
  • ⚠️ Make sure to keep your ngrok token private and never commit it to the repository
• The ngrok tunnel URL will be displayed in the console when starting the backend

Development Notes

• Frontend runs on port 3000 and will auto-reload on file changes
• Backend runs on port 3001 with nodemon for auto-reloading
• Zoid data is stored in src/data/zoids.json
• WebSocket is used for real-time game state updates
• Environment variables should be set in .env files