Skip to content

Add real-time multiplayer support#52

Open
victorgalvez56 wants to merge 1 commit intobrunosimon:masterfrom
victorgalvez56:multiplayer-pr
Open

Add real-time multiplayer support#52
victorgalvez56 wants to merge 1 commit intobrunosimon:masterfrom
victorgalvez56:multiplayer-pr

Conversation

@victorgalvez56
Copy link
Copy Markdown

Summary

Adds real-time multiplayer to the folio using Socket.IO and a Node.js server. Multiple visitors can see and interact with each other's cars in the same scene.

  • Multiplayer engine: Socket.IO server relays car physics snapshots between players with client-side interpolation
  • Lobby UI: 3-step pre-game flow (name → car color → car type) with localStorage persistence
  • Remote car rendering: GLTF template cloning with per-player matcap body colors
  • Physics sync: Client-authoritative snapshots at 20Hz, CANNON.js collision bodies for remote cars
  • Bump system: Car-to-car collision impulses relayed via server with camera shake
  • In-game chat: Toggle panel with Enter/Escape shortcuts and unread badge
  • Minimap: Top-left canvas showing all players, heading arrow, and track outline
  • Race track: Procedural circuit with CatmullRom curves, matcap barrier walls, asphalt surface, start/finish line
  • World-space floor: Checkered grid shader using world coordinates
  • Player labels: Floating name tags above each car

Architecture

client/         ← Original folio restructured as Vite project
server/         ← Node.js + Socket.IO + CANNON.js physics server
shared/         ← Constants (physics, network, spawn grid, colors)

The original single-player code is preserved in client/ with multiplayer additions layered on top.

Live demo

https://racing.victorgalvez.dev

Test plan

  • npm install at root + cd server && npm install
  • Start server: node server/src/index.js
  • Start client: npm run dev --prefix client
  • Open two browser tabs — both should see each other after lobby
  • Verify car colors and car types sync between players
  • Test bumper-car collisions
  • Test chat messaging between tabs
  • Verify minimap shows all players and track outline

Transform the single-player folio into a multiplayer racing game using
Socket.IO and a lightweight Node.js server. Multiple visitors can see
and interact with each other's cars in the same scene.

Architecture:
- client/  ← Original folio restructured as Vite project
- server/  ← Node.js + Socket.IO + CANNON.js physics
- shared/  ← Constants for physics, network, spawn grid, colors

Features:
- Lobby UI: name, car color (8 matcap options), car type (default/cybertruck)
- Remote car rendering with GLTF template cloning and per-player colors
- Client-authoritative physics snapshots at 20Hz with interpolation
- Bumper-car collisions with impulse relay and camera shake
- In-game chat with Enter/Escape shortcuts and unread badge
- Minimap showing all player positions and track outline
- Race track with CatmullRom curves, matcap barriers, asphalt surface
- World-space checkered floor shader
- Grid spawn positions on the start straight
- Player name labels above each car
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant