@jjlmoya/utils-tabletop 1.3.0 → 1.5.0

package/src/tool/decision-wheel/drawing.ts

@@ -0,0 +1,144 @@
+import type { WheelSegment } from './types';
+
+interface CanvasCtx {
+  ctx: CanvasRenderingContext2D;
+  cx: number;
+  cy: number;
+  radius: number;
+}
+
+interface LabelCtx {
+  label: string;
+  midAngle: number;
+  labelR: number;
+  sliceAngle: number;
+}
+
+function drawSegmentLabel(c: CanvasCtx, lc: LabelCtx): void {
+  const { ctx, cx, cy } = c;
+  const { label, midAngle, labelR, sliceAngle } = lc;
+  ctx.save();
+  ctx.translate(cx + Math.cos(midAngle) * labelR, cy + Math.sin(midAngle) * labelR);
+  ctx.rotate(midAngle + Math.PI / 2);
+  ctx.fillStyle = '#ffffff';
+  const fontSize = Math.max(9, Math.min(13, Math.round(sliceAngle * 17)));
+  ctx.font = `bold ${fontSize}px system-ui, -apple-system, sans-serif`;
+  ctx.shadowColor = 'rgba(0, 0, 0, 0.6)';
+  ctx.shadowBlur = 4;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  let labelText = label;
+  const maxAllowedWidth = labelR * sliceAngle * 0.85;
+  if (ctx.measureText(labelText).width > maxAllowedWidth) {
+    let len = labelText.length;
+    while (len > 1 && ctx.measureText(labelText.substring(0, len) + '..').width > maxAllowedWidth) {
+      len--;
+    }
+    labelText = labelText.substring(0, len) + '..';
+  }
+  ctx.fillText(labelText, 0, 0);
+  ctx.restore();
+}
+
+function drawSegments(c: CanvasCtx, segments: WheelSegment[], currentAngle: number): void {
+  const { ctx, cx, cy, radius } = c;
+  const totalWeight = segments.reduce((sum, s) => sum + (s.weight || 1), 0);
+  let accumulatedAngle = 0;
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i];
+    const weight = seg.weight || 1;
+    const sliceAngle = (weight / totalWeight) * 2 * Math.PI;
+    const startAngle = accumulatedAngle + currentAngle - Math.PI / 2;
+    const endAngle = startAngle + sliceAngle;
+
+    ctx.beginPath();
+    ctx.moveTo(cx, cy);
+    ctx.arc(cx, cy, radius, startAngle, endAngle);
+    ctx.closePath();
+    ctx.fillStyle = seg.color;
+    ctx.fill();
+    ctx.strokeStyle = 'rgba(15, 23, 42, 0.4)';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+
+    const midAngle = startAngle + sliceAngle / 2;
+    const labelR = radius * 0.65;
+    drawSegmentLabel(c, { label: seg.label, midAngle, labelR, sliceAngle });
+
+    accumulatedAngle += sliceAngle;
+  }
+}
+
+function drawShadingOverlay(c: CanvasCtx): void {
+  const { ctx, cx, cy, radius } = c;
+  const grad = ctx.createRadialGradient(cx, cy, radius * 0.35, cx, cy, radius);
+  grad.addColorStop(0, 'rgba(255, 255, 255, 0.1)');
+  grad.addColorStop(0.6, 'rgba(0, 0, 0, 0)');
+  grad.addColorStop(1, 'rgba(0, 0, 0, 0.5)');
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+  ctx.fillStyle = grad;
+  ctx.fill();
+}
+
+function drawGoldRim(c: CanvasCtx): void {
+  const { ctx, cx, cy, radius } = c;
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius + 2, 0, Math.PI * 2);
+  ctx.lineWidth = 6;
+  const rimGrad = ctx.createLinearGradient(cx - radius, cy - radius, cx + radius, cy + radius);
+  rimGrad.addColorStop(0, '#ffe066');
+  rimGrad.addColorStop(0.3, '#d4af37');
+  rimGrad.addColorStop(0.5, '#aa7c11');
+  rimGrad.addColorStop(0.7, '#d4af37');
+  rimGrad.addColorStop(1, '#ffe066');
+  ctx.strokeStyle = rimGrad;
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius - 1, 0, Math.PI * 2);
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = 'rgba(15, 23, 42, 0.6)';
+  ctx.stroke();
+}
+
+function drawCenter(c: CanvasCtx): void {
+  const { ctx, cx, cy } = c;
+  ctx.beginPath();
+  ctx.arc(cx, cy, 22, 0, Math.PI * 2);
+  const hubGrad = ctx.createLinearGradient(cx - 20, cy - 20, cx + 20, cy + 20);
+  hubGrad.addColorStop(0, '#aa7c11');
+  hubGrad.addColorStop(0.5, '#ffe066');
+  hubGrad.addColorStop(1, '#aa7c11');
+  ctx.fillStyle = hubGrad;
+  ctx.fill();
+  ctx.strokeStyle = 'rgba(15, 23, 42, 0.6)';
+  ctx.lineWidth = 2;
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.arc(cx, cy, 10, 0, Math.PI * 2);
+  const gemGrad = ctx.createRadialGradient(cx - 3, cy - 3, 1, cx, cy, 10);
+  gemGrad.addColorStop(0, '#fca5a5');
+  gemGrad.addColorStop(0.4, '#ef4444');
+  gemGrad.addColorStop(1, '#991b1b');
+  ctx.fillStyle = gemGrad;
+  ctx.fill();
+  ctx.strokeStyle = '#7f1d1d';
+  ctx.lineWidth = 1;
+  ctx.stroke();
+}
+
+export function drawWheel(canvas: HTMLCanvasElement, segments: WheelSegment[], currentAngle: number): void {
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  const cx = canvas.width / 2;
+  const cy = canvas.height / 2;
+  const radius = Math.min(cx, cy) - 10;
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  const c: CanvasCtx = { ctx, cx, cy, radius };
+  drawSegments(c, segments, currentAngle);
+  drawShadingOverlay(c);
+  drawGoldRim(c);
+  drawCenter(c);
+}

package/src/tool/decision-wheel/entry.ts

@@ -0,0 +1,48 @@
+import type { TabletopToolEntry, ToolLocaleContent } from '../../types';
+
+export type DecisionWheelUI = {
+  title: string;
+  spinButton: string;
+  clearHistory: string;
+  resultHeading: string;
+  historyTitle: string;
+  noHistory: string;
+  addSegmentLabel: string;
+  removeSegmentLabel: string;
+  segmentLabelPlaceholder: string;
+  presetLabel: string;
+  presetYesNo: string;
+  presetNumbers: string;
+  presetActions: string;
+  presetCustom: string;
+  presetD20: string;
+  presetAlignment: string;
+  presetLoot: string;
+  weightLabel: string;
+  spinAgain: string;
+  noSegments: string;
+};
+
+export type DecisionWheelLocaleContent = ToolLocaleContent<DecisionWheelUI>;
+
+export const decisionWheel: TabletopToolEntry<DecisionWheelUI> = {
+  id: 'decision-wheel',
+  icons: { bg: 'mdi:slot-machine-outline', fg: 'mdi:slot-machine' },
+  i18n: {
+    en: () => import('./i18n/en').then((m) => m.content),
+    de: () => import('./i18n/de').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/decision-wheel/i18n/de.ts

@@ -0,0 +1,97 @@
+import { bibliography } from '../bibliography';
+import type { DecisionWheelLocaleContent } from '../entry';
+
+export const content: DecisionWheelLocaleContent = {
+  slug: 'entscheidungsrad',
+  title: 'Entscheidungsrad: Zufallsgenerator und Auswahldrehrad',
+  description: 'Drehen Sie ein anpassbares Entscheidungsrad für Brettspiele. Fügen Sie Segmente mit Gewichtungen hinzu, um Ergebnisse zufällig zu bestimmen.',
+  ui: {
+    title: 'Entscheidungsrad',
+    spinButton: 'Rad Drehen',
+    clearHistory: 'Verlauf Löschen',
+    resultHeading: 'Ergebnis',
+    historyTitle: 'Drehverlauf',
+    noHistory: 'Noch keine Drehs. Klicken Sie auf Rad Drehen, um zu starten.',
+    addSegmentLabel: 'Segment Hinzufügen',
+    removeSegmentLabel: 'Entfernen',
+    segmentLabelPlaceholder: 'Name',
+    presetLabel: 'Vorlagen',
+    presetYesNo: 'Ja oder Nein',
+    presetNumbers: 'Zahlen 1-6',
+    presetActions: 'Aktionen',
+    presetCustom: 'Benutzerdefiniert',
+    presetD20: 'D20',
+    presetAlignment: 'Gesinnung',
+    presetLoot: 'Beuteseltenheit',
+    weightLabel: 'Gewicht',
+    spinAgain: 'Nochmals Drehen',
+    noSegments: 'Fügen Sie Segmente hinzu, bevor Sie drehen.',
+  },
+  seo: [
+    { type: 'title', text: 'Entscheidungsrad für Brettspiele und Gruppenaktivitäten', level: 2 },
+    { type: 'paragraph', html: 'Das Entscheidungsrad ist ein vielseitiges Werkzeug für Brettspiele und Gruppenaktivitäten. Passen Sie die Segmente mit eigenen Namen und Farben an.' },
+    {
+      type: 'stats',
+      items: [
+        { value: '16', label: 'Segment Hinzufügen' },
+        { value: '7', label: 'Vorlagen' },
+        { value: '10', label: 'Drehverlauf' },
+      ],
+      columns: 3,
+    },
+    { type: 'title', text: 'So Verwenden Sie das Entscheidungsrad', level: 2 },
+    { type: 'paragraph', html: 'Wählen Sie eine Vorlage oder erstellen Sie eigene Segmente mit Gewichtungen, um die Gewinnwahrscheinlichkeiten anzupassen.' },
+  ],
+  faq: [
+    {
+      question: 'Wie funktioniert das Entscheidungsrad?',
+      answer: 'Wählen Sie eine Vorlage oder erstellen Sie eigene Optionen, legen Sie Gewichtungen fest und klicken Sie auf Drehen.',
+    },
+    {
+      question: 'Kann ich Farben und Namen anpassen?',
+      answer: 'Ja, Sie können beliebig Segmente hinzufügen, Namen ändern, Farben wählen und die Gewichtung von 1 bis 5 anpassen.',
+    },
+  ],
+  bibliography,
+  howTo: [
+    {
+      name: 'Segmente Erstellen',
+      text: 'Wählen Sie eine Vorlage oder fügen Sie benutzerdefinierte Segmente mit Namen und Farben hinzu.',
+    },
+    {
+      name: 'Das Rad Drehen',
+      text: 'Klicken Sie auf Drehen und warten Sie, bis das Rad mit realistischer Verzögerung stoppt.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      'name': 'Entscheidungsrad',
+      'operatingSystem': 'All',
+      'applicationCategory': 'UtilitiesApplication',
+      'browserRequirements': 'Requires HTML5 Canvas. Requires JavaScript.',
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      'mainEntity': [
+        {
+          '@type': 'Question',
+          'name': 'Wie funktioniert das Entscheidungsrad?',
+          'acceptedAnswer': { '@type': 'Answer', 'text': 'Wählen Sie eine Vorlage oder erstellen Sie eigene Optionen, legen Sie Gewichtungen fest und klicken Sie auf Drehen.' },
+        },
+        { '@type': 'Question', 'name': 'Kann ich Farben und Namen anpassen?', 'acceptedAnswer': { '@type': 'Answer', 'text': 'Ja, Sie können beliebig Segmente hinzufügen, Namen ändern, Farben wählen und die Gewichtung von 1 bis 5 anpassen.' } },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      'name': 'How to Use the Decision Wheel Spinner',
+      'step': [
+        { '@type': 'HowToStep', 'name': 'Segmente Erstellen', 'text': 'Wählen Sie eine Vorlage oder fügen Sie benutzerdefinierte Segmente mit Namen und Farben hinzu.' },
+        { '@type': 'HowToStep', 'name': 'Das Rad Drehen', 'text': 'Klicken Sie auf Drehen und warten Sie, bis das Rad mit realistischer Verzögerung stoppt.' },
+      ],
+    },
+  ],
+};

package/src/tool/decision-wheel/i18n/en.ts

@@ -0,0 +1,251 @@
+import { bibliography } from '../bibliography';
+import type { DecisionWheelLocaleContent } from '../entry';
+
+export const content: DecisionWheelLocaleContent = {
+  slug: 'decision-wheel',
+  title: 'Decision Wheel Spinner',
+  description: 'Spin a customizable decision wheel for tabletop games. Add, remove, and edit segments to randomly determine outcomes.',
+  ui: {
+    title: 'Decision Wheel Spinner',
+    spinButton: 'Spin the Wheel',
+    clearHistory: 'Clear History',
+    resultHeading: 'Result',
+    historyTitle: 'Spin History',
+    noHistory: 'No spins yet. Click Spin the Wheel to start.',
+    addSegmentLabel: 'Add Segment',
+    removeSegmentLabel: 'Remove',
+    segmentLabelPlaceholder: 'Label',
+    presetLabel: 'Presets',
+    presetYesNo: 'Yes / No',
+    presetNumbers: 'Numbers 1-6',
+    presetActions: 'Actions',
+    presetCustom: 'Custom',
+    presetD20: 'D20',
+    presetAlignment: 'Alignment',
+    presetLoot: 'Loot Rarity',
+    weightLabel: 'Weight',
+    spinAgain: 'Spin Again',
+    noSegments: 'Add segments to the wheel before spinning.',
+  },
+  seo: [
+    { type: 'title', text: 'Decision Wheel Spinner for Tabletop Games and Group Activities', level: 2 },
+    { type: 'paragraph', html: 'The Decision Wheel Spinner is a versatile tool for tabletop games and group activities. Customize the wheel segments with your own labels and colors, then spin to randomly select an outcome. The wheel features realistic deceleration animation and a visual result display with emphasis effects.' },
+    {
+      type: 'stats',
+      items: [
+        { value: '16', label: 'Max Segments' },
+        { value: '4', label: 'Preset Modes' },
+        { value: '10', label: 'History Entries' },
+      ],
+      columns: 3,
+    },
+    { type: 'title', text: 'How to Use the Decision Wheel', level: 2 },
+    { type: 'paragraph', html: 'The Decision Wheel makes it easy to randomly pick from a set of options. Choose a preset or create your own segments, then spin the wheel. The canvas-based wheel animates with realistic deceleration, and when it stops the winning segment is highlighted with a glow effect. A spin history keeps track of recent results.' },
+    { type: 'title', text: 'Customizing Wheel Segments', level: 3 },
+    { type: 'paragraph', html: 'You can add, remove, and edit segment labels to match your game or activity needs. Each segment can have its own color, making it easy to distinguish between different options at a glance. Use the preset buttons to quickly load common configurations like Yes/No, Numbers 1-6, or Action sets.' },
+    {
+      type: 'table',
+      headers: ['Preset', 'Segments', 'Use Case'],
+      rows: [
+        ['Yes / No', '2', 'Binary decisions, votes, pass/fail'],
+        ['Numbers 1-6', '6', 'Dice alternatives, random selection'],
+        ['Actions', '5', 'Combat actions, exploration choices'],
+        ['Custom', '3+', 'Fully customizable for any need'],
+      ],
+    },
+    {
+      type: 'proscons',
+      title: 'Fixed Wheel vs Custom Segments',
+      items: [
+        {
+          pro: 'Presets load instantly with predefined colors and labels for common scenarios.',
+          con: 'Fixed presets may not cover niche or game-specific decision types.',
+        },
+        {
+          pro: 'Custom segments let you define any set of outcomes with personalized labels and colors.',
+          con: 'Custom setup requires a moment of configuration before the first spin.',
+        },
+      ],
+    },
+    {
+      type: 'comparative',
+      items: [
+        {
+          title: 'Quick Binary Decisions',
+          description: 'Use the Yes/No preset for quick binary decisions during gameplay, such as flanking success, random encounters, or vote outcomes.',
+          icon: 'mdi:slot-machine-outline',
+          highlight: false,
+          points: [
+            'Instant preset loading',
+            'Clear visual result',
+            'Suitable for any game',
+          ],
+        },
+        {
+          title: 'Game Action Selection',
+          description: 'The Actions preset provides a set of common tabletop game actions that can be randomized for NPC behavior or event outcomes.',
+          icon: 'mdi:sword',
+          highlight: true,
+          points: [
+            'Predefined action labels',
+            'Color-coded segments',
+            'Expandable with custom options',
+          ],
+        },
+        {
+          title: 'Custom Voting and Polls',
+          description: 'Create custom sets of options for group voting, random prize draws, or choosing between multiple paths in a story-driven game.',
+          icon: 'mdi:format-list-bulleted',
+          highlight: false,
+          points: [
+            'Fully customizable labels',
+            'Adjustable segment count',
+            'Per-segment color control',
+          ],
+        },
+      ],
+      columns: 3,
+    },
+    {
+      type: 'title',
+      text: 'Visual Feedback and Animation',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'When the wheel spins, it uses a realistic cubic ease-out deceleration animation that mimics a physical spinning wheel. Multiple full rotations ensure true randomness is visually apparent. When the wheel stops, the winning segment is highlighted with a scale and glow emphasis effect, making the result immediately clear to all players.',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Ease-Out Cubic',
+          definition: 'An animation curve where the wheel starts fast and gradually decelerates to a stop, mimicking real-world friction.',
+        },
+        {
+          term: 'Segment',
+          definition: 'A slice of the wheel representing one possible outcome, defined by a label and a color.',
+        },
+        {
+          term: 'Preset',
+          definition: 'A preconfigured set of segments for common scenarios like binary decisions, number ranges, or action sets.',
+        },
+        {
+          term: 'Spin History',
+          definition: 'A log of recent spin results showing the last 10 outcomes for reference during gameplay.',
+        },
+      ],
+    },
+  ],
+  faq: [
+    {
+      question: 'How does the Decision Wheel work?',
+      answer: 'Select or create your segments, then click Spin the Wheel. The wheel animates with deceleration and stops on a random segment, which is highlighted as the result.',
+    },
+    {
+      question: 'Can I add my own segments?',
+      answer: 'Yes, click Add Segment to create new options and edit the labels to match your needs. Each segment can also have its own color.',
+    },
+    {
+      question: 'What presets are available?',
+      answer: 'The tool includes Yes/No, Numbers 1-6, Actions, and Custom presets. Custom preset starts with three editable options.',
+    },
+    {
+      question: 'How many segments can I have?',
+      answer: 'You can add up to 16 segments. A minimum of 2 segments is required for the wheel to function.',
+    },
+    {
+      question: 'Is there a spin history?',
+      answer: 'Yes, the tool keeps a history of the last 10 spins, showing the selected segment for each spin.',
+    },
+    {
+      question: 'What is the emphasis effect?',
+      answer: 'When the wheel stops, the result display pulses with a glow and scale animation to draw attention to the selected outcome.',
+    },
+  ],
+  bibliography,
+  howTo: [
+    {
+      name: 'Choose or Create Segments',
+      text: 'Select a preset or add custom segments with your own labels and colors.',
+    },
+    {
+      name: 'Spin the Wheel',
+      text: 'Click the spin button to start the wheel animation with realistic deceleration.',
+    },
+    {
+      name: 'View Result and History',
+      text: 'The winning segment is displayed with emphasis. Check the history for recent spins.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      'name': 'Decision Wheel Spinner',
+      'operatingSystem': 'All',
+      'applicationCategory': 'UtilitiesApplication',
+      'browserRequirements': 'Requires HTML5 Canvas. Requires JavaScript.',
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      'mainEntity': [
+        {
+          '@type': 'Question',
+          'name': 'How does the Decision Wheel work?',
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': 'Select or create your segments, then click Spin the Wheel. The wheel animates with deceleration and stops on a random segment, which is highlighted as the result.',
+          },
+        },
+        {
+          '@type': 'Question',
+          'name': 'Can I add my own segments?',
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': 'Yes, click Add Segment to create new options and edit the labels to match your needs.',
+          },
+        },
+        {
+          '@type': 'Question',
+          'name': 'What presets are available?',
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': 'The tool includes Yes/No, Numbers 1-6, Actions, and Custom presets.',
+          },
+        },
+        {
+          '@type': 'Question',
+          'name': 'Is there a spin history?',
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': 'Yes, the tool keeps a history of the last 10 spins.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      'name': 'How to Use the Decision Wheel Spinner',
+      'step': [
+        {
+          '@type': 'HowToStep',
+          'name': 'Choose or Create Segments',
+          'text': 'Select a preset or add custom segments with your own labels and colors.',
+        },
+        {
+          '@type': 'HowToStep',
+          'name': 'Spin the Wheel',
+          'text': 'Click the spin button to start the wheel animation with realistic deceleration.',
+        },
+        {
+          '@type': 'HowToStep',
+          'name': 'View Result and History',
+          'text': 'The winning segment is displayed with emphasis. Check the history for recent spins.',
+        },
+      ],
+    },
+  ],
+};

package/src/tool/decision-wheel/i18n/es.ts

@@ -0,0 +1,93 @@
+import { bibliography } from '../bibliography';
+import type { DecisionWheelLocaleContent } from '../entry';
+
+export const content: DecisionWheelLocaleContent = {
+  slug: 'ruleta-de-decisiones',
+  title: 'Ruleta de Decisiones: Selector Aleatorio y Generador de Opciones',
+  description: 'Gira una ruleta de decisiones personalizable para tus juegos de mesa. Añade, elimina y edita secciones con pesos para decidir resultados al azar.',
+  ui: {
+    title: 'Ruleta de Decisiones',
+    spinButton: 'Girar la Ruleta',
+    clearHistory: 'Limpiar Historial',
+    resultHeading: 'Resultado',
+    historyTitle: 'Historial de Giros',
+    noHistory: 'Sin giros registrados. Haz clic en Girar la Ruleta para comenzar.',
+    addSegmentLabel: 'Añadir Sección',
+    removeSegmentLabel: 'Eliminar',
+    segmentLabelPlaceholder: 'Etiqueta',
+    presetLabel: 'Preajustes',
+    presetYesNo: 'Sí o No',
+    presetNumbers: 'Números 1-6',
+    presetActions: 'Acciones',
+    presetCustom: 'Personalizado',
+    presetD20: 'D20',
+    presetAlignment: 'Alineación',
+    presetLoot: 'Rareza de Botín',
+    weightLabel: 'Peso',
+    spinAgain: 'Girar de Nuevo',
+    noSegments: 'Añade secciones a la ruleta antes de girar.',
+  },
+  seo: [
+    { type: 'title', text: 'Ruleta de Decisiones para Juegos de Mesa y Actividades', level: 2 },
+    { type: 'paragraph', html: 'La ruleta de decisiones es una herramienta versátil para juegos de mesa y actividades grupales. Personaliza las secciones con tus propios textos y colores, luego gira para seleccionar un resultado aleatorio.' },
+    {
+      type: 'stats',
+      items: [
+        { value: '16', label: 'Añadir Sección' },
+        { value: '7', label: 'Preajustes' },
+        { value: '10', label: 'Historial de Giros' },
+      ],
+      columns: 3,
+    },
+    { type: 'title', text: 'Cómo Usar la Ruleta de Decisiones', level: 2 },
+    { type: 'paragraph', html: 'La ruleta facilita elegir al azar entre un conjunto de opciones. Elige un preajuste o crea tus propias secciones con diferentes pesos para ajustar las probabilidades.' },
+  ],
+  faq: [
+    {
+      question: '¿Cómo funciona la ruleta de decisiones?',
+      answer: 'Selecciona o crea tus secciones, asigna pesos si quieres variar la probabilidad de cada opción y pulsa Girar para obtener un resultado al azar.',
+    },
+    {
+      question: '¿Puedo personalizar los colores y nombres?',
+      answer: 'Sí, puedes añadir secciones, cambiar las etiquetas de texto, asignar colores personalizados y ajustar su peso del 1 al 5.',
+    },
+  ],
+  bibliography,
+  howTo: [
+    {
+      name: 'Elegir o Crear Opciones',
+      text: 'Selecciona un preajuste rápido o crea tus propias secciones editando los nombres y colores.',
+    },
+    {
+      name: 'Girar la Ruleta',
+      text: 'Haz clic en el botón de girar y observa la animación con físicas de deceleración realista.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      'name': 'Ruleta de Decisiones',
+      'operatingSystem': 'All',
+      'applicationCategory': 'UtilitiesApplication',
+      'browserRequirements': 'Requires HTML5 Canvas. Requires JavaScript.',
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      'mainEntity': [
+        { '@type': 'Question', 'name': '¿Cómo funciona la ruleta de decisiones?', 'acceptedAnswer': { '@type': 'Answer', 'text': 'Selecciona o crea tus secciones, asigna pesos si quieres variar la probabilidad de cada opción y pulsa Girar para obtener un resultado al azar.' } },
+        { '@type': 'Question', 'name': '¿Puedo personalizar los colores y nombres?', 'acceptedAnswer': { '@type': 'Answer', 'text': 'Sí, puedes añadir secciones, cambiar las etiquetas de texto, asignar colores personalizados y ajustar su peso del 1 al 5.' } },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      'name': 'How to Use the Decision Wheel Spinner',
+      'step': [
+        { '@type': 'HowToStep', 'name': 'Elegir o Crear Opciones', 'text': 'Selecciona un preajuste rápido o crea tus propias secciones editando los nombres y colores.' },
+        { '@type': 'HowToStep', 'name': 'Girar la Ruleta', 'text': 'Haz clic en el botón de girar y observa la animación con físicas de deceleración realista.' },
+      ],
+    },
+  ],
+};