Een lokaal draaiende web-app voor de Grisburgh D&D-campagne. De DM beheert personages, locaties, organisaties, voorwerpen en archief-documenten. Spelers krijgen een gefilterde read-only view via een gedeelde URL.

• DM logt in met een wachtwoord en kan alles aanmaken, bewerken en verbergen/onthullen
• Spelers openen dezelfde URL zonder login en zien alleen wat de DM zichtbaar heeft gemaakt
• Server-side filtering zorgt ervoor dat spelers nooit bij verborgen data kunnen (geen client-side trucjes mogelijk)
• Real-time updates via Socket.io — als de DM iets wijzigt, updaten de speler-browsers automatisch

• Zichtbaarheid togglen per entity/document
• Geheime velden die apart onthuld kunnen worden
• Character stats (AC, HP, abilities) — alleen zichtbaar voor DM
• DM-notities (alleen voor DM zichtbaar)
• PDF en afbeelding upload (max 10MB) met inline PDF viewer
• Perkament-tekst editor voor archief-documenten
• Verborgen connecties (selectief NPC/locatie-links verbergen op documenten)
• Autocomplete bij het linken van entities (kiest uit bestaande items)

• Node.js 24 (zie .node-version)
• cloudflared voor extern delen (optioneel)

nvm use           # activeert Node 24 via .nvmrc
npm install

brew install cloudflared

npm run dev       # start met auto-reload bij code changes
# of
npm start         # zonder auto-reload

Server draait op http://localhost:3000

Open een tweede terminal:

npm run tunnel

Dit geeft een publieke URL (bijv. https://iets-random.trycloudflare.com). Deel die met je spelers. De URL verandert elke keer dat je de tunnel opnieuw start.

Klik op "DM Login" in de header en gebruik wachtwoord: grisburgh-dm (aanpasbaar in config.js)

server.js              # Express + Socket.io entry point
config.js              # Poort, wachtwoord, session secret
routes/
  api.js               # REST API + server-side filtering
  auth.js              # DM login + middleware
lib/
  storage.js           # JSON file opslag + afbeeldingen/PDFs
public/
  index.html           # SPA shell (Tailwind CSS + PDF.js)
  js/
    app.js             # App shell, auth, modals, section routing
    render-campagne.js # Entity CRUD, cards, editor, autocomplete links
    render-archief.js  # Documenten, onthulling, PDF viewer, timeline
    render-dashboard.js# Read-only wiki view
    api.js             # Fetch wrapper + entity name lookup
    socket-client.js   # Real-time updates
  css/
    theme.css          # Custom styles (scrollbar, stat blocks, autocomplete, etc.)
data/                  # Persistent data (gitignored)
original/              # Originele standalone HTML bestanden
tests/                 # Automatische tests (32 tests)

Alle data staat in data/ als JSON-bestanden. Deze map is gitignored. Afbeeldingen en PDFs staan in data/files/. Back-up = gewoon de data/ map kopiëren.

nvm use
npm test

Om verder te werken met Claude Code, open een terminal in de project root:

cd ~/apps/alan
claude