@jjlmoya/utils-forensic-science 1.1.0

package/src/tool/gsr-dispersion-calculator/component.astro

@@ -0,0 +1,294 @@
+---
+import './gsr-dispersion-calculator.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<section class="gsr-shell" data-gsr-calculator>
+  <div class="gsr-card">
+    <div class="gsr-visual">
+      <div class="gsr-target-head">
+        <span>{ui.target}</span>
+        <strong id="gsr-radius">-</strong>
+      </div>
+      <canvas id="gsr-canvas" width="720" height="720" aria-label={ui.canvasAria}></canvas>
+    </div>
+
+    <aside class="gsr-controls">
+      <div class="gsr-unit-toggle" role="group" aria-label={ui.units}>
+        <button type="button" data-gsr-unit="metric" data-active="true">{ui.metric}</button>
+        <button type="button" data-gsr-unit="imperial" data-active="false">{ui.imperial}</button>
+      </div>
+
+      <label class="gsr-slider">
+        <span>{ui.distance}</span>
+        <strong id="gsr-distance-label">-</strong>
+        <input id="gsr-distance" type="range" min="0" max="300" value="75" />
+      </label>
+
+      <label class="gsr-select">
+        <span>{ui.ammo}</span>
+        <select id="gsr-ammo">
+          <option value="pistol9mm">{ui.ammoPistol9mm}</option>
+          <option value="revolver38">{ui.ammoRevolver38}</option>
+          <option value="shotgun12">{ui.ammoShotgun12}</option>
+        </select>
+      </label>
+
+      <div class="gsr-cone" aria-label={ui.cone}>
+        <span class="gsr-muzzle"></span>
+        <span class="gsr-cone-beam" id="gsr-cone-beam"></span>
+        <span class="gsr-plane"></span>
+      </div>
+
+      <article class="gsr-reading">
+        <small>{ui.category}</small>
+        <h3 id="gsr-category">-</h3>
+        <p id="gsr-expected">-</p>
+      </article>
+
+      <div class="gsr-metrics">
+        <div>
+          <span>{ui.density}</span>
+          <strong id="gsr-density">-</strong>
+        </div>
+        <div>
+          <span>{ui.thermal}</span>
+          <strong id="gsr-thermal">-</strong>
+        </div>
+      </div>
+    </aside>
+
+    <nav class="gsr-range-strip" aria-label={ui.rangeStripAria}>
+      <span data-gsr-range="contact">{ui.contact}</span>
+      <span data-gsr-range="near-contact">{ui.near}</span>
+      <span data-gsr-range="close-range">{ui.close}</span>
+      <span data-gsr-range="distant">{ui.distant}</span>
+    </nav>
+
+    <p class="gsr-disclaimer">{ui.disclaimer}</p>
+  </div>
+</section>
+
+<script id="gsr-ui" type="application/json" set:html={JSON.stringify(ui)}></script>
+<script>
+  import { GsrDispersionModel } from './logic';
+  import type { AmmoType, GsrParticle } from './logic';
+
+  const model = new GsrDispersionModel();
+  const ui = JSON.parse(document.getElementById('gsr-ui')?.textContent || '{}');
+  const STORAGE_KEY = 'gsr-dispersion-calculator-state';
+  const canvas = document.getElementById('gsr-canvas') as HTMLCanvasElement | null;
+  const distanceInput = document.getElementById('gsr-distance') as HTMLInputElement | null;
+  const ammoSelect = document.getElementById('gsr-ammo') as HTMLSelectElement | null;
+  const context = canvas?.getContext('2d');
+  let unitSystem: 'metric' | 'imperial' = 'metric';
+
+  function getParticleColors(isDark: boolean): Record<GsrParticle['element'], string> {
+    if (isDark) {
+      return {
+        lead: '156, 188, 220',
+        barium: '104, 224, 180',
+        antimony: '255, 184, 92',
+        soot: '246, 236, 214',
+      };
+    }
+
+    return {
+      lead: '108, 126, 146',
+      barium: '88, 160, 124',
+      antimony: '205, 132, 58',
+      soot: '62, 58, 52',
+    };
+  }
+
+  function setText(id: string, value: string): void {
+    const element = document.getElementById(id);
+    if (element) element.textContent = value;
+  }
+
+  function updateUnitButtons(): void {
+    document.querySelectorAll<HTMLButtonElement>('[data-gsr-unit]').forEach((item) => {
+      item.dataset.active = item.dataset.gsrUnit === unitSystem ? 'true' : 'false';
+    });
+  }
+
+  function saveState(): void {
+    const distanceCm = Number(distanceInput?.value ?? 75);
+    const ammo = ammoSelect?.value ?? 'pistol9mm';
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({
+      distanceCm,
+      ammo,
+      unitSystem,
+    }));
+  }
+
+  function parseSavedState(): { distanceCm?: number; ammo?: string; unitSystem?: 'metric' | 'imperial' } | null {
+    try {
+      return JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}') as {
+        distanceCm?: number;
+        ammo?: string;
+        unitSystem?: 'metric' | 'imperial';
+      };
+    } catch {
+      localStorage.removeItem(STORAGE_KEY);
+      return null;
+    }
+  }
+
+  function applySavedDistance(distanceCm?: number): void {
+    if (typeof distanceCm === 'number' && distanceInput) {
+      distanceInput.value = String(Math.max(0, Math.min(300, distanceCm)));
+    }
+  }
+
+  function applySavedAmmo(ammo?: string): void {
+    if ((ammo === 'pistol9mm' || ammo === 'revolver38' || ammo === 'shotgun12') && ammoSelect) {
+      ammoSelect.value = ammo;
+    }
+  }
+
+  function applySavedUnitSystem(savedUnitSystem?: 'metric' | 'imperial'): void {
+    if (savedUnitSystem === 'metric' || savedUnitSystem === 'imperial') {
+      unitSystem = savedUnitSystem;
+    }
+  }
+
+  function restoreState(): void {
+    const saved = parseSavedState();
+    applySavedDistance(saved?.distanceCm);
+    applySavedAmmo(saved?.ammo);
+    applySavedUnitSystem(saved?.unitSystem);
+    updateUnitButtons();
+  }
+
+  function formatLength(cm: number): string {
+    if (unitSystem === 'metric') {
+      return cm >= 100 ? `${(cm / 100).toFixed(2)} ${ui.unitMeter}` : `${Math.round(cm)} ${ui.unitCentimeter}`;
+    }
+    const inches = cm / 2.54;
+    return inches >= 12 ? `${(inches / 12).toFixed(2)} ${ui.unitFoot}` : `${inches.toFixed(1)} ${ui.unitInch}`;
+  }
+
+  function getCategoryLabel(category: 'contact' | 'near-contact' | 'close-range' | 'distant'): string {
+    if (category === 'contact') return ui.categoryContactLabel;
+    if (category === 'near-contact') return ui.categoryNearContactLabel;
+    if (category === 'close-range') return ui.categoryCloseRangeLabel;
+    if (category === 'distant') return ui.categoryDistantLabel;
+    return '';
+  }
+
+  function getExpectedFinding(category: 'contact' | 'near-contact' | 'close-range' | 'distant'): string {
+    if (category === 'contact') return ui.expectedContact;
+    if (category === 'near-contact') return ui.expectedNearContact;
+    if (category === 'close-range') return ui.expectedCloseRange;
+    return ui.expectedDistant;
+  }
+
+  function drawCloth(): void {
+    if (!canvas || !context) return;
+    const { width, height } = canvas;
+    const isDark = document.documentElement.classList.contains('theme-dark');
+    const gradient = context.createRadialGradient(width * 0.5, height * 0.42, 20, width * 0.5, height * 0.5, width * 0.65);
+    gradient.addColorStop(0, isDark ? '#5a5241' : '#f7f0df');
+    gradient.addColorStop(1, isDark ? '#312c25' : '#d6ccb8');
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, width, height);
+    context.strokeStyle = isDark ? 'rgba(244, 234, 214, 0.12)' : 'rgba(78, 72, 59, 0.11)';
+    context.lineWidth = 1;
+    for (let index = -width; index < width * 2; index += 24) {
+      context.beginPath();
+      context.moveTo(index, 0);
+      context.lineTo(index + width, height);
+      context.stroke();
+      context.beginPath();
+      context.moveTo(index + width, 0);
+      context.lineTo(index, height);
+      context.stroke();
+    }
+  }
+
+  function drawThermalHalo(center: number, thermalScore: number, isDark: boolean): void {
+    if (!context || thermalScore <= 0) return;
+    const burn = context.createRadialGradient(center, center, 4, center, center, 95 + thermalScore * 0.7);
+    burn.addColorStop(0, isDark ? `rgba(255, 206, 128, ${0.18 + thermalScore / 320})` : `rgba(96, 58, 24, ${0.18 + thermalScore / 340})`);
+    burn.addColorStop(0.45, isDark ? `rgba(255, 156, 76, ${thermalScore / 420})` : `rgba(188, 120, 52, ${thermalScore / 520})`);
+    burn.addColorStop(1, isDark ? 'rgba(255, 156, 76, 0)' : 'rgba(188, 120, 52, 0)');
+    context.fillStyle = burn;
+    context.beginPath();
+    context.arc(center, center, 120 + thermalScore * 0.65, 0, Math.PI * 2);
+    context.fill();
+  }
+
+  function drawParticleCloud(particles: GsrParticle[], scale: number, center: number, isDark: boolean): void {
+    if (!context) return;
+    const colors = getParticleColors(isDark);
+    const opacityBoost = isDark ? 0.16 : 0.1;
+    const radiusBoost = isDark ? 0.35 : 0.18;
+
+    for (const particle of particles) {
+      context.fillStyle = `rgba(${colors[particle.element]}, ${Math.min(1, particle.opacity + opacityBoost)})`;
+      context.beginPath();
+      context.arc(center + particle.x * scale, center + particle.y * scale, particle.radius + radiusBoost, 0, Math.PI * 2);
+      context.fill();
+    }
+  }
+
+  function drawPatternRadius(center: number, patternRadiusCm: number, scale: number, isDark: boolean): void {
+    if (!context) return;
+    context.strokeStyle = isDark ? 'rgba(242, 240, 232, 0.62)' : 'rgba(90, 96, 101, 0.55)';
+    context.lineWidth = isDark ? 3.4 : 3.2;
+    context.setLineDash(isDark ? [12, 9] : [11, 9]);
+    context.beginPath();
+    context.arc(center, center, Math.min(300, patternRadiusCm * scale), 0, Math.PI * 2);
+    context.stroke();
+    context.setLineDash([]);
+  }
+
+  function drawParticles(particles: GsrParticle[], patternRadiusCm: number, thermalScore: number): void {
+    if (!canvas || !context) return;
+    const isDark = document.documentElement.classList.contains('theme-dark');
+    const center = canvas.width / 2;
+    const scale = Math.min(5.8, 250 / Math.max(patternRadiusCm, 16));
+    drawThermalHalo(center, thermalScore, isDark);
+    drawParticleCloud(particles, scale, center, isDark);
+    drawPatternRadius(center, patternRadiusCm, scale, isDark);
+  }
+
+  function render(): void {
+    const distanceCm = Number(distanceInput?.value ?? 75);
+    const ammo = (ammoSelect?.value ?? 'pistol9mm') as AmmoType;
+    const result = model.simulate(distanceCm, ammo);
+    drawCloth();
+    drawParticles(result.particles, result.patternRadiusCm, result.thermalScore);
+    setText('gsr-distance-label', formatLength(distanceCm));
+    setText('gsr-category', getCategoryLabel(result.category));
+    setText('gsr-expected', getExpectedFinding(result.category));
+    setText('gsr-density', `${result.densityScore}%`);
+    setText('gsr-thermal', `${result.thermalScore}%`);
+    setText('gsr-radius', `${formatLength(result.patternRadiusCm)} ${ui.radiusSuffix}`);
+    document.querySelectorAll<HTMLElement>('[data-gsr-range]').forEach((item) => {
+      item.dataset.active = item.dataset.gsrRange === result.category ? 'true' : 'false';
+    });
+    const beam = document.getElementById('gsr-cone-beam') as HTMLElement | null;
+    if (beam) beam.style.transform = `scaleY(${0.35 + distanceCm / 260})`;
+    saveState();
+  }
+
+  distanceInput?.addEventListener('input', render);
+  ammoSelect?.addEventListener('change', render);
+  new MutationObserver(render).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+  document.querySelectorAll<HTMLButtonElement>('[data-gsr-unit]').forEach((button) => {
+    button.addEventListener('click', () => {
+      unitSystem = button.dataset.gsrUnit === 'imperial' ? 'imperial' : 'metric';
+      updateUnitButtons();
+      render();
+    });
+  });
+  restoreState();
+  render();
+</script>

package/src/tool/gsr-dispersion-calculator/entry.ts

@@ -0,0 +1,32 @@
+import type { ScienceToolEntry, ToolLocaleContent } from '../../types';
+
+export interface GsrDispersionUI {
+  [key: string]: string;
+}
+
+export type GsrDispersionLocaleContent = ToolLocaleContent<GsrDispersionUI>;
+
+export const gsrDispersionCalculator: ScienceToolEntry<GsrDispersionUI> = {
+  id: 'gsr-dispersion-calculator',
+  icons: {
+    bg: 'mdi:target',
+    fg: 'mdi:chart-scatter-plot',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').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/gsr-dispersion-calculator/gsr-dispersion-calculator.css

@@ -0,0 +1,305 @@
+.gsr-shell {
+  --ink: #172229;
+  --muted: #53616b;
+  --paper: #f7f2e4;
+  --steel: #7d8790;
+  --signal: #d68e45;
+  --green: #61ab81;
+  --card: #fff;
+  --panel: #f9faf7;
+  --soft: #f5f7f6;
+  --cloth: #ece4d2;
+  --range-bg: #eef1ee;
+  --border: rgba(23, 34, 41, 0.12);
+  --border-soft: rgba(23, 34, 41, 0.1);
+  --shadow: rgba(23, 34, 41, 0.08);
+
+  color: var(--ink);
+  margin: 0 auto;
+  padding: 0.75rem;
+  width: 100%;
+}
+
+.gsr-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 18px 44px var(--shadow);
+  display: grid;
+  gap: 0.75rem;
+  overflow: hidden;
+  padding: 0.75rem;
+}
+
+.gsr-visual {
+  background: var(--cloth);
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.gsr-target-head {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 0.85rem 1rem;
+}
+
+.gsr-target-head span,
+.gsr-target-head strong {
+  font-size: 0.82rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.gsr-target-head strong {
+  color: var(--muted);
+}
+
+#gsr-canvas {
+  aspect-ratio: 1;
+  display: block;
+  height: auto;
+  object-fit: contain;
+  width: 100%;
+}
+
+.gsr-controls {
+  background: var(--panel);
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  display: grid;
+  gap: 0.75rem;
+  padding: 0.75rem;
+}
+
+.gsr-slider,
+.gsr-select {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.gsr-unit-toggle {
+  background: var(--soft);
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  display: grid;
+  gap: 0.25rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding: 0.25rem;
+}
+
+.gsr-unit-toggle button {
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 0.82rem;
+  font-weight: 800;
+  line-height: inherit;
+  min-height: 36px;
+  text-transform: uppercase;
+}
+
+.gsr-unit-toggle button[data-active="true"] {
+  background: var(--card);
+  box-shadow: 0 8px 18px var(--shadow);
+  color: var(--ink);
+}
+
+.gsr-slider span,
+.gsr-select span,
+.gsr-reading small,
+.gsr-metrics span {
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.gsr-slider strong {
+  font-size: 1.85rem;
+  line-height: 1;
+}
+
+.gsr-slider input {
+  accent-color: var(--signal);
+  width: 100%;
+}
+
+.gsr-select select {
+  background: var(--soft);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--ink);
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  min-height: 44px;
+  padding: 0.65rem 0.75rem;
+}
+
+.gsr-cone {
+  align-items: center;
+  background: linear-gradient(90deg, #101820, #25353d);
+  border-radius: 8px;
+  display: grid;
+  grid-template-columns: 22px 1fr 8px;
+  min-height: 86px;
+  overflow: hidden;
+  padding: 0.75rem;
+  position: relative;
+}
+
+.gsr-muzzle {
+  background: #cfd5d7;
+  border-radius: 3px;
+  height: 42px;
+  width: 18px;
+  z-index: 2;
+}
+
+.gsr-cone-beam {
+  background: linear-gradient(90deg, rgba(214, 142, 69, 0.9), rgba(97, 171, 129, 0.08));
+  clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%);
+  height: 64px;
+  transform-origin: left center;
+  transition: transform 180ms ease;
+}
+
+.gsr-plane {
+  background: var(--paper);
+  height: 64px;
+  opacity: 0.9;
+  width: 8px;
+}
+
+.gsr-reading {
+  border-left: 5px solid var(--signal);
+  display: grid;
+  gap: 0.45rem;
+  padding-left: 0.9rem;
+}
+
+.gsr-reading h3 {
+  font-size: 1.08rem;
+  margin: 0;
+}
+
+.gsr-reading p,
+.gsr-disclaimer {
+  color: var(--muted);
+  font-size: 0.92rem;
+  line-height: 1.45;
+  margin: 0;
+}
+
+.gsr-metrics {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.gsr-metrics div {
+  background: var(--soft);
+  border-radius: 8px;
+  display: grid;
+  gap: 0.35rem;
+  min-height: 72px;
+  padding: 0.7rem;
+}
+
+.gsr-metrics strong {
+  font-size: 1.55rem;
+}
+
+.gsr-range-strip {
+  display: grid;
+  gap: 0.4rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.gsr-range-strip span {
+  background: var(--range-bg);
+  border-radius: 6px;
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 800;
+  padding: 0.65rem;
+  text-align: center;
+  text-transform: uppercase;
+  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
+}
+
+.gsr-range-strip span[data-active="true"] {
+  background: var(--ink);
+  color: #fff;
+  transform: translateY(-1px);
+}
+
+.gsr-range-strip span:nth-child(2)[data-active="true"] {
+  background: var(--signal);
+}
+
+.gsr-range-strip span:nth-child(3)[data-active="true"] {
+  background: var(--green);
+}
+
+.gsr-range-strip span:nth-child(4)[data-active="true"] {
+  background: var(--steel);
+}
+
+.gsr-disclaimer {
+  border-top: 1px solid var(--border-soft);
+  padding-top: 0.75rem;
+}
+
+.theme-dark .gsr-shell {
+  --ink: #eef4f2;
+  --muted: #a9b6b7;
+  --paper: #ded2b5;
+  --steel: #82909b;
+  --signal: #f0a35a;
+  --green: #77c696;
+  --card: #12191d;
+  --panel: #172126;
+  --soft: #202b31;
+  --cloth: #383329;
+  --range-bg: #202b31;
+  --border: rgba(238, 244, 242, 0.14);
+  --border-soft: rgba(238, 244, 242, 0.1);
+  --shadow: rgba(0, 0, 0, 0.32);
+}
+
+.theme-dark .gsr-cone {
+  background: linear-gradient(90deg, #070b0d, #142127);
+}
+
+.theme-dark .gsr-muzzle {
+  background: #d7dedc;
+}
+
+.theme-dark .gsr-plane {
+  opacity: 0.82;
+}
+
+@media (min-width: 860px) {
+  .gsr-shell {
+    padding: 1rem;
+  }
+
+  .gsr-card {
+    align-items: stretch;
+    grid-template-columns: minmax(420px, 1fr) minmax(300px, 0.34fr);
+  }
+
+  .gsr-range-strip {
+    grid-column: 1 / -1;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .gsr-disclaimer {
+    grid-column: 1 / -1;
+  }
+}