@jjlmoya/utils-tabletop 1.5.0 → 1.7.0

package/src/tool/investigation-board/layout.ts

@@ -0,0 +1,16 @@
+import { viewportEl, areaEl, state } from './dom';
+
+export function adjustBoardSize(): void {
+  const viewW = viewportEl.clientWidth || 800;
+  const viewH = viewportEl.clientHeight || 500;
+  let maxX = viewW;
+  let maxY = viewH;
+  state.nodes.forEach((n) => {
+    const right = n.x + 260;
+    const bottom = n.y + 180;
+    if (right > maxX) maxX = right;
+    if (bottom > maxY) maxY = bottom;
+  });
+  areaEl.style.width = `${maxX + 200}px`;
+  areaEl.style.height = `${maxY + 200}px`;
+}

package/src/tool/investigation-board/logic.test.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect } from 'vitest';
+import {
+  createNode,
+  updateNode,
+  deleteNode,
+  createConnection,
+  updateConnection,
+  deleteConnection,
+  filterNodes,
+  getHighlightPath,
+} from './logic';
+import type { BoardNode, BoardConnection } from './types';
+
+describe('Investigation Board Logic', () => {
+  it('should create a node with unique id and category', () => {
+    const node = createNode({ name: 'Test Card', category: 'clue', x: 10, y: 20, color: '#ef4444' });
+    expect(node.id).toBeDefined();
+    expect(node.name).toBe('Test Card');
+    expect(node.category).toBe('clue');
+    expect(node.x).toBe(10);
+    expect(node.y).toBe(20);
+    expect(node.color).toBe('#ef4444');
+  });
+
+  it('should update a node name and coordinates', () => {
+    const node = createNode({ name: 'Original', category: 'item', x: 10, y: 20, color: '#f59e0b' });
+    const nodes = [node];
+    const updated = updateNode(nodes, node.id, { name: 'New Name', x: 50 });
+    expect(updated[0].name).toBe('New Name');
+    expect(updated[0].x).toBe(50);
+    expect(updated[0].y).toBe(20);
+  });
+
+  it('should delete a node and clean up its connections', () => {
+    const n1 = createNode({ name: 'N1', category: 'character', x: 0, y: 0, color: '#000' });
+    const n2 = createNode({ name: 'N2', category: 'clue', x: 0, y: 0, color: '#000' });
+    const conn = createConnection(n1.id, n2.id, 'links', '#000');
+
+    const result = deleteNode([n1, n2], [conn], n1.id);
+    expect(result.nodes).toHaveLength(1);
+    expect(result.nodes[0].id).toBe(n2.id);
+    expect(result.connections).toHaveLength(0);
+  });
+
+  it('should create and delete a connection', () => {
+    const conn1 = createConnection('n1', 'n2', 'rel1', '#fff');
+    const conn2 = createConnection('n2', 'n3', 'rel2', '#fff');
+    const list = [conn1, conn2];
+
+    const updated = updateConnection(list, conn1.id, { label: 'updated label' });
+    expect(updated[0].label).toBe('updated label');
+
+    const filtered = deleteConnection(list, conn1.id);
+    expect(filtered).toHaveLength(1);
+    expect(filtered[0].id).toBe(conn2.id);
+  });
+
+  it('should filter nodes based on category and search query', () => {
+    const n1: BoardNode = {
+      id: '1',
+      name: 'Agent Cooper',
+      category: 'character',
+      description: 'FBI Special Agent',
+      notes: 'Loves cherry pie',
+      tags: ['fbi', 'investigator'],
+      color: '#000',
+      x: 0,
+      y: 0,
+    };
+    const n2: BoardNode = {
+      id: '2',
+      name: 'Blue Rose Case',
+      category: 'clue',
+      description: 'Mysterious case file',
+      notes: 'Classified',
+      tags: ['clue', 'secret'],
+      color: '#000',
+      x: 0,
+      y: 0,
+    };
+
+    const list = [n1, n2];
+
+    const filteredCategory = filterNodes(list, '', 'character');
+    expect(filteredCategory).toHaveLength(1);
+    expect(filteredCategory[0].name).toBe('Agent Cooper');
+
+    const filteredSearch = filterNodes(list, 'cherry', 'all');
+    expect(filteredSearch).toHaveLength(1);
+    expect(filteredSearch[0].name).toBe('Agent Cooper');
+  });
+
+  it('should retrieve highlight paths connected to a specific node', () => {
+    const conn1: BoardConnection = { id: 'c1', fromId: 'n1', toId: 'n2', label: '1', color: '#000' };
+    const conn2: BoardConnection = { id: 'c2', fromId: 'n2', toId: 'n3', label: '2', color: '#000' };
+    const connections = [conn1, conn2];
+
+    const highlight = getHighlightPath(connections, 'n2');
+    expect(highlight.nodeIds.has('n1')).toBe(true);
+    expect(highlight.nodeIds.has('n3')).toBe(true);
+    expect(highlight.nodeIds.has('n2')).toBe(true);
+    expect(highlight.connectionIds.has('c1')).toBe(true);
+    expect(highlight.connectionIds.has('c2')).toBe(true);
+  });
+});

package/src/tool/investigation-board/logic.ts

@@ -0,0 +1,106 @@
+import type { BoardNode, BoardConnection, NodeCategory } from './types';
+
+export function createNode(options: {
+  name: string;
+  category: NodeCategory;
+  x: number;
+  y: number;
+  color: string;
+}): BoardNode {
+  return {
+    id: Math.random().toString(36).substring(2, 9),
+    name: options.name,
+    category: options.category,
+    description: '',
+    notes: '',
+    tags: [],
+    color: options.color,
+    x: options.x,
+    y: options.y,
+  };
+}
+
+export function updateNode(
+  nodes: BoardNode[],
+  id: string,
+  updates: Partial<Omit<BoardNode, 'id'>>,
+): BoardNode[] {
+  return nodes.map((n) => (n.id === id ? { ...n, ...updates } : n));
+}
+
+export function deleteNode(
+  nodes: BoardNode[],
+  connections: BoardConnection[],
+  id: string,
+): { nodes: BoardNode[]; connections: BoardConnection[] } {
+  return {
+    nodes: nodes.filter((n) => n.id !== id),
+    connections: connections.filter((c) => c.fromId !== id && c.toId !== id),
+  };
+}
+
+export function createConnection(
+  fromId: string,
+  toId: string,
+  label: string,
+  color: string,
+): BoardConnection {
+  return {
+    id: Math.random().toString(36).substring(2, 9),
+    fromId,
+    toId,
+    label,
+    color,
+  };
+}
+
+export function updateConnection(
+  connections: BoardConnection[],
+  id: string,
+  updates: Partial<Omit<BoardConnection, 'id'>>,
+): BoardConnection[] {
+  return connections.map((c) => (c.id === id ? { ...c, ...updates } : c));
+}
+
+export function deleteConnection(
+  connections: BoardConnection[],
+  id: string,
+): BoardConnection[] {
+  return connections.filter((c) => c.id !== id);
+}
+
+export function filterNodes(
+  nodes: BoardNode[],
+  search: string,
+  category: string,
+): BoardNode[] {
+  const query = search.toLowerCase().trim();
+  return nodes.filter((n) => {
+    const matchesCategory = !category || category === 'all' || n.category === category;
+    const matchesSearch =
+      !query ||
+      n.name.toLowerCase().includes(query) ||
+      n.description.toLowerCase().includes(query) ||
+      n.notes.toLowerCase().includes(query) ||
+      n.tags.some((t) => t.toLowerCase().includes(query));
+    return matchesCategory && matchesSearch;
+  });
+}
+
+export function getHighlightPath(
+  connections: BoardConnection[],
+  nodeId: string,
+): { nodeIds: Set<string>; connectionIds: Set<string> } {
+  const nodeIds = new Set<string>([nodeId]);
+  const connectionIds = new Set<string>();
+  for (const c of connections) {
+    if (c.fromId === nodeId) {
+      nodeIds.add(c.toId);
+      connectionIds.add(c.id);
+    } else if (c.toId === nodeId) {
+      nodeIds.add(c.fromId);
+      connectionIds.add(c.id);
+    }
+  }
+  return { nodeIds, connectionIds };
+}

package/src/tool/investigation-board/panzoom.ts

@@ -0,0 +1,24 @@
+import Panzoom from '@panzoom/panzoom';
+import { areaEl, viewportEl, zoomValueEl, state } from './dom';
+
+export const panzoomInstance = Panzoom(areaEl, {
+  maxScale: 1.8,
+  minScale: 0.3,
+  excludeClass: 'panzoom-exclude',
+  handleStartEvent: (event: Event) => {
+    const target = event.target as HTMLElement;
+    if (target.closest('.panzoom-exclude') || target.closest('.board-node')) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  },
+});
+
+viewportEl.addEventListener('wheel', panzoomInstance.zoomWithWheel);
+
+areaEl.addEventListener('panzoomchange', (e: Event) => {
+  const detail = (e as CustomEvent).detail;
+  state.zoomScale = detail.scale;
+  zoomValueEl.textContent = `${Math.round(state.zoomScale * 100)}%`;
+});

package/src/tool/investigation-board/renderer.ts

@@ -0,0 +1,256 @@
+import type { BoardNode, BoardConnection } from './types';
+import {
+  state,
+  mainCard,
+  nodesLayer,
+  svgEl,
+  connBanner,
+} from './dom';
+import { adjustBoardSize } from './layout';
+import { filterNodes, getHighlightPath, deleteConnection } from './logic';
+import { startLongPress } from './boardContextMenu';
+import { openDrawer } from './drawer';
+import { openConnModal } from './connectionModal';
+import { saveState } from './stateManager';
+
+interface HighlightPath {
+  nodeIds: Set<string>;
+  connectionIds: Set<string>;
+}
+
+interface ConnectionGroupOptions {
+  c: BoardConnection;
+  x1: number;
+  y1: number;
+  targetX: number;
+  targetY: number;
+  highlight: HighlightPath | null;
+}
+
+interface CenterCoords {
+  x: number;
+  y: number;
+}
+
+function t(key: string): string {
+  if (!mainCard) return '';
+  try {
+    const ui = JSON.parse(mainCard.getAttribute('data-ui') || '{}');
+    return ui[key] || '';
+  } catch {
+    return '';
+  }
+}
+
+function getNodeTagsHtml(tags: string[]): string {
+  return tags
+    .filter((tg) => tg.trim().length > 0)
+    .map((tg) => `<span class="board-node-tag">${tg}</span>`)
+    .join('');
+}
+
+function getNodeNotesHtml(notes: string): string {
+  const notesHtml = notes
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0)
+    .map((line) => `<li>${line}</li>`)
+    .join('');
+  return notesHtml ? `<ul class="board-node-notes">${notesHtml}</ul>` : '';
+}
+
+function createCardMarkup(n: BoardNode, tagsHtml: string, notesHtml: string): string {
+  return `
+    <div class="board-node-header">
+      <span class="node-category-badge category-${n.category}">${t(n.category) || n.category}</span>
+      <div class="node-actions">
+        <button type="button" class="node-action-link btn-link-node" data-id="${n.id}" aria-label="Link">
+          <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display: block;"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3 M9 17H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3 M8 12h8"/></svg>
+        </button>
+        <button type="button" class="node-action-link btn-edit-node" data-id="${n.id}" aria-label="Edit">
+          <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display: block;"><path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+        </button>
+      </div>
+    </div>
+    <div class="board-node-title">${n.name}</div>
+    <div class="board-node-desc">${n.description || ''}</div>
+    ${notesHtml}
+    <div class="board-node-tags">${tagsHtml}</div>
+  `;
+}
+
+function handleCardClick(nodeId: string): void {
+  if (state.quickLinkSourceId) {
+    if (state.quickLinkSourceId !== nodeId) {
+      const fromId = state.quickLinkSourceId;
+      state.quickLinkSourceId = null;
+      connBanner.classList.remove('active');
+      openConnModal(fromId, nodeId);
+    }
+    return;
+  }
+  state.highlightedNodeId = state.highlightedNodeId === nodeId ? null : nodeId;
+  renderBoard();
+}
+
+function bindCardEvents(card: HTMLElement, n: BoardNode): void {
+  card.addEventListener('pointerdown', (e) => {
+    if ((e.target as HTMLElement).closest('.node-action-link')) return;
+    startLongPress(e, n.id);
+  });
+  card.addEventListener('click', (e) => {
+    e.stopPropagation();
+    handleCardClick(n.id);
+  });
+  card.addEventListener('dblclick', (e) => {
+    e.stopPropagation();
+    openDrawer(n);
+  });
+  card.querySelector('.btn-edit-node')?.addEventListener('click', (e) => {
+    e.stopPropagation();
+    openDrawer(n);
+  });
+  card.querySelector('.btn-link-node')?.addEventListener('click', (e) => {
+    e.stopPropagation();
+    state.quickLinkSourceId = n.id;
+    connBanner.classList.add('active');
+  });
+}
+
+function renderNodeCard(n: BoardNode, highlight: HighlightPath | null): void {
+  const card = document.createElement('div');
+  card.className = 'board-node panzoom-exclude';
+  card.id = `node-${n.id}`;
+  card.style.left = `${n.x}px`;
+  card.style.top = `${n.y}px`;
+  card.style.borderColor = n.color;
+
+  if (highlight) {
+    if (highlight.nodeIds.has(n.id)) {
+      if (n.id === state.highlightedNodeId) {
+        card.classList.add('highlight-source');
+      }
+    } else {
+      card.classList.add('dimmed');
+    }
+  }
+
+  card.innerHTML = createCardMarkup(n, getNodeTagsHtml(n.tags), getNodeNotesHtml(n.notes));
+  bindCardEvents(card, n);
+  nodesLayer.appendChild(card);
+}
+
+function handleConnectionClick(c: BoardConnection): void {
+  if (confirm(`Delete connection "${c.label}"?`)) {
+    state.connections = deleteConnection(state.connections, c.id);
+    saveState();
+    renderBoard();
+  }
+}
+
+function createConnectionText(c: BoardConnection, midX: number, midY: number, highlight: HighlightPath | null): SVGTextElement {
+  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+  text.setAttribute('x', midX.toString());
+  text.setAttribute('y', midY.toString());
+  text.setAttribute('class', 'connection-text');
+  text.setAttribute('fill', 'var(--text-base)');
+  text.textContent = c.label;
+
+  if (highlight && !highlight.connectionIds.has(c.id)) {
+    text.style.opacity = '0.1';
+  }
+  return text;
+}
+
+function createConnectionGroup(opts: ConnectionGroupOptions): SVGElement {
+  const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+  g.style.cursor = 'pointer';
+
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  path.setAttribute('d', `M ${opts.x1} ${opts.y1} L ${opts.targetX} ${opts.targetY}`);
+  path.setAttribute('stroke', opts.c.color);
+  path.setAttribute('class', 'connection-path');
+  path.setAttribute('marker-end', 'url(#arrowhead)');
+
+  if (opts.highlight) {
+    if (opts.highlight.connectionIds.has(opts.c.id)) {
+      path.classList.add('highlighted');
+    } else {
+      path.style.opacity = '0.1';
+    }
+  }
+
+  g.appendChild(path);
+  g.appendChild(createConnectionText(opts.c, (opts.x1 + opts.targetX) / 2, (opts.y1 + opts.targetY) / 2, opts.highlight));
+  g.addEventListener('click', (e) => {
+    e.stopPropagation();
+    handleConnectionClick(opts.c);
+  });
+  return g;
+}
+
+function getNodeCenter(n: BoardNode): CenterCoords {
+  const el = document.getElementById(`node-${n.id}`);
+  const w = el ? el.offsetWidth || 240 : 240;
+  const h = el ? el.offsetHeight || 120 : 120;
+  return {
+    x: n.x + w / 2,
+    y: n.y + h / 2,
+  };
+}
+
+function getConnectionCoords(c: BoardConnection): { x1: number; y1: number; x2: number; y2: number } | null {
+  const fromNode = state.nodes.find((n) => n.id === c.fromId);
+  const toNode = state.nodes.find((n) => n.id === c.toId);
+  if (!fromNode || !toNode) return null;
+
+  const c1 = getNodeCenter(fromNode);
+  const c2 = getNodeCenter(toNode);
+  return {
+    x1: c1.x,
+    y1: c1.y,
+    x2: c2.x,
+    y2: c2.y,
+  };
+}
+
+function drawConnectionLine(c: BoardConnection, highlight: HighlightPath | null): void {
+  const coords = getConnectionCoords(c);
+  if (!coords) return;
+
+  const dx = coords.x2 - coords.x1;
+  const dy = coords.y2 - coords.y1;
+  const distance = Math.sqrt(dx * dx + dy * dy);
+  if (distance === 0) return;
+
+  const stopDistance = 130;
+  const ratio = Math.max(0, (distance - stopDistance) / distance);
+  const targetX = coords.x1 + dx * ratio;
+  const targetY = coords.y1 + dy * ratio;
+
+  const g = createConnectionGroup({
+    c,
+    x1: coords.x1,
+    y1: coords.y1,
+    targetX,
+    targetY,
+    highlight,
+  });
+  svgEl.appendChild(g);
+}
+
+export function drawConnections(highlight: HighlightPath | null): void {
+  while (svgEl.lastChild && svgEl.lastChild.nodeName !== 'defs') {
+    svgEl.removeChild(svgEl.lastChild);
+  }
+  state.connections.forEach((c) => drawConnectionLine(c, highlight));
+}
+
+export function renderBoard(): void {
+  adjustBoardSize();
+  nodesLayer.innerHTML = '';
+  const filtered = filterNodes(state.nodes, state.currentSearchQuery, state.currentCategoryFilter);
+  const highlight = state.highlightedNodeId ? getHighlightPath(state.connections, state.highlightedNodeId) : null;
+  filtered.forEach((n) => renderNodeCard(n, highlight));
+  drawConnections(highlight);
+}

package/src/tool/investigation-board/seo.astro

@@ -0,0 +1,16 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { investigationBoard } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const loader = investigationBoard.i18n[locale] || investigationBoard.i18n.en;
+const content = await loader?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/investigation-board/stateManager.ts

@@ -0,0 +1,126 @@
+import type { BoardConnection, BoardNode } from './types';
+import {
+  state,
+  STORAGE_KEY,
+  CURRENT_ID_KEY,
+  DATA_KEY_PREFIX,
+  boardSelect,
+} from './dom';
+
+const DEFAULT_NODES: BoardNode[] = [
+  {
+    id: 'n1',
+    name: 'Detective Miller',
+    category: 'character',
+    description: 'Lead investigator of the warehouse case.',
+    notes: 'Thinks the fire was deliberate.',
+    tags: ['police', 'lead'],
+    color: '#3b82f6',
+    x: 50,
+    y: 50,
+  },
+  {
+    id: 'n2',
+    name: 'Footprints',
+    category: 'clue',
+    description: 'Found outside the back door.',
+    notes: 'Size 11 combat boots.',
+    tags: ['clue', 'physical'],
+    color: '#ef4444',
+    x: 400,
+    y: 50,
+  },
+  {
+    id: 'n3',
+    name: 'Warehouse',
+    category: 'location',
+    description: 'Abandoned docks storage unit.',
+    notes: 'Burned down at midnight.',
+    tags: ['location', 'scene'],
+    color: '#10b981',
+    x: 220,
+    y: 280,
+  },
+];
+
+const DEFAULT_CONNECTIONS: BoardConnection[] = [
+  {
+    id: 'c1',
+    fromId: 'n1',
+    toId: 'n3',
+    label: 'Investigating',
+    color: '#3b82f6',
+  },
+  {
+    id: 'c2',
+    fromId: 'n2',
+    toId: 'n3',
+    label: 'Found at',
+    color: '#ef4444',
+  },
+];
+
+export function saveState(): void {
+  localStorage.setItem(
+    DATA_KEY_PREFIX + state.currentBoardId,
+    JSON.stringify({ nodes: state.nodes, connections: state.connections })
+  );
+}
+
+export function loadBoardsList(): void {
+  const data = localStorage.getItem(STORAGE_KEY);
+  if (data) {
+    try {
+      state.boardsList = JSON.parse(data);
+    } catch {
+      state.boardsList = [];
+    }
+  }
+  if (state.boardsList.length === 0) {
+    state.boardsList = [{ id: 'default', name: 'Main Investigation' }];
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state.boardsList));
+  }
+}
+
+export function saveBoardsList(): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(state.boardsList));
+}
+
+export function updateBoardSelect(): void {
+  boardSelect.innerHTML = '';
+  state.boardsList.forEach((b) => {
+    const opt = document.createElement('option');
+    opt.value = b.id;
+    opt.textContent = b.name;
+    if (b.id === state.currentBoardId) {
+      opt.selected = true;
+    }
+    boardSelect.appendChild(opt);
+  });
+}
+
+function loadDefaultState(): void {
+  state.nodes = DEFAULT_NODES;
+  state.connections = DEFAULT_CONNECTIONS;
+  saveState();
+}
+
+export function loadBoardState(boardId: string): void {
+  state.currentBoardId = boardId;
+  localStorage.setItem(CURRENT_ID_KEY, boardId);
+  const data = localStorage.getItem(DATA_KEY_PREFIX + boardId);
+  if (data) {
+    try {
+      const parsed = JSON.parse(data);
+      state.nodes = parsed.nodes || [];
+      state.connections = parsed.connections || [];
+      return;
+    } catch {}
+  }
+  if (boardId === 'default') {
+    loadDefaultState();
+  } else {
+    state.nodes = [];
+    state.connections = [];
+  }
+}

package/src/tool/investigation-board/types.ts

@@ -0,0 +1,26 @@
+export type NodeCategory = 'character' | 'clue' | 'location' | 'item' | 'custom';
+
+export interface BoardNode {
+  id: string;
+  name: string;
+  category: NodeCategory;
+  description: string;
+  notes: string;
+  tags: string[];
+  color: string;
+  x: number;
+  y: number;
+}
+
+export interface BoardConnection {
+  id: string;
+  fromId: string;
+  toId: string;
+  label: string;
+  color: string;
+}
+
+export interface BoardState {
+  nodes: BoardNode[];
+  connections: BoardConnection[];
+}

package/src/tools.ts

@@ -7,6 +7,7 @@ import { SCORE_TRACKER_TOOL } from './tool/score-tracker';
 import { INITIATIVE_TRACKER_TOOL } from './tool/rpg-initiative-tracker';
 import { FANTASY_RUNES_TRANSLATOR_TOOL } from './tool/fantasy-runes-translator';
 import { DECISION_WHEEL_TOOL } from './tool/decision-wheel';
+import { INVESTIGATION_BOARD_TOOL } from './tool/investigation-board';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   DICE_ROLLER_SIMULATOR_TOOL,
@@ -16,4 +17,6 @@ export const ALL_TOOLS: ToolDefinition[] = [
   INITIATIVE_TRACKER_TOOL,
   FANTASY_RUNES_TRANSLATOR_TOOL,
   DECISION_WHEEL_TOOL,
+  INVESTIGATION_BOARD_TOOL,
 ];
+