Skip to main content
This guide will help you configure and play Elemental Battlecards on a local area network (LAN) with a friend.

​
Prerequisites

Before starting, ensure you have:
  • Node.js version 14 or higher installed on both computers
  • Both computers connected to the same local network (WiFi or Ethernet)
  • Ports 3001 (Backend) and 5173 (Frontend) available
  • Firewall configured to allow incoming connections on these ports

​
Host Server Configuration

The host player needs to run both the backend and frontend servers.
1

Install Backend Dependencies

Navigate to the Backend directory and install dependencies:
cd Backend
npm install
2

Configure Environment Variables

Verify that the Backend/.env file exists with the correct configuration:
Backend/.env
PORT=3001
NODE_ENV=development
DB_DIALECT=sqlite
JWT_SECRET=your_jwt_secret_key_here
CORS_ORIGIN=*
For LAN play, using SQLite with DB_DIALECT=sqlite is recommended for simplicity. You can also disable the database entirely by setting DB_ENABLED=false.
3

Start the Backend Server

Launch the backend server:
cd Backend
npm start
You should see:
Servidor corriendo en http://0.0.0.0:3001 (escuchando todas las interfaces)
The server binds to 0.0.0.0 which allows it to accept connections from other devices on the network.
4

Get Your Local IP Address

You need to find the host computer’s local IP address.On Windows (PowerShell):
ipconfig
Look for the “IPv4 Address” line in your active network adapter:
IPv4 Address. . . . . . . . . . . : 192.168.1.100
On Linux/Mac:
ifconfig
# or
ip addr show
Write down this IP address (e.g., 192.168.1.100). The guest player will need it to connect.
5

Configure Firewall Rules

Ensure your firewall allows incoming connections on the required ports.Windows Firewall Configuration:
# Allow port 3001 (Backend)
netsh advfirewall firewall add rule name="Elemental Battlecards Backend" dir=in action=allow protocol=TCP localport=3001

# Allow port 5173 (Frontend)
netsh advfirewall firewall add rule name="Elemental Battlecards Frontend" dir=in action=allow protocol=TCP localport=5173
Linux (ufw):
sudo ufw allow 3001/tcp
sudo ufw allow 5173/tcp
6

Start the Frontend Server

Open a new terminal and start the frontend development server:
cd Frontend
npm install
npm run dev
The Vite dev server will display:
Local:   http://localhost:5173
Network: http://192.168.1.100:5173
The --host flag in the dev script (see package.json) enables network access.

​
Connecting Players

​
Player 1 (Host)

1

Open the Game

Open your browser and navigate to http://localhost:5173
2

Login or Register

Create an account or login with existing credentials
3

Create a Room

From the main menu, select “Juego en Red (LAN)” (Network Game)Click “Crear Sala” (Create Room)
4

Share Room Code

A 6-digit code will be generated (e.g., 123 456)Share this code with Player 2
Wait for the second player to join. The game will start automatically when both players are connected.

​
Player 2 (Guest)

1

Connect to Host

Open your browser and navigate to http://[HOST_IP]:5173Example: http://192.168.1.100:5173
Replace [HOST_IP] with the IP address you got from the host player.
2

Login or Register

Create an account or login with existing credentials
3

Join Room

From the main menu, select “Juego en Red (LAN)” (Network Game)In the right panel, enter the 6-digit code shared by the hostClick “Unirse a Sala” (Join Room)
4

Start Playing

The game will start automatically once connected

​
Game Turn System

  • The host player always goes first
  • Turns alternate automatically between players
  • Each player has 12 seconds per turn
  • All actions are synchronized in real-time via Socket.IO

​
Game States

StateDescription
Esperando jugador…Room has only 1 player
Jugador conectado!Both players are in the room
Tu turnoIt’s your turn to play
Turno del oponenteWait for opponent to finish their turn

​
Game Controls

  • Left click: Select card
  • Drag card from hand to slot: Play card
  • Click field card + click enemy card: Attack
  • Click two own field cards: Fuse (same type and level)

​
Important Notes

  • Do not close the browser tab during the match
  • If a player disconnects, the match will end
  • Matches are only saved while players are connected
  • Each room has a unique 6-digit code

​
Quick Start (Development)

For rapid development testing: Terminal 1 (Backend): 
cd Backend
npm run dev
Terminal 2 (Frontend): 
cd Frontend
npm run dev

​
Health Check

To verify the backend is running correctly, you can access the health check endpoint: 
curl http://[HOST_IP]:3001/ping
Expected response: 
{
  "ok": true,
  "time": 1234567890,
  "host": "hostname"
}
The /ping endpoint is defined in server.js:52 and is useful for verifying network connectivity.

Build docs developers (and LLMs) love

Get started for freeTalk to us