From 7c5f67eab832e520e14354e00aa3287fcc09d1ae Mon Sep 17 00:00:00 2001
From: emil <emil28092005@gmail.com>
Date: Sat, 9 May 2026 17:18:16 +0300
Subject: [PATCH] Upgrade Dice Generator: notation input,
 advantage/disadvantage, history, D&D presets

Adds XdY+Z notation parsing with bidirectional sync, 3-way advantage/disadvantage
toggle, last-10 roll history in sessionStorage, and D&D quick presets (Attack,
Damage, Fireball, Sneak Attack, Stat Roll). Updates SEO meta and SeoBlock content
in both EN and RU pages.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/generators/DiceGenerator.astro | 513 +++++++++++++++---
 src/data/generators.ts                        |   8 +-
 src/pages/generators/dice.astro               |  10 +-
 src/pages/ru/generators/dice.astro            |   9 +-
 4 files changed, 463 insertions(+), 77 deletions(-)

diff --git a/src/components/generators/DiceGenerator.astro b/src/components/generators/DiceGenerator.astro
index 5ba14de..26ef6eb 100644
--- a/src/components/generators/DiceGenerator.astro
+++ b/src/components/generators/DiceGenerator.astro
@@ -2,9 +2,57 @@
 import { useT } from '../../i18n/translations';
 const isRu = Astro.url.pathname.startsWith('/ru');
 const T = useT(isRu ? 'ru' : 'en');
+
+const notationLabel       = isRu ? 'Нотация'                                      : 'Notation';
+const notationPlaceholder = isRu ? 'напр. 2d6+3, 1d20, 4d4-1'                    : 'e.g. 2d6+3, 1d20, 4d4-1';
+const modeLabel           = isRu ? 'Режим'                                         : 'Mode';
+const modeNormal          = isRu ? 'Обычный'                                       : 'Normal';
+const modeAdvantage       = isRu ? 'Преимущество'                                  : 'Advantage';
+const modeDisadvantage    = isRu ? 'Помеха'                                        : 'Disadvantage';
+const advOnly             = isRu ? 'Преимущество работает только с одним кубиком' : 'Advantage only works with a single die';
+const historyTitle        = isRu ? 'История бросков'                               : 'Roll history';
+const clearHistory        = isRu ? 'Очистить историю'                              : 'Clear history';
+
+const presets = [
+  { label: isRu ? 'Атака'          : 'Attack',       notation: '1d20', stat: false },
+  { label: isRu ? 'Урон (1d8)'     : 'Damage (1d8)', notation: '1d8+3', stat: false },
+  { label: isRu ? 'Огненный шар'   : 'Fireball',     notation: '8d6',  stat: false },
+  { label: isRu ? 'Скрытая атака'  : 'Sneak Attack', notation: '3d6',  stat: false },
+  { label: isRu ? 'Характеристика' : 'Stat Roll',    notation: '4d6',  stat: true  },
+];
 ---
 
 <div id="dice-generator" class="mt-8">
+
+  <!-- Quick presets -->
+  <div class="flex flex-wrap gap-2 mb-5" role="group" aria-label={isRu ? 'Быстрые пресеты' : 'Quick presets'}>
+    {presets.map((p) => (
+      <button
+        type="button"
+        class="dg-preset px-3 py-1.5 rounded-lg border border-zinc-700 text-sm font-medium text-zinc-400 hover:border-[#534AB7] hover:text-[#534AB7] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] transition-colors cursor-pointer"
+        data-preset={p.notation}
+        data-stat-roll={p.stat ? '1' : undefined}
+      >
+        {p.label}
+      </button>
+    ))}
+  </div>
+
+  <!-- Notation input -->
+  <div class="mb-4">
+    <label for="dg-notation" class="block text-sm font-medium text-zinc-400 mb-1">{notationLabel}</label>
+    <input
+      id="dg-notation"
+      type="text"
+      placeholder={notationPlaceholder}
+      autocomplete="off"
+      spellcheck="false"
+      class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-base font-mono focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors"
+    />
+    <p id="dg-notation-err" class="mt-1 text-xs text-red-500 hidden"></p>
+  </div>
+
+  <!-- Count + Sides -->
   <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">{T.numberOfDice}</label>
@@ -33,26 +81,43 @@ const T = useT(isRu ? 'ru' : 'en');
     </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">
+  <!-- Advantage / Disadvantage toggle -->
+  <div class="mt-4">
+    <label class="block text-sm font-medium text-zinc-400 mb-1.5">{modeLabel}</label>
     <div
-      id="dg-dice"
-      class="flex flex-wrap justify-center gap-2"
-      aria-live="polite"
-      aria-label="Dice results"
-    ></div>
+      id="dg-mode-wrap"
+      class="inline-flex rounded-lg border border-zinc-700 overflow-hidden transition-opacity"
+      role="radiogroup"
+      aria-label={modeLabel}
+    >
+      {[
+        { value: 'normal',      label: modeNormal },
+        { value: 'advantage',   label: modeAdvantage },
+        { value: 'disadvantage',label: modeDisadvantage },
+      ].map(({ value, label }, i) => (
+        <label class="cursor-pointer">
+          <input type="radio" name="dg-mode" value={value} class="sr-only peer" checked={value === 'normal'} />
+          <span class={`inline-flex items-center justify-center px-3 sm:px-4 h-9 text-sm font-medium text-zinc-400 peer-checked:text-[#534AB7] peer-checked:bg-[#534AB7]/10 hover:text-zinc-200 transition-colors select-none whitespace-nowrap${i < 2 ? ' border-r border-zinc-700' : ''}`}>
+            {label}
+          </span>
+        </label>
+      ))}
+    </div>
+    <p id="dg-adv-hint" class="mt-1 text-xs text-zinc-600 hidden">{advOnly}</p>
+  </div>
 
+  <!-- Roll error -->
+  <p id="dg-error" role="alert" aria-live="polite" class="mt-3 text-sm text-red-500 hidden"></p>
+
+  <!-- Results -->
+  <div class="my-10 min-h-28 flex flex-col items-center justify-center gap-3">
+    <div id="dg-dice" class="flex flex-wrap justify-center gap-2" aria-live="polite" aria-label="Dice results"></div>
+    <div id="dg-adv-info" class="hidden text-sm font-mono text-zinc-400 text-center px-2"></div>
+    <div id="dg-modifier-line" class="hidden text-sm text-zinc-500 tabular-nums"></div>
     <div id="dg-total-wrap" class="hidden flex items-center gap-2">
-      <span id="dg-total-label" class="text-sm text-zinc-500">{T.total}</span>
+      <span class="text-sm text-zinc-500">{T.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"
@@ -74,6 +139,7 @@ const T = useT(isRu ? 'ru' : 'en');
     </button>
   </div>
 
+  <!-- Roll button -->
   <div class="flex justify-center">
     <button
       id="dg-btn"
@@ -83,80 +149,323 @@ const T = useT(isRu ? 'ru' : 'en');
       {T.roll}
     </button>
   </div>
+
+  <!-- Roll history -->
+  <div id="dg-history-panel" class="hidden mt-10 pt-6 border-t border-zinc-800">
+    <div class="flex items-center justify-between mb-3">
+      <h3 class="text-xs font-semibold uppercase tracking-widest text-zinc-600">{historyTitle}</h3>
+      <button
+        id="dg-clear-btn"
+        type="button"
+        class="text-xs text-zinc-600 hover:text-zinc-300 transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-[#534AB7] rounded"
+      >
+        {clearHistory}
+      </button>
+    </div>
+    <div id="dg-history-list" class="space-y-1"></div>
+  </div>
+
 </div>
 
 <script>
   const isRu = document.documentElement.lang === 'ru';
-  const COPY_LABEL   = isRu ? 'Копировать' : 'Copy';
+
+  const COPY_LABEL   = isRu ? 'Копировать'  : 'Copy';
   const COPIED_LABEL = isRu ? 'Скопировано' : 'Copied';
-  const ERR_AT_LEAST = isRu ? 'Количество кубиков должно быть не менее 1.' : 'Number of dice must be at least 1.';
-  const ERR_MAX      = isRu ? 'Максимум 20 кубиков одновременно.' : 'Maximum 20 dice at once.';
+  const ERR_COUNT    = isRu ? 'Количество кубиков должно быть не менее 1.' : 'Number of dice must be at least 1.';
+  const ERR_MAX      = isRu ? 'Максимум 20 кубиков одновременно.'          : 'Maximum 20 dice at once.';
+  const ERR_NOTATION = isRu ? 'Неверный формат — попробуйте 2d6+3'         : 'Invalid notation — try 2d6+3';
+  const ADV_WORD     = isRu ? 'Преимущество' : 'Advantage';
+  const DIS_WORD     = isRu ? 'Помеха'       : 'Disadvantage';
+  const DROPPED_WORD = isRu ? 'сброшено'     : 'dropped';
 
-  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;
+  // ── DOM refs ────────────────────────────────────────────────────────────────
+  const notationInput  = document.getElementById('dg-notation')      as HTMLInputElement;
+  const notationErr    = document.getElementById('dg-notation-err')  as HTMLParagraphElement;
+  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 advInfoEl      = document.getElementById('dg-adv-info')      as HTMLDivElement;
+  const modifierLine   = document.getElementById('dg-modifier-line') 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;
+  const modeWrap       = document.getElementById('dg-mode-wrap')     as HTMLDivElement;
+  const advHint        = document.getElementById('dg-adv-hint')      as HTMLParagraphElement;
+  const historyPanel   = document.getElementById('dg-history-panel') as HTMLDivElement;
+  const historyList    = document.getElementById('dg-history-list')  as HTMLDivElement;
+  const clearBtn       = document.getElementById('dg-clear-btn')     as HTMLButtonElement;
 
+  // ── State ───────────────────────────────────────────────────────────────────
+  let suppressSync   = false;
+  let statRollMode   = false;
+  let lastCopyText   = '';
   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);
+  const HISTORY_KEY = 'dg-history';
+
+  interface HistoryEntry {
+    notation:     string;
+    rolls:        number[];
+    sides:        number;
+    modifier:     number;
+    total:        number;
+    isStatRoll:   boolean;
+    droppedValue?: number;
+    keptRolls?:   number[];
+    isAdvantage:  boolean;
+    isDisadvantage: boolean;
+    advRolls?:    [number, number];
   }
 
-  function showError(msg: string) { errorEl.textContent = msg; errorEl.classList.remove('hidden'); }
-  function clearError()           { errorEl.textContent = '';  errorEl.classList.add('hidden');    }
+  // ── Notation ────────────────────────────────────────────────────────────────
+  function parseNotation(raw: string): { count: number; sides: number; modifier: number } | null {
+    const s = raw.replace(/\s+/g, '').toLowerCase();
+    const m = s.match(/^(\d*)d(\d+)((?:[+-]\d+)*)$/);
+    if (!m) return null;
+    const count    = m[1] === '' ? 1 : parseInt(m[1], 10);
+    const sides    = parseInt(m[2], 10);
+    if (count < 1 || count > 20 || sides < 1) return null;
+    const parts    = (m[3] || '').match(/[+-]\d+/g) ?? [];
+    const modifier = parts.reduce((sum, p) => sum + parseInt(p, 10), 0);
+    if (Math.abs(modifier) > 999) return null;
+    return { count, sides, modifier };
+  }
 
-  function roll() {
+  function buildNotation(count: number, sides: number, modifier: number): string {
+    let s = `${count}d${sides}`;
+    if (modifier > 0) s += `+${modifier}`;
+    else if (modifier < 0) s += modifier;
+    return s;
+  }
+
+  // ── Control helpers ─────────────────────────────────────────────────────────
+  function getSelectedSides(): number {
+    const r = document.querySelector('input[name="dg-sides"]:checked') as HTMLInputElement | null;
+    return r ? parseInt(r.value, 10) : 6;
+  }
+
+  function setSelectedSides(sides: number): void {
+    (document.querySelectorAll('input[name="dg-sides"]') as NodeListOf<HTMLInputElement>)
+      .forEach(r => { r.checked = parseInt(r.value, 10) === sides; });
+  }
+
+  function getMode(): 'normal' | 'advantage' | 'disadvantage' {
+    const r = document.querySelector('input[name="dg-mode"]:checked') as HTMLInputElement | null;
+    return (r?.value ?? 'normal') as 'normal' | 'advantage' | 'disadvantage';
+  }
+
+  function getCurrentModifier(): number {
+    const raw = notationInput.value.trim();
+    if (!raw) return 0;
+    const parsed = parseNotation(raw);
+    return parsed?.modifier ?? 0;
+  }
+
+  function updateModeToggle(): void {
+    const count    = parseInt(countInput.value, 10);
+    const disabled = !isNaN(count) && count > 1;
+    modeWrap.classList.toggle('opacity-40', disabled);
+    modeWrap.classList.toggle('pointer-events-none', disabled);
+    advHint.classList.toggle('hidden', !disabled);
+  }
+
+  // ── Errors ──────────────────────────────────────────────────────────────────
+  function showError(msg: string)       { errorEl.textContent    = msg; errorEl.classList.remove('hidden');    }
+  function clearError()                  { errorEl.textContent    = '';  errorEl.classList.add('hidden');       }
+  function showNotationErr(msg: string)  { notationErr.textContent = msg; notationErr.classList.remove('hidden'); }
+  function clearNotationErr()            { notationErr.textContent = '';  notationErr.classList.add('hidden');    }
+
+  // ── Die chip ────────────────────────────────────────────────────────────────
+  function makeDieChip(val: number, sides: number, extra = ''): HTMLSpanElement {
+    const el = document.createElement('span');
+    el.textContent = String(val);
+    const color = val === sides ? 'border-[#534AB7] text-[#534AB7] bg-[#534AB7]/10'
+                : val === 1     ? 'border-red-700/50 text-red-400 bg-red-900/10'
+                :                  'border-zinc-700 text-zinc-100 bg-zinc-900';
+    el.className = `inline-flex items-center justify-center min-w-[2.75rem] h-11 px-2 rounded-lg border text-sm font-bold tabular-nums ${color} ${extra}`.trim();
+    return el;
+  }
+
+  // Colored HTML span for use in history (innerHTML safe — values are numbers)
+  function dieHtml(val: number, sides: number): string {
+    const cls = val === sides ? 'text-[#534AB7] font-bold'
+              : val === 1     ? 'text-red-400 font-bold'
+              :                  'text-zinc-300';
+    return `<span class="${cls}">${val}</span>`;
+  }
+
+  // ── History ─────────────────────────────────────────────────────────────────
+  function loadHistory(): HistoryEntry[] {
+    try { return JSON.parse(sessionStorage.getItem(HISTORY_KEY) ?? '[]'); } catch { return []; }
+  }
+
+  function saveHistory(h: HistoryEntry[]): void {
+    sessionStorage.setItem(HISTORY_KEY, JSON.stringify(h.slice(0, 10)));
+  }
+
+  function entryHtml(e: HistoryEntry): string {
+    const left = `<span class="text-zinc-500 shrink-0 mr-1">`;
+
+    if (e.isStatRoll && e.keptRolls !== undefined && e.droppedValue !== undefined) {
+      const keptStr = e.keptRolls.map(v => dieHtml(v, e.sides)).join('+');
+      return `${left}[${DROPPED_WORD}: <span class="text-red-400">${e.droppedValue}</span>]</span>`
+           + ` <span class="text-zinc-400">${keptStr} = ${e.total}</span>`;
+    }
+
+    if (e.isAdvantage || e.isDisadvantage) {
+      const [r1, r2] = e.advRolls ?? [0, 0];
+      const prefix   = e.isAdvantage ? ADV_WORD : DIS_WORD;
+      const winner   = e.isAdvantage ? Math.max(r1, r2) : Math.min(r1, r2);
+      const modStr   = e.modifier !== 0
+        ? ` ${e.modifier > 0 ? '+' : ''}${e.modifier} = ${e.total}`
+        : '';
+      return `${left}${prefix}</span>`
+           + ` <span class="text-zinc-400">[${dieHtml(r1, e.sides)}, ${dieHtml(r2, e.sides)}] → ${dieHtml(winner, e.sides)}${modStr}</span>`;
+    }
+
+    // Normal
+    const rollsStr = `[${e.rolls.map(v => dieHtml(v, e.sides)).join(', ')}]`;
+    const modStr   = e.modifier > 0 ? ` +${e.modifier}` : e.modifier < 0 ? ` ${e.modifier}` : '';
+    return `${left}${e.notation}</span>`
+         + ` <span class="text-zinc-600">→</span>`
+         + ` <span class="text-zinc-400">${rollsStr}${modStr} = ${e.total}</span>`;
+  }
+
+  function renderHistory(): void {
+    const h = loadHistory();
+    if (h.length === 0) { historyPanel.classList.add('hidden'); return; }
+    historyPanel.classList.remove('hidden');
+    historyList.innerHTML = h.map(e =>
+      `<div class="flex items-center gap-1.5 text-xs font-mono py-1 border-b border-zinc-800/40 last:border-b-0">${entryHtml(e)}</div>`
+    ).join('');
+  }
+
+  function addToHistory(entry: HistoryEntry): void {
+    const h = loadHistory();
+    h.unshift(entry);
+    saveHistory(h);
+    renderHistory();
+  }
+
+  // ── Get roll params ─────────────────────────────────────────────────────────
+  function getRollParams(): { count: number; sides: number; modifier: number } | null {
+    const raw = notationInput.value.trim();
+    if (raw) {
+      const parsed = parseNotation(raw);
+      if (!parsed) { showNotationErr(ERR_NOTATION); return null; }
+      clearNotationErr();
+      return parsed;
+    }
     const count = parseInt(countInput.value, 10);
     const sides = getSelectedSides();
+    if (!Number.isInteger(count) || count < 1) { showError(ERR_COUNT); return null; }
+    if (count > 20) { showError(ERR_MAX); return null; }
+    return { count, sides, modifier: 0 };
+  }
 
-    if (!Number.isInteger(count) || count < 1) { showError(ERR_AT_LEAST); return; }
-    if (count > 20) { showError(ERR_MAX); return; }
-
+  // ── Roll ────────────────────────────────────────────────────────────────────
+  function roll(): void {
     clearError();
+    const params = getRollParams();
+    if (!params) return;
+    const { count, sides, modifier } = params;
+    const mode     = getMode();
+    const notation = buildNotation(count, sides, modifier);
 
-    lastRolls = Array.from({ length: count }, () => Math.floor(Math.random() * sides) + 1);
-    const total = lastRolls.reduce((s, n) => s + n, 0);
-
+    // Reset secondary display elements
+    advInfoEl.classList.add('hidden');
+    advInfoEl.innerHTML = '';
+    modifierLine.classList.add('hidden');
+    totalWrap.classList.add('hidden');
     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');
+    // ── Stat Roll: 4d6 drop lowest ──────────────────────────────────────────
+    if (statRollMode) {
+      const allRolls   = Array.from({ length: 4 }, () => Math.floor(Math.random() * sides) + 1);
+      const sorted     = [...allRolls].sort((a, b) => a - b);
+      const droppedValue = sorted[0];
+      const keptRolls  = sorted.slice(1);
+      const total      = keptRolls.reduce((s, n) => s + n, 0);
+
+      let droppedUsed = false;
+      allRolls.forEach(v => {
+        const isDrop = v === droppedValue && !droppedUsed;
+        if (isDrop) droppedUsed = true;
+        diceEl.appendChild(makeDieChip(v, sides, isDrop ? 'opacity-40' : ''));
+      });
+
+      advInfoEl.innerHTML = `[${DROPPED_WORD}: <span class="text-red-400">${droppedValue}</span>] ${keptRolls.join('+')} = ${total}`;
+      advInfoEl.classList.remove('hidden');
+
+      lastCopyText = `${keptRolls.join('+')} = ${total}`;
+      addToHistory({ notation: '4d6', rolls: allRolls, sides, modifier: 0, total, isStatRoll: true, droppedValue, keptRolls, isAdvantage: false, isDisadvantage: false });
+
+    // ── Advantage / Disadvantage ────────────────────────────────────────────
+    } else if (mode !== 'normal' && count === 1) {
+      const r1    = Math.floor(Math.random() * sides) + 1;
+      const r2    = Math.floor(Math.random() * sides) + 1;
+      const kept  = mode === 'advantage' ? Math.max(r1, r2) : Math.min(r1, r2);
+      const total = kept + modifier;
+      const prefix = mode === 'advantage' ? ADV_WORD : DIS_WORD;
+
+      let winnerUsed = false;
+      [r1, r2].forEach(v => {
+        const isWinner = v === kept && !winnerUsed;
+        if (isWinner) winnerUsed = true;
+        diceEl.appendChild(makeDieChip(v, sides, isWinner ? '' : 'opacity-40'));
+      });
+
+      const modStr = modifier !== 0
+        ? ` ${modifier > 0 ? '+' : ''}${modifier} = ${total}`
+        : '';
+      advInfoEl.textContent = `${prefix}: [${r1}, ${r2}] → ${kept}${modStr}`;
+      advInfoEl.classList.remove('hidden');
+
+      if (modifier !== 0) {
+        totalEl.textContent = String(total);
+        totalWrap.classList.remove('hidden');
+      }
+
+      lastCopyText = `${prefix}: [${r1}, ${r2}] → ${kept}${modStr}`;
+      addToHistory({ notation, rolls: [kept], sides, modifier, total, isStatRoll: false, isAdvantage: mode === 'advantage', isDisadvantage: mode === 'disadvantage', advRolls: [r1, r2] });
+
+    // ── Normal roll ─────────────────────────────────────────────────────────
+    } else {
+      const rolls   = Array.from({ length: count }, () => Math.floor(Math.random() * sides) + 1);
+      const rollSum = rolls.reduce((s, n) => s + n, 0);
+      const total   = rollSum + modifier;
+
+      rolls.forEach(v => diceEl.appendChild(makeDieChip(v, sides)));
+
+      if (modifier !== 0) {
+        modifierLine.textContent = modifier > 0 ? `+${modifier}` : String(modifier);
+        modifierLine.classList.remove('hidden');
+      }
+
+      totalEl.textContent = String(total);
+      totalWrap.classList.remove('hidden');
+
+      const modStr = modifier > 0 ? ` +${modifier}` : modifier < 0 ? ` ${modifier}` : '';
+      lastCopyText = `${rolls.join(', ')}${modStr} = ${total}`;
+      addToHistory({ notation, rolls, sides, modifier, total, isStatRoll: false, isAdvantage: false, isDisadvantage: false });
+    }
+
     copyBtn.classList.remove('invisible');
     copyLabel.textContent = COPY_LABEL;
   }
 
-  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);
-
+  // ── Copy ────────────────────────────────────────────────────────────────────
+  async function copyResults(): Promise<void> {
+    if (!lastCopyText) return;
+    await navigator.clipboard.writeText(lastCopyText);
     copyIcon.classList.add('hidden');
     checkIcon.classList.remove('hidden');
     copyLabel.textContent = COPIED_LABEL;
-
     if (copyRevertTimer) clearTimeout(copyRevertTimer);
     copyRevertTimer = setTimeout(() => {
       checkIcon.classList.add('hidden');
@@ -165,7 +474,83 @@ const T = useT(isRu ? 'ru' : 'en');
     }, 1500);
   }
 
+  // ── Sync: notation → controls ───────────────────────────────────────────────
+  notationInput.addEventListener('input', () => {
+    const raw = notationInput.value.trim();
+    if (!raw) { clearNotationErr(); statRollMode = false; return; }
+    const parsed = parseNotation(raw);
+    if (!parsed) { showNotationErr(ERR_NOTATION); return; }
+    clearNotationErr();
+    suppressSync = true;
+    countInput.value = String(parsed.count);
+    setSelectedSides(parsed.sides);
+    statRollMode = false;
+    suppressSync = false;
+    updateModeToggle();
+  });
+
+  notationInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') { e.preventDefault(); roll(); }
+  });
+
+  // ── Sync: controls → notation ───────────────────────────────────────────────
+  countInput.addEventListener('input', () => {
+    if (suppressSync) return;
+    statRollMode = false;
+    const count    = parseInt(countInput.value, 10);
+    const sides    = getSelectedSides();
+    const modifier = getCurrentModifier();
+    if (!isNaN(count) && count > 0) {
+      notationInput.value = buildNotation(count, sides, modifier);
+      clearNotationErr();
+    }
+    updateModeToggle();
+  });
+
+  countInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') roll(); });
+
+  document.querySelectorAll('input[name="dg-sides"]').forEach(radio => {
+    radio.addEventListener('change', () => {
+      if (suppressSync) return;
+      statRollMode = false;
+      const count    = parseInt(countInput.value, 10) || 1;
+      const sides    = getSelectedSides();
+      const modifier = getCurrentModifier();
+      notationInput.value = buildNotation(count, sides, modifier);
+      clearNotationErr();
+    });
+  });
+
+  // ── Presets ─────────────────────────────────────────────────────────────────
+  document.querySelectorAll('.dg-preset').forEach(el => {
+    el.addEventListener('click', () => {
+      const notation = el.getAttribute('data-preset')!;
+      const isStat   = el.getAttribute('data-stat-roll') === '1';
+      notationInput.value = notation;
+      clearNotationErr();
+      const parsed = parseNotation(notation);
+      if (parsed) {
+        suppressSync = true;
+        countInput.value = String(parsed.count);
+        setSelectedSides(parsed.sides);
+        suppressSync = false;
+      }
+      statRollMode = isStat;
+      updateModeToggle();
+      roll();
+    });
+  });
+
+  // ── Buttons ─────────────────────────────────────────────────────────────────
   btn.addEventListener('click', roll);
   copyBtn.addEventListener('click', copyResults);
-  countInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') roll(); });
+  clearBtn.addEventListener('click', () => {
+    sessionStorage.removeItem(HISTORY_KEY);
+    renderHistory();
+  });
+
+  // ── Init ────────────────────────────────────────────────────────────────────
+  notationInput.value = buildNotation(parseInt(countInput.value, 10), getSelectedSides(), 0);
+  updateModeToggle();
+  renderHistory();
 </script>
diff --git a/src/data/generators.ts b/src/data/generators.ts
index 74f20d9..f919094 100644
--- a/src/data/generators.ts
+++ b/src/data/generators.ts
@@ -71,12 +71,12 @@ export const generators: Generator[] = [
     description: 'Roll one or more dice with any number of sides.',
     icon: 'dice-6',
     status: 'live',
-    seoTitle: 'Online Dice Roller — d4, d6, d20 and more | Randify',
-    seoDescription: 'Roll virtual dice online. Supports d4, d6, d8, d10, d12, d20 and d100. Roll multiple dice at once — great for D&D, board games and tabletop RPGs.',
+    seoTitle: 'Dice Roller — d4 d6 d8 d10 d12 d20 | D&D Dice | Randify',
+    seoDescription: 'Free online dice roller for D&D and tabletop RPGs. Supports any XdY+Z notation, advantage/disadvantage, roll history, and quick presets for attacks, damage, and stat rolls.',
     ruTitle: 'Кубик',
     ruDescription: 'Бросьте один или несколько кубиков с любым числом граней.',
-    ruSeoTitle: 'Бросить кубик онлайн — d4, d6, d20 | Randify',
-    ruSeoDescription: 'Бросайте виртуальные кубики онлайн. Поддержка d4, d6, d8, d10, d12, d20, d100. Отлично для D&D и настольных RPG.',
+    ruSeoTitle: 'Бросить кубик онлайн — d4 d6 d8 d10 d12 d20 | D&D | Randify',
+    ruSeoDescription: 'Бесплатный онлайн-бросок кубиков для D&D и настольных RPG. Поддерживает нотацию XdY+Z, преимущество/помеху, историю бросков и быстрые пресеты.',
   },
   {
     slug: 'cards',
diff --git a/src/pages/generators/dice.astro b/src/pages/generators/dice.astro
index e66f3b1..cf99023 100644
--- a/src/pages/generators/dice.astro
+++ b/src/pages/generators/dice.astro
@@ -61,16 +61,16 @@ const generator = generators.find((g) => g.slug === 'dice')!;
 
     <SeoBlock
       howTo={[
-        'Select the die type: d4, d6, d8, d10, d12, d20, or d100.',
-        'Set how many dice to roll (1–20).',
+        'Type a notation like 2d6+3 or 1d20 — or use the die buttons and count.',
+        'Pick a mode: Normal, Advantage, or Disadvantage (single die only).',
         'Click Roll — each die result appears with the total sum.',
         'Maximum rolls are highlighted in purple; ones are highlighted in red.',
       ]}
       whenTo={[
         'Rolling dice for D&D, Pathfinder, or any tabletop RPG.',
-        'Replacing physical dice in board games.',
-        'Simulating probability outcomes in statistics or education.',
-        'Settling disputes with a fair digital dice roll.',
+        'Using dice notation shortcuts like 2d6+3 or 1d20 for fast rolling.',
+        'Rolling with advantage or disadvantage for D&D 5e mechanics.',
+        'Generating character stats with the 4d6 drop-lowest method.',
       ]}
     />
   </div>
diff --git a/src/pages/ru/generators/dice.astro b/src/pages/ru/generators/dice.astro
index 7ff73ab..8224b43 100644
--- a/src/pages/ru/generators/dice.astro
+++ b/src/pages/ru/generators/dice.astro
@@ -27,14 +27,15 @@ const generator = generators.find((g) => g.slug === 'dice')!;
     <main><DiceGenerator /></main>
     <div class="mt-12 flex justify-center"><AdBanner size="tile" /></div>
     <SeoBlock lang="ru" howTo={[
-      'Укажите количество кубиков (до 20).',
-      'Выберите количество граней: d4, d6, d8, d10, d12, d20 или d100.',
+      'Введите нотацию, например 2d6+3 или 1d20 — или настройте кубики вручную.',
+      'Выберите режим: Обычный, Преимущество или Помеха (только для одного кубика).',
       'Нажмите «Бросить» — результаты отобразятся мгновенно.',
       'Нажмите «Копировать», чтобы сохранить результат.',
     ]} whenTo={[
       'Броски в настольных ролевых играх (D&D и другие).',
-      'Генерация случайных чисел для настольных игр.',
-      'Проверка вероятностей и симуляции.',
+      'Быстрые броски через нотацию: 2d6+3, 1d20 и любые другие.',
+      'Преимущество и помеха для механик D&D 5e.',
+      'Бросок характеристик: 4d6, отбросить наименьший.',
     ]} />
   </div>
 </BaseLayout>