script.js

let rollCount = 0;

function rollDice() {
  const btn = document.getElementById('roll-btn');
  const d20 = document.getElementById('d20');
  const numberEl = document.getElementById('dice-number');
  const label = document.getElementById('result-label');
  const historyList = document.getElementById('history-list');

  btn.disabled = true;

  // Animate
  d20.classList.remove('rolling');
  void d20.offsetWidth; // reflow to restart animation
  d20.classList.add('rolling');

  // Flash numbers during roll
  let flashes = 0;
  const flashInterval = setInterval(() => {
    numberEl.textContent = Math.ceil(Math.random() * 20);
    flashes++;
    if (flashes >= 10) clearInterval(flashInterval);
  }, 50);

  setTimeout(() => {
    const result = Math.ceil(Math.random() * 20);
    numberEl.textContent = result;

    label.className = 'result-label';
    if (result === 20) {
      label.textContent = 'Natural 20! Critical Hit!';
      label.classList.add('nat20');
    } else if (result === 1) {
      label.textContent = 'Natural 1! Critical Fail!';
      label.classList.add('nat1');
    } else {
      label.textContent = `You rolled a ${result}`;
    }

    // Add to history
    rollCount++;
    const li = document.createElement('li');
    if (result === 20) li.classList.add('nat20');
    if (result === 1) li.classList.add('nat1');
    li.innerHTML = `
      <span class="roll-label">Roll #${rollCount}</span>
      <span class="roll-num">${result}</span>
    `;
    historyList.prepend(li);

    btn.disabled = false;
  }, 650);
}

// Also allow clicking the dice itself
document.getElementById('d20').addEventListener('click', rollDice);