@jjlmoya/utils-creative 1.5.0 → 1.7.0

package/src/tool/bead-pattern-generator/i18n/fr.ts

@@ -1,18 +1,82 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { BeadPatternGeneratorLocaleContent } from '../index';
 
+const slug = 'generateur-de-modeles-de-perles';
+const title = 'Générateur de Modèles';
+const description = 'Créez du pixel art et des schémas de perles pour Miyuki ou Hama à partir de vos photos. Algorithme de quantification de couleurs, mode vision tunnel et export ZIP.';
+
+const faq: BeadPatternGeneratorLocaleContent['faq'] = [
+  { question: 'Qu\'est-ce que la quantification de couleurs dans les modèles ?', answer: 'C\'est le processus de réduction des milliers de couleurs d\'une photo à quelques-unes seulement qui correspondent aux couleurs réelles des perles disponibles (ex: Miyuki ou Hama). Nous utilisons des algorithmes intelligents pour maintenir la ressemblance visuelle avec la palette minimale possible.' },
+  { question: 'Puis-je utiliser ce modèle pour le point de croix ?', answer: 'Oui, le générateur crée un diagramme de grille parfaitement compatible avec le point de croix. Il vous suffit de choisir une taille de grille correspondant à votre tissu (Aïda 14, 18, etc.).' },
+  { question: 'Quelle est la différence entre les perles Miyuki et Hama ?', answer: 'Les perles Miyuki Delica sont de très petites perles de verre précises pour la bijouterie. Les perles Hama sont en plastique et se fusionnent au fer à repasser. Notre outil vous permet d\'ajuster le rapport d\'aspect pour que le modèle ne se déforme pas selon le matériau utilisé.' },
+  { question: 'Comment fonctionne l\'algorithme de tramage (dithering) ?', answer: 'Le tramage crée l\'illusion d\'un plus grand nombre de couleurs en mélangeant des pixels de différentes couleurs dans des motifs espacés. Cela aide les dégradés de couleurs à paraître plus fluides, même avec une palette de perles limitée.' },
+];
+
+const howTo: BeadPatternGeneratorLocaleContent['howTo'] = [
+  { name: 'Charger une image claire', text: 'Sélectionnez une photo avec un bon contraste et peu de petits détails pour que le modèle soit plus facile à suivre.' },
+  { name: 'Ajuster la taille de la grille', text: 'Définissez la largeur et la hauteur en perles de votre pièce finale. Plus il y a de perles, plus il y a de détails, mais plus c\'est difficile.' },
+  { name: 'Optimiser la palette de couleurs', text: 'Réduisez le nombre de couleurs jusqu\'à ce qu\'elles correspondent aux perles dont vous disposez dans votre kit de loisirs créatifs.' },
+  { name: 'Exporter le schéma guide', text: 'Générez le modèle final avec les codes de couleur à utiliser comme référence lors de l\'assemblage de vos perles sur la plaque ou le fil.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howTo.map((step) => ({
+    '@type': 'HowToStep',
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'fr',
+};
+
 export const content: BeadPatternGeneratorLocaleContent = {
-  slug: 'generateur-de-modeles-de-perles',
-  title: 'Générateur de Modèles',
-  description: 'Créez du pixel art et des schémas de perles pour Miyuki ou Hama à partir de vos photos. Algorithme de quantification de couleurs, mode vision tunnel et export ZIP.',
+  slug,
+  title,
+  description,
   faqTitle: 'Questions Fréquemment Posées',
   bibliographyTitle: 'Bibliographie de l\'Artisan',
   ui: {
-    title: 'Générateur de Modèles',
+    title: 'Laboratoire de Modèles',
+    subtitle: 'Ingénierie chromatique pour vos mains',
     description: 'De la photo au schéma de perles.',
+    gridSizeLabel: 'Taille (Largeur)',
+    colorCountLabel: 'Couleurs',
+    optionsLabel: 'Options',
+    rulersLabel: 'Règles',
+    symbolsTooltip: 'Motif Surprise',
+    symbolsLabel: 'Symboles',
+    downloadBtn: 'Télécharger',
+    uploadTitle: 'Chargez Votre Vision',
+    uploadSubtitle: 'et laissez la magie numérique opérer',
+    paletteTitle: 'ADN Chromatique',
+    reuploadBtn: 'Changer l\'Image',
+    tunnelVisionTitle: 'Vision de Tunnel',
+    tunnelVisionSubtitle: 'Votre assistant de précision rangée par rangée.',
     uploadLabel: 'Chargez votre photo',
-    gridSizeLabel: 'Taille de grille (perles)',
     pixelateBtn: 'Générer le Modèle',
-    downloadBtn: 'Télécharger le Schéma',
     faqTitle: 'FAQ',
     bibliographyTitle: 'Références'
   },
@@ -40,22 +104,12 @@ export const content: BeadPatternGeneratorLocaleContent = {
     ], columns: 4 },
     { type: 'paragraph', html: 'À l\'ère des écrans éphémères, créer quelque chose de physique est un acte révolutionnaire. Cet outil ne cherche pas à automatiser l\'art, mais à <strong>donner du pouvoir à l\'artisan</strong>. Nous vous offrons la précision informatique pour que vos mains puissent bâtir des héritages durables.' },
   ],
-  faq: [
-    { question: 'Qu\'est-ce que la quantification de couleurs dans les modèles ?', answer: 'C\'est le processus de réduction des milliers de couleurs d\'une photo à quelques-unes seulement qui correspondent aux couleurs réelles des perles disponibles (ex: Miyuki ou Hama). Nous utilisons des algorithmes intelligents pour maintenir la ressemblance visuelle avec la palette minimale possible.' },
-    { question: 'Puis-je utiliser ce modèle pour le point de croix ?', answer: 'Oui, le générateur crée un diagramme de grille parfaitement compatible avec le point de croix. Il vous suffit de choisir une taille de grille correspondant à votre tissu (Aïda 14, 18, etc.).' },
-    { question: 'Quelle est la différence entre les perles Miyuki et Hama ?', answer: 'Les perles Miyuki Delica sont de très petites perles de verre précises pour la bijouterie. Les perles Hama sont en plastique et se fusionnent au fer à repasser. Notre outil vous permet d\'ajuster le rapport d\'aspect pour que le modèle ne se déforme pas selon le matériau utilisé.' },
-    { question: 'Comment fonctionne l\'algorithme de tramage (dithering) ?', answer: 'Le tramage crée l\'illusion d\'un plus grand nombre de couleurs en mélangeant des pixels de différentes couleurs dans des motifs espacés. Cela aide les dégradés de couleurs à paraître plus fluides, même avec une palette de perles limitée.' },
-  ],
+  faq,
   bibliography: [
     { name: 'Scikit-Image: Quantification de couleurs utilisant K-Means', url: 'https://scikit-learn.org/0.23/auto_examples/cluster/plot_color_quantization.html' },
     { name: 'Spécifications des Perles Miyuki Delica', url: 'https://www.miyuki-beads.co.jp/english/seedbeads/delica.html' },
     { name: 'Visgraf Lab: Algorithmes de Tramage (Dithering)', url: 'https://www.visgraf.impa.br/Courses/ip00/proj/Dithering1/floyd_steinberg_dithering.html' },
   ],
-  howTo: [
-    { name: 'Charger une image claire', text: 'Sélectionnez une photo avec un bon contraste et peu de petits détails pour que le modèle soit plus facile à suivre.' },
-    { name: 'Ajuster la taille de la grille', text: 'Définissez la largeur et la hauteur en perles de votre pièce finale. Plus il y a de perles, plus il y a de détails, mais plus c\'est difficile.' },
-    { name: 'Optimiser la palette de couleurs', text: 'Réduisez le nombre de couleurs jusqu\'à ce qu\'elles correspondent aux perles dont vous disposez dans votre kit de loisirs créatifs.' },
-    { name: 'Exporter le schéma guide', text: 'Générez le modèle final avec les codes de couleur à utiliser comme référence lors de l\'assemblage de vos perles sur la plaque ou le fil.' },
-  ],
-  schemas: []
+  howTo,
+  schemas: [faqSchema as any, howToSchema as any, appSchema],
 };

package/src/tool/bead-pattern-generator/index.ts

@@ -7,10 +7,22 @@ export interface BeadPatternGeneratorUI {
   [key: string]: string;
   title: string;
   description: string;
-  uploadLabel: string;
+  subtitle: string;
   gridSizeLabel: string;
-  pixelateBtn: string;
+  colorCountLabel: string;
+  optionsLabel: string;
+  rulersLabel: string;
+  symbolsTooltip: string;
+  symbolsLabel: string;
   downloadBtn: string;
+  uploadTitle: string;
+  uploadSubtitle: string;
+  paletteTitle: string;
+  reuploadBtn: string;
+  tunnelVisionTitle: string;
+  tunnelVisionSubtitle: string;
+  uploadLabel: string;
+  pixelateBtn: string;
   faqTitle: string;
   bibliographyTitle: string;
 }

package/src/tool/dice-roller/component.astro

@@ -1,11 +1,18 @@
 ---
+import type { DiceRollerUI } from './index';
+
+interface Props {
+  ui: DiceRollerUI;
+}
+
+const { ui } = Astro.props;
 ---
 
-<div id="dice-roller-root" class="dr-root">
+<div id="dice-roller-root" class="dr-root" data-ui={JSON.stringify(ui)}>
   <div class="dr-panel">
 
     <div class="dr-selector">
-      <p class="dr-label">Añadir dados a la bolsa</p>
+      <p class="dr-label">{ui.addDiceLabel}</p>
       <div class="dr-dice-grid">
         <button class="dr-die-btn" data-sides="4">d4</button>
         <button class="dr-die-btn" data-sides="6">d6</button>
@@ -19,16 +26,16 @@
 
     <div class="dr-pool-section">
       <div class="dr-pool-header">
-        <p class="dr-label">Bolsa de dados</p>
-        <button id="dr-clear-pool" class="dr-clear-btn">Vaciar</button>
+        <p class="dr-label">{ui.bagLabel}</p>
+        <button id="dr-clear-pool" class="dr-clear-btn">{ui.emptyBagBtn}</button>
       </div>
       <div id="dr-pool" class="dr-pool-display">
-        <span class="dr-pool-empty">Haz clic en los dados para añadirlos</span>
+        <span class="dr-pool-empty">{ui.emptyBagText}</span>
       </div>
     </div>
 
     <div class="dr-modifier-section">
-      <label class="dr-label" for="dr-modifier">Modificador</label>
+      <label class="dr-label" for="dr-modifier">{ui.modifierLabel}</label>
       <div class="dr-modifier-controls">
         <button id="dr-mod-dec" class="dr-mod-btn">−</button>
         <span id="dr-modifier-val" class="dr-modifier-display">0</span>
@@ -37,7 +44,7 @@
     </div>
 
     <button id="dr-roll-btn" class="dr-roll-btn" disabled>
-      <span id="dr-roll-text">Lanzar dados</span>
+      <span id="dr-roll-text">{ui.rollBtn}</span>
     </button>
 
   </div>
@@ -46,11 +53,11 @@
 
     <div class="dr-result-card" id="dr-result-card">
       <div class="dr-result-empty" id="dr-result-empty">
-        <p>Añade dados y lanza</p>
+        <p>{ui.preRollText}</p>
       </div>
       <div class="dr-result-content" id="dr-result-content" style="display:none">
         <div class="dr-total-area">
-          <span class="dr-total-label">Total</span>
+          <span class="dr-total-label">{ui.totalLabel}</span>
           <span id="dr-total" class="dr-total-val">0</span>
           <span id="dr-roll-expr" class="dr-roll-expr"></span>
         </div>
@@ -60,11 +67,11 @@
 
     <div class="dr-history-section">
       <div class="dr-history-header">
-        <span class="dr-label">Historial</span>
-        <button id="dr-clear-history" class="dr-clear-btn">Limpiar</button>
+        <span class="dr-label">{ui.historyLabel}</span>
+        <button id="dr-clear-history" class="dr-clear-btn">{ui.clearHistoryBtn}</button>
       </div>
       <div id="dr-history-list" class="dr-history-list">
-        <p class="dr-history-empty">El historial de tiradas aparecerá aquí</p>
+        <p class="dr-history-empty">{ui.emptyHistoryText}</p>
       </div>
     </div>
 
@@ -72,6 +79,10 @@
 </div>
 
 <script>
+  import type { DiceRollerUI } from './index';
+  const root = document.getElementById('dice-roller-root') as HTMLElement;
+  const ui = JSON.parse(root.dataset.ui || '{}') as DiceRollerUI;
+
   type Pool = { sides: number; count: number }[];
 
   let pool: Pool = [];
@@ -94,9 +105,9 @@
 
   function renderPool(): void {
     if (pool.length === 0) {
-      poolDisplay.innerHTML = '<span class="dr-pool-empty">Haz clic en los dados para añadirlos</span>';
+      poolDisplay.innerHTML = `<span class="dr-pool-empty">${ui.emptyBagText}</span>`;
       rollBtn.disabled = true;
-      rollText.textContent = 'Lanzar dados';
+      rollText.textContent = ui.rollBtn;
       return;
     }
 
@@ -106,14 +117,15 @@
       chip.className = 'dr-pool-chip';
       chip.innerHTML = `
         <span class="dr-chip-label">${count}d${sides}</span>
-        <button class="dr-chip-remove" data-sides="${sides}" title="Quitar un d${sides}">−</button>
+        <button class="dr-chip-remove" data-sides="${sides}">−</button>
       `;
       poolDisplay.appendChild(chip);
     });
 
     const total = poolTotal();
     rollBtn.disabled = false;
-    rollText.textContent = `Lanzar ${total} dado${total !== 1 ? 's' : ''}`;
+    const label = total === 1 ? ui.rollOneLabel : ui.rollManyLabel;
+    rollText.textContent = label.replace('$COUNT', total.toString());
   }
 
   function addDie(sides: number): void {
@@ -224,7 +236,7 @@
   rollBtn.addEventListener('click', rollAll);
 
   document.getElementById('dr-clear-history')?.addEventListener('click', () => {
-    historyList.innerHTML = '<p class="dr-history-empty">El historial de tiradas aparecerá aquí</p>';
+    historyList.innerHTML = `<p class="dr-history-empty">${ui.emptyHistoryText}</p>`;
   });
 </script>
 
@@ -378,7 +390,7 @@
   font-style: italic;
 }
 
-.dr-pool-chip {
+:global(.dr-pool-chip) {
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -388,13 +400,13 @@
   padding: 0.2rem 0.5rem 0.2rem 0.75rem;
 }
 
-.dr-chip-label {
+:global(.dr-chip-label) {
   font-size: 0.8rem;
   font-weight: 700;
   color: var(--dr-primary);
 }
 
-.dr-chip-remove {
+:global(.dr-chip-remove) {
   width: 1.125rem;
   height: 1.125rem;
   border-radius: 50%;
@@ -411,7 +423,7 @@
   padding: 0;
 }
 
-.dr-chip-remove:hover {
+:global(.dr-chip-remove:hover) {
   background: var(--dr-primary-dark);
 }
 
@@ -581,7 +593,7 @@
   justify-content: center;
 }
 
-.dr-result-pip {
+:global(.dr-result-pip) {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -594,24 +606,24 @@
   transition: border-color 0.2s;
 }
 
-.dr-pip-max {
+:global(.dr-pip-max) {
   border-color: var(--dr-success);
   background: rgba(16, 185, 129, 0.1);
 }
 
-.dr-pip-min {
+:global(.dr-pip-min) {
   border-color: var(--dr-danger);
   background: rgba(239, 68, 68, 0.1);
 }
 
-.dr-pip-val {
+:global(.dr-pip-val) {
   font-size: 1.25rem;
   font-weight: 800;
   color: var(--dr-text);
   line-height: 1;
 }
 
-.dr-pip-die {
+:global(.dr-pip-die) {
   font-size: 0.65rem;
   color: var(--dr-text-muted);
   font-weight: 600;
@@ -662,7 +674,7 @@
   margin: 1rem 0;
 }
 
-.dr-history-item {
+:global(.dr-history-item) {
   display: grid;
   grid-template-columns: 1fr auto auto;
   align-items: center;
@@ -686,7 +698,7 @@
   }
 }
 
-.dr-hist-expr {
+:global(.dr-hist-expr) {
   color: var(--dr-text-muted);
   font-size: 0.75rem;
   overflow: hidden;
@@ -694,13 +706,13 @@
   white-space: nowrap;
 }
 
-.dr-hist-result {
+:global(.dr-hist-result) {
   font-weight: 800;
   font-size: 1rem;
   color: var(--dr-primary);
 }
 
-.dr-hist-time {
+:global(.dr-hist-time) {
   font-size: 0.7rem;
   color: var(--dr-text-muted);
 }

package/src/tool/dice-roller/i18n/en.ts

@@ -1,9 +1,77 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { DiceRollerLocaleContent } from '../index';
 
+const slug = 'dice-roller';
+const title = 'Dice Roller';
+const description = 'A complete dice simulator for your RPG and board games. Roll d4, d6, d8, d10, d12, d20 and d100 with modifiers and history.';
+
+const faq: DiceRollerLocaleContent['faq'] = [
+  {
+    question: 'How can I simulate a roll with advantage (D&D)?',
+    answer: 'Add two d20 dice to the bag by clicking the d20 button twice. When rolling, observe the two individual results and keep the higher one. The displayed total will be the sum, but you can see each die separately in the result breakdown.',
+  },
+  {
+    question: 'What does the green or red color on results mean?',
+    answer: 'Green results indicate that die rolled its maximum possible value (a "critical"). Red results indicate the minimum value (a "1", the worst possible result). This makes it easy to spot crits and fumbles at a glance.',
+  },
+  {
+    question: 'Can I add multiple dice of the same type?',
+    answer: 'Yes. Each click on a die adds it to the bag. If you click the d6 three times, the bag will show "3d6". To reduce the count, click the "−" button that appears next to each die group in the bag.',
+  },
+  {
+    question: 'Are digital dice as random as physical ones?',
+    answer: 'Statistically, yes. Modern JavaScript engines use pseudorandom algorithms (xorshift128+) with very high quality uniform distribution. A real physical die can have small manufacturing imperfections that bias results; the digital die does not have that problem.',
+  },
+  {
+    question: 'What is the d100 and how is it used?',
+    answer: 'The d100 (or d%) generates a number from 1 to 100 and is used in percentage-based game systems, such as Call of Cthulhu or Warhammer Fantasy Roleplay. It represents "direct probability": if your Stealth skill is 65%, you need to roll 65 or less to succeed.',
+  },
+];
+
+const howTo: DiceRollerLocaleContent['howTo'] = [
+  { name: 'Build the dice pool', text: 'Click the die buttons (d4, d6, d8...) to add them to your pool. Each click adds one die of the selected type. You can mix different types in the same roll.' },
+  { name: 'Adjust the modifier', text: 'Use the "+" and "−" buttons next to the modifier to apply bonuses or penalties (like the ability modifier in D&D). The modifier is automatically added to the total.' },
+  { name: 'Roll the dice', text: 'Press the "Roll Dice" button. The right panel shows the final total and the breakdown of each individual die, with crits (maximum) in green and fumbles (minimum) in red.' },
+  { name: 'Check the history', text: 'Each roll is recorded in the history with the dice expression used, the total result, and the exact time. You can clear the history with the corresponding button.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howTo.map((step) => ({
+    '@type': 'HowToStep',
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'en',
+};
+
 export const content: DiceRollerLocaleContent = {
-  slug: 'dice-roller',
-  title: 'Dice Roller',
-  description: 'A complete dice simulator for your RPG and board games. Roll d4, d6, d8, d10, d12, d20 and d100 with modifiers and history.',
+  slug,
+  title,
+  description,
   faqTitle: 'Frequently Asked Questions',
   bibliographyTitle: 'Chance Bibliography',
   ui: {
@@ -14,7 +82,16 @@ export const content: DiceRollerLocaleContent = {
     historyLabel: 'History',
     clearHistoryBtn: 'Clear History',
     faqTitle: 'FAQ',
-    bibliographyTitle: 'References'
+    bibliographyTitle: 'References',
+    addDiceLabel: 'Add dice to the bag',
+    bagLabel: 'Dice bag',
+    emptyBagBtn: 'Empty',
+    emptyBagText: 'Click the dice to add them',
+    modifierLabel: 'Modifier',
+    rollManyLabel: 'Roll $COUNT dice',
+    rollOneLabel: 'Roll $COUNT die',
+    preRollText: 'Add dice and roll',
+    emptyHistoryText: 'Roll history will appear here'
   },
   seo: [
     { type: 'title', text: 'The Art of Randomness: History and Mathematics of Dice', level: 2 },
@@ -50,38 +127,12 @@ export const content: DiceRollerLocaleContent = {
       { term: 'Percentile Roll', definition: 'A roll using two d10 to produce a result from 1–100, used in skill-based systems where abilities are measured as percentages.' },
     ]},
   ],
-  faq: [
-    {
-      question: 'How can I simulate a roll with advantage (D&D)?',
-      answer: 'Add two d20 dice to the bag by clicking the d20 button twice. When rolling, observe the two individual results and keep the higher one. The displayed total will be the sum, but you can see each die separately in the result breakdown.',
-    },
-    {
-      question: 'What does the green or red color on results mean?',
-      answer: 'Green results indicate that die rolled its maximum possible value (a "critical"). Red results indicate the minimum value (a "1", the worst possible result). This makes it easy to spot crits and fumbles at a glance.',
-    },
-    {
-      question: 'Can I add multiple dice of the same type?',
-      answer: 'Yes. Each click on a die adds it to the bag. If you click the d6 three times, the bag will show "3d6". To reduce the count, click the "−" button that appears next to each die group in the bag.',
-    },
-    {
-      question: 'Are digital dice as random as physical ones?',
-      answer: 'Statistically, yes. Modern JavaScript engines use pseudorandom algorithms (xorshift128+) with very high quality uniform distribution. A real physical die can have small manufacturing imperfections that bias results; the digital die does not have that problem.',
-    },
-    {
-      question: 'What is the d100 and how is it used?',
-      answer: 'The d100 (or d%) generates a number from 1 to 100 and is used in percentage-based game systems, such as Call of Cthulhu or Warhammer Fantasy Roleplay. It represents "direct probability": if your Stealth skill is 65%, you need to roll 65 or less to succeed.',
-    },
-  ],
+  faq,
   bibliography: [
     { name: 'D&D Beyond – Dice mechanics rules', url: 'https://www.dndbeyond.com/sources/basic-rules/using-ability-scores' },
     { name: 'Roll20 – Virtual tabletop and dice systems', url: 'https://roll20.net/' },
     { name: 'Pathfinder – d20 System Reference', url: 'https://paizo.com/pathfinder' },
   ],
-  howTo: [
-    { name: 'Build the dice pool', text: 'Click the die buttons (d4, d6, d8...) to add them to your pool. Each click adds one die of the selected type. You can mix different types in the same roll.' },
-    { name: 'Adjust the modifier', text: 'Use the "+" and "−" buttons next to the modifier to apply bonuses or penalties (like the ability modifier in D&D). The modifier is automatically added to the total.' },
-    { name: 'Roll the dice', text: 'Press the "Roll Dice" button. The right panel shows the final total and the breakdown of each individual die, with crits (maximum) in green and fumbles (minimum) in red.' },
-    { name: 'Check the history', text: 'Each roll is recorded in the history with the dice expression used, the total result, and the exact time. You can clear the history with the corresponding button.' },
-  ],
-  schemas: []
+  howTo,
+  schemas: [faqSchema as any, howToSchema as any, appSchema],
 };

package/src/tool/dice-roller/i18n/es.ts

@@ -1,9 +1,77 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { DiceRollerLocaleContent } from '../index';
 
+const slug = 'lanzador-dados';
+const title = 'Tirador de Dados';
+const description = 'Simulador de dados virtual con bolsa personalizable, modificadores y historial de tiradas para tus juegos de rol y tablero.';
+
+const faq: DiceRollerLocaleContent['faq'] = [
+  {
+    question: '¿Cómo puedo simular una tirada con ventaja (D&D)?',
+    answer: 'Añade dos dados d20 a la bolsa haciendo clic dos veces en el botón d20. Al lanzar, observa los dos resultados individuales y quédate con el mayor. El total mostrado será la suma, pero puedes ver cada dado por separado en el desglose de resultados.',
+  },
+  {
+    question: '¿Qué significa el color verde o rojo en los resultados?',
+    answer: 'Los resultados en verde indican que ese dado ha sacado su valor máximo posible (un "crítico"). Los resultados en rojo indican el valor mínimo (un "1", el peor resultado posible). Esto facilita identificar críticos y pifias de un vistazo.',
+  },
+  {
+    question: '¿Puedo añadir varios dados del mismo tipo?',
+    answer: 'Sí. Cada clic en un dado lo añade a la bolsa. Si haces clic tres veces en d6, la bolsa mostrará "3d6". Para reducir la cantidad, haz clic en el botón "−" que aparece junto a cada grupo de dados en la bolsa.',
+  },
+  {
+    question: '¿Los dados digitales son tan aleatorios como los físicos?',
+    answer: 'Estadísticamente, sí. Los motores JavaScript modernos usan algoritmos pseudoaleatorios (xorshift128+) con distribución uniforme de muy alta calidad. Un dado físico real puede tener pequeñas imperfecciones de fabricación que sesguen los resultados; el dado digital no tiene ese problema.',
+  },
+  {
+    question: '¿Qué es el d100 y cómo se usa?',
+    answer: 'El d100 (o d%) genera un número del 1 al 100 y se usa en sistemas de juego basados en porcentajes, como Call of Cthulhu o Warhammer Fantasy Roleplay. Representa "probabilidad directa": si tu habilidad de Sigilo es 65%, necesitas sacar 65 o menos para tener éxito.',
+  },
+];
+
+const howTo: DiceRollerLocaleContent['howTo'] = [
+  { name: 'Construir la bolsa de dados', text: 'Haz clic en los botones de dado (d4, d6, d8...) para añadirlos a tu bolsa. Cada clic añade un dado del tipo seleccionado. Puedes mezclar tipos distintos en la misma tirada.' },
+  { name: 'Ajustar el modificador', text: 'Usa los botones "+" y "−" junto al modificador para aplicar bonificaciones o penalizaciones (como el modificador de habilidad en D&D). El modificador se suma automáticamente al total.' },
+  { name: 'Lanzar los dados', text: 'Pulsa el botón "Lanzar dados". El panel derecho muestra el total final y el desglose de cada dado individual, con los críticos (máximo) en verde y las pifias (mínimo) en rojo.' },
+  { name: 'Consultar el historial', text: 'Cada tirada queda registrada en el historial con la expresión de dados usada, el resultado total y la hora exacta. Puedes limpiar el historial con el botón correspondiente.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howTo.map((step) => ({
+    '@type': 'HowToStep',
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'es',
+};
+
 export const content: DiceRollerLocaleContent = {
-  slug: 'tirador-dados',
-  title: 'Tirador de Dados',
-  description: 'Simulador de dados virtual con bolsa personalizable, modificadores y historial de tiradas para tus juegos de rol y tablero.',
+  slug,
+  title,
+  description,
   faqTitle: 'Preguntas Frecuentes',
   bibliographyTitle: 'Bibliografía del Azar',
   ui: {
@@ -14,7 +82,16 @@ export const content: DiceRollerLocaleContent = {
     historyLabel: 'Historial',
     clearHistoryBtn: 'Limpiar Historial',
     faqTitle: 'FAQ',
-    bibliographyTitle: 'Referencias'
+    bibliographyTitle: 'Referencias',
+    addDiceLabel: 'Añadir dados a la bolsa',
+    bagLabel: 'Bolsa de dados',
+    emptyBagBtn: 'Vaciar',
+    emptyBagText: 'Haz clic en los dados para añadirlos',
+    modifierLabel: 'Modificador',
+    rollManyLabel: 'Lanzar $COUNT dados',
+    rollOneLabel: 'Lanzar $COUNT dado',
+    preRollText: 'Añade dados y lanza',
+    emptyHistoryText: 'El historial de tiradas aparecerá aquí'
   },
   seo: [
     { type: 'title', text: 'El arte de la aleatoriedad: historia y matemáticas de los dados', level: 2 },
@@ -52,38 +129,12 @@ export const content: DiceRollerLocaleContent = {
       { term: 'Tirada percentil', definition: 'Tirada usando dos d10 para producir un resultado del 1 al 100, usada en sistemas de habilidades basados en porcentajes.' },
     ]},
   ],
-  faq: [
-    {
-      question: '¿Cómo puedo simular una tirada con ventaja (D&D)?',
-      answer: 'Añade dos dados d20 a la bolsa haciendo clic dos veces en el botón d20. Al lanzar, observa los dos resultados individuales y quédate con el mayor. El total mostrado será la suma, pero puedes ver cada dado por separado en el desglose de resultados.',
-    },
-    {
-      question: '¿Qué significa el color verde o rojo en los resultados?',
-      answer: 'Los resultados en verde indican que ese dado ha sacado su valor máximo posible (un "crítico"). Los resultados en rojo indican el valor mínimo (un "1", el peor resultado posible). Esto facilita identificar críticos y pifias de un vistazo.',
-    },
-    {
-      question: '¿Puedo añadir varios dados del mismo tipo?',
-      answer: 'Sí. Cada clic en un dado lo añade a la bolsa. Si haces clic tres veces en d6, la bolsa mostrará "3d6". Para reducir la cantidad, haz clic en el botón "−" que aparece junto a cada grupo de dados en la bolsa.',
-    },
-    {
-      question: '¿Los dados digitales son tan aleatorios como los físicos?',
-      answer: 'Estadísticamente, sí. Los motores JavaScript modernos usan algoritmos pseudoaleatorios (xorshift128+) con distribución uniforme de muy alta calidad. Un dado físico real puede tener pequeñas imperfecciones de fabricación que sesguen los resultados; el dado digital no tiene ese problema.',
-    },
-    {
-      question: '¿Qué es el d100 y cómo se usa?',
-      answer: 'El d100 (o d%) genera un número del 1 al 100 y se usa en sistemas de juego basados en porcentajes, como Call of Cthulhu o Warhammer Fantasy Roleplay. Representa "probabilidad directa": si tu habilidad de Sigilo es 65%, necesitas sacar 65 o menos para tener éxito.',
-    },
-  ],
+  faq,
   bibliography: [
     { name: 'D&D Beyond – Reglas de mecánicas de dados', url: 'https://www.dndbeyond.com/sources/basic-rules/using-ability-scores' },
     { name: 'Roll20 – Virtual tabletop y sistemas de dados', url: 'https://roll20.net/' },
     { name: 'Pathfinder – Sistema d20 de referencia', url: 'https://paizo.com/pathfinder' },
   ],
-  howTo: [
-    { name: 'Construir la bolsa de dados', text: 'Haz clic en los botones de dado (d4, d6, d8...) para añadirlos a tu bolsa. Cada clic añade un dado del tipo seleccionado. Puedes mezclar tipos distintos en la misma tirada.' },
-    { name: 'Ajustar el modificador', text: 'Usa los botones "+" y "−" junto al modificador para aplicar bonificaciones o penalizaciones (como el modificador de habilidad en D&D). El modificador se suma automáticamente al total.' },
-    { name: 'Lanzar los dados', text: 'Pulsa el botón "Lanzar dados". El panel derecho muestra el total final y el desglose de cada dado individual, con los críticos (máximo) en verde y las pifias (mínimo) en rojo.' },
-    { name: 'Consultar el historial', text: 'Cada tirada queda registrada en el historial con la expresión de dados usada, el resultado total y la hora exacta. Puedes limpiar el historial con el botón correspondiente.' },
-  ],
-  schemas: []
+  howTo,
+  schemas: [faqSchema as any, howToSchema as any, appSchema],
 };