@jjlmoya/utils-tabletop 1.3.0 → 1.5.0

package/src/tool/decision-wheel/logic.ts

@@ -0,0 +1,145 @@
+import type { WheelSegment, SpinResultEntry, PresetKey } from './types';
+
+export const SEGMENT_COLORS = [
+  '#3b82f6', '#ef4444', '#22c55e', '#f59e0b',
+  '#8b5cf6', '#ec4899', '#14b8a6', '#f97316',
+  '#6366f1', '#84cc16', '#06b6d4', '#e11d48',
+];
+
+const PRESETS: Record<PresetKey, WheelSegment[]> = {
+  yesno: [
+    { id: 'seg-0', label: 'Yes', color: SEGMENT_COLORS[2], weight: 1 },
+    { id: 'seg-1', label: 'No', color: SEGMENT_COLORS[1], weight: 1 },
+  ],
+  numbers: Array.from({ length: 6 }, (_, i) => ({
+    id: `seg-${i}`,
+    label: String(i + 1),
+    color: SEGMENT_COLORS[i],
+    weight: 1,
+  })),
+  actions: [
+    { id: 'seg-0', label: 'Attack', color: SEGMENT_COLORS[1], weight: 1 },
+    { id: 'seg-1', label: 'Defend', color: SEGMENT_COLORS[0], weight: 1 },
+    { id: 'seg-2', label: 'Explore', color: SEGMENT_COLORS[2], weight: 1 },
+    { id: 'seg-3', label: 'Negotiate', color: SEGMENT_COLORS[3], weight: 1 },
+    { id: 'seg-4', label: 'Rest', color: SEGMENT_COLORS[4], weight: 1 },
+  ],
+  d20: Array.from({ length: 20 }, (_, i) => ({
+    id: `seg-${i}`,
+    label: String(i + 1),
+    color: SEGMENT_COLORS[i % SEGMENT_COLORS.length],
+    weight: 1,
+  })),
+  alignment: [
+    { id: 'seg-0', label: 'Lawful Good', color: SEGMENT_COLORS[2], weight: 1 },
+    { id: 'seg-1', label: 'Neutral Good', color: SEGMENT_COLORS[0], weight: 1 },
+    { id: 'seg-2', label: 'Chaotic Good', color: SEGMENT_COLORS[6], weight: 1 },
+    { id: 'seg-3', label: 'Lawful Neutral', color: SEGMENT_COLORS[3], weight: 1 },
+    { id: 'seg-4', label: 'True Neutral', color: SEGMENT_COLORS[4], weight: 1 },
+    { id: 'seg-5', label: 'Chaotic Neutral', color: SEGMENT_COLORS[7], weight: 1 },
+    { id: 'seg-6', label: 'Lawful Evil', color: SEGMENT_COLORS[1], weight: 1 },
+    { id: 'seg-7', label: 'Neutral Evil', color: SEGMENT_COLORS[11], weight: 1 },
+    { id: 'seg-8', label: 'Chaotic Evil', color: SEGMENT_COLORS[5], weight: 1 },
+  ],
+  loot: [
+    { id: 'seg-0', label: 'Common', color: '#9ca3af', weight: 5 },
+    { id: 'seg-1', label: 'Uncommon', color: '#22c55e', weight: 4 },
+    { id: 'seg-2', label: 'Rare', color: '#3b82f6', weight: 3 },
+    { id: 'seg-3', label: 'Very Rare', color: '#a855f7', weight: 2 },
+    { id: 'seg-4', label: 'Legendary', color: '#eab308', weight: 1 },
+  ],
+  custom: [
+    { id: 'seg-0', label: 'Option A', color: SEGMENT_COLORS[0], weight: 1 },
+    { id: 'seg-1', label: 'Option B', color: SEGMENT_COLORS[1], weight: 1 },
+    { id: 'seg-2', label: 'Option C', color: SEGMENT_COLORS[2], weight: 1 },
+  ],
+};
+
+export function getPresetSegments(preset: PresetKey): WheelSegment[] {
+  return (PRESETS[preset] || PRESETS.custom).map((s) => ({ ...s }));
+}
+
+export function addSegment(segments: WheelSegment[]): WheelSegment[] {
+  const idx = segments.length;
+  return [
+    ...segments,
+    {
+      id: `seg-${Date.now()}`,
+      label: `Option ${String.fromCharCode(65 + Math.min(idx, 25))}`,
+      color: SEGMENT_COLORS[idx % SEGMENT_COLORS.length],
+      weight: 1,
+    },
+  ];
+}
+
+export function removeSegment(segments: WheelSegment[], id: string): WheelSegment[] {
+  if (segments.length <= 1) return segments;
+  return segments.filter((s) => s.id !== id);
+}
+
+export function updateSegment(
+  segments: WheelSegment[],
+  id: string,
+  field: 'label' | 'color' | 'weight',
+  value: string,
+): WheelSegment[] {
+  return segments.map((s) => {
+    if (s.id === id) {
+      if (field === 'weight') {
+        return { ...s, weight: Math.max(1, parseInt(value, 10) || 1) };
+      }
+      return { ...s, [field]: value };
+    }
+    return s;
+  });
+}
+
+export function selectRandomSegment(segments: WheelSegment[]): number {
+  const totalWeight = segments.reduce((sum, s) => sum + (s.weight || 1), 0);
+  const r = Math.random() * totalWeight;
+  let acc = 0;
+  for (let i = 0; i < segments.length; i++) {
+    acc += segments[i].weight || 1;
+    if (r < acc) {
+      return i;
+    }
+  }
+  return segments.length - 1;
+}
+
+export function getSelectedIndex(
+  segments: WheelSegment[],
+  currentAngle: number,
+): number {
+  const totalWeight = segments.reduce((sum, s) => sum + (s.weight || 1), 0);
+  const segmentAngle = (360 - (currentAngle % 360)) % 360;
+  let acc = 0;
+  for (let i = 0; i < segments.length; i++) {
+    const nextAcc = acc + (segments[i].weight || 1);
+    const startAngle = (acc / totalWeight) * 360;
+    const endAngle = (nextAcc / totalWeight) * 360;
+    if (segmentAngle >= startAngle && segmentAngle < endAngle) {
+      return i;
+    }
+    acc = nextAcc;
+  }
+  return 0;
+}
+
+export function getArcAngle(segmentCount: number): number {
+  return 360 / segmentCount;
+}
+
+export function addHistoryItem(
+  history: SpinResultEntry[],
+  segment: WheelSegment,
+  index: number,
+): SpinResultEntry[] {
+  const entry: SpinResultEntry = {
+    segment,
+    index,
+    timestamp: Date.now(),
+  };
+  const updated = [entry, ...history];
+  return updated.slice(0, 10);
+}

package/src/tool/decision-wheel/seo.astro

@@ -0,0 +1,16 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { decisionWheel } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const loader = decisionWheel.i18n[locale] || decisionWheel.i18n.en;
+const content = await loader?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/decision-wheel/types.ts

@@ -0,0 +1,14 @@
+export interface WheelSegment {
+  id: string;
+  label: string;
+  color: string;
+  weight?: number;
+}
+
+export interface SpinResultEntry {
+  segment: WheelSegment;
+  index: number;
+  timestamp: number;
+}
+
+export type PresetKey = 'yesno' | 'numbers' | 'actions' | 'custom' | 'd20' | 'alignment' | 'loot';

package/src/tool/decision-wheel/ui.ts

@@ -0,0 +1,121 @@
+import type { WheelSegment, SpinResultEntry } from './types';
+
+function selected(value: number | undefined, target: number): string {
+  return value === target ? 'selected' : '';
+}
+
+function createSegmentRow(seg: WheelSegment, t: (key: string) => string): HTMLDivElement {
+  const row = document.createElement('div');
+  row.className = 'segment-row';
+  const labelPlaceholder = t('segmentLabelPlaceholder') || 'Label';
+  const weightLabel = t('weightLabel') || 'Weight';
+  const removeLabel = t('removeSegmentLabel') || 'Remove';
+  const sw = seg.weight;
+  row.innerHTML = `
+    <input type="color" class="segment-color" data-id="${seg.id}" value="${seg.color}" />
+    <input type="text" class="segment-input" data-id="${seg.id}" value="${seg.label}" placeholder="${labelPlaceholder}" />
+    <select class="segment-weight" data-id="${seg.id}" title="${weightLabel}">
+      <option value="1" ${selected(sw, 1)}>w1</option>
+      <option value="2" ${selected(sw, 2)}>w2</option>
+      <option value="3" ${selected(sw, 3)}>w3</option>
+      <option value="4" ${selected(sw, 4)}>w4</option>
+      <option value="5" ${selected(sw, 5)}>w5</option>
+    </select>
+    <button type="button" class="btn-remove-segment" data-id="${seg.id}">${removeLabel}</button>
+  `;
+  return row;
+}
+
+export function bindSegmentEvents(
+  segmentList: HTMLElement,
+  onUpdateSegment: (id: string, field: string, value: string) => void,
+  onRemoveSegment: (id: string) => void,
+): void {
+  segmentList.querySelectorAll('.segment-color').forEach((el) => {
+    el.addEventListener('input', (e) => {
+      const input = e.target as HTMLInputElement;
+      onUpdateSegment(input.dataset.id || '', 'color', input.value);
+    });
+  });
+  segmentList.querySelectorAll('.segment-input').forEach((el) => {
+    el.addEventListener('input', (e) => {
+      const input = e.target as HTMLInputElement;
+      onUpdateSegment(input.dataset.id || '', 'label', input.value);
+    });
+  });
+  segmentList.querySelectorAll('.segment-weight').forEach((el) => {
+    el.addEventListener('change', (e) => {
+      const select = e.target as HTMLSelectElement;
+      onUpdateSegment(select.dataset.id || '', 'weight', select.value);
+    });
+  });
+  segmentList.querySelectorAll('.btn-remove-segment').forEach((el) => {
+    el.addEventListener('click', (e) => {
+      const btn = e.currentTarget as HTMLButtonElement;
+      onRemoveSegment(btn.dataset.id || '');
+    });
+  });
+}
+
+export function renderSegmentEditor(
+  segmentList: HTMLElement,
+  segments: WheelSegment[],
+  t: (key: string) => string,
+  onBind: () => void,
+): void {
+  segmentList.innerHTML = '';
+  if (segments.length === 0) {
+    segmentList.innerHTML = `<div class="no-segments-msg">${t('noSegments') || 'Add segments to the wheel before spinning.'}</div>`;
+    return;
+  }
+  segments.forEach((seg) => {
+    segmentList.appendChild(createSegmentRow(seg, t));
+  });
+  onBind();
+}
+
+export function renderResult(
+  resultDisplay: HTMLElement,
+  result: SpinResultEntry | null,
+  spinning: boolean,
+  t: (key: string) => string,
+): void {
+  if (!result) {
+    resultDisplay.innerHTML = `<div class="result-placeholder">${spinning ? 'Spinning...' : (t('noHistory') || 'Spin to see result')}</div>`;
+    return;
+  }
+  resultDisplay.innerHTML = `<div class="result-card" id="result-card">
+    <div class="result-header">${t('resultHeading') || 'Result'}</div>
+    <span class="result-value"><span class="result-color-dot" style="background:${result.segment.color}"></span>${result.segment.label}</span>
+  </div>`;
+}
+
+export function triggerEmphasis(): void {
+  const card = document.getElementById('result-card');
+  if (!card) return;
+  card.classList.remove('result-emphasis');
+  void card.offsetWidth;
+  card.classList.add('result-emphasis');
+}
+
+export function renderHistory(
+  historyList: HTMLElement,
+  historyEmpty: HTMLElement,
+  history: SpinResultEntry[],
+): void {
+  if (history.length === 0) {
+    historyEmpty.style.display = 'block';
+    historyList.querySelectorAll('.history-item').forEach((el) => el.remove());
+    return;
+  }
+  historyEmpty.style.display = 'none';
+  historyList.querySelectorAll('.history-item').forEach((el) => el.remove());
+  history.forEach((h) => {
+    const item = document.createElement('div');
+    item.className = 'history-item';
+    const time = new Date(h.timestamp);
+    const timeStr = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    item.innerHTML = `<span class="history-item-label"><span class="history-item-dot" style="background:${h.segment.color}"></span>${h.segment.label}</span><span class="history-item-time">${timeStr}</span>`;
+    historyList.appendChild(item);
+  });
+}

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

@@ -185,14 +185,14 @@ function rollDiceTumble(selectedDice: { type: string; max: number }[], visualDic
   return new Promise((resolve) => {
     const intervalId = setInterval(() => {
       visualDiceEls.forEach((el, index) => {
-        const d = selectedDice[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];
+        const d = selectedDice[index]!;
         el.classList.remove('rolling-pulse');
         const val = Math.floor(Math.random() * d.max) + 1;
         if (val === d.max) {

package/src/tool/dice-roller-simulator/i18n/ru.ts

@@ -1,4 +1,4 @@
-import { bibliography } from '../bibliography';
+import { bibliography } from '../bibliography';
 import type { ToolLocaleContent } from '../../../types';
 
 export const content: ToolLocaleContent = {
@@ -20,7 +20,7 @@ export const content: ToolLocaleContent = {
   },
   seo: [
     { type: 'title', text: 'Управление вероятностями в настольных играх: Как математика кубиков влияет на игровой процесс', level: 2 },
-    { type: 'paragraph', html: 'Многогранные кости — это сердце настольных ролевых игр и современных настолок. Стремитесь ли вы выбросить высокий спасбросок в Dungeons & Dragons или бросаете кости для получения ресурсов, результат подчиняется математической вероятности. Понимание того, как сочетание различных типов кубиков влияет на ваши шансы, имеет решающее значение для принятия тактических решений во время игры.' },
+    { type: 'paragraph', html: 'Многогранные кости - это сердце настольных ролевых игр и современных настолок. Стремитесь ли вы выбросить высокий спасбросок в Dungeons & Dragons или бросаете кости для получения ресурсов, результат подчиняется математической вероятности. Понимание того, как сочетание различных типов кубиков влияет на ваши шансы, имеет решающее значение для принятия тактических решений во время игры.' },
     {
       type: 'stats',
       items: [
@@ -33,7 +33,7 @@ export const content: ToolLocaleContent = {
     { type: 'title', text: 'Математика нескольких костей: Почему 3d6 надежнее, чем 1d20', level: 2 },
     { type: 'paragraph', html: 'Когда вы бросаете одну кость D20, каждый результат от 1 до 20 имеет равный шанс в 5%, что дает равномерное распределение вероятностей. Однако при броске нескольких костей, например 3d6, результаты группируются вокруг среднего значения 10.5. Эта куполообразная кривая (распределение Гаусса) означает, что вы гораздо чаще будете выбрасывать средние значения, чем крайние, что обеспечивает стабильность и сглаживает непредсказуемость одиночного кубика.' },
     { type: 'title', text: 'Разбор вероятностей D20: Критические попадания, критические провалы (pifia) и роль модификаторов', level: 2 },
-    { type: 'paragraph', html: 'Простой модификатор «плюс два» может кардинально изменить вероятность успеха, превращая сложные задачи в легко выполнимые. Во многих игровых системах чистая 20 означает автоматический критический успех (шанс 5%), тогда как чистая 1 — критический провал (pifia). Визуализация этих исходов помогает демистифицировать случайность и позволяет планировать тактические ходы на основе статистики.' },
+    { type: 'paragraph', html: 'Простой модификатор «плюс два» может кардинально изменить вероятность успеха, превращая сложные задачи в легко выполнимые. Во многих игровых системах чистая 20 означает автоматический критический успех (шанс 5%), тогда как чистая 1 - критический провал (pifia). Визуализация этих исходов помогает демистифицировать случайность и позволяет планировать тактические ходы на основе статистики.' },
     {
       type: 'title',
       text: 'Таблица характеристик стандартных многогранных костей',
@@ -108,7 +108,7 @@ export const content: ToolLocaleContent = {
         },
         {
           title: 'Процентная система (Бросок под значение)',
-          description: 'Использует две 10-гранные кости для получения числа от 1 до 100. Цель — выбросить значение меньше показателя персонажа, что делает шансы наглядными.',
+          description: 'Использует две 10-гранные кости для получения числа от 1 до 100. Цель - выбросить значение меньше показателя персонажа, что делает шансы наглядными.',
           icon: 'mdi:percent-box-outline',
           highlight: false,
           points: [
@@ -126,7 +126,7 @@ export const content: ToolLocaleContent = {
       title: 'Ошибка игрока: Почему у кубиков нет памяти',
       icon: 'mdi:information-outline',
       badge: 'PROBABILITY TIP',
-      html: 'Распространенное заблуждение в настольных играх — вера в то, что предыдущие броски влияют на будущие. Если вы выбросили три «1» подряд на D20, вам может показаться, что высокий результат уже «на подходе». На самом деле каждый бросок — независимое событие. Вероятность выбросить 20 при следующем броске по-прежнему составляет ровно 5%. Знание этого помогает игрокам делать тактический выбор объективно.',
+      html: 'Распространенное заблуждение в настольных играх - вера в то, что предыдущие броски влияют на будущие. Если вы выбросили три «1» подряд на D20, вам может показаться, что высокий результат уже «на подходе». На самом деле каждый бросок - независимое событие. Вероятность выбросить 20 при следующем броске по-прежнему составляет ровно 5%. �-нание этого помогает игрокам делать тактический выбор объективно.',
     },
     {
       type: 'title',
@@ -154,7 +154,7 @@ export const content: ToolLocaleContent = {
         },
         {
           term: 'Математическое ожидание',
-          definition: 'Долгосрочный средний результат ваших бросков. Для одного D6 математическое ожидание составляет 3.5; для D20 — 10.5.',
+          definition: 'Долгосрочный средний результат ваших бросков. Для одного D6 математическое ожидание составляет 3.5; для D20 - 10.5.',
         },
         {
           term: 'Процентные кости',
@@ -174,7 +174,7 @@ export const content: ToolLocaleContent = {
     },
     {
       question: 'Что такое модификаторы и как они работают?',
-      answer: 'Модификаторы — это фиксированные значения (+1, -2 и т. д.), которые прибавляются к сумме броска или вычитаются из нее для отражения навыков персонажа, бонусов или штрафов.',
+      answer: 'Модификаторы - это фиксированные значения (+1, -2 и т. д.), которые прибавляются к сумме броска или вычитаются из нее для отражения навыков персонажа, бонусов или штрафов.',
     },
     {
       question: 'Что означает бросок с Преимуществом или Помехой?',
@@ -242,7 +242,7 @@ export const content: ToolLocaleContent = {
           'name': 'Что такое модификаторы и как они работают?',
           'acceptedAnswer': {
             '@type': 'Answer',
-            'text': 'Модификаторы — это фиксированные значения (+1, -2 и т. д.), которые прибавляются к сумме броска или вычитаются из нее для отражения навыков персонажа, бонусов или штрафов.'
+            'text': 'Модификаторы - это фиксированные значения (+1, -2 и т. д.), которые прибавляются к сумме броска или вычитаются из нее для отражения навыков персонажа, бонусов или штрафов.'
           }
         },
         {

package/src/tool/dice-roller-simulator/modules/history.ts

@@ -81,7 +81,7 @@ export function renderHistory(refs: HistoryUIRefs, onDrawChart: (totals: number[
   setText(refs.totalVal, history.length.toString());
   setText(refs.badge, history.length.toString());
   setText(refs.averageVal, (sum / history.length).toFixed(1));
-  setText(refs.lastVal, history[history.length - 1].total.toString());
+  setText(refs.lastVal, history[history.length - 1]!.total.toString());
 
   onDrawChart(totals);
 }

package/src/tool/fantasy-runes-translator/bibliography.astro

@@ -0,0 +1,16 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { fantasyRunesTranslator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props as Props;
+const loader = fantasyRunesTranslator.i18n[locale] || fantasyRunesTranslator.i18n.en;
+const content = await loader?.();
+if (!content) return null;
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/fantasy-runes-translator/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Elder Futhark (Wikipedia)',
+    url: 'https://en.wikipedia.org/wiki/Elder_Futhark',
+  },
+  {
+    name: 'Anglo-Saxon Runes (Wikipedia)',
+    url: 'https://en.wikipedia.org/wiki/Anglo-Saxon_runes',
+  },
+  {
+    name: 'Runic Unicode Block',
+    url: 'https://en.wikipedia.org/wiki/Runic_(Unicode_block)',
+  },
+];

package/src/tool/fantasy-runes-translator/client.ts

@@ -0,0 +1,205 @@
+import type { RuneAlphabetKey, RuneCharacterResult, RuneCharacter } from './types';
+import { translateText } from './logic';
+
+const wrap = document.querySelector('.runes-wrap') as HTMLElement;
+const input = document.getElementById('runes-input') as HTMLInputElement;
+const seedIn = document.getElementById('runes-seed') as HTMLInputElement;
+const seedTag = document.getElementById('seed-tag') as HTMLElement;
+const seedShuf = document.getElementById('seed-shuffle-btn') as HTMLElement;
+const seedToggle = document.getElementById('seed-toggle-btn') as HTMLElement;
+const seedDrawer = document.getElementById('seed-drawer') as HTMLElement;
+const output = document.getElementById('runes-output') as HTMLElement;
+const detailCard = document.getElementById('detail-card') as HTMLElement;
+const dName = document.getElementById('detail-name') as HTMLElement;
+const dMeaning = document.getElementById('detail-meaning') as HTMLElement;
+const dPhonetic = document.getElementById('detail-phonetic') as HTMLElement;
+const copyBtn = document.getElementById('runes-copy-btn') as HTMLElement;
+const clearBtn = document.getElementById('runes-clear-btn') as HTMLElement;
+const pills = document.getElementById('alphabet-pills') as HTMLElement;
+const gmBtn = document.getElementById('runes-gm-btn') as HTMLElement;
+const gmOverlay = document.getElementById('gm-overlay') as HTMLElement;
+const gmDisplay = document.getElementById('gm-runes') as HTMLElement;
+const gmParts = document.getElementById('gm-particles') as HTMLElement;
+const gmExit = document.getElementById('gm-exit-btn') as HTMLElement;
+const refFoundBtn = document.getElementById('runes-ref-found-btn') as HTMLElement;
+const refAllBtn = document.getElementById('runes-ref-all-btn') as HTMLElement;
+const refOverlay = document.getElementById('ref-overlay') as HTMLElement;
+const refGrid = document.getElementById('ref-grid') as HTMLElement;
+const refTitle = document.getElementById('ref-title') as HTMLElement;
+const refClose = document.getElementById('ref-close-btn') as HTMLElement;
+const ALPHA_KEY = 'runes-alphabet';
+let alphabet: RuneAlphabetKey = (localStorage.getItem(ALPHA_KEY) as RuneAlphabetKey) || 'elder-futhark';
+let result: RuneCharacterResult[] = [];
+let seed: number | null = null;
+const discovered = new Set<string>();
+
+function ui(key: string): string {
+  try { return JSON.parse(wrap.getAttribute('data-ui') || '{}')[key] || ''; } catch { return ''; }
+}
+
+function spawnPart(sym: string, x: number, y: number) {
+  const el = document.createElement('div');
+  el.className = 'particle'; el.textContent = sym;
+  el.style.cssText = `left:${x}px;top:${y}px;position:fixed`;
+  document.body.appendChild(el);
+  setTimeout(() => el.remove(), 1000);
+}
+
+function spawnGmParts() {
+  gmParts.innerHTML = '';
+  const rs = ['ᚠ','ᛟ','ᚱ','ᚲ','ᚨ','ᚢ','ᛉ','ᚷ','ᚹ','ᛞ','ᛁ','ᛃ','ᛚ','ᛗ','ᚾ','ᛟ','ᛈ','ᛏ','ᛒ','ᛇ','ᛉ','ᚱ','ᛋ','ᚠ','ᚢ','ᚦ','ᚬ'];
+  for (let i = 0; i < 10; i++) {
+    const p = document.createElement('span');
+    p.className = 'gm-float'; p.textContent = rs[Math.floor(Math.random() * rs.length)];
+    p.style.left = Math.random() * 100 + '%';
+    p.style.fontSize = (0.7 + Math.random() * 1.3) + 'rem';
+    p.style.animationDuration = (3 + Math.random() * 3) + 's';
+    p.style.animationDelay = Math.random() * 4 + 's';
+    gmParts.appendChild(p);
+  }
+}
+
+function selPill(key: RuneAlphabetKey) {
+  pills.querySelectorAll('.pill').forEach(b => b.classList.toggle('active', b.getAttribute('data-alphabet') === key));
+}
+
+function emptyOut() {
+  output.innerHTML = '<div class="runes-output-empty"><span class="empty-rune">ᛟ</span><span class="empty-label">' + ui('noInput') + '</span></div>';
+  output.classList.remove('has-chars');
+}
+
+function showDetail(c: RuneCharacter | null) {
+  if (!c) { detailCard.classList.remove('vis'); return; }
+  dName.textContent = c.name; dMeaning.textContent = c.meaning; dPhonetic.textContent = c.phonetic;
+  detailCard.classList.add('vis');
+}
+
+function clickRune(cr: RuneCharacterResult, card: HTMLElement) {
+  output.querySelectorAll('.rune-card').forEach(c => c.classList.remove('active'));
+  card.classList.add('active');
+  if (cr.char) {
+    showDetail(cr.char);
+    const r = card.getBoundingClientRect();
+    spawnPart(cr.char.symbol, r.left + r.width / 2, r.top);
+  }
+}
+
+function render(rs: RuneCharacterResult[]) {
+  output.classList.add('has-chars');
+  result = rs;
+  const shim = document.createElement('div');
+  shim.className = 'shimmer';
+  output.innerHTML = '';
+  output.appendChild(shim);
+  setTimeout(() => {
+    const g = document.createElement('div');
+    g.className = 'runes-grid';
+    rs.forEach((cr, i) => {
+      const c = document.createElement('div');
+      c.className = 'rune-card'; c.style.animationDelay = i * 25 + 'ms';
+      const sy = document.createElement('span');
+      sy.className = 'sym'; sy.textContent = cr.char ? cr.char.symbol : '?';
+      const le = document.createElement('span');
+      le.className = 'let'; le.textContent = cr.input.toUpperCase();
+      c.appendChild(sy); c.appendChild(le);
+      c.addEventListener('click', () => clickRune(cr, c));
+      g.appendChild(c);
+    });
+    output.innerHTML = '';
+    output.appendChild(g);
+  }, 300);
+}
+
+function translate() {
+  const t = input.value.trim();
+  if (!t) { emptyOut(); detailCard.classList.remove('vis'); result = []; return; }
+  for (const ch of t.toLowerCase()) { if (ch >= 'a' && ch <= 'z') discovered.add(ch); }
+  render(translateText(t, alphabet, seed).characters);
+  detailCard.classList.remove('vis');
+}
+
+function copyText() {
+  if (result.length === 0) return;
+  const t = result.map(c => (c.char ? c.char.symbol : c.input)).join('');
+  navigator.clipboard.writeText(t).catch(() => {});
+}
+
+function clearAll() {
+  input.value = ''; seedIn.value = ''; seed = null; seedTag.style.display = 'none';
+  emptyOut(); detailCard.classList.remove('vis'); result = [];
+}
+
+function applySeed() {
+  const v = parseInt(seedIn.value);
+  seed = isNaN(v) || v < 1 ? null : v;
+  seedTag.style.display = seed ? '' : 'none';
+  if (input.value.trim()) translate();
+}
+
+function randSeed() {
+  seedIn.value = String(Math.floor(Math.random() * 99999) + 1);
+  applySeed();
+}
+
+function openGm() {
+  if (result.length === 0) return;
+  gmDisplay.textContent = result.map(c => (c.char ? c.char.symbol : c.input)).join('');
+  gmOverlay.classList.add('active');
+  spawnGmParts();
+}
+
+function closeGm() { gmOverlay.classList.remove('active'); }
+
+function openRef(mode: 'found' | 'all') {
+  const mapping = translateText('abcdefghijklmnopqrstuvwxyz', alphabet, seed).characters;
+  refTitle.textContent = mode === 'found' ? 'Discovered Runes' : 'Full Rune Dictionary';
+  refGrid.innerHTML = mapping.map(c => {
+    if (mode === 'found' && !discovered.has(c.input)) return '';
+    return `<div class="ref-cell lit"><span class="ref-sym">${c.char ? c.char.symbol : '?'}</span><span class="ref-let">${c.input}</span></div>`;
+  }).join('');
+  refOverlay.classList.add('active');
+  spawnRefParticles();
+}
+
+function spawnRefParticles() {
+  const container = refOverlay;
+  const existing = container.querySelectorAll('.gm-float');
+  existing.forEach(e => e.remove());
+  const rs = ['ᚠ','ᛟ','ᚱ','ᚲ','ᚨ','ᚢ','ᛉ','ᚷ','ᚹ','ᛞ','ᛁ','ᛃ','ᛚ','ᛗ','ᚾ','ᛟ','ᛈ','ᛏ','ᛒ','ᛇ','ᛉ','ᚱ','ᛋ','ᚠ','ᚢ','ᚦ','ᚬ'];
+  for (let i = 0; i < 8; i++) {
+    const p = document.createElement('span');
+    p.className = 'gm-float'; p.textContent = rs[Math.floor(Math.random() * rs.length)];
+    p.style.left = Math.random() * 100 + '%';
+    p.style.fontSize = (0.7 + Math.random() * 1.3) + 'rem';
+    p.style.animationDuration = (4 + Math.random() * 3) + 's';
+    p.style.animationDelay = Math.random() * 4 + 's';
+    container.appendChild(p);
+  }
+}
+function closeRef() { refOverlay.classList.remove('active'); }
+
+input.addEventListener('input', () => { if (input.value.trim()) translate(); });
+seedIn.addEventListener('input', applySeed);
+seedShuf.addEventListener('click', randSeed);
+seedToggle.addEventListener('click', () => seedDrawer.classList.toggle('open'));
+copyBtn.addEventListener('click', copyText);
+clearBtn.addEventListener('click', clearAll);
+gmBtn.addEventListener('click', openGm);
+gmExit.addEventListener('click', closeGm);
+refFoundBtn.addEventListener('click', () => openRef('found'));
+refAllBtn.addEventListener('click', () => openRef('all'));
+refClose.addEventListener('click', closeRef);
+refOverlay.addEventListener('click', (e) => { if (e.target === refOverlay) closeRef(); });
+document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { closeGm(); closeRef(); } });
+
+pills.addEventListener('click', (e) => {
+  const b = (e.target as HTMLElement).closest('.pill') as HTMLButtonElement;
+  if (!b) return;
+  alphabet = b.getAttribute('data-alphabet') as RuneAlphabetKey;
+  localStorage.setItem(ALPHA_KEY, alphabet);
+  selPill(alphabet);
+  if (input.value.trim()) translate();
+});
+
+selPill(alphabet);
+emptyOut();