Multiplayer Tabletop Simulator

A modern, web-based Virtual Tabletop (VTT) environment. This monorepo includes a React frontend utilizing @primer/react and an Express/Socket.io backend for real-time multiplayer coordination.

Features

• Real-time Multiplayer: Seamless cursor tracking, active player rosters, and a live chat log.
• Game Master Workstation: GMs can configure campaigns, manage active battlemaps, and orchestrate standard setups.
• Persistent Library System: A hierarchy-friendly token and card library saved onto the host environment, equipped with drag-and-drop spawn capabilities and .zip loss-less exporting.
• Dynamic Canvas: Grid overlays responsive to light/dark system themes, featuring an unobtrusive cursor coordinate heads-up display.
• Modern Aesthetics: Designed with CSS glassmorphism, fluid micro-animations, and the robust Primer design token system.

Project Structure (Monorepo)

The repository uses npm workspaces to manage its packages.

• packages/shared: Shared TypeScript interfaces and socket event topologies.
• packages/frontend: The React/Vite front-end.
• packages/backend: The Node.js Express/Socket.io backend server. Maps and campaign data are persisted in a generated campaigns/ folder relative to the backend.

Prerequisites

Ensure you have Node.js installed along with npm v7+.

Installation & Running

1. Install all dependencies across the monorepo from the root directory:

   npm install

2. Start the development servers (runs both frontend on port 5173 and backend on port 3005):

   npm run dev

3. Navigate to http://localhost:5173 in your browser.

Play Guide

1. Enter a generic Campaign string and enter your desired screen name.
2. The very first user to input "GM" in the passkey block (or claim GM button) will become the host with exclusive access to map controls and the Library tab.
3. Observers and players joining later will only be able to control objects on the canvas assigned to them or marked as public.
4. Drag and drop default Slug and Snail entities from the GM's Library tab directly onto the Stage!

Documentation

This implementation was generated autonomously. V2 features include modular sidebars, an exportable hierarchical asset library, persistent dark mode user settings, and coordinate/grid systems. For further modifications, edit packages/frontend/src/App.tsx or expand the entity contracts in packages/shared/src/index.ts.