@jjlmoya/utils-tabletop 1.3.0

package/src/tool/dice-roller-simulator/client.ts

@@ -0,0 +1,273 @@
+import { spawnParticle, spawnRollPop } from './modules/particles';
+import { drawDistributionChart } from './modules/chart';
+import { getHistory, saveHistory, renderHistory } from './modules/history';
+
+const rollButton = document.getElementById('roll-button') as HTMLButtonElement;
+const clearHistoryBtn = document.getElementById('clear-history-btn') as HTMLElement;
+const clearPoolBtn = document.getElementById('clear-pool-btn') as HTMLElement;
+
+const modifierInput = document.getElementById('modifier-input') as HTMLInputElement;
+const modDecBtn = document.getElementById('mod-dec-btn') as HTMLElement;
+const modIncBtn = document.getElementById('mod-inc-btn') as HTMLElement;
+
+const rollArena = document.getElementById('roll-arena') as HTMLElement;
+const trayRim = document.querySelector('.tray-rim') as HTMLElement;
+const arenaPlaceholder = document.getElementById('arena-placeholder') as HTMLElement;
+const diceResultsContainer = document.getElementById('dice-results-container') as HTMLElement;
+
+const rollResultBanner = document.getElementById('roll-result-banner') as HTMLElement;
+const resultTotalNumber = document.getElementById('result-total-number') as HTMLElement;
+const resultBreakdownDisplay = document.getElementById('result-breakdown-display') as HTMLElement;
+
+const totalRollsVal = document.getElementById('total-rolls-val') as HTMLElement;
+const averageRollVal = document.getElementById('average-roll-val') as HTMLElement;
+const lastRollVal = document.getElementById('last-roll-val') as HTMLElement;
+const totalRollsBadge = document.getElementById('total-rolls-badge') as HTMLElement;
+
+const historyList = document.getElementById('history-list') as HTMLElement;
+const noHistoryMsg = document.getElementById('no-history-msg') as HTMLElement;
+const distributionBarsContainer = document.getElementById('distribution-chart-bars') as HTMLElement;
+
+const activePool = new Map<string, number>([['D4', 0], ['D6', 0], ['D8', 0], ['D10', 0], ['D12', 0], ['D20', 0], ['D100', 0]]);
+const maxValues = new Map<string, number>([['D4', 4], ['D6', 6], ['D8', 8], ['D10', 10], ['D12', 12], ['D20', 20], ['D100', 100]]);
+
+const extraTabButtons = document.querySelectorAll('.extra-tab-btn');
+const extraTabPanes = document.querySelectorAll('.extra-tab-pane');
+
+extraTabButtons.forEach(btn => {
+  btn.addEventListener('click', () => {
+    extraTabButtons.forEach(b => b.classList.remove('active'));
+    extraTabPanes.forEach(p => p.classList.remove('active'));
+    btn.classList.add('active');
+    const id = btn.getAttribute('data-extra-tab');
+    if (id) document.getElementById(id)?.classList.add('active');
+  });
+});
+
+function updateRollButtonState() {
+  let totalCount = 0;
+  activePool.forEach(count => totalCount += count);
+  rollButton.disabled = totalCount === 0;
+}
+
+function pulseElement(el: HTMLElement) {
+  if (!el) return;
+  el.classList.remove('pulse-value');
+  void el.offsetWidth;
+  el.classList.add('pulse-value');
+}
+
+function bounceModifierInput() {
+  if (!modifierInput) return;
+  modifierInput.classList.remove('bounce-effect');
+  void modifierInput.offsetWidth;
+  modifierInput.classList.add('bounce-effect');
+}
+
+function callRenderHistory() {
+  const refs = {
+    list: historyList,
+    emptyMsg: noHistoryMsg,
+    totalVal: totalRollsVal,
+    averageVal: averageRollVal,
+    lastVal: lastRollVal,
+    badge: totalRollsBadge,
+  };
+  renderHistory(refs, (totals) => {
+    drawDistributionChart(distributionBarsContainer, totals);
+  });
+  if (totalRollsVal) pulseElement(totalRollsVal);
+  if (averageRollVal) pulseElement(averageRollVal);
+  if (lastRollVal) pulseElement(lastRollVal);
+}
+
+function attachDieControl(row: HTMLElement, btn: HTMLElement | null, offset: number) {
+  if (!btn) return;
+  const dieType = row.getAttribute('data-die-type') || '';
+  const decBtn = row.querySelector('.dec-btn') as HTMLButtonElement;
+  const badge = row.querySelector('.die-counter-badge') as HTMLElement;
+  btn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    const curr = Math.max(0, (activePool.get(dieType) || 0) + offset);
+    activePool.set(dieType, curr);
+    badge.textContent = curr.toString();
+    decBtn.disabled = curr === 0;
+    badge.classList.toggle('hidden', curr === 0);
+    updateRollButtonState();
+    const rect = row.getBoundingClientRect();
+    const txt = offset > 0 ? `+${offset}` : `${offset}`;
+    spawnParticle(row, txt, e.clientX - rect.left, e.clientY - rect.top);
+  });
+}
+
+function setupDieRow(row: Element) {
+  const rowEl = row as HTMLElement;
+  const decBtn = rowEl.querySelector('.dec-btn') as HTMLElement;
+  const incBtn = rowEl.querySelector('.inc-btn') as HTMLElement;
+  const mainBtn = rowEl.querySelector('.die-main-button') as HTMLElement;
+  attachDieControl(rowEl, decBtn, -1);
+  attachDieControl(rowEl, incBtn, 1);
+  attachDieControl(rowEl, mainBtn, 1);
+}
+
+document.querySelectorAll('.die-control-row').forEach(row => {
+  setupDieRow(row);
+});
+
+clearPoolBtn.addEventListener('click', () => {
+  activePool.forEach((_, key) => activePool.set(key, 0));
+  document.querySelectorAll('.die-control-row').forEach(row => {
+    const decBtn = row.querySelector('.dec-btn') as HTMLButtonElement;
+    const countBadge = row.querySelector('.die-counter-badge') as HTMLElement;
+    countBadge.textContent = '0';
+    countBadge.classList.add('hidden');
+    decBtn.disabled = true;
+  });
+  updateRollButtonState();
+});
+
+modDecBtn.addEventListener('click', (e) => {
+  const val = parseInt(modifierInput.value) || 0;
+  modifierInput.value = (val - 1).toString();
+  bounceModifierInput();
+  const rect = modifierInput.parentElement?.getBoundingClientRect();
+  if (rect) {
+    spawnParticle(modifierInput.parentElement as HTMLElement, '-1', e.clientX - rect.left, e.clientY - rect.top);
+  }
+});
+
+modIncBtn.addEventListener('click', (e) => {
+  const val = parseInt(modifierInput.value) || 0;
+  modifierInput.value = (val + 1).toString();
+  bounceModifierInput();
+  const rect = modifierInput.parentElement?.getBoundingClientRect();
+  if (rect) {
+    spawnParticle(modifierInput.parentElement as HTMLElement, '+1', e.clientX - rect.left, e.clientY - rect.top);
+  }
+});
+
+function triggerFeltImpact() {
+  if (trayRim) {
+    trayRim.classList.remove('felt-impact');
+    void trayRim.offsetWidth;
+    trayRim.classList.add('felt-impact');
+    setTimeout(() => trayRim.classList.remove('felt-impact'), 300);
+  }
+}
+
+function updateBanner(rolls: { type: string; value: number }[], modifier: number, total: number) {
+  if (!rollResultBanner || !resultTotalNumber || !resultBreakdownDisplay) return;
+  resultTotalNumber.textContent = total.toString();
+  const diceBreakdownHtml = rolls.map(r => {
+    const typeLower = r.type.toLowerCase();
+    const maxVal = maxValues.get(r.type) || 6;
+    let extraClass = '';
+    if (r.value === maxVal) {
+      extraClass = ' die-critical';
+    } else if (r.value === 1) {
+      extraClass = ' die-fumble';
+    }
+    return `<span class="breakdown-die-tag${extraClass}" data-die-type="${typeLower}">${r.value}</span>`;
+  }).join(' <span class="breakdown-operator">+</span> ');
+  let finalHtml = diceBreakdownHtml;
+  if (modifier !== 0) {
+    const sign = modifier >= 0 ? '+' : '-';
+    finalHtml += ` <span class="breakdown-operator">${sign}</span> <span class="breakdown-modifier-tag">${Math.abs(modifier)}</span>`;
+  }
+  resultBreakdownDisplay.innerHTML = finalHtml;
+  rollResultBanner.classList.remove('hidden');
+  rollResultBanner.classList.remove('banner-pop-effect');
+  void rollResultBanner.offsetWidth;
+  rollResultBanner.classList.add('banner-pop-effect');
+}
+
+function rollDiceTumble(selectedDice: { type: string; max: number }[], visualDiceEls: HTMLElement[]): Promise<{ type: string; value: number }[]> {
+  return new Promise((resolve) => {
+    const intervalId = setInterval(() => {
+      visualDiceEls.forEach((el, index) => {
+        const d = selectedDice[index];
+        el.textContent = (Math.floor(Math.random() * d.max) + 1).toString();
+      });
+    }, 60);
+    setTimeout(() => {
+      clearInterval(intervalId);
+      const results = visualDiceEls.map((el, index) => {
+        const d = selectedDice[index];
+        el.classList.remove('rolling-pulse');
+        const val = Math.floor(Math.random() * d.max) + 1;
+        if (val === d.max) {
+          el.classList.add('die-critical');
+          el.innerHTML = `<span class="die-val">${val}</span><svg class="die-svg-icon-crit" viewBox="0 0 24 24"><path fill="currentColor" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>`;
+        } else if (val === 1) {
+          el.classList.add('die-fumble');
+          el.innerHTML = `<span class="die-val">${val}</span><svg class="die-svg-icon-fumble" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M11,7V13H13V7H11M11,15V17H13V15H11Z"/></svg>`;
+        } else {
+          el.textContent = val.toString();
+        }
+        return { type: d.type, value: val };
+      });
+      resolve(results);
+    }, 500);
+  });
+}
+
+function createVisualDice(selectedDice: { type: string; max: number }[]): HTMLElement[] {
+  return selectedDice.map((d) => {
+    const el = document.createElement('div');
+    el.className = 'visual-die rolling-pulse';
+    el.setAttribute('data-die-type', d.type.toLowerCase());
+    el.textContent = '?';
+    diceResultsContainer.appendChild(el);
+    return el;
+  });
+}
+
+function saveRollLog(rolls: { type: string; value: number }[], modifier: number, total: number) {
+  const history = getHistory();
+  history.push({
+    id: 'roll_' + Date.now(),
+    timestamp: new Date().toISOString(),
+    dice: rolls.map(r => `${r.type.toLowerCase()}:${r.value}`),
+    modifier,
+    total,
+  });
+  saveHistory(history);
+  callRenderHistory();
+}
+
+async function onRoll() {
+  const selectedDice: { type: string; max: number }[] = [];
+  activePool.forEach((count, type) => {
+    const max = maxValues.get(type) || 6;
+    for (let i = 0; i < count; i++) {
+      selectedDice.push({ type, max });
+    }
+  });
+  if (selectedDice.length === 0) return;
+  arenaPlaceholder.style.display = 'none';
+  diceResultsContainer.innerHTML = '';
+  if (rollResultBanner) rollResultBanner.classList.add('hidden');
+  rollButton.disabled = true;
+  const visualDiceEls = createVisualDice(selectedDice);
+  const rolls = await rollDiceTumble(selectedDice, visualDiceEls);
+  const modifier = parseInt(modifierInput.value) || 0;
+  const total = rolls.reduce((acc, r) => acc + r.value, 0) + modifier;
+  triggerFeltImpact();
+  spawnRollPop(rollArena, total);
+  updateBanner(rolls, modifier, total);
+  saveRollLog(rolls, modifier, total);
+  updateRollButtonState();
+}
+
+rollButton.addEventListener('click', onRoll);
+
+clearHistoryBtn.addEventListener('click', () => {
+  saveHistory([]);
+  callRenderHistory();
+  arenaPlaceholder.style.display = 'block';
+  diceResultsContainer.innerHTML = '';
+  rollResultBanner?.classList.add('hidden');
+});
+
+updateRollButtonState();
+callRenderHistory();

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

@@ -0,0 +1,75 @@
+---
+import DiceGrid from './components/DiceGrid.astro';
+import RollHistorySection from './components/RollHistorySection.astro';
+import StatsPanel from './components/StatsPanel.astro';
+import RollResultBanner from './components/RollResultBanner.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
+  <div class="tabletop-gaming-dashboard">
+    <div class="forge-and-tray-grid">
+      <DiceGrid labels={ui} />
+      
+      <div class="dashboard-center">
+        <div class="rolling-tray-container">
+          <div class="tray-rim">
+            <div class="tray-felt" id="roll-arena">
+              <div class="felt-placeholder" id="arena-placeholder">
+                <svg viewBox="0 0 100 100" class="felt-crest-svg" aria-hidden="true">
+                  <circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-opacity="0.15" stroke-width="1" />
+                  <circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" stroke-opacity="0.08" stroke-width="1" stroke-dasharray="3,3" />
+                  
+                  <polygon points="50,15 80,32 80,68 50,85 20,68 20,32" fill="currentColor" fill-opacity="0.03" stroke="currentColor" stroke-width="2" />
+                  
+                  <polygon points="50,38 72,50 50,75 28,50" fill="none" stroke="currentColor" stroke-width="1.5" />
+                  <line x1="50" y1="15" x2="50" y2="38" stroke="currentColor" stroke-width="1.5" />
+                  <line x1="20" y1="32" x2="28" y2="50" stroke="currentColor" stroke-width="1.5" />
+                  <line x1="80" y1="32" x2="72" y2="50" stroke="currentColor" stroke-width="1.5" />
+                  <line x1="20" y1="68" x2="28" y2="50" stroke="currentColor" stroke-width="1.5" />
+                  <line x1="80" y1="68" x2="72" y2="50" stroke="currentColor" stroke-width="1.5" />
+                  <line x1="50" y1="85" x2="50" y2="75" stroke="currentColor" stroke-width="1.5" />
+                  <line x1="28" y1="50" x2="50" y2="75" stroke="currentColor" stroke-width="1.5" />
+                  <line x1="72" y1="50" x2="50" y2="75" stroke="currentColor" stroke-width="1.5" />
+                  
+                  <text x="50" y="58" font-size="12" font-weight="900" text-anchor="middle" fill="currentColor" font-family="'Outfit', sans-serif">20</text>
+                </svg>
+                <p class="felt-hint-text">Add dice to roll</p>
+              </div>
+              <div class="felt-dice-container" id="dice-results-container"></div>
+            </div>
+          </div>
+        </div>
+
+        <RollResultBanner />
+
+        <button type="button" id="roll-button" class="btn-roll-hero" disabled>
+          ROLL DICE
+        </button>
+      </div>
+    </div>
+
+    <div class="tabletop-extra-tabs">
+      <div class="tabs-nav">
+        <button type="button" class="extra-tab-btn active" data-extra-tab="logs-panel">Roll Logs</button>
+        <button type="button" class="extra-tab-btn" data-extra-tab="stats-panel">Statistics</button>
+      </div>
+      
+      <div class="extra-tabs-content">
+        <div class="extra-tab-pane active" id="logs-panel">
+          <RollHistorySection labels={ui} />
+        </div>
+        <div class="extra-tab-pane" id="stats-panel">
+          <StatsPanel labels={ui} />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/dice-roller-simulator/components/DiceGrid.astro

@@ -0,0 +1,55 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+
+const diceTypes = [
+  { name: 'D4', max: 4, icon: 'mdi:triangle' },
+  { name: 'D6', max: 6, icon: 'mdi:square' },
+  { name: 'D8', max: 8, icon: 'mdi:octagram' },
+  { name: 'D10', max: 10, icon: 'mdi:rhombus' },
+  { name: 'D12', max: 12, icon: 'mdi:hexagon-slice-6' },
+  { name: 'D20', max: 20, icon: 'mdi:hexagon-multiple' },
+  { name: 'D100', max: 100, icon: 'mdi:circle-slice-8' },
+];
+---
+
+<div class="dice-forge-panel">
+  <div class="panel-header">
+    <h3>{labels.selectDice || "Dice Selection"}</h3>
+    <button type="button" id="clear-pool-btn" class="btn-text-action">Clear Pool</button>
+  </div>
+
+  <div class="dice-selectors-column">
+    {diceTypes.map((die) => (
+      <div class="die-control-row" data-die-type={die.name} data-die-max={die.max}>
+        <button type="button" class="die-adjust-btn dec-btn" disabled aria-label="Decrease">-</button>
+        
+        <div class="die-main-button" title="Click to add die">
+          <div class="die-visual-icon">
+            <Icon name={die.icon} width="36" height="36" />
+            <span class="die-counter-badge hidden">0</span>
+          </div>
+          <span class="die-name-label">{die.name}</span>
+        </div>
+
+        <button type="button" class="die-adjust-btn inc-btn" aria-label="Increase">+</button>
+      </div>
+    ))}
+  </div>
+
+  <div class="modifier-row-panel">
+    <div class="modifier-box">
+      <span class="config-label">{labels.modifierLabel || "Modifier"}</span>
+      <div class="modifier-input-wrapper">
+        <button type="button" id="mod-dec-btn" class="mod-adjust">-</button>
+        <input type="number" id="modifier-input" class="mod-val-input" value="0" readonly />
+        <button type="button" id="mod-inc-btn" class="mod-adjust">+</button>
+      </div>
+    </div>
+  </div>
+</div>

package/src/tool/dice-roller-simulator/components/RollHistorySection.astro

@@ -0,0 +1,26 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="tabletop-history-panel">
+  <div class="panel-header">
+    <h3>{labels.historyTitle || "Roll Logs"}</h3>
+    <button type="button" id="clear-history-btn" class="btn-clear-all" title={labels.clearButton || "Clear History"}>
+      <Icon name="mdi:trash-can-outline" width="18" height="18" />
+    </button>
+  </div>
+
+  <div class="history-scroll-viewport">
+    <div id="no-history-msg" class="history-empty-message">
+      <Icon name="mdi:dice-multiple-outline" width="48" height="48" class="empty-icon" />
+      <p>{labels.noHistory || "Roll dice to populate log history."}</p>
+    </div>
+    <div id="history-list" class="history-cards-list"></div>
+  </div>
+</div>

package/src/tool/dice-roller-simulator/components/RollResultBanner.astro

@@ -0,0 +1,10 @@
+---
+---
+
+<div id="roll-result-banner" class="roll-result-banner hidden">
+  <div class="banner-total">
+    <span class="banner-total-label">Result</span>
+    <span id="result-total-number" class="banner-total-value">0</span>
+  </div>
+  <div id="result-breakdown-display" class="banner-breakdown">0</div>
+</div>

package/src/tool/dice-roller-simulator/components/StatsPanel.astro

@@ -0,0 +1,36 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="stats-showcase-panel">
+  <div class="stats-glow-grid">
+    <div class="stat-glass-card">
+      <span class="stat-card-title">{labels.totalRolls || "Total Rolls"}</span>
+      <span id="total-rolls-val" class="stat-card-number">0</span>
+    </div>
+    <div class="stat-glass-card">
+      <span class="stat-card-title">{labels.averageRoll || "Average"}</span>
+      <span id="average-roll-val" class="stat-card-number">--</span>
+    </div>
+    <div class="stat-glass-card">
+      <span class="stat-card-title">{labels.lastRoll || "Last Roll"}</span>
+      <span id="last-roll-val" class="stat-card-number">--</span>
+    </div>
+  </div>
+
+  <div class="distribution-chart-wrapper">
+    <div class="chart-header">
+      <h4>Roll Outcomes Distribution</h4>
+      <span class="chart-subtitle">Frequency of totals</span>
+    </div>
+    <div class="css-chart-viewport">
+      <div id="distribution-chart-bars" class="distribution-bars-container">
+        <div class="chart-empty-state">No rolls recorded yet</div>
+      </div>
+    </div>
+  </div>
+</div>