From 01ddfc8428a3bd1090678c6b4e499c83158ee597 Mon Sep 17 00:00:00 2001
From: emil <emil28092005@gmail.com>
Date: Sat, 9 May 2026 13:42:16 +0300
Subject: [PATCH] feat: add dice generator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds /generators/dice/ with configurable count (1–20) and standard RPG sides (d4/d6/d8/d10/d12/d20/d100). Shows individual rolls with colour-coded min/max, running total, and clipboard copy in NdS=total format.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/generators/DiceGenerator.astro | 170 ++++++++++++++++++
 src/data/generators.ts                        |   2 +-
 src/pages/generators/dice.astro               |  63 +++++++
 3 files changed, 234 insertions(+), 1 deletion(-)
 create mode 100644 src/components/generators/DiceGenerator.astro
 create mode 100644 src/pages/generators/dice.astro

diff --git a/src/components/generators/DiceGenerator.astro b/src/components/generators/DiceGenerator.astro
new file mode 100644
index 0000000..42543dd
--- /dev/null
+++ b/src/components/generators/DiceGenerator.astro
@@ -0,0 +1,170 @@
+---
+// Interactive dice generator — runs on the client via inline script
+---
+
+<div id="dice-generator" class="mt-8">
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+    <div>
+      <label for="dg-count" class="block text-sm font-medium text-zinc-400 mb-1">Number of dice</label>
+      <input
+        id="dg-count"
+        type="number"
+        value="2"
+        min="1"
+        max="20"
+        class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
+        aria-label="Number of dice to roll"
+      />
+    </div>
+    <div>
+      <label class="block text-sm font-medium text-zinc-400 mb-1">Sides</label>
+      <div class="flex flex-wrap gap-2" role="radiogroup" aria-label="Dice sides">
+        {['4','6','8','10','12','20','100'].map((s) => (
+          <label class="cursor-pointer">
+            <input type="radio" name="dg-sides" value={s} class="sr-only peer" checked={s === '6'} />
+            <span class="inline-flex items-center justify-center w-10 h-10 rounded-lg border border-zinc-700 text-sm font-semibold text-zinc-400 peer-checked:border-[#534AB7] peer-checked:text-[#534AB7] peer-checked:bg-[#534AB7]/10 hover:border-zinc-500 transition-colors select-none">
+              d{s}
+            </span>
+          </label>
+        ))}
+      </div>
+    </div>
+  </div>
+
+  <p
+    id="dg-error"
+    role="alert"
+    aria-live="polite"
+    class="mt-3 text-sm text-red-500 hidden"
+  ></p>
+
+  <div class="my-10 min-h-28 flex flex-col items-center justify-center gap-4">
+    <div
+      id="dg-dice"
+      class="flex flex-wrap justify-center gap-2"
+      aria-live="polite"
+      aria-label="Dice results"
+    ></div>
+
+    <div id="dg-total-wrap" class="hidden flex items-center gap-2">
+      <span class="text-sm text-zinc-500">Total</span>
+      <span id="dg-total" class="text-2xl font-bold tabular-nums text-zinc-100"></span>
+    </div>
+
+    <button
+      id="dg-copy-btn"
+      type="button"
+      aria-label="Copy results to clipboard"
+      class="invisible inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
+    >
+      <span id="dg-copy-label">Copy</span>
+      <span id="dg-copy-icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
+          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
+        </svg>
+      </span>
+      <span id="dg-check-icon" class="hidden text-[#534AB7]" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M20 6 9 17l-5-5"/>
+        </svg>
+      </span>
+    </button>
+  </div>
+
+  <div class="flex justify-center">
+    <button
+      id="dg-btn"
+      type="button"
+      class="w-full sm:w-auto px-8 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer"
+    >
+      Roll
+    </button>
+  </div>
+</div>
+
+<script>
+  const countInput  = document.getElementById('dg-count')      as HTMLInputElement;
+  const btn         = document.getElementById('dg-btn')        as HTMLButtonElement;
+  const copyBtn     = document.getElementById('dg-copy-btn')   as HTMLButtonElement;
+  const diceEl      = document.getElementById('dg-dice')       as HTMLDivElement;
+  const totalWrap   = document.getElementById('dg-total-wrap') as HTMLDivElement;
+  const totalEl     = document.getElementById('dg-total')      as HTMLSpanElement;
+  const errorEl     = document.getElementById('dg-error')      as HTMLParagraphElement;
+  const copyLabel   = document.getElementById('dg-copy-label') as HTMLSpanElement;
+  const copyIcon    = document.getElementById('dg-copy-icon')  as HTMLSpanElement;
+  const checkIcon   = document.getElementById('dg-check-icon') as HTMLSpanElement;
+
+  let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
+  let lastRolls: number[] = [];
+
+  function getSelectedSides(): number {
+    const radio = document.querySelector('input[name="dg-sides"]:checked') as HTMLInputElement;
+    return parseInt(radio?.value ?? '6', 10);
+  }
+
+  function showError(msg: string) {
+    errorEl.textContent = msg;
+    errorEl.classList.remove('hidden');
+  }
+
+  function clearError() {
+    errorEl.textContent = '';
+    errorEl.classList.add('hidden');
+  }
+
+  function roll() {
+    const count = parseInt(countInput.value, 10);
+    const sides = getSelectedSides();
+
+    if (!Number.isInteger(count) || count < 1) { showError('Number of dice must be at least 1.'); return; }
+    if (count > 20) { showError('Maximum 20 dice at once.'); return; }
+
+    clearError();
+
+    lastRolls = Array.from({ length: count }, () => Math.floor(Math.random() * sides) + 1);
+    const total = lastRolls.reduce((s, n) => s + n, 0);
+
+    diceEl.innerHTML = '';
+    lastRolls.forEach((val) => {
+      const die = document.createElement('span');
+      die.textContent = String(val);
+      const isMax = val === sides;
+      const isMin = val === 1;
+      die.className = [
+        'inline-flex items-center justify-center min-w-[2.75rem] h-11 px-2 rounded-lg border text-sm font-bold tabular-nums transition-colors',
+        isMax ? 'border-[#534AB7] text-[#534AB7] bg-[#534AB7]/10' :
+        isMin ? 'border-red-700/50 text-red-400 bg-red-900/10' :
+                'border-zinc-700 text-zinc-100 bg-zinc-900',
+      ].join(' ');
+      diceEl.appendChild(die);
+    });
+
+    totalEl.textContent = String(total);
+    totalWrap.classList.remove('hidden');
+    copyBtn.classList.remove('invisible');
+    copyLabel.textContent = 'Copy';
+  }
+
+  async function copyResults() {
+    if (!lastRolls.length) return;
+    const sides = getSelectedSides();
+    const text = `${lastRolls.join(', ')} (${lastRolls.length}d${sides} = ${lastRolls.reduce((s, n) => s + n, 0)})`;
+    await navigator.clipboard.writeText(text);
+
+    copyIcon.classList.add('hidden');
+    checkIcon.classList.remove('hidden');
+    copyLabel.textContent = 'Copied';
+
+    if (copyRevertTimer) clearTimeout(copyRevertTimer);
+    copyRevertTimer = setTimeout(() => {
+      checkIcon.classList.add('hidden');
+      copyIcon.classList.remove('hidden');
+      copyLabel.textContent = 'Copy';
+    }, 1500);
+  }
+
+  btn.addEventListener('click', roll);
+  copyBtn.addEventListener('click', copyResults);
+  countInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') roll(); });
+</script>
diff --git a/src/data/generators.ts b/src/data/generators.ts
index 012f729..ba12ae7 100644
--- a/src/data/generators.ts
+++ b/src/data/generators.ts
@@ -40,7 +40,7 @@ export const generators: Generator[] = [
     title: 'Dice',
     description: 'Roll one or more dice with any number of sides.',
     icon: 'dice-6',
-    status: 'coming-soon',
+    status: 'live',
   },
   {
     slug: 'cards',
diff --git a/src/pages/generators/dice.astro b/src/pages/generators/dice.astro
new file mode 100644
index 0000000..0c505d3
--- /dev/null
+++ b/src/pages/generators/dice.astro
@@ -0,0 +1,63 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import DiceGenerator from '../../components/generators/DiceGenerator.astro';
+import AdBanner from '../../components/AdBanner.astro';
+import { generators } from '../../data/generators';
+
+const generator = generators.find((g) => g.slug === 'dice')!;
+---
+
+<BaseLayout
+  title={`${generator.title} Generator — Randify`}
+  description={generator.description}
+>
+  <div class="max-w-2xl mx-auto px-4 py-12 sm:py-20">
+    <nav aria-label="Breadcrumb" class="mb-10">
+      <a
+        href="/"
+        class="inline-flex items-center gap-1.5 text-sm text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
+        aria-label="Back to all generators"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m15 18-6-6 6-6"/>
+        </svg>
+        All generators
+      </a>
+    </nav>
+
+    <header class="mb-2">
+      <div class="flex items-center gap-2 mb-4">
+        <span
+          class="inline-block w-2.5 h-2.5 rounded-full bg-[#534AB7]"
+          aria-hidden="true"
+        ></span>
+        <span class="text-sm font-medium text-zinc-400 uppercase tracking-widest">randify</span>
+      </div>
+      <h1 class="text-3xl sm:text-4xl font-bold text-zinc-100">
+        {generator.title} Generator
+      </h1>
+      <p class="mt-2 text-base text-zinc-400">{generator.description}</p>
+    </header>
+
+    <main>
+      <DiceGenerator />
+    </main>
+
+    <div class="mt-12 grid grid-cols-3 gap-3">
+      <AdBanner size="tile" />
+      <AdBanner size="tile" />
+      <AdBanner size="tile" />
+    </div>
+  </div>
+</BaseLayout>