@jjlmoya/utils-tabletop 1.5.0 → 1.7.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,209 @@
+import { bibliography } from '../bibliography';
+import type { InvestigationBoardLocaleContent } from '../entry';
+
+export const content: InvestigationBoardLocaleContent = {
+  slug: "verschwoerungsbrett-ersteller",
+  title: "Verschwörungsbrett Ersteller: Online Detektiv RPG Ermittlungskarten",
+  description: "Erstellen Sie interaktive Verschwörungsbretter und RPG-Ermittlungskarten. Verbinden Sie Verdächtige, Hinweise und Tatorte mit farbigen Fäden.",
+  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: "Online Verschwörungsbrett Ersteller: Organisieren Sie Detektiv-RPG-Hinweise", level: 2 },
+    { type: 'paragraph', html: "Das Entwirren eines komplexen Geflechts aus Lügen, das Verfolgen von Alibis von Verdächtigen und das Verknüpfen von Beweisen am Tatort kann jede Detektiv-RPG-Gruppe überfordern. Egal, ob Sie eine Call of Cthulhu-Kampagne, ein Cyberpunk-Krimi-Spiel, ein Detektiv-Abenteuer in D&D leiten oder einen Thriller schreiben - unser Online-Verschwörungsbrett-Ersteller ist das ultimative Werkzeug. Ziehen, kategorisieren und verknüpfen Sie Hinweise, NPCs und physische Beweise auf einer unbegrenzten digitalen Korktafel. Nutzen Sie farbcodierte Beziehungsfäden, um sofort zu sehen, wie Verdächtige mit Tatorten, Alibis und geheimen Motiven zusammenhängen. So gehören unübersichtliche Papierzettel der Vergangenheit an und Ihre Spieler bleiben vollständig in die Ermittlung eingetaucht." },
+    {
+      type: 'stats',
+      items: [
+        { value: "Unbegrenzt", label: "Knotenbrett" },
+        { value: "4", label: "Kategorien" },
+        { value: "Drag-and-Drop", label: "Schnittstelle" }
+      ],
+      columns: 3
+    },
+    { type: 'title', text: "Tipps zur Strukturierung Ihrer Detektiv-RPG-Ermittlungskarte", level: 2 },
+    { type: 'tip', title: "Die Drei Hinweise Regel", html: "Fügen Sie für jede Schlussfolgerung oder Deduktion, die die Spieler ziehen sollen, mindestens drei verschiedene Hinweise auf dem Ermittlungsbrett hinzu. Verbinden Sie diese mit benutzerdefinierten farbigen Fäden, um alternative Argumentationslinien aufzuzeigen. Verwenden Sie Charakterkarten für Verdächtige und Zeugen, Ortskarten für Tatorte und Gegenstandskarten für physische Beweise oder Dokumente. Halten Sie die Notizen stets mit den Entdeckungen der Spieler auf dem neuesten Stand." },
+    { type: 'title', text: "Digitale Verschwörungsbretter im Vergleich zu physischen Korktafeln mit rotem Faden", level: 2 },
+    {
+      type: 'proscons',
+      title: "Digitale Verschwörungsbretter im Vergleich zu physischen Korktafeln mit rotem Faden",
+      items: [
+        { pro: "Unbegrenzte Brettgröße, um so viele Hinweise, Verdächtige und Charakterbeziehungen wie nötig ohne Platzmangel hinzuzufügen.", con: "Erfordert einen Bildschirm, ein Tablet oder ein digitales Gerät während der Spielrunde." },
+        { pro: "Sofortige Suche und Kategoriefilter, um bestimmte Zeugen oder Hinweise während der Runden sofort zu finden.", con: "Es fehlt das haptische Gefühl von echtem roten Faden und Pins an einer echten Wand." },
+        { pro: "Speichern, Laden und Teilen Sie Karten digital, ohne physischen Platz zwischen den Spieleabenden einzunehmen.", con: "Erfordert Internetzugang oder lokalen Speicher des Browsers, um den Zustand des Bretts zu sichern." }
+      ]
+    },
+    { type: 'title', text: "Auswahl der Kartenkategorien für Ihre Ermittlungskarte", level: 3 },
+    {
+      type: 'comparative',
+      items: [
+        {
+          title: "Charakterknoten",
+          description: "Stellt NPCs, Verdächtige, Zeugen oder Organisationen dar. Heben Sie Beziehungen mit farbigen Linien hervor.",
+          icon: 'mdi:account-group',
+          highlight: true,
+          points: [
+            "Verdächtigen-Alibis und Motive verfolgen",
+            "Familien- und Fraktionsverbindungen verknüpfen",
+            "Zeugenaussagen im Detail festhalten"
+          ]
+        },
+        {
+          title: "Hinweisknoten",
+          description: "Stellt physische Beweise, Berichte, Alibis oder Gerüchte dar, die von den Spielern entdeckt wurden.",
+          icon: 'mdi:magnify',
+          highlight: false,
+          points: [
+            "Obduktionsberichte und forensische Analysen",
+            "Physische Beweismittel vom Tatort",
+            "Aufgeschnappte Gerüchte und Geheimnisse"
+          ]
+        },
+        {
+          title: "Ortsknoten",
+          description: "Tatorte, Häuser von Verdächtigen, geheime Verstecke oder Städte.",
+          icon: 'mdi:map-marker',
+          highlight: false,
+          points: [
+            "Tatortfotos und Umgebungskarten",
+            "Wohnorte wichtiger NPCs",
+            "Geheime Unterschlüpfe und Portale"
+          ]
+        }
+      ],
+      columns: 3
+    },
+    { type: 'title', text: "Glossar zur Verschwörungskartierung", level: 3 },
+    {
+      type: 'glossary',
+      items: [
+        { term: "Ermittlungsknoten", definition: "Jede Karte auf dem Brett, die eine Person, einen Ort, einen Hinweis oder einen Gegenstand darstellt." },
+        { term: "Beziehungsfaden", definition: "Eine farbige Linie, die zwei Karten verbindet und zeigt, wie sie zusammenhängen (z. B. Verdächtig, Alibi, Eigentümer)." },
+        { term: "Vollbildmodus", definition: "Ein Layout, das die Steuerungselemente ausblendet, um den Arbeitsbereich auf Mobilgeräten oder Tablets zu maximieren." },
+        { term: "Hervorhebungspfad", definition: "Ein visueller Pfad, der nur die verbundenen Knoten einer ausgewählten Karte anzeigt und den Rest dimmt." }
+      ]
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: "Leistungstipp für Mobilgeräte",
+      icon: 'mdi:information-outline',
+      badge: 'GRID TIP',
+      html: "Wenn das Ziehen von Knoten auf älteren Tablets langsam ist, aktivieren Sie den Vollbildmodus. Stellen Sie sicher, dass das Einrasten am Raster aktiviert ist (Karten rasten alle 15px ein), um das Brett mit minimalem Aufwand ordentlich zu halten."
+    }
+  ],
+  faq: [
+    { question: "Wie füge ich Verbindungslinien hinzu?", answer: "Klicken Sie auf Verbindung hinzufügen oder wählen Sie eine Karte aus, klicken Sie auf das Link-Symbol und wählen Sie die Zielkarte." },
+    { 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." },
+    { question: "Kann ich benutzerdefinierte Kartenfarben verwenden?", answer: "Ja. Doppelklicken Sie auf eine Karte, wählen Sie Custom in der Kategorie und wählen Sie eine Highlight-Farbe." },
+    { question: "Speichert das Board meine Arbeit?", answer: "Ja. Ihr Fortschritt wird automatisch im lokalen Speicher Ihres Browsers unter dem aktuellen Brettnamen gespeichert." },
+    { question: "Wie kann ich zoomen und mich auf dem Brett bewegen?", answer: "Verwenden Sie Pinch-to-Zoom-Gesten oder das Mausrad zum Zoomen. Ziehen Sie den Hintergrund, um das Brett 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: Online Detektiv RPG Ermittlungskarten",
+      '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 auf Verbindung hinzufügen oder wählen Sie eine Karte aus, klicken Sie auf das Link-Symbol und wählen Sie die Zielkarte."
+          }
+        },
+        {
+          '@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."
+          }
+        },
+        {
+          '@type': 'Question',
+          'name': "Kann ich benutzerdefinierte Kartenfarben verwenden?",
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': "Ja. Doppelklicken Sie auf eine Karte, wählen Sie Custom in der Kategorie und wählen Sie eine Highlight-Farbe."
+          }
+        },
+        {
+          '@type': 'Question',
+          'name': "Speichert das Board meine Arbeit?",
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': "Ja. Ihr Fortschritt wird automatisch im lokalen Speicher Ihres Browsers unter dem aktuellen Brettnamen gespeichert."
+          }
+        },
+        {
+          '@type': 'Question',
+          'name': "Wie kann ich zoomen und mich auf dem Brett bewegen?",
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': "Verwenden Sie Pinch-to-Zoom-Gesten oder das Mausrad zum Zoomen. Ziehen Sie den Hintergrund, um das Brett 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."
+        }
+      ]
+    }
+  ]
+};