@jjlmoya/utils-creative 1.2.0

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

@@ -0,0 +1,230 @@
+---
+import './style.css';
+---
+
+<div id="dice-roller-root" class="dr-root">
+  <div class="dr-panel">
+
+    <div class="dr-selector">
+      <p class="dr-label">Añadir dados a la bolsa</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>
+        <button class="dr-die-btn" data-sides="8">d8</button>
+        <button class="dr-die-btn" data-sides="10">d10</button>
+        <button class="dr-die-btn" data-sides="12">d12</button>
+        <button class="dr-die-btn" data-sides="20">d20</button>
+        <button class="dr-die-btn" data-sides="100">d%</button>
+      </div>
+    </div>
+
+    <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>
+      </div>
+      <div id="dr-pool" class="dr-pool-display">
+        <span class="dr-pool-empty">Haz clic en los dados para añadirlos</span>
+      </div>
+    </div>
+
+    <div class="dr-modifier-section">
+      <label class="dr-label" for="dr-modifier">Modificador</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>
+        <button id="dr-mod-inc" class="dr-mod-btn">+</button>
+      </div>
+    </div>
+
+    <button id="dr-roll-btn" class="dr-roll-btn" disabled>
+      <span id="dr-roll-text">Lanzar dados</span>
+    </button>
+
+  </div>
+
+  <div class="dr-results-panel">
+
+    <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>
+      </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 id="dr-total" class="dr-total-val">0</span>
+          <span id="dr-roll-expr" class="dr-roll-expr"></span>
+        </div>
+        <div id="dr-dice-results" class="dr-dice-results"></div>
+      </div>
+    </div>
+
+    <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>
+      </div>
+      <div id="dr-history-list" class="dr-history-list">
+        <p class="dr-history-empty">El historial de tiradas aparecerá aquí</p>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+  type Pool = { sides: number; count: number }[];
+
+  let pool: Pool = [];
+  let modifier = 0;
+
+  const poolDisplay = document.getElementById('dr-pool') as HTMLElement;
+  const resultEmpty = document.getElementById('dr-result-empty') as HTMLElement;
+  const resultContent = document.getElementById('dr-result-content') as HTMLElement;
+  const totalEl = document.getElementById('dr-total') as HTMLElement;
+  const rollExpr = document.getElementById('dr-roll-expr') as HTMLElement;
+  const diceResultsEl = document.getElementById('dr-dice-results') as HTMLElement;
+  const historyList = document.getElementById('dr-history-list') as HTMLElement;
+  const rollBtn = document.getElementById('dr-roll-btn') as HTMLButtonElement;
+  const modifierVal = document.getElementById('dr-modifier-val') as HTMLElement;
+  const rollText = document.getElementById('dr-roll-text') as HTMLElement;
+
+  function poolTotal(): number {
+    return pool.reduce((acc, d) => acc + d.count, 0);
+  }
+
+  function renderPool(): void {
+    if (pool.length === 0) {
+      poolDisplay.innerHTML = '<span class="dr-pool-empty">Haz clic en los dados para añadirlos</span>';
+      rollBtn.disabled = true;
+      rollText.textContent = 'Lanzar dados';
+      return;
+    }
+
+    poolDisplay.innerHTML = '';
+    pool.forEach(({ sides, count }) => {
+      const chip = document.createElement('div');
+      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>
+      `;
+      poolDisplay.appendChild(chip);
+    });
+
+    const total = poolTotal();
+    rollBtn.disabled = false;
+    rollText.textContent = `Lanzar ${total} dado${total !== 1 ? 's' : ''}`;
+  }
+
+  function addDie(sides: number): void {
+    const existing = pool.find(d => d.sides === sides);
+    if (existing) {
+      existing.count++;
+    } else {
+      pool.push({ sides, count: 1 });
+      pool.sort((a, b) => a.sides - b.sides);
+    }
+    renderPool();
+  }
+
+  function removeDie(sides: number): void {
+    const idx = pool.findIndex(d => d.sides === sides);
+    if (idx === -1) return;
+    const entry = pool[idx];
+    if (!entry) return;
+    entry.count--;
+    if (entry.count <= 0) pool.splice(idx, 1);
+    renderPool();
+  }
+
+  function buildRollResult(): { rolls: { sides: number; value: number }[]; sum: number; expr: string } {
+    const rolls: { sides: number; value: number }[] = [];
+    pool.forEach(({ sides, count }) => {
+      for (let i = 0; i < count; i++) {
+        rolls.push({ sides, value: Math.floor(Math.random() * sides) + 1 });
+      }
+    });
+    const sum = rolls.reduce((acc, r) => acc + r.value, 0) + modifier;
+    const expr = pool.map(d => `${d.count}d${d.sides}`).join(' + ') + (modifier !== 0 ? ` ${modifier > 0 ? '+' : ''}${modifier}` : '');
+    return { rolls, sum, expr };
+  }
+
+  function renderRollResult(rolls: { sides: number; value: number }[], sum: number, expr: string): void {
+    resultEmpty.style.display = 'none';
+    resultContent.style.display = 'flex';
+    totalEl.textContent = sum.toString();
+    rollExpr.textContent = expr;
+
+    diceResultsEl.innerHTML = '';
+    rolls.forEach(r => {
+      const pip = document.createElement('div');
+      const isMax = r.value === r.sides;
+      const isMin = r.value === 1;
+      pip.className = `dr-result-pip ${isMax ? 'dr-pip-max' : ''} ${isMin ? 'dr-pip-min' : ''}`;
+      pip.setAttribute('title', `d${r.sides}`);
+      pip.innerHTML = `<span class="dr-pip-val">${r.value}</span><span class="dr-pip-die">d${r.sides}</span>`;
+      diceResultsEl.appendChild(pip);
+    });
+  }
+
+  function appendHistory(expr: string, sum: number): void {
+    const histEmpty = historyList.querySelector('.dr-history-empty');
+    if (histEmpty) histEmpty.remove();
+
+    const item = document.createElement('div');
+    item.className = 'dr-history-item';
+    const now = new Date();
+    const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
+    item.innerHTML = `
+      <span class="dr-hist-expr">${expr}</span>
+      <span class="dr-hist-result">${sum}</span>
+      <span class="dr-hist-time">${time}</span>
+    `;
+    historyList.prepend(item);
+  }
+
+  function rollAll(): void {
+    if (pool.length === 0) return;
+    rollBtn.classList.add('dr-rolling');
+    setTimeout(() => rollBtn.classList.remove('dr-rolling'), 400);
+    const { rolls, sum, expr } = buildRollResult();
+    renderRollResult(rolls, sum, expr);
+    appendHistory(expr, sum);
+  }
+
+  document.querySelectorAll('.dr-die-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const sides = parseInt((btn as HTMLElement).dataset.sides ?? '0');
+      if (sides) addDie(sides);
+    });
+  });
+
+  poolDisplay.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement;
+    if (target.classList.contains('dr-chip-remove')) {
+      const sides = parseInt(target.dataset.sides ?? '0');
+      if (sides) removeDie(sides);
+    }
+  });
+
+  document.getElementById('dr-clear-pool')?.addEventListener('click', () => {
+    pool = [];
+    renderPool();
+  });
+
+  document.getElementById('dr-mod-inc')?.addEventListener('click', () => {
+    modifier++;
+    modifierVal.textContent = modifier > 0 ? `+${modifier}` : modifier.toString();
+  });
+  document.getElementById('dr-mod-dec')?.addEventListener('click', () => {
+    modifier--;
+    modifierVal.textContent = modifier > 0 ? `+${modifier}` : modifier.toString();
+  });
+
+  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>';
+  });
+</script>

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

@@ -0,0 +1,87 @@
+import type { DiceRollerLocaleContent } from '../index';
+
+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.',
+  faqTitle: 'Frequently Asked Questions',
+  bibliographyTitle: 'Chance Bibliography',
+  ui: {
+    title: 'Dice Roller',
+    description: 'May luck be with you.',
+    rollBtn: 'Roll Dice',
+    totalLabel: 'Total',
+    historyLabel: 'History',
+    clearHistoryBtn: 'Clear History',
+    faqTitle: 'FAQ',
+    bibliographyTitle: 'References'
+  },
+  seo: [
+    { type: 'title', text: 'The Art of Randomness: History and Mathematics of Dice', level: 2 },
+    { type: 'paragraph', html: 'Dice are one of humanity\'s oldest randomness generators. <strong>Astragali</strong> — ankle bones of sheep and goats — were used as primitive four-sided dice as far back as 5000 BC in Mesopotamia and Egypt. The evolution from carved bone to modern epoxy resin icosahedra is not just aesthetic: it is a journey through probability theory and game mechanics design.' },
+    { type: 'title', text: 'The Standard Dice Family', level: 3 },
+    { type: 'paragraph', html: 'The most widespread set of dice in role-playing games — popularized by <strong>Dungeons &amp; Dragons</strong> in 1974 — consists of the five Platonic solids plus two additional shapes: d4 (tetrahedron), d6 (cube), d8 (octahedron), d10 (pentagonal trapezohedron), d12 (dodecahedron), d20 (icosahedron) and d100 (percentile die). Each polyhedron guarantees uniform distribution: all faces have exactly the same probability of landing.' },
+    { type: 'list', items: [
+      '<strong>d4 – Tetrahedron:</strong> The most dangerous if stepped on barefoot. Four triangular faces, 25% probability per face. Commonly used for dagger damage or low-level spells.',
+      '<strong>d6 – Cube:</strong> The most universal die. Present in all board games since the Egyptian senet. Its cubic geometry guarantees perfect equidistribution.',
+      '<strong>d8 – Octahedron:</strong> The die of the spear or battle axe. Eight equilateral triangular faces. 12.5% probability per face.',
+      '<strong>d10 – Pentagonal Trapezohedron:</strong> The only non-Platonic solid in the standard set. Two opposite faces per "vertex". Essential for the d100 (two d10 combined).',
+      '<strong>d12 – Dodecahedron:</strong> The barbarian\'s die. Twelve pentagonal faces. Underrated in many systems, protagonist in D&D 5e Barbarian.',
+      '<strong>d20 – Icosahedron:</strong> The king of RPG. Twenty triangular faces. Protagonist of the d20 system: determines success or failure of almost all actions.',
+      '<strong>d100 – Percentile:</strong> Two d10 combined (tens + units). Defines fine probabilities in systems like Call of Cthulhu or Warhammer Fantasy.',
+    ]},
+    { type: 'stats', items: [
+      { value: '5000 BC', label: 'First dice (astragali)', icon: 'mdi:history' },
+      { value: '1974', label: 'D&D popularized the set', icon: 'mdi:sword' },
+      { value: '7 types', label: 'Standard RPG dice', icon: 'mdi:dice-multiple' },
+      { value: '2¹²⁸', label: 'JS random period', icon: 'mdi:function-variant' },
+    ], columns: 4 },
+    { type: 'title', text: 'Probabilities and Distribution Curves', level: 3 },
+    { type: 'paragraph', html: 'When you roll a single die, you get a <strong>discrete uniform distribution</strong>: every result has exactly the same probability (1/n). But as soon as you combine multiple dice, mathematical magic transforms that flat curve into an <strong>approximate normal distribution</strong>. That is why 2d6 is not the same as 1d12: with two six-sided dice the probability of rolling a 7 is 6/36 ≈ 16.7%, while the extremes (2 and 12) only occur 2.8% of the time.' },
+    { type: 'tip', title: 'Advantage and Disadvantage (D&D 5e)', html: 'The <strong>Advantage</strong> mechanic consists of rolling 2d20 and keeping the higher result. Mathematically, this raises the average from 10.5 to approximately 13.8. <strong>Disadvantage</strong> does the opposite: take the lower, dropping the average to about 7.2. Our roller lets you simulate this by adding two d20s to the bag and comparing the individual results.' },
+    { type: 'title', text: 'Modifiers: The Bridge Between Dice and Character', level: 3 },
+    { type: 'paragraph', html: 'In most RPG systems, the die does not act alone: a <strong>modifier</strong> representing the character\'s abilities is added or subtracted. In D&D 5e, a Strength modifier of +5 means you roll 1d20, add 5, and check the result against the enemy\'s Armor Class. Our roller includes a modifier control to faithfully reflect these mechanics.' },
+    { type: 'tip', title: 'Dice Notation Standard', html: 'The <strong>XdY+Z</strong> notation is the de facto standard in role-playing games: X dice of Y faces with modifier Z. "3d6+2" means roll three six-sided dice and add 2 to the total. Our tool uses this notation in the history so you can easily share or record your rolls.' },
+    { type: 'glossary', items: [
+      { term: 'Critical Hit', definition: 'A roll of the maximum value on a die (e.g., rolling 20 on a d20). Usually triggers special bonus effects in most RPG systems.' },
+      { term: 'Fumble / Nat 1', definition: 'Rolling the minimum value (1) on a die. Often results in a dramatic failure or negative consequence.' },
+      { term: 'Dice Pool', definition: 'A collection of dice rolled simultaneously. The pool in our tool shows each die type grouped by count (e.g., 3d6 + 2d8).' },
+      { term: 'Modifier', definition: 'A fixed number added or subtracted from a roll result, representing a character\'s skill, attribute bonus, or situational penalty.' },
+      { 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.',
+    },
+  ],
+  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: []
+};

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

@@ -0,0 +1,89 @@
+import type { DiceRollerLocaleContent } from '../index';
+
+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.',
+  faqTitle: 'Preguntas Frecuentes',
+  bibliographyTitle: 'Bibliografía del Azar',
+  ui: {
+    title: 'Tirador de Dados',
+    description: 'Que la suerte te acompañe.',
+    rollBtn: 'Lanzar Dados',
+    totalLabel: 'Total',
+    historyLabel: 'Historial',
+    clearHistoryBtn: 'Limpiar Historial',
+    faqTitle: 'FAQ',
+    bibliographyTitle: 'Referencias'
+  },
+  seo: [
+    { type: 'title', text: 'El arte de la aleatoriedad: historia y matemáticas de los dados', level: 2 },
+    { type: 'paragraph', html: 'Los dados son uno de los generadores de azar más antiguos de la humanidad. Los <strong>astrágalos</strong> —huesos de tobillo de ovejas y cabras— se usaban ya en el 5000 a.C. como primitivos dados de cuatro caras en Mesopotamia y Egipto. Pero la evolución desde el hueso tallado hasta el icosaedro de resina epoxi moderno no es solo estética: es un viaje a través de la teoría de probabilidades y el diseño de mecanismos de juego.' },
+    { type: 'title', text: 'La familia estándar de dados', level: 3 },
+    { type: 'paragraph', html: 'El conjunto de dados más extendido en los juegos de rol —popularizado por <strong>Dungeons &amp; Dragons</strong> en 1974— está compuesto por los cinco sólidos platónicos más dos formas adicionales: d4 (tetraedro), d6 (cubo), d8 (octaedro), d10 (pentagonal trapezoedro), d12 (dodecaedro), d20 (icosaedro) y d100 (dado percentil). Cada poliedro garantiza una distribución uniforme: todas las caras tienen exactamente la misma probabilidad de caer.' },
+    { type: 'list', items: [
+      '<strong>d4 – Tetraedro:</strong> El más lesivo si lo pisas descalzo. Cuatro caras triangulares, probabilidad de 25% por cara. Muy usado para daño de daga o hechizos de bajo nivel.',
+      '<strong>d6 – Cubo:</strong> El dado más universal. Presente en todos los juegos de mesa desde el senet egipcio. Su geometría cúbica garantiza perfecta equidistribución.',
+      '<strong>d8 – Octaedro:</strong> El dado de la lanza o el hacha de batalla. Ocho caras triangulares equiláteras. Probabilidad de 12,5% por cara.',
+      '<strong>d10 – Trapezoedro pentagonal:</strong> El único no platónico del set estándar. Dos caras opuestas por "vértice". Esencial para el d100 (dos d10 combinados).',
+      '<strong>d12 – Dodecaedro:</strong> El dado del bárbaro. Doce caras pentagonales. Infravalorado en muchos sistemas, protagonista en Barbarian de D&D 5e.',
+      '<strong>d20 – Icosaedro:</strong> El rey del rol. Veinte caras triangulares. Protagonista del sistema d20 de D&D: determina éxito o fracaso de casi todas las acciones.',
+      '<strong>d100 – Percentil:</strong> Dos d10 combinados (decenas + unidades). Define probabilidades finas en sistemas como Call of Cthulhu o Warhammer Fantasy.',
+    ]},
+    { type: 'title', text: 'Probabilidades y curvas de distribución', level: 3 },
+    { type: 'paragraph', html: 'Cuando lanzas un único dado, obtienes una <strong>distribución uniforme discreta</strong>: cada resultado tiene exactamente la misma probabilidad (1/n). Pero en cuanto combinas múltiples dados, la magia matemática transforma esa curva plana en una <strong>distribución normal aproximada</strong>. Por eso 2d6 no es lo mismo que 1d12: con dos dados de seis la probabilidad de obtener 7 es 6/36 ≈ 16,7%, mientras que los extremos (2 y 12) solo ocurren el 2,8% del tiempo.' },
+    { type: 'tip', title: 'Ventaja y Desventaja (sistema D&D 5e)', html: 'El mecanismo de <strong>Ventaja</strong> consiste en lanzar 2d20 y quedarse con el mayor resultado. Matemáticamente, esto sube la media de 10,5 a aproximadamente 13,8. La <strong>Desventaja</strong> hace lo contrario: toma el menor, bajando la media a unos 7,2. Nuestro tirador te permite simular esto añadiendo dos d20 a la bolsa y comparando los resultados individualmente.' },
+    { type: 'title', text: 'Modificadores: el puente entre dados y personaje', level: 3 },
+    { type: 'paragraph', html: 'En la mayoría de sistemas de rol, el dado no actúa solo: se suma o resta un <strong>modificador</strong> que representa las habilidades del personaje. En D&D 5e, un modificador de Fuerza +5 significa que lanzas 1d20, sumas 5, y compruebas el resultado contra la Clase de Armadura del enemigo. Nuestro tirador incorpora un control de modificador para reflejar fielmente estas mecánicas.' },
+    { type: 'title', text: 'Integridad aleatoria: ¿son justos los dados digitales?', level: 3 },
+    { type: 'paragraph', html: 'El método <code>Math.random()</code> de JavaScript utiliza un algoritmo <strong>xorshift128+</strong> (en los motores V8 modernos), que produce valores pseudoaleatorios con un período de 2¹²⁸. Para los propósitos del juego de mesa y del rol, esta calidad estadística es completamente suficiente. De hecho, supera en uniformidad a un dado físico mal equilibrado. La crítica principal es que no es criptográficamente seguro (no deberías usar <code>Math.random()</code> para claves de seguridad), pero para determinar si tu Ladrón roba con éxito es más que adecuado.' },
+    { type: 'tip', title: 'Bolsa de dados y notación estándar', html: 'La notación <strong>XdY+Z</strong> es el estándar de facto en juegos de rol: X dados de Y caras con modificador Z. "3d6+2" significa lanzar tres dados de seis y sumar 2 al total. Nuestra herramienta utiliza esta notación en el historial para que puedas compartir o anotar tus tiradas fácilmente.' },
+    { type: 'stats', items: [
+      { value: '5000 a.C.', label: 'Primeros dados (astrágalos)', icon: 'mdi:history' },
+      { value: '1974', label: 'D&D popularizó el set', icon: 'mdi:sword' },
+      { value: '7 tipos', label: 'Dados estándar de rol', icon: 'mdi:dice-multiple' },
+      { value: '2¹²⁸', label: 'Período del aleatorio JS', icon: 'mdi:function-variant' },
+    ], columns: 4 },
+    { type: 'glossary', items: [
+      { term: 'Crítico', definition: 'Obtener el valor máximo en un dado (ej. sacar 20 en un d20). Normalmente activa efectos especiales de bonificación en la mayoría de sistemas.' },
+      { term: 'Pifia / Nat 1', definition: 'Sacar el valor mínimo (1) en un dado. A menudo resulta en un fallo dramático o consecuencia negativa.' },
+      { term: 'Bolsa de dados', definition: 'Conjunto de dados lanzados simultáneamente. La bolsa en nuestra herramienta muestra cada tipo de dado agrupado por cantidad (ej. 3d6 + 2d8).' },
+      { term: 'Modificador', definition: 'Número fijo que se suma o resta al resultado de un dado, representando la habilidad o atributo de un personaje.' },
+      { 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.',
+    },
+  ],
+  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: []
+};

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

@@ -0,0 +1,87 @@
+import type { DiceRollerLocaleContent } from '../index';
+
+export const content: DiceRollerLocaleContent = {
+  slug: 'lanceur-de-des',
+  title: 'Lanceur de Dés',
+  description: 'Un simulateur de dés complet pour vos JdR et jeux de société. Lancez des d4, d6, d8, d10, d12, d20 et d100 avec modificateurs et historique.',
+  faqTitle: 'Questions Fréquemment Posées',
+  bibliographyTitle: 'Bibliographie du Hasard',
+  ui: {
+    title: 'Lanceur de Dés',
+    description: 'Que la chance soit avec vous.',
+    rollBtn: 'Lancer les dés',
+    totalLabel: 'Total',
+    historyLabel: 'Historique',
+    clearHistoryBtn: 'Effacer l\'historique',
+    faqTitle: 'FAQ',
+    bibliographyTitle: 'Références'
+  },
+  seo: [
+    { type: 'title', text: 'L\'Art du Hasard : Histoire et Mathématiques des Dés', level: 2 },
+    { type: 'paragraph', html: 'Les dés sont l\'un des plus anciens générateurs de hasard de l\'humanité. Les <strong>astragales</strong> — osselets de chevilles de moutons et de chèvres — étaient utilisés comme dés primitifs à quatre faces dès 5000 av. J.-C. en Mésopotamie et en Égypte. L\'évolution de l\'os sculpté aux icosaèdres modernes en résine époxy n\'est pas seulement esthétique : c\'est un voyage à travers la théorie des probabilités et la conception des mécaniques de jeu.' },
+    { type: 'title', text: 'La Famille des Dés Standards', level: 3 },
+    { type: 'paragraph', html: 'L\'ensemble de dés le plus répandu dans les jeux de rôle — popularisé par <strong>Dungeons &amp; Dragons</strong> en 1974 — se compose des cinq solides de Platon plus deux formes additionnelles : d4 (tétraèdre), d6 (cube), d8 (octaèdre), d10 (trapézoèdre pentagonal), d12 (dodécaèdre), d20 (icosaèdre) et d100 (dé centile). Chaque polyèdre garantit une distribution uniforme : toutes les faces ont exactement la même probabilité de sortir.' },
+    { type: 'list', items: [
+      '<strong>d4 – Tétraèdre :</strong> Le plus dangereux si l\'on marche dessus pieds nus. Quatre faces triangulaires, 25 % de probabilité par face. Couramment utilisé pour les dégâts de dague ou les sorts de bas niveau.',
+      '<strong>d6 – Cube :</strong> Le dé le plus universel. Présent dans tous les jeux de société depuis le senet égyptien. Sa géométrie cubique garantit une équidistribution parfaite.',
+      '<strong>d8 – Octaèdre :</strong> Le dé de la lance ou de la hache de bataille. Huit faces triangulaires équilatérales. 12,5 % de probabilité par face.',
+      '<strong>d10 – Trapézoèdre pentagonal :</strong> Le seul solide non-platonique de l\'ensemble standard. Deux faces opposées par "sommet". Essentiel pour le d100 (deux d10 combinés).',
+      '<strong>d12 – Dodécaèdre :</strong> Le dé du barbare. Douze faces pentagonales. Sous-estimé dans de nombreux systèmes, il est le protagoniste du Barbare dans D&D 5e.',
+      '<strong>d20 – Icosaèdre :</strong> Le roi du JdR. Vingt faces triangulaires. Protagoniste du système d20 : il détermine le succès ou l\'échec de presque toutes les actions.',
+      '<strong>d100 – Centile :</strong> Deux d10 combinés (dizaines + unités). Définit des probabilités fines dans des systèmes comme l\'Appel de Cthulhu ou Warhammer Fantasy.',
+    ]},
+    { type: 'stats', items: [
+      { value: '5000 av. J.-C.', label: 'Premiers dés (astragales)', icon: 'mdi:history' },
+      { value: '1974', label: 'D&D popularise l\'ensemble', icon: 'mdi:sword' },
+      { value: '7 types', label: 'Dés standards de JdR', icon: 'mdi:dice-multiple' },
+      { value: '2¹²⁸', label: 'Période aléatoire JS', icon: 'mdi:function-variant' },
+    ], columns: 4 },
+    { type: 'title', text: 'Probabilités et Courbes de Distribution', level: 3 },
+    { type: 'paragraph', html: 'Lorsque vous lancez un seul dé, vous obtenez une <strong>distribution uniforme discrète</strong> : chaque résultat a exactement la même probabilité (1/n). Mais dès que vous combinez plusieurs dés, la magie mathématique transforme cette courbe plate en une <strong>distribution normale approximative</strong>. C\'est pourquoi 2d6 n\'est pas la même chose qu\'un 1d12 : avec deux dés à six faces, la probabilité d\'obtenir un 7 est de 6/36 ≈ 16,7 %, tandis que les extrêmes (2 et 12) ne surviennent que 2,8 % du temps.' },
+    { type: 'tip', title: 'Avantage et Désavantage (D&D 5e)', html: 'La mécanique d\'<strong>Avantage</strong> consiste à lancer 2d20 et à garder le résultat le plus élevé. Mathématiquement, cela fait passer la moyenne de 10,5 à environ 13,8. Le <strong>Désavantage</strong> fait l\'inverse : on prend le plus bas, faisant chuter la moyenne à environ 7,2. Notre lanceur vous permet de simuler cela en ajoutant deux d20 au sac et en comparant les résultats individuels.' },
+    { type: 'title', text: 'Modificateurs : Le Pont entre le Dé et le Personnage', level: 3 },
+    { type: 'paragraph', html: 'Dans la plupart des systèmes de JdR, le dé n\'agit pas seul : un <strong>modificateur</strong> représentant les capacités du personnage est ajouté ou soustrait. Dans D&D 5e, un modificateur de Force de +5 signifie que vous lancez 1d20, ajoutez 5, et comparez le résultat à la Classe d\'Armure de l\'ennemi. Notre lanceur inclut un contrôle de modificateur pour refléter fidèlement ces mécaniques.' },
+    { type: 'tip', title: 'Standard de Notation des Dés', html: 'La notation <strong>XdY+Z</strong> est le standard de facto dans les jeux de rôle : X dés de Y faces avec un modificateur Z. "3d6+2" signifie lancer trois dés à six faces et ajouter 2 au total. Notre outil utilise cette notation dans l\'historique afin que vous puissiez facilement partager ou enregistrer vos lancers.' },
+    { type: 'glossary', items: [
+      { term: 'Coup Critique', definition: 'Un lancer de la valeur maximale sur un dé (ex: obtenir 20 sur un d20). Déclenche généralement des effets bonus spéciaux dans la plupart des systèmes de JdR.' },
+      { term: 'Échec Critique / Nat 1', definition: 'Obtenir la valeur minimale (1) sur un dé. Entraîne souvent un échec dramatique ou une conséquence négative.' },
+      { term: 'Réserve de Dés', definition: 'Une collection de dés lancés simultanément. La réserve dans notre outil affiche chaque type de dé groupé par nombre (ex: 3d6 + 2d8).' },
+      { term: 'Modificateur', definition: 'Un nombre fixe ajouté ou soustrait d\'un résultat de lancer, représentant la compétence d\'un personnage, un bonus d\'attribut ou une pénalité situationnelle.' },
+      { term: 'Lancer Centile', definition: 'Un lancer utilisant deux d10 pour produire un résultat de 1 à 100, utilisé dans les systèmes basés sur les compétences où les capacités sont mesurées en pourcentages.' },
+    ]},
+  ],
+  faq: [
+    {
+      question: 'Comment simuler un lancer avec avantage (D&D) ?',
+      answer: 'Ajoutez deux dés d20 à votre réserve en cliquant deux fois sur le bouton d20. Lors du lancer, observez les deux résultats individuels et gardez le plus élevé. Le total affiché sera la somme, mais vous pouvez voir chaque dé séparément dans le détail du résultat.',
+    },
+    {
+      question: 'Que signifient les couleurs verte ou rouge sur les résultats ?',
+      answer: 'Les résultats en vert indiquent que le dé a obtenu sa valeur maximale possible (un "critique"). Les résultats en rouge indiquent la valeur minimale (un "1", le pire résultat possible). Cela permet de repérer les critiques et les échecs d\'un coup d\'œil.',
+    },
+    {
+      question: 'Puis-je ajouter plusieurs dés du même type ?',
+      answer: 'Oui. Chaque clic sur un dé l\'ajoute à votre réserve. Si vous cliquez trois fois sur le d6, la réserve affichera "3d6". Pour réduire le nombre, cliquez sur le bouton "−" qui apparaît à côté de chaque groupe de dés.',
+    },
+    {
+      question: 'Les dés numériques sont-ils aussi aléatoires que les physiques ?',
+      answer: 'Statistiquement, oui. Les moteurs JavaScript modernes utilisent des algorithmes pseudo-aléatoires (xorshift128+) avec une distribution uniforme de très haute qualité. Un vrai dé physique peut présenter de petites imperfections de fabrication qui biaisent les résultats ; le dé numérique n\'a pas ce problème.',
+    },
+    {
+      question: 'Qu\'est-ce que le d100 et comment est-il utilisé ?',
+      answer: 'Le d100 (ou d%) génère un nombre de 1 à 100 et est utilisé dans les systèmes de jeu basés sur les pourcentages, tels que l\'Appel de Cthulhu ou Warhammer Fantasy. Il représente une "probabilité directe" : si votre compétence en Discrétion est de 65 %, vous devez obtenir 65 ou moins pour réussir.',
+    },
+  ],
+  bibliography: [
+    { name: 'D&D Beyond – Règles des mécaniques de dés', url: 'https://www.dndbeyond.com/sources/basic-rules/using-ability-scores' },
+    { name: 'Roll20 – Table de jeu virtuelle et systèmes de dés', url: 'https://roll20.net/' },
+    { name: 'Pathfinder – Référence du système d20', url: 'https://paizo.com/pathfinder' },
+  ],
+  howTo: [
+    { name: 'Composer la réserve de dés', text: 'Cliquez sur les boutons des dés (d4, d6, d8...) pour les ajouter à votre réserve. Chaque clic ajoute un dé du type sélectionné. Vous pouvez mélanger différents types dans le même lancer.' },
+    { name: 'Ajuster le modificateur', text: 'Utilisez les boutons "+" et "−" à côté du modificateur pour appliquer des bonus ou des pénalités (comme le modificateur de caractéristique dans D&D). Le modificateur est automatiquement ajouté au total.' },
+    { name: 'Lancer les dés', text: 'Appuyez sur le bouton "Lancer les dés". Le panneau de droite affiche le total final et le détail de chaque dé individuel, avec les critiques (maximum) en vert et les échecs (minimum) en rouge.' },
+    { name: 'Consulter l\'historique', text: 'Chaque lancer est enregistré dans l\'historique avec l\'expression de dés utilisée, le résultat total et l\'heure exacte. Vous pouvez effacer l\'historique avec le bouton correspondant.' },
+  ],
+  schemas: []
+};

package/src/tool/dice-roller/index.ts

@@ -0,0 +1,37 @@
+import type { CreativeToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import DiceRollerComponent from './component.astro';
+import DiceRollerSEO from './seo.astro';
+import DiceRollerBibliography from './bibliography.astro';
+
+export interface DiceRollerUI {
+  [key: string]: string;
+  title: string;
+  description: string;
+  rollBtn: string;
+  totalLabel: string;
+  historyLabel: string;
+  clearHistoryBtn: string;
+  faqTitle: string;
+  bibliographyTitle: string;
+}
+
+export type DiceRollerLocaleContent = ToolLocaleContent<DiceRollerUI>;
+
+export const diceRoller: CreativeToolEntry<DiceRollerUI> = {
+  id: 'dice-roller',
+  icons: { bg: 'mdi:dice-6', fg: 'mdi:refresh' },
+  i18n: {
+    es: () => import('./i18n/es').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+  },
+};
+
+export { DiceRollerComponent, DiceRollerSEO, DiceRollerBibliography };
+
+export const DICE_ROLLER_TOOL: ToolDefinition = {
+  entry: diceRoller,
+  Component: DiceRollerComponent,
+  SEOComponent: DiceRollerSEO,
+  BibliographyComponent: DiceRollerBibliography,
+};

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

@@ -0,0 +1,14 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { diceRoller } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await diceRoller.i18n[locale]?.();
+---
+
+{content && <SEORenderer content={{ locale, sections: content.seo }} />}