DICE Roller

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

let diceCount = 1, sides = 6, allTotals = [], historyItems = [];

  function setupToggle(id, cb) {
    document.getElementById(id).querySelectorAll('.toggle-item').forEach(b => {
      b.addEventListener('click', () => {
        document.getElementById(id).querySelectorAll('.toggle-item').forEach(x => x.classList.remove('active'));
        b.classList.add('active');
        cb(parseInt(b.dataset.v));
      });
    });
  }
  setupToggle('count-group', v => diceCount = v);
  setupToggle('sides-group', v => sides = v);

  document.getElementById('roll-btn').addEventListener('click', roll);
  document.addEventListener('keydown', e => { if (e.code === 'Space') { e.preventDefault(); roll(); } });

  function roll() {
    const results = [];
    for (let i = 0; i < diceCount; i++) results.push(Math.floor(Math.random() * sides) + 1);
    const total = results.reduce((a, b) => a + b, 0);
    allTotals.push(total);
    historyItems.unshift({ dice: `${diceCount}d${sides}`, results: [...results], total });
    if (historyItems.length > 20) historyItems.pop();

    const container = document.getElementById('dice-results');
    container.innerHTML = results.map(r => `<div class="die rolling">${r}</div>`).join('');
    document.getElementById('val-total').textContent = diceCount > 1 ? 'Total: ' + total : '';

    const avg = allTotals.reduce((a, b) => a + b, 0) / allTotals.length;
    document.getElementById('val-avg').textContent = avg.toFixed(1);
    document.getElementById('val-max').textContent = Math.max(...allTotals);
    document.getElementById('val-min').textContent = Math.min(...allTotals);

    document.getElementById('history').innerHTML = historyItems.map(h =>
      `<div class="history-row"><span>${h.dice}: [${h.results.join(', ')}]</span><span style="color:var(--accent);">${h.total}</span></div>`
    ).join('');
  }