Phase 7: maps & VTT

- BattleMap entity (image dataURL, grid, tokens, fog) — Dexie v5, repo, hook, cascade-deleted with campaign - Maps page: upload image (8MB cap), per-campaign list - Map editor canvas: grid overlay (toggle + cell size), fog of war (canvas) with reveal/hide painting + reveal-all/hide-all, draggable tokens that snap to the grid (pointer events, touch+mouse), add/remove tokens; debounced autosave - Dashboard + routes get a Maps entry New maps e2e (upload, add token, toggle fog). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-08 02:01:29 +02:00
parent 522ff8abce
commit 1632018ce9
9 changed files with 354 additions and 5 deletions
@@ -0,0 +1,253 @@
+import { useEffect, useRef, useState } from 'react';
+import type { BattleMap, Campaign, MapToken } from '@/lib/schemas';
+import { mapsRepo } from '@/lib/db/repositories';
+import { newId } from '@/lib/ids';
+import { useDebouncedCallback } from '@/lib/useDebouncedCallback';
+import { useMaps } from './hooks';
+import { Page, PageHeader, EmptyState, RequireCampaign } from '@/components/ui/Page';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { NumberField } from '@/components/ui/NumberField';
+import { cn } from '@/lib/cn';
+
+const MAX_IMAGE_BYTES = 8 * 1024 * 1024;
+const TOKEN_COLORS = ['#d4af37', '#ef5350', '#66bb6a', '#64b5f6', '#ba68c8', '#ffa726'];
+
+export function MapsPage() {
+  return <RequireCampaign>{(c) => <Maps campaign={c} />}</RequireCampaign>;
+}
+
+function Maps({ campaign }: { campaign: Campaign }) {
+  const maps = useMaps(campaign.id);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const fileRef = useRef<HTMLInputElement>(null);
+  const selected = maps.find((m) => m.id === selectedId) ?? null;
+
+  const upload = (file: File) => {
+    setError(null);
+    if (file.size > MAX_IMAGE_BYTES) { setError('Image is larger than 8 MB.'); return; }
+    const reader = new FileReader();
+    reader.onload = async () => {
+      const dataUrl = typeof reader.result === 'string' ? reader.result : '';
+      if (!dataUrl) return;
+      const map = await mapsRepo.create(campaign.id, file.name.replace(/\.[^.]+$/, ''), dataUrl);
+      setSelectedId(map.id);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title="Maps"
+        subtitle={campaign.name}
+        actions={<Button variant="primary" onClick={() => fileRef.current?.click()}>+ Upload map</Button>}
+      />
+      <input
+        ref={fileRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={(e) => { const f = e.target.files?.[0]; if (f) upload(f); e.target.value = ''; }}
+      />
+      {error && <p className="mb-3 text-sm text-danger">{error}</p>}
+
+      {maps.length === 0 ? (
+        <EmptyState title="No maps yet" hint="Upload a battle map image, add a grid, drop tokens, and reveal it with fog of war." action={<Button variant="primary" onClick={() => fileRef.current?.click()}>+ Upload map</Button>} />
+      ) : (
+        <div className="grid gap-4 lg:grid-cols-[200px_1fr]">
+          <ul className="space-y-1">
+            {maps.map((m) => (
+              <li key={m.id} className="group flex items-center gap-1 rounded-md border border-line">
+                <button className={cn('flex-1 truncate px-3 py-2 text-left text-sm', selected?.id === m.id ? 'text-accent' : 'text-ink')} onClick={() => setSelectedId(m.id)}>{m.name}</button>
+                <button className="px-2 text-muted opacity-0 hover:text-danger group-hover:opacity-100" onClick={async () => { await mapsRepo.remove(m.id); if (selectedId === m.id) setSelectedId(null); }} aria-label={`Delete ${m.name}`}>✕</button>
+              </li>
+            ))}
+          </ul>
+          {selected ? <MapEditor key={selected.id} map={selected} /> : <div className="rounded-lg border border-line bg-panel p-5 text-sm text-muted">Select a map.</div>}
+        </div>
+      )}
+    </Page>
+  );
+}
+
+type Tool = 'move' | 'reveal' | 'hide';
+
+function MapEditor({ map }: { map: BattleMap }) {
+  const [m, setM] = useState<BattleMap>(map);
+  const [tool, setTool] = useState<Tool>('move');
+  const [natural, setNatural] = useState<{ w: number; h: number } | null>(null);
+  const fogRef = useRef<HTMLCanvasElement>(null);
+  const painting = useRef(false);
+
+  const save = useDebouncedCallback((next: BattleMap) => void mapsRepo.save(next), 400);
+  const update = (patch: Partial<BattleMap>) => setM((prev) => { const next = { ...prev, ...patch }; save(next); return next; });
+
+  // Load natural image size.
+  useEffect(() => {
+    if (!m.image) return;
+    const img = new Image();
+    img.onload = () => setNatural({ w: img.naturalWidth, h: img.naturalHeight });
+    img.src = m.image;
+  }, [m.image]);
+
+  const displayW = natural ? Math.min(natural.w, 880) : 0;
+  const scale = natural ? displayW / natural.w : 1;
+  const displayH = natural ? natural.h * scale : 0;
+  const cellPx = m.gridSize * scale;
+  const cols = natural ? Math.ceil(natural.w / m.gridSize) : 0;
+  const rows = natural ? Math.ceil(natural.h / m.gridSize) : 0;
+
+  // Redraw fog whenever it changes.
+  useEffect(() => {
+    const canvas = fogRef.current;
+    if (!canvas || !natural) return;
+    canvas.width = displayW;
+    canvas.height = displayH;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    ctx.clearRect(0, 0, displayW, displayH);
+    if (!m.fogEnabled) return;
+    const revealed = new Set(m.revealed);
+    ctx.fillStyle = 'rgba(0,0,0,0.6)';
+    for (let c = 0; c < cols; c++) {
+      for (let r = 0; r < rows; r++) {
+        if (!revealed.has(`${c},${r}`)) ctx.fillRect(c * cellPx, r * cellPx, cellPx, cellPx);
+      }
+    }
+  }, [m.revealed, m.fogEnabled, displayW, displayH, cellPx, cols, rows, natural]);
+
+  // Stop painting on global pointer up.
+  useEffect(() => {
+    const stop = () => { painting.current = false; };
+    window.addEventListener('pointerup', stop);
+    return () => window.removeEventListener('pointerup', stop);
+  }, []);
+
+  const cellAt = (e: React.PointerEvent) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    return { col: Math.floor((e.clientX - rect.left) / cellPx), row: Math.floor((e.clientY - rect.top) / cellPx) };
+  };
+  const paint = (e: React.PointerEvent) => {
+    if (tool === 'move') return;
+    const { col, row } = cellAt(e);
+    if (col < 0 || row < 0 || col >= cols || row >= rows) return;
+    const key = `${col},${row}`;
+    const set = new Set(m.revealed);
+    if (tool === 'reveal') set.add(key); else set.delete(key);
+    update({ revealed: [...set] });
+  };
+
+  const addToken = () => update({ tokens: [...m.tokens, { id: newId(), label: String(m.tokens.length + 1), color: TOKEN_COLORS[m.tokens.length % TOKEN_COLORS.length]!, col: 0, row: 0 }] });
+  const patchToken = (id: string, p: Partial<MapToken>) => update({ tokens: m.tokens.map((t) => (t.id === id ? { ...t, ...p } : t)) });
+
+  return (
+    <div>
+      {/* Toolbar */}
+      <div className="mb-3 flex flex-wrap items-center gap-2 rounded-lg border border-line bg-panel p-2 text-sm">
+        <Input className="h-8 max-w-40" value={m.name} onChange={(e) => update({ name: e.target.value })} aria-label="Map name" />
+        <div className="flex gap-1">
+          {(['move', 'reveal', 'hide'] as Tool[]).map((t) => (
+            <Button key={t} size="sm" variant={tool === t ? 'primary' : 'secondary'} onClick={() => setTool(t)} aria-pressed={tool === t}>
+              {t === 'move' ? 'Move' : t === 'reveal' ? 'Reveal' : 'Hide'}
+            </Button>
+          ))}
+        </div>
+        <label className="flex items-center gap-1 text-xs text-muted"><input type="checkbox" checked={m.showGrid} onChange={(e) => update({ showGrid: e.target.checked })} /> Grid</label>
+        <label className="flex items-center gap-1 text-xs text-muted">Cell<NumberField className="w-16" value={m.gridSize} min={10} max={400} onChange={(gridSize) => update({ gridSize })} aria-label="Grid cell size" /></label>
+        <label className="flex items-center gap-1 text-xs text-muted"><input type="checkbox" checked={m.fogEnabled} onChange={(e) => update({ fogEnabled: e.target.checked })} /> Fog</label>
+        <Button size="sm" variant="ghost" onClick={() => update({ revealed: [] })}>Hide all</Button>
+        <Button size="sm" variant="ghost" onClick={() => { const all: string[] = []; for (let c = 0; c < cols; c++) for (let r = 0; r < rows; r++) all.push(`${c},${r}`); update({ revealed: all }); }}>Reveal all</Button>
+        <Button size="sm" variant="secondary" onClick={addToken}>+ Token</Button>
+      </div>
+
+      {!natural ? (
+        <p className="text-sm text-muted">Loading map…</p>
+      ) : (
+        <div className="overflow-auto rounded-lg border border-line bg-surface p-2">
+          <div className="relative" style={{ width: displayW, height: displayH }}>
+            <img src={m.image} alt={m.name} className="absolute inset-0 h-full w-full select-none" draggable={false} />
+            {m.showGrid && (
+              <div
+                className="pointer-events-none absolute inset-0"
+                style={{
+                  backgroundImage:
+                    'linear-gradient(to right, rgba(255,255,255,0.25) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.25) 1px, transparent 1px)',
+                  backgroundSize: `${cellPx}px ${cellPx}px`,
+                }}
+              />
+            )}
+            {/* Fog + paint surface (also catches clicks in reveal/hide mode) */}
+            <canvas
+              ref={fogRef}
+              className="absolute inset-0"
+              style={{ width: displayW, height: displayH, pointerEvents: tool === 'move' ? 'none' : 'auto', cursor: tool === 'move' ? 'default' : 'crosshair' }}
+              onPointerDown={(e) => { painting.current = true; paint(e); }}
+              onPointerMove={(e) => { if (painting.current) paint(e); }}
+            />
+            {/* Tokens */}
+            {m.tokens.map((t) => (
+              <TokenChip key={t.id} token={t} cellPx={cellPx} draggable={tool === 'move'} cols={cols} rows={rows}
+                onMove={(col, row) => patchToken(t.id, { col, row })}
+                onRemove={() => update({ tokens: m.tokens.filter((x) => x.id !== t.id) })}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+      <p className="mt-2 text-xs text-muted">Tip: use <strong>Reveal</strong>/<strong>Hide</strong> to paint fog; <strong>Move</strong> to drag tokens.</p>
+    </div>
+  );
+}
+
+function TokenChip({ token, cellPx, draggable, cols, rows, onMove, onRemove }: {
+  token: MapToken; cellPx: number; draggable: boolean; cols: number; rows: number;
+  onMove: (col: number, row: number) => void; onRemove: () => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const drag = useRef<{ startX: number; startY: number; col: number; row: number } | null>(null);
+  const [drift, setDrift] = useState<{ dx: number; dy: number }>({ dx: 0, dy: 0 });
+
+  const onDown = (e: React.PointerEvent) => {
+    if (!draggable) return;
+    e.stopPropagation();
+    ref.current?.setPointerCapture(e.pointerId);
+    drag.current = { startX: e.clientX, startY: e.clientY, col: token.col, row: token.row };
+  };
+  const onMovePtr = (e: React.PointerEvent) => {
+    if (!drag.current) return;
+    setDrift({ dx: e.clientX - drag.current.startX, dy: e.clientY - drag.current.startY });
+  };
+  const onUp = (e: React.PointerEvent) => {
+    if (!drag.current) return;
+    ref.current?.releasePointerCapture(e.pointerId);
+    const col = Math.max(0, Math.min(cols - 1, drag.current.col + Math.round(drift.dx / cellPx)));
+    const row = Math.max(0, Math.min(rows - 1, drag.current.row + Math.round(drift.dy / cellPx)));
+    drag.current = null;
+    setDrift({ dx: 0, dy: 0 });
+    onMove(col, row);
+  };
+
+  return (
+    <div
+      ref={ref}
+      onPointerDown={onDown}
+      onPointerMove={onMovePtr}
+      onPointerUp={onUp}
+      onDoubleClick={onRemove}
+      title={`${token.label} (double-click to remove)`}
+      className="absolute grid place-items-center rounded-full border-2 border-black/40 text-xs font-bold text-black shadow"
+      style={{
+        width: cellPx * 0.9, height: cellPx * 0.9,
+        left: token.col * cellPx + cellPx * 0.05 + drift.dx,
+        top: token.row * cellPx + cellPx * 0.05 + drift.dy,
+        background: token.color,
+        cursor: draggable ? 'grab' : 'default',
+        touchAction: 'none',
+      }}
+    >
+      {token.label}
+    </div>
+  );
+}