@jjlmoya/utils-tabletop 1.10.0 → 1.12.0

package/src/tool/scatter-direction-selector/client.ts

@@ -0,0 +1,296 @@
+import { rollScatter } from './logic';
+import type { ScatterConfig } from './logic';
+import { Animator, Particle } from './animation';
+import { HistoryManager } from './history';
+import { SettingsBinder } from './settings';
+import { SoundManager } from './sound';
+
+class ScatterSelectorApp {
+  private root: HTMLElement;
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private compass: HTMLElement;
+  private pointer: HTMLElement;
+  private rollBtn: HTMLElement;
+  private displayStatus: HTMLElement;
+  private displayNums: HTMLElement;
+  private ticksGroup: SVGGElement;
+  private animator: Animator;
+  private history: HistoryManager;
+  private settings: SettingsBinder;
+  private sound: SoundManager;
+
+  private currentAngle: number = 0;
+  private scatterAngle: number = 0;
+  private particles: Particle[] = [];
+
+  private isDragging: boolean = false;
+  private dragStartAngle: number = 0;
+  private compassBaseAngle: number = 0;
+
+  constructor(root: HTMLElement) {
+    this.root = root;
+    this.canvas = root.querySelector('#sds-particles') as HTMLCanvasElement;
+    this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
+    this.compass = root.querySelector('#sds-compass') as HTMLElement;
+    this.pointer = root.querySelector('#sds-pointer') as HTMLElement;
+    this.rollBtn = root.querySelector('#sds-roll-btn') as HTMLElement;
+    this.displayStatus = root.querySelector('#sds-display-status') as HTMLElement;
+    this.displayNums = root.querySelector('#sds-display-nums') as HTMLElement;
+    this.ticksGroup = root.querySelector('#sds-ticks') as SVGGElement;
+    this.animator = new Animator(root.querySelector('#sds-anim-canvas') as HTMLCanvasElement);
+    this.history = new HistoryManager(root.querySelector('#sds-history-list') as HTMLElement, 'sds-history');
+    this.settings = new SettingsBinder();
+    this.sound = new SoundManager();
+
+    this.initCanvas();
+    this.initTicks();
+    this.bindSettings();
+    this.observeTheme();
+    this.bindCompassDrag();
+    this.rollBtn.addEventListener('click', () => this.roll());
+    this.root.querySelector('#sds-clear-history')?.addEventListener('click', () => this.history.clear());
+    this.root.querySelector('#sds-sound-toggle')?.addEventListener('click', () => this.toggleSound());
+    this.root.addEventListener('click', (e) => this.spawnClickParticles(e));
+    this.loop();
+  }
+
+  private initCanvas(): void {
+    const resize = () => {
+      this.canvas.width = this.root.clientWidth;
+      this.canvas.height = this.root.clientHeight;
+    };
+    resize();
+    window.addEventListener('resize', resize);
+  }
+
+  private resolveColor(property: string, fallback: string): string {
+    return getComputedStyle(document.documentElement).getPropertyValue(property).trim() || fallback;
+  }
+
+  private makeTick(i: number): void {
+    const names8 = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
+    const ss = 360 / this.settings.getSectors();
+    const angle = i * ss;
+    const rad = (angle - 90) * (Math.PI / 180);
+    const tc = this.resolveColor('--text-base', '#e2e8f0');
+    const lc = this.resolveColor('--border-base', '#334155');
+
+    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    line.setAttribute('x1', String(100 + Math.cos(rad) * 80));
+    line.setAttribute('y1', String(100 + Math.sin(rad) * 80));
+    line.setAttribute('x2', String(100 + Math.cos(rad) * 92));
+    line.setAttribute('y2', String(100 + Math.sin(rad) * 92));
+    line.setAttribute('stroke', lc);
+    line.setAttribute('stroke-width', '1.5');
+    this.ticksGroup.appendChild(line);
+
+    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    text.setAttribute('x', String(100 + Math.cos(rad) * 72));
+    text.setAttribute('y', String(100 + Math.sin(rad) * 72 + 3));
+    text.setAttribute('text-anchor', 'middle');
+    text.setAttribute('dominant-baseline', 'middle');
+    text.setAttribute('fill', tc);
+    text.setAttribute('font-size', '7');
+    text.setAttribute('font-weight', '700');
+    text.textContent = this.settings.getSectors() === 8 ? names8[i] : String(i || 12);
+    this.ticksGroup.appendChild(text);
+  }
+
+  private initTicks(): void {
+    this.ticksGroup.innerHTML = '';
+    for (let i = 0; i < this.settings.getSectors(); i++) {
+      this.makeTick(i);
+    }
+  }
+
+  private observeTheme(): void {
+    const observer = new MutationObserver(() => this.initTicks());
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+  }
+
+  private bindSettings(): void {
+    this.settings.bind(this.root);
+    this.settings.onSectorsChange = () => this.initTicks();
+  }
+
+  private toggleSound(): void {
+    this.sound.enabled = !this.sound.enabled;
+    const on = this.root.querySelector('#sds-sound-on-icon') as HTMLElement;
+    const off = this.root.querySelector('#sds-sound-off-icon') as HTMLElement;
+    on.style.display = this.sound.enabled ? 'block' : 'none';
+    off.style.display = this.sound.enabled ? 'none' : 'block';
+  }
+
+  private bindCompassDrag(): void {
+    this.compass.addEventListener('pointerdown', (e) => this.startDrag(e));
+    window.addEventListener('pointermove', (e) => this.drag(e));
+    window.addEventListener('pointerup', () => this.endDrag());
+  }
+
+  private getCompassCenter(): { cx: number; cy: number } {
+    const r = this.compass.getBoundingClientRect();
+    return { cx: r.left + r.width / 2, cy: r.top + r.height / 2 };
+  }
+
+  private startDrag(e: PointerEvent): void {
+    this.isDragging = true;
+    this.compass.setPointerCapture(e.pointerId);
+    const { cx, cy } = this.getCompassCenter();
+    this.dragStartAngle = Math.atan2(e.clientY - cy, e.clientX - cx) * (180 / Math.PI);
+    this.compassBaseAngle = this.currentAngle;
+  }
+
+  private drag(e: PointerEvent): void {
+    if (!this.isDragging) return;
+    const { cx, cy } = this.getCompassCenter();
+    const angle = Math.atan2(e.clientY - cy, e.clientX - cx) * (180 / Math.PI);
+    this.setAngle((this.compassBaseAngle + angle - this.dragStartAngle + 360) % 360);
+  }
+
+  private endDrag(): void { this.isDragging = false; }
+
+  private setAngle(angle: number): void {
+    const prev = this.currentAngle;
+    this.currentAngle = Math.round(angle);
+    this.pointer.style.transform = `rotate(${this.currentAngle}deg)`;
+    this.displayNums.textContent = `${String(this.currentAngle).padStart(3, '0')}\u00b0`;
+
+    const ss = 360 / this.settings.getSectors();
+    if (Math.floor(prev / ss) !== Math.floor(this.currentAngle / ss)) {
+      this.sound.play(440, 'sine', 0.03);
+    }
+  }
+
+  private roll(): void {
+    if (this.animator.active) return;
+
+    const config: ScatterConfig = {
+      diceType: this.settings.getDice() as 'd6' | '2d6' | 'd10' | 'custom',
+      customMax: this.settings.getMaxDist(),
+      hitChance: this.settings.getHitChance()
+    };
+
+    const result = rollScatter(config);
+    this.sound.play(220, 'sine', 0.15);
+
+    const core = this.root.querySelector('.sds-center-core') as HTMLElement;
+    core.classList.remove('sds-peak-result', 'sds-warning-result');
+
+    const sp = this.root.querySelector('#sds-scatter-pointer') as HTMLElement;
+    sp.style.display = 'none';
+
+    const st = this.root.querySelector('#sds-sigil-target') as HTMLElement;
+    const sw = this.root.querySelector('#sds-sigil-warning') as HTMLElement;
+    st.style.display = 'none';
+    sw.style.display = 'none';
+
+    this.scatterAngle = this.settings.getMode() ? this.currentAngle : result.angle;
+    const angleRad = (this.scatterAngle - 90) * (Math.PI / 180);
+    const maxDist = this.getMaxDistance();
+
+    let tx = 100, ty = 100;
+    if (!result.isHit) {
+      const vr = 15 + (result.distance / Math.max(maxDist, 1)) * 70;
+      tx = 100 + Math.cos(angleRad) * vr;
+      ty = 100 + Math.sin(angleRad) * vr;
+    }
+
+    this.displayStatus.textContent = '\u2014\u2014\u2014';
+    this.displayNums.textContent = '\u2014\u2014\u2014';
+
+    this.animator.start({ hit: result.isHit, dist: result.distance, tgtX: tx, tgtY: ty });
+  }
+
+  private getMaxDistance(): number {
+    const d = this.settings.getDice();
+    if (d === 'd6') return 6;
+    if (d === '2d6') return 12;
+    if (d === 'd10') return 10;
+    return Math.max(this.settings.getMaxDist(), 1);
+  }
+
+  private finishAnim(): void {
+    const result = this.animator.getResult();
+
+    this.displayStatus.textContent = result.isHit ? 'DIRECT HIT' : 'SCATTER';
+
+    const core = this.root.querySelector('.sds-center-core') as HTMLElement;
+    const sp = this.root.querySelector('#sds-scatter-pointer') as HTMLElement;
+
+    if (result.isHit) {
+      this.displayNums.textContent = 'HIT';
+      core.classList.add('sds-peak-result');
+      this.sound.play(660, 'triangle', 0.4);
+    } else {
+      this.displayNums.textContent = `${result.distance}"`;
+      core.classList.add('sds-warning-result');
+      this.sound.play(180, 'sawtooth', 0.35);
+
+      sp.style.display = 'block';
+      sp.style.transition = 'transform 0.3s ease-out';
+      sp.style.transform = `rotate(${this.scatterAngle}deg)`;
+      void sp.offsetHeight;
+      sp.style.animation = 'none';
+      void sp.offsetHeight;
+      sp.style.animation = '';
+    }
+
+    this.history.add(result.isHit, this.scatterAngle, result.distance);
+  }
+
+  private spawnClickParticles(e: MouseEvent): void {
+    const rect = this.root.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    const p = document.createElement('div');
+    p.className = 'sds-click-particle';
+    p.style.left = `${x}px`;
+    p.style.top = `${y}px`;
+    p.textContent = '+';
+    this.root.appendChild(p);
+
+    setTimeout(() => p.remove(), 800);
+  }
+
+  private loop(): void {
+    requestAnimationFrame(() => this.loop());
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+    if (this.animator.active) {
+      const done = this.animator.drawFrame();
+      if (done) {
+        this.animator.reset();
+        this.finishAnim();
+      }
+    }
+
+    this.drawAmbientParticles();
+  }
+
+  private drawAmbientParticles(): void {
+    if (!this.animator.active && Math.random() < 0.15) {
+      const angleRad = (this.currentAngle - 90) * (Math.PI / 180);
+      this.particles.push(new Particle(this.canvas.width, this.canvas.height, angleRad, false));
+    }
+
+    this.particles = this.particles.filter((p) => {
+      p.update();
+      if (p.alpha <= 0) return false;
+      this.ctx.fillStyle = `rgba(${p.color}, ${p.alpha})`;
+      this.ctx.beginPath();
+      this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+      this.ctx.fill();
+      return true;
+    });
+  }
+}
+
+function init(): void {
+  const el = document.querySelector('[data-tool="scatter-direction-selector"]') as HTMLElement;
+  if (el) new ScatterSelectorApp(el);
+}
+
+if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+else init();

package/src/tool/scatter-direction-selector/component.astro

@@ -0,0 +1,184 @@
+---
+import './scatter-direction-selector.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="sds-container" data-tool="scatter-direction-selector" data-ui={JSON.stringify(ui)}>
+  <canvas id="sds-particles" class="sds-particles-canvas"></canvas>
+
+  <header class="sds-header">
+    <div class="sds-header-main">
+      <span class="sds-subtitle">{ui.dragHint}</span>
+    </div>
+    <button type="button" id="sds-sound-toggle" class="sds-sound-btn" aria-label="Toggle Sound">
+      <svg id="sds-sound-on-icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+        <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+      </svg>
+      <svg id="sds-sound-off-icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
+        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+        <line x1="23" y1="9" x2="17" y2="15"></line>
+        <line x1="17" y1="9" x2="23" y2="15"></line>
+      </svg>
+    </button>
+  </header>
+
+  <main class="sds-grid">
+    <section class="sds-compass-area">
+      <div class="sds-compass-wrapper">
+        <div id="sds-compass" class="sds-compass">
+          <div class="sds-compass-ring"></div>
+          <svg class="sds-compass-svg" viewBox="0 0 200 200">
+            <defs>
+              <radialGradient id="compass-glow" cx="50%" cy="50%" r="50%">
+                <stop offset="0%" stop-color="var(--sds-glow-inner)" stop-opacity="0.15"></stop>
+                <stop offset="100%" stop-color="var(--sds-glow-outer)" stop-opacity="0"></stop>
+              </radialGradient>
+            </defs>
+            <circle cx="100" cy="100" r="95" fill="url(#compass-glow)" stroke="var(--sds-border-glow)" stroke-width="2"></circle>
+            <circle cx="100" cy="100" r="80" fill="none" stroke="var(--sds-border)" stroke-width="1" stroke-dasharray="2, 4"></circle>
+            <g id="sds-ticks"></g>
+          </svg>
+          <div id="sds-pointer" class="sds-pointer sds-pointer-wind">
+            <svg viewBox="0 0 40 160" class="sds-pointer-svg">
+              <path d="M20,0 L35,60 L24,55 L20,160 L16,55 L5,60 Z" fill="var(--sds-accent)"></path>
+            </svg>
+          </div>
+          <div id="sds-scatter-pointer" class="sds-pointer sds-pointer-scatter" style="display: none;">
+            <svg viewBox="0 0 40 160" class="sds-pointer-svg">
+              <path d="M20,4 L30,50 L26,44 L32,60 L22,52 L20,160 L18,52 L8,60 L14,44 L10,50 Z" fill="var(--sds-danger)"></path>
+            </svg>
+          </div>
+          <div class="sds-center-core">
+            <div id="sds-sigil-target" class="sds-sigil" style="display: none;">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <circle cx="12" cy="12" r="10"></circle>
+                <circle cx="12" cy="12" r="6"></circle>
+                <circle cx="12" cy="12" r="2"></circle>
+                <line x1="12" y1="1" x2="12" y2="23"></line>
+                <line x1="1" y1="12" x2="23" y2="12"></line>
+              </svg>
+            </div>
+            <div id="sds-sigil-warning" class="sds-sigil" style="display: none;">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+                <line x1="12" y1="9" x2="12" y2="13"></line>
+                <line x1="12" y1="17" x2="12.01" y2="17"></line>
+              </svg>
+            </div>
+            <div id="sds-digital-display" class="sds-digital-display">
+              <div id="sds-display-status" class="sds-display-status">READY</div>
+              <div id="sds-display-nums" class="sds-display-nums">000°</div>
+            </div>
+          </div>
+        </div>
+        <canvas id="sds-anim-canvas" class="sds-anim-canvas"></canvas>
+      </div>
+      <ol class="sds-guide">
+        <li class="sds-guide-step">
+          <span class="sds-guide-num">1</span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="sds-guide-icon">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="12" y1="8" x2="12" y2="16"></line>
+            <line x1="8" y1="12" x2="16" y2="12"></line>
+          </svg>
+          <span class="sds-guide-label">{ui.guideStep1}</span>
+        </li>
+        <li class="sds-guide-step">
+          <span class="sds-guide-num">2</span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="sds-guide-icon">
+            <path d="M12 20h9"></path>
+            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
+          </svg>
+          <span class="sds-guide-label">{ui.guideStep2}</span>
+        </li>
+        <li class="sds-guide-step sds-guide-step-block">
+          <span class="sds-guide-num">3</span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="sds-guide-icon">
+            <polygon points="5 3 19 12 5 21 5 3"></polygon>
+          </svg>
+          <div class="sds-guide-outcomes">
+            <span class="sds-guide-outcome sds-guide-outcome--hit">
+              <span class="sds-guide-dot sds-guide-dot-hit"></span>
+              {ui.guideStep3}
+            </span>
+            <span class="sds-guide-outcome sds-guide-outcome--scatter">
+              <span class="sds-guide-dot sds-guide-dot-scatter"></span>
+              {ui.guideStep3Scatter}
+            </span>
+          </div>
+        </li>
+      </ol>
+    </section>
+
+    <section class="sds-control-panel">
+      <div class="sds-panel-card">
+        <h2 class="sds-panel-title">{ui.setupTitle}</h2>
+
+        <div class="sds-control-group">
+          <span class="sds-label">{ui.sectorsLabel}</span>
+          <div class="sds-segmented-control">
+            <button type="button" class="sds-segment-btn active" data-sectors="8">{ui.sectors8}</button>
+            <button type="button" class="sds-segment-btn" data-sectors="12">{ui.sectors12}</button>
+          </div>
+        </div>
+
+        <div class="sds-control-group">
+          <span class="sds-label">{ui.scatterModeLabel}</span>
+          <div class="sds-segmented-control">
+            <button type="button" id="sds-mode-random" class="sds-segment-btn active" data-mode="random">{ui.scatterModeRandom}</button>
+            <button type="button" id="sds-mode-wind" class="sds-segment-btn" data-mode="wind">{ui.scatterModeWind}</button>
+          </div>
+          <span id="sds-wind-hint" class="sds-mode-hint" style="display: none;">{ui.scatterModeWindHint}</span>
+        </div>
+
+        <div class="sds-control-group">
+          <span class="sds-label">{ui.diceLabel}</span>
+          <div class="sds-select-wrapper">
+            <select id="sds-dice-select" class="sds-select">
+              <option value="d6">{ui.diceD6}</option>
+              <option value="2d6">{ui.dice2D6}</option>
+              <option value="d10">{ui.diceD10}</option>
+              <option value="custom">{ui.diceCustom}</option>
+            </select>
+          </div>
+        </div>
+
+        <div id="sds-custom-dist-wrapper" class="sds-control-group" style="display: none;">
+          <label class="sds-label" for="sds-custom-max">
+            <span>{ui.customMaxLabel}</span>
+          </label>
+          <input type="number" id="sds-custom-max" class="sds-input" value="12" min="1" max="100" />
+        </div>
+
+        <div class="sds-control-group">
+          <div class="sds-label-row">
+            <span class="sds-label">{ui.hitChanceLabel}</span>
+            <span id="sds-hit-chance-val" class="sds-value-display">33%</span>
+          </div>
+          <input type="range" id="sds-hit-chance" class="sds-slider" min="0" max="100" value="33" />
+        </div>
+
+        <button type="button" id="sds-roll-btn" class="sds-btn-primary">
+          <span class="sds-btn-glow"></span>
+          <span>{ui.rollButton}</span>
+        </button>
+      </div>
+
+      <div class="sds-panel-card">
+        <div class="sds-header-row">
+          <h2 class="sds-panel-title">{ui.historyTitle}</h2>
+          <button type="button" id="sds-clear-history" class="sds-btn-secondary">{ui.clearHistory}</button>
+        </div>
+        <div id="sds-history-list" class="sds-history-list"></div>
+      </div>
+    </section>
+  </main>
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/scatter-direction-selector/entry.ts

@@ -0,0 +1,59 @@
+import type { TabletopToolEntry, ToolLocaleContent } from '../../types';
+
+export type ScatterSelectorUI = {
+  title: string;
+  setupTitle: string;
+  sectorsLabel: string;
+  sectors8: string;
+  sectors12: string;
+  diceLabel: string;
+  diceD6: string;
+  dice2D6: string;
+  diceD10: string;
+  diceCustom: string;
+  customMaxLabel: string;
+  hitChanceLabel: string;
+  rollButton: string;
+  hitResult: string;
+  scatterResult: string;
+  distanceLabel: string;
+  angleLabel: string;
+  dragHint: string;
+  historyTitle: string;
+  clearHistory: string;
+  presetTitle: string;
+  soundOn: string;
+  soundOff: string;
+  guideStep1: string;
+  guideStep2: string;
+  guideStep3: string;
+  guideStep3Scatter: string;
+  scatterModeLabel: string;
+  scatterModeRandom: string;
+  scatterModeWind: string;
+  scatterModeWindHint: string;
+};
+
+export type ScatterSelectorLocaleContent = ToolLocaleContent<ScatterSelectorUI>;
+
+export const scatterDirectionSelector: TabletopToolEntry<ScatterSelectorUI> = {
+  id: 'scatter-direction-selector',
+  icons: { bg: 'mdi:compass-outline', fg: 'mdi:compass-rose' },
+  i18n: {
+    en: () => import('./i18n/en').then((m) => m.content),
+    de: () => import('./i18n/de').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

package/src/tool/scatter-direction-selector/history.ts

@@ -0,0 +1,71 @@
+interface HistoryItem {
+  isHit: boolean;
+  angle: number;
+  distance: number;
+  time: string;
+}
+
+export class HistoryManager {
+  private items: HistoryItem[] = [];
+  private listEl: HTMLElement;
+  private storageKey: string;
+
+  constructor(listEl: HTMLElement, storageKey: string) {
+    this.listEl = listEl;
+    this.storageKey = storageKey;
+    this.load();
+    this.render();
+  }
+
+  add(isHit: boolean, angle: number, distance: number): void {
+    const item: HistoryItem = {
+      isHit,
+      angle,
+      distance,
+      time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+    };
+    this.items.unshift(item);
+    this.items = this.items.slice(0, 10);
+    this.save();
+    this.render();
+  }
+
+  clear(): void {
+    this.items = [];
+    this.save();
+    this.render();
+  }
+
+  getAll(): HistoryItem[] {
+    return this.items;
+  }
+
+  private save(): void {
+    localStorage.setItem(this.storageKey, JSON.stringify(this.items));
+  }
+
+  private load(): void {
+    const saved = localStorage.getItem(this.storageKey);
+    if (saved) {
+      try {
+        this.items = JSON.parse(saved);
+      } catch {
+        this.items = [];
+      }
+    }
+  }
+
+  private render(): void {
+    this.listEl.innerHTML = this.items
+      .map(
+        (h) => `
+      <div class="sds-history-item">
+        <span class="sds-history-badge ${h.isHit ? 'hit' : 'scatter'}">${h.isHit ? 'HIT' : 'SCATTER'}</span>
+        <span class="sds-history-val">${h.isHit ? '\u2014' : `${h.distance}" @ ${h.angle}\u00b0`}</span>
+        <span class="sds-history-time">${h.time}</span>
+      </div>
+    `
+      )
+      .join('');
+  }
+}