Wirer

Browser-based multiplayer logic circuit simulator. Built with React, PixiJS, Hocuspocus, and Yjs.

Architecture

wirer/
  src/              # Simulation core (pure TypeScript, no UI deps)
    SimulationEngine.ts   # Tick-based simulation engine
    types.ts              # Node, Wire, Circuit, SubCircuit types
  client/           # Frontend (React + Vite + PixiJS)
    src/
      components/   # Canvas (PixiJS), Toolbar
      store/        # Zustand store (local state -> Yjs in Stage 4)
      utils/        # Geometry helpers (port positions, wire curves)
  server/           # Backend (Node.js + Hocuspocus + Prisma + SQLite)
    src/index.ts    # Hocuspocus server with onLoad/onStore hooks
    prisma/         # Schema: Document { roomName, data (Yjs snapshot) }

Quick Start (with Docker)

docker compose up --build

Open http://localhost:8080 in your browser.

• Frontend: http://localhost:8080
• Backend: ws://localhost:1234
• Persistence: SQLite database stored in a Docker volume

Development

1. Simulation Core (pure TS)

npm test              # Run tests
npm run test:watch    # Watch mode

2. Backend

cd server
npm install
npx prisma db push    # Create SQLite database
npm run dev           # Hocuspocus on ws://localhost:1234

3. Frontend

cd client
npm install
npm run dev           # Vite on http://localhost:5173

The frontend is still local-only at this stage (no multiplayer yet). Use the toolbar to add gates, click output ports to start wires, and press Step or Run to simulate.

Controls

Action	Input
Pan canvas	Middle mouse drag
Zoom	Mouse wheel
Add gate	Toolbar buttons (In, Out, AND, OR, XOR, NOT)
Drag node	Left click on node body
Create wire	Click output port -> drag -> release on input port
Toggle input	Click on INPUT node's output port
Select node	Click on node
Multi-select	Shift + click
Delete selected	Delete or Backspace
Step simulation	Step button
Run/pause	Run / Stop button

Data Model

The simulation engine uses a tick-based approach: each node reads its inputs at tick t and writes its output for tick t+1. This prevents infinite loops from combinational feedback.

• INPUT: Manual source (click to toggle)
• OUTPUT: Reads and displays a value
• AND / OR / XOR / NOT: Standard logic gates
• SUBCIRCUIT: Recursively simulates an inner circuit as a black box

Stages

#	What's Implemented
1	Simulation engine, types, gates, subcircuits, unit tests
2	Hocuspocus server, Prisma + SQLite persistence
3	PixiJS canvas (zoom/pan/grid/nodes/wires), Zustand store, toolbar
4	Yjs integration (multiplayer), subcircuit grouping UI
5	Undo/redo, export/import, auto-save