@jjlmoya/utils-tabletop 1.5.0 → 1.6.0

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

@@ -0,0 +1,60 @@
+import {
+  state,
+  connOverlay,
+  connSourceSelect,
+  connTargetSelect,
+  connTextInput,
+  connColorInput,
+  saveConnBtn,
+  cancelConnBtn,
+  closeConnBtn,
+  addConnectionBtn,
+} from './dom';
+import { createConnection } from './logic';
+import { saveState } from './stateManager';
+import { renderBoard } from './renderer';
+
+export function populateSelects(sourceId?: string, targetId?: string): void {
+  connSourceSelect.innerHTML = '';
+  connTargetSelect.innerHTML = '';
+  state.nodes.forEach((n) => {
+    const opt1 = document.createElement('option');
+    opt1.value = n.id;
+    opt1.textContent = n.name;
+    opt1.selected = !!(sourceId && n.id === sourceId);
+    connSourceSelect.appendChild(opt1);
+
+    const opt2 = document.createElement('option');
+    opt2.value = n.id;
+    opt2.textContent = n.name;
+    opt2.selected = !!(targetId && n.id === targetId);
+    connTargetSelect.appendChild(opt2);
+  });
+}
+
+export function openConnModal(sourceId?: string, targetId?: string): void {
+  populateSelects(sourceId, targetId);
+  connTextInput.value = '';
+  connOverlay.classList.add('active');
+}
+
+export function closeConnModal(): void {
+  connOverlay.classList.remove('active');
+}
+
+saveConnBtn.addEventListener('click', () => {
+  const fromId = connSourceSelect.value;
+  const toId = connTargetSelect.value;
+  const label = connTextInput.value;
+  const color = connColorInput.value;
+  if (!fromId || !toId || fromId === toId) return;
+  const conn = createConnection(fromId, toId, label, color);
+  state.connections.push(conn);
+  saveState();
+  closeConnModal();
+  renderBoard();
+});
+
+cancelConnBtn.addEventListener('click', closeConnModal);
+closeConnBtn.addEventListener('click', closeConnModal);
+addConnectionBtn.addEventListener('click', () => openConnModal());

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

@@ -0,0 +1,89 @@
+import type { BoardNode, BoardConnection } from './types';
+
+export interface BoardMeta {
+  id: string;
+  name: string;
+}
+
+export const state = {
+  nodes: [] as BoardNode[],
+  connections: [] as BoardConnection[],
+  boardsList: [] as BoardMeta[],
+  currentBoardId: 'default',
+  currentCategoryFilter: 'all',
+  currentSearchQuery: '',
+  highlightedNodeId: null as string | null,
+  quickLinkSourceId: null as string | null,
+  zoomScale: 1.0,
+  longPressTimer: null as number | null,
+  startX: 0,
+  startY: 0,
+  longPressTargetNodeId: null as string | null,
+  longPressCanvasX: 0,
+  longPressCanvasY: 0,
+};
+
+export const mainCard = document.querySelector('.investigation-board-main') as HTMLElement;
+export const viewportEl = document.getElementById('board-viewport') as HTMLElement;
+export const areaEl = document.getElementById('board-area') as HTMLElement;
+export const svgEl = document.getElementById('board-connections-svg') as unknown as SVGSVGElement;
+export const nodesLayer = document.getElementById('board-nodes-layer') as HTMLElement;
+
+export const searchInput = document.getElementById('board-search') as HTMLInputElement;
+export const categoryBtns = document.querySelectorAll('.btn-filter');
+export const addCardBtn = document.getElementById('add-card-btn') as HTMLButtonElement;
+export const addConnectionBtn = document.getElementById('add-connection-btn') as HTMLButtonElement;
+export const clearBoardBtn = document.getElementById('clear-board-btn') as HTMLButtonElement;
+
+export const boardSelect = document.getElementById('board-select') as HTMLSelectElement;
+export const saveBoardAsBtn = document.getElementById('save-board-as-btn') as HTMLButtonElement;
+export const newBoardBtn = document.getElementById('new-board-btn') as HTMLButtonElement;
+
+export const drawerOverlay = document.getElementById('card-drawer-overlay') as HTMLElement;
+export const closeDrawerBtn = document.getElementById('close-drawer-btn') as HTMLButtonElement;
+export const cancelDrawerBtn = document.getElementById('cancel-node-btn') as HTMLButtonElement;
+export const saveNodeBtn = document.getElementById('save-node-btn') as HTMLButtonElement;
+export const deleteNodeBtn = document.getElementById('delete-node-btn') as HTMLButtonElement;
+
+export const editIdInput = document.getElementById('edit-node-id') as HTMLInputElement;
+export const editNameInput = document.getElementById('edit-node-name') as HTMLInputElement;
+export const editCategorySelect = document.getElementById('edit-node-category') as HTMLSelectElement;
+export const editDescTextarea = document.getElementById('edit-node-description') as HTMLTextAreaElement;
+export const editNotesList = document.getElementById('edit-notes-list') as HTMLElement;
+export const addNoteRowBtn = document.getElementById('add-note-row-btn') as HTMLButtonElement;
+export const editTagsInput = document.getElementById('edit-node-tags') as HTMLInputElement;
+export const editColorInput = document.getElementById('edit-node-color') as HTMLInputElement;
+export const colorPickerGroup = document.getElementById('color-picker-group') as HTMLElement;
+
+export const connOverlay = document.getElementById('connection-modal-overlay') as HTMLElement;
+export const closeConnBtn = document.getElementById('close-modal-btn') as HTMLButtonElement;
+export const cancelConnBtn = document.getElementById('cancel-connection-btn') as HTMLButtonElement;
+export const saveConnBtn = document.getElementById('save-connection-btn') as HTMLButtonElement;
+export const connSourceSelect = document.getElementById('connection-source') as HTMLSelectElement;
+export const connTargetSelect = document.getElementById('connection-target') as HTMLSelectElement;
+export const connTextInput = document.getElementById('connection-text') as HTMLInputElement;
+export const connColorInput = document.getElementById('connection-color-picker') as HTMLInputElement;
+export const connBanner = document.getElementById('connection-banner') as HTMLElement;
+
+export const zoomValueEl = document.getElementById('zoom-value') as HTMLElement;
+export const zoomInBtn = document.getElementById('zoom-in-btn') as HTMLButtonElement;
+export const zoomOutBtn = document.getElementById('zoom-out-btn') as HTMLButtonElement;
+export const zoomResetBtn = document.getElementById('zoom-reset-btn') as HTMLButtonElement;
+export const fullscreenToggleBtn = document.getElementById('fullscreen-toggle-btn') as HTMLButtonElement;
+
+export const ctxMenu = document.getElementById('board-context-menu') as HTMLElement;
+export const ctxAddCard = document.getElementById('ctx-add-card') as HTMLButtonElement;
+export const ctxEditCard = document.getElementById('ctx-edit-card') as HTMLButtonElement;
+export const ctxLinkCard = document.getElementById('ctx-link-card') as HTMLButtonElement;
+export const ctxDeleteCard = document.getElementById('ctx-delete-card') as HTMLButtonElement;
+
+export const CATEGORY_COLORS: Record<string, string> = {
+  character: '#3b82f6',
+  clue: '#ef4444',
+  location: '#10b981',
+  item: '#f59e0b',
+};
+
+export const STORAGE_KEY = 'tabletop_conspiracy_boards_list';
+export const CURRENT_ID_KEY = 'tabletop_conspiracy_current_board_id';
+export const DATA_KEY_PREFIX = 'tabletop_conspiracy_board_data_';

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

@@ -0,0 +1,110 @@
+import type { BoardNode, NodeCategory } from './types';
+import {
+  state,
+  editIdInput,
+  editNameInput,
+  editCategorySelect,
+  editDescTextarea,
+  editNotesList,
+  editTagsInput,
+  editColorInput,
+  colorPickerGroup,
+  drawerOverlay,
+  addNoteRowBtn,
+  saveNodeBtn,
+  deleteNodeBtn,
+  cancelDrawerBtn,
+  closeDrawerBtn,
+  CATEGORY_COLORS,
+} from './dom';
+import { updateNode, deleteNode } from './logic';
+import { saveState } from './stateManager';
+import { renderBoard } from './renderer';
+
+export function createNoteRowElement(value: string = ''): HTMLElement {
+  const row = document.createElement('div');
+  row.className = 'note-input-row';
+  row.innerHTML = `
+    <input type="text" class="form-control note-item-input" style="flex: 1;" value="${value.replace(/"/g, '&quot;')}" />
+    <button type="button" class="btn btn-danger btn-sm btn-remove-note-row">&times;</button>
+  `;
+  row.querySelector('.btn-remove-note-row')?.addEventListener('click', () => {
+    row.remove();
+  });
+  return row;
+}
+
+export function toggleColorPicker(category: string): void {
+  const isCustom = category === 'custom';
+  colorPickerGroup.style.display = isCustom ? 'flex' : 'none';
+}
+
+export function openDrawer(node: BoardNode): void {
+  editIdInput.value = node.id;
+  editNameInput.value = node.name;
+  editCategorySelect.value = node.category;
+  editDescTextarea.value = node.description;
+  editNotesList.innerHTML = '';
+  const notesArray = node.notes.split('\n').map((n) => n.trim()).filter((n) => n.length > 0);
+  if (notesArray.length > 0) {
+    notesArray.forEach((noteText) => {
+      editNotesList.appendChild(createNoteRowElement(noteText));
+    });
+  } else {
+    editNotesList.appendChild(createNoteRowElement(''));
+  }
+  editTagsInput.value = node.tags.join(', ');
+  editColorInput.value = node.color;
+  toggleColorPicker(node.category);
+  drawerOverlay.classList.add('active');
+}
+
+export function closeDrawer(): void {
+  drawerOverlay.classList.remove('active');
+}
+
+addNoteRowBtn.addEventListener('click', () => {
+  editNotesList.appendChild(createNoteRowElement(''));
+});
+
+editCategorySelect.addEventListener('change', () => {
+  toggleColorPicker(editCategorySelect.value);
+});
+
+saveNodeBtn.addEventListener('click', () => {
+  const id = editIdInput.value;
+  const category = editCategorySelect.value as NodeCategory;
+  const inputElements = editNotesList.querySelectorAll('.note-item-input') as NodeListOf<HTMLInputElement>;
+  const notesString = Array.from(inputElements)
+    .map((inp) => inp.value.trim())
+    .filter((val) => val.length > 0)
+    .join('\n');
+
+  const color = category === 'custom' ? editColorInput.value : (CATEGORY_COLORS[category] || '#ef4444');
+
+  const updates = {
+    name: editNameInput.value,
+    category,
+    description: editDescTextarea.value,
+    notes: notesString,
+    tags: editTagsInput.value.split(',').map((s) => s.trim()),
+    color,
+  };
+  state.nodes = updateNode(state.nodes, id, updates);
+  saveState();
+  closeDrawer();
+  renderBoard();
+});
+
+deleteNodeBtn.addEventListener('click', () => {
+  const id = editIdInput.value;
+  const result = deleteNode(state.nodes, state.connections, id);
+  state.nodes = result.nodes;
+  state.connections = result.connections;
+  saveState();
+  closeDrawer();
+  renderBoard();
+});
+
+cancelDrawerBtn.addEventListener('click', closeDrawer);
+closeDrawerBtn.addEventListener('click', closeDrawer);

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

@@ -0,0 +1,59 @@
+import type { TabletopToolEntry, ToolLocaleContent } from '../../types';
+
+export type InvestigationBoardUI = {
+  title: string;
+  addCard: string;
+  searchPlaceholder: string;
+  filterAll: string;
+  filterCharacter: string;
+  filterClue: string;
+  filterLocation: string;
+  filterItem: string;
+  cardName: string;
+  cardCategory: string;
+  cardDescription: string;
+  cardNotes: string;
+  cardTags: string;
+  cardColor: string;
+  save: string;
+  delete: string;
+  cancel: string;
+  clearBoard: string;
+  connectionsTitle: string;
+  addConnection: string;
+  connectionLabel: string;
+  connectionColor: string;
+  sourceCard: string;
+  targetCard: string;
+  close: string;
+  character: string;
+  clue: string;
+  location: string;
+  item: string;
+  custom: string;
+  immersive: string;
+};
+
+export type InvestigationBoardLocaleContent = ToolLocaleContent<InvestigationBoardUI>;
+
+export const investigationBoard: TabletopToolEntry<InvestigationBoardUI> = {
+  id: 'investigation-board',
+  icons: { bg: 'mdi:graph-outline', fg: 'mdi:graph' },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

package/src/tool/investigation-board/i18n/de.ts

@@ -0,0 +1,126 @@
+import { bibliography } from '../bibliography';
+import type { InvestigationBoardLocaleContent } from '../entry';
+
+export const content: InvestigationBoardLocaleContent = {
+  slug: "verschwoerungsbrett-ersteller",
+  title: "Verschwörungsbrett Ersteller",
+  description: "Entwerfen Sie interaktive Verschwörungsbretter und Ermittlungskarten. Verbinden Sie Charaktere, Hinweise, Orte und verfolgen Sie Beziehungen mit benutzerdefinierten Links.",
+  ui: {
+  "title": "Verschwörungsbrett Ersteller",
+  "addCard": "Karte hinzufügen",
+  "searchPlaceholder": "Karten nach Name oder Hinweisen durchsuchen",
+  "filterAll": "Alle Kategorien",
+  "filterCharacter": "Charaktere",
+  "filterClue": "Hinweise",
+  "filterLocation": "Orte",
+  "filterItem": "Gegenstände",
+  "cardName": "Kartenname",
+  "cardCategory": "Kategorie",
+  "cardDescription": "Beschreibung",
+  "cardNotes": "Private Notizen",
+  "cardTags": "Tags durch Kommas getrennt",
+  "cardColor": "Kartenhervorhebungsfarbe",
+  "save": "Änderungen speichern",
+  "delete": "Löschen",
+  "cancel": "Abbrechen",
+  "clearBoard": "Brett leeren",
+  "connectionsTitle": "Beziehungsnetzwerk",
+  "addConnection": "Verbindung hinzufügen",
+  "connectionLabel": "Beziehungsbezeichnung",
+  "connectionColor": "Linienfarbe",
+  "sourceCard": "Ausgangskarte",
+  "targetCard": "Zielkarte",
+  "close": "Schließen",
+  "character": "Charakter",
+  "clue": "Hinweis",
+  "location": "Ort",
+  "item": "Gegenstand",
+  "custom": "Benutzerdefiniert",
+  "immersive": "Vollbild"
+},
+  seo: [
+    { type: 'title', text: "Verschwörungsbrett Ersteller für Tabletop und Detektiv RPG Spiele", level: 2 },
+    { type: 'paragraph', html: "Erstellen Sie immersive Ermittlungskarten und Verschwörungsbretter für Ihre Tabletop-Rollenspiele. Ziehen Sie Hinweise, Orte und Charaktere per Drag-and-Drop und verbinden Sie diese mit benutzerdefinierten Fäden, um komplexe Geheimnisse zu visualisieren." },
+    {
+      type: 'stats',
+      items: [
+        { value: "Unbegrenzt", label: "Knotenbrett" },
+        { value: "4", label: "Kategorien" },
+        { value: "Drag-and-Drop", label: "Schnittstelle" }
+      ],
+      columns: 3
+    },
+    { type: 'title', text: "Wie man eine Ermittlungskarte aufbaut", level: 2 },
+    { type: 'paragraph', html: "Fügen Sie benutzerdefinierte Karten hinzu, die Hinweise, Charaktere, Gegenstände und Orte darstellen. Ziehen Sie sie auf dem Raster in Position. Wählen Sie zwei Karten aus, um sie mit einem farbigen Beziehungsfaden zu verbinden. Doppelklicken Sie auf Knoten oder Fäden, um detaillierte Informationen anzuzeigen." }
+  ],
+  faq: [
+    {
+      question: "Wie füge ich Verbindungslinien hinzu?",
+      answer: "Klicken Sie im Bedienfeld auf Verbindung hinzufügen, wählen Sie die Ausgangs- und Zielkarten aus, weisen Sie eine Textbeschriftung und eine Farbe zu und speichern Sie sie."
+    },
+    {
+      question: "Kann ich Karten auf dem Handy ziehen?",
+      answer: "Ja, das Board unterstützt Touch-Events, um Karten auf Smartphones und Tablets reibungslos zu ziehen und zu bewegen."
+    }
+  ],
+  bibliography,
+  howTo: [
+    {
+      name: "Ermittlungskarten hinzufügen",
+      text: "Erstellen Sie Karten, die NPCs, Hinweise, Tatorte oder Gegenstände darstellen."
+    },
+    {
+      name: "Beziehungen verknüpfen",
+      text: "Erstellen Sie Verbindungslinien zwischen Karten, um zu zeigen, wie Hinweise zusammenhängen."
+    }
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      'name': "Verschwörungsbrett Ersteller",
+      'operatingSystem': 'All',
+      'applicationCategory': 'UtilitiesApplication',
+      'browserRequirements': 'Requires HTML5 SVG support. Requires JavaScript.'
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      'mainEntity': [
+        {
+          '@type': 'Question',
+          'name': "Wie füge ich Verbindungslinien hinzu?",
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': "Klicken Sie im Bedienfeld auf Verbindung hinzufügen, wählen Sie die Ausgangs- und Zielkarten aus, weisen Sie eine Textbeschriftung und eine Farbe zu und speichern Sie sie."
+          }
+        },
+        {
+          '@type': 'Question',
+          'name': "Kann ich Karten auf dem Handy ziehen?",
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': "Ja, das Board unterstützt Touch-Events, um Karten auf Smartphones und Tablets reibungslos zu ziehen und zu bewegen."
+          }
+        }
+      ]
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      'name': "Wie man den Verschwörungsbrett Ersteller benutzt",
+      'step': [
+        {
+          '@type': 'HowToStep',
+          'name': "Ermittlungskarten hinzufügen",
+          'text': "Erstellen Sie Karten, die NPCs, Hinweise, Tatorte oder Gegenstände darstellen."
+        },
+        {
+          '@type': 'HowToStep',
+          'name': "Beziehungen verknüpfen",
+          'text': "Erstellen Sie Verbindungslinien zwischen Karten, um zu zeigen, wie Hinweise zusammenhängen."
+        }
+      ]
+    }
+  ]
+};

package/src/tool/investigation-board/i18n/en.ts

@@ -0,0 +1,127 @@
+import { bibliography } from '../bibliography';
+import type { InvestigationBoardLocaleContent } from '../entry';
+
+export const content: InvestigationBoardLocaleContent = {
+  slug: 'investigation-board',
+  title: 'Conspiracy Board Maker',
+  description: 'Design interactive conspiracy boards and investigation maps. Connect characters, clues, locations, and trace relationships with customized links.',
+  ui: {
+    title: 'Conspiracy Board Maker',
+    addCard: 'Add Card',
+    searchPlaceholder: 'Search cards by name or clues',
+    filterAll: 'All Categories',
+    filterCharacter: 'Characters',
+    filterClue: 'Clues',
+    filterLocation: 'Locations',
+    filterItem: 'Items',
+    cardName: 'Card Name',
+    cardCategory: 'Category',
+    cardDescription: 'Description',
+    cardNotes: 'Private Notes',
+    cardTags: 'Tags separated by commas',
+    cardColor: 'Card Highlight Color',
+    save: 'Save Changes',
+    delete: 'Delete',
+    cancel: 'Cancel',
+    clearBoard: 'Clear Board',
+    connectionsTitle: 'Relationships Map',
+    addConnection: 'Add Connection',
+    connectionLabel: 'Relationship Label',
+    connectionColor: 'Line Color',
+    sourceCard: 'From Card',
+    targetCard: 'To Card',
+    close: 'Close',
+    character: 'Character',
+    clue: 'Clue',
+    location: 'Location',
+    item: 'Item',
+    custom: 'Custom',
+    immersive: 'Fullscreen',
+  },
+  seo: [
+    { type: 'title', text: 'Conspiracy Board Maker for Tabletop and Detective RPG Games', level: 2 },
+    { type: 'paragraph', html: 'Create immersive investigation maps and conspiracy boards for your tabletop roleplaying games. Drag and drop clues, locations, and characters, then connect them with customized threads to visualize complex mysteries.' },
+    {
+      type: 'stats',
+      items: [
+        { value: 'Unlimited', label: 'Nodes Board' },
+        { value: '4', label: 'Categories' },
+        { value: 'Drag and Drop', label: 'Interface' },
+      ],
+      columns: 3,
+    },
+    { type: 'title', text: 'How to Build an Investigation Map', level: 2 },
+    { type: 'paragraph', html: 'Add custom cards representing clues, characters, items, and locations. Drag them into positions on the grid. Select two cards to link them with a colored relationship thread. Double click nodes or threads to view detailed information.' },
+  ],
+  faq: [
+    {
+      question: 'How do I add connection lines?',
+      answer: 'Click Add Connection in the control panel, choose the source and target cards, assign a text label and color, and save it.',
+    },
+    {
+      question: 'Can I drag cards on mobile?',
+      answer: 'Yes, the board supports touch events to drag and move cards around smoothly on smartphones and tablets.',
+    },
+  ],
+  bibliography,
+  howTo: [
+    {
+      name: 'Add Investigation Cards',
+      text: 'Create cards representing NPCs, clues, crime scenes, or items.',
+    },
+    {
+      name: 'Link Relationships',
+      text: 'Create connection lines between cards to show how clues relate.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      'name': 'Conspiracy Board Maker',
+      'operatingSystem': 'All',
+      'applicationCategory': 'UtilitiesApplication',
+      'browserRequirements': 'Requires HTML5 SVG support. Requires JavaScript.',
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      'mainEntity': [
+        {
+          '@type': 'Question',
+          'name': 'How do I add connection lines?',
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': 'Click Add Connection in the control panel, choose the source and target cards, assign a text label and color, and save it.',
+          },
+        },
+        {
+          '@type': 'Question',
+          'name': 'Can I drag cards on mobile?',
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': 'Yes, the board supports touch events to drag and move cards around smoothly on smartphones and tablets.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      'name': 'How to Use the Conspiracy Board Maker',
+      'step': [
+        {
+          '@type': 'HowToStep',
+          'name': 'Add Investigation Cards',
+          'text': 'Create cards representing NPCs, clues, crime scenes, or items.',
+        },
+        {
+          '@type': 'HowToStep',
+          'name': 'Link Relationships',
+          'text': 'Create connection lines between cards to show how clues relate.',
+        },
+      ],
+    },
+  ],
+
+};