@jjlmoya/utils-forensic-science 1.1.0

package/src/tool/forensic-blood-test-simulator/script.ts

@@ -0,0 +1,192 @@
+import { ChemicalReactionEngine } from './logic';
+import type { SampleType, ReagentType, ReactionState } from './logic';
+import { getReactionColor, getGlowOpacity } from './helpers';
+import { animateDrop, applyPetriReaction } from './dom-utils';
+
+const uiDataEl = document.getElementById('blood-test-ui-data');
+const ui = uiDataEl ? JSON.parse(uiDataEl.textContent || '{}') : {};
+
+const petriDish = document.getElementById('petri-dish'),
+  petriSpecimen = document.getElementById('petri-specimen'),
+  chemicalDrop = document.getElementById('chemical-drop'),
+  viewport = document.getElementById('workbench-viewport');
+
+const statusBadge = document.getElementById('status-badge'),
+  explanationText = document.getElementById('explanation-text'),
+  valCompounds = document.getElementById('val-compounds'),
+  valSpeed = document.getElementById('val-speed'),
+  valDuration = document.getElementById('val-duration'),
+  valSpecimenBase = document.getElementById('val-specimen-base');
+
+const btnReset = document.getElementById('btn-reset-workbench');
+const btnToggleLights = document.getElementById('btn-toggle-lights');
+
+let selectedSample: SampleType = 'blood';
+const addedReagents: ReagentType[] = [];
+let lightingMode: 'on' | 'off' = 'on';
+
+let glowInterval: number | null = null;
+let glowElapsed = 0;
+
+function getSampleName(sample: SampleType): string {
+  const map: Record<SampleType, string> = {
+    blood: ui.sampleBlood,
+    rust: ui.sampleRust,
+    bleach: ui.sampleBleach,
+    potato: ui.samplePotato,
+    saliva: ui.sampleSaliva
+  };
+  return map[sample] || '';
+}
+
+function getReagentName(reagent: ReagentType): string {
+  const map: Record<ReagentType, string> = {
+    km: ui.reagentKM,
+    h2o2: ui.reagentH2O2,
+    luminol: ui.reagentLuminol
+  };
+  return map[reagent] || '';
+}
+
+function clearGlowTimer() {
+  if (glowInterval) {
+    clearInterval(glowInterval);
+    glowInterval = null;
+  }
+}
+
+function updateTextContent(el: HTMLElement | null, text: string) {
+  if (el) {
+    el.textContent = text;
+  }
+}
+
+function updateBadgeState(result: ReactionState) {
+  if (!statusBadge) return;
+  const key = result.resultType.split('-').map((s: string) => s.charAt(0).toUpperCase() + s.slice(1)).join('');
+  statusBadge.textContent = ui[`result${key}`] || '';
+  statusBadge.className = `status-badge status-${result.resultType}`;
+}
+
+function renderReactionState(result: ReactionState, currentOpacity: number) {
+  updateBadgeState(result);
+  updateTextContent(explanationText, ui[result.descriptionKey] || '');
+
+  const compoundsText = result.addedReagents.map(getReagentName).join(' + ') || '-';
+  updateTextContent(valCompounds, compoundsText);
+
+  const speedText = result.intensity > 0 ? `${(result.intensity * 100).toFixed(0)}%` : '-';
+  updateTextContent(valSpeed, speedText);
+
+  const durationText = result.durationMs > 0 ? `${(result.durationMs / 1000).toFixed(1)}s` : '∞';
+  updateTextContent(valDuration, durationText);
+
+  updateTextContent(valSpecimenBase, getSampleName(selectedSample));
+
+  const showGlow = result.glow && lightingMode === 'off';
+  const appliedColor = getReactionColor(result.color, result.intensity);
+
+  applyPetriReaction(petriSpecimen, {
+    color: appliedColor,
+    glow: showGlow,
+    glowColor: result.glowColor,
+    opacity: currentOpacity
+  });
+}
+
+function startGlowAnimation(result: ReactionState) {
+  clearGlowTimer();
+  glowElapsed = 0;
+
+  glowInterval = window.setInterval(() => {
+    glowElapsed += 100;
+    const opacity = getGlowOpacity(glowElapsed, result.durationMs);
+    renderReactionState(result, opacity);
+
+    if (glowElapsed >= result.durationMs) {
+      clearGlowTimer();
+    }
+  }, 100);
+}
+
+function triggerReactionUpdate() {
+  const result = ChemicalReactionEngine.getReaction(selectedSample, addedReagents);
+
+  if (result.glow && lightingMode === 'off' && result.durationMs > 0) {
+    startGlowAnimation(result);
+  } else {
+    clearGlowTimer();
+    renderReactionState(result, 1);
+  }
+}
+
+function selectSample(sample: SampleType) {
+  selectedSample = sample;
+  addedReagents.length = 0;
+  clearGlowTimer();
+  triggerReactionUpdate();
+
+  document.querySelectorAll('.specimen-tube').forEach(node => {
+    node.classList.toggle('selected', node.getAttribute('data-sample') === sample);
+  });
+}
+
+function applyReagentDrop(reagent: ReagentType) {
+  if (reagent === 'luminol') {
+    addedReagents.length = 0;
+    addedReagents.push('luminol');
+  } else {
+    if (addedReagents.includes('luminol')) {
+      addedReagents.length = 0;
+    }
+    if (!addedReagents.includes(reagent)) {
+      addedReagents.push(reagent);
+    }
+  }
+
+  animateDrop(chemicalDrop, petriDish, () => {
+    triggerReactionUpdate();
+  });
+}
+
+function toggleLighting() {
+  const nextMode = lightingMode === 'on' ? 'off' : 'on';
+  lightingMode = nextMode;
+  if (viewport) {
+    viewport.classList.toggle('workbench-lights-off', nextMode === 'off');
+  }
+  if (btnToggleLights) {
+    btnToggleLights.classList.toggle('lights-off', nextMode === 'off');
+  }
+  triggerReactionUpdate();
+}
+
+document.querySelectorAll('.specimen-tube').forEach(node => {
+  node.addEventListener('click', () => {
+    const s = node.getAttribute('data-sample') as SampleType;
+    if (s) selectSample(s);
+  });
+});
+
+document.querySelectorAll('.btn-dispense-fluid').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const r = btn.getAttribute('data-reagent') as ReagentType;
+    if (r) applyReagentDrop(r);
+  });
+});
+
+if (btnToggleLights) {
+  btnToggleLights.addEventListener('click', () => {
+    toggleLighting();
+  });
+}
+
+if (btnReset) {
+  btnReset.addEventListener('click', () => {
+    addedReagents.length = 0;
+    clearGlowTimer();
+    triggerReactionUpdate();
+  });
+}
+
+triggerReactionUpdate();

package/src/tool/forensic-blood-test-simulator/seo.astro

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

package/src/tool/forensic-fiber-comparison-microscope/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as BibliographyRenderer } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+---
+
+<BibliographyRenderer links={bibliography} />

package/src/tool/forensic-fiber-comparison-microscope/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Forensic Fiber Examination Guidelines.',
+    url: 'https://www.ojp.gov/ncjrs/virtual-library/abstracts/forensic-fiber-examinations-guidelines',
+  },
+  {
+    name: 'Standard Guide for Microscopical Examination of Textile Fibers.',
+    url: 'https://www.physicsnorm.com/NewSamples/ASTM/193661856/ASTM-E2228-19-1.pdf',
+  },
+  {
+    name: 'With a Trace: Analyzing Crime Scene Clues',
+    url: 'https://archives.fbi.gov/archives/news/stories/2007/july/trace070207',
+  },
+];

package/src/tool/forensic-fiber-comparison-microscope/component.astro

@@ -0,0 +1,146 @@
+---
+import './forensic-fiber-comparison-microscope.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<section class="fiber-lab" data-fiber-tool>
+  <div class="fiber-stage">
+    <div class="fiber-ocular" aria-label={ui.viewerAria}>
+      <canvas id="fiber-canvas" width="860" height="560"></canvas>
+      <div class="fiber-split" aria-hidden="true"></div>
+      <div class="fiber-label fiber-label-left" id="fiber-left-label">-</div>
+      <div class="fiber-label fiber-label-right" id="fiber-right-label">-</div>
+      <div class="fiber-score">
+        <span>{ui.combinedMatch}</span>
+        <strong id="fiber-combined-score">-</strong>
+      </div>
+    </div>
+
+    <aside class="fiber-controls">
+      <div class="fiber-field">
+        <span>{ui.questionedSample}</span>
+        <select id="fiber-left" class="fiber-native-select" aria-hidden="true" tabindex="-1">
+          <option value="questionedCotton">{ui.questionedCotton}</option>
+        </select>
+        <div class="fiber-builder-head">
+          <span id="fiber-left-choice">{ui.questionedCotton}</span>
+          <small id="fiber-left-summary">{ui.builderSummaryDefault}</small>
+        </div>
+        <div class="fiber-builder-grid">
+          <div class="fiber-builder-group">
+            <small>{ui.material}</small>
+            <div class="fiber-pill-row" role="group" aria-label={ui.material}>
+              <button type="button" data-fiber-builder="material" data-builder-value="cotton" data-active="true">{ui.cotton}</button>
+              <button type="button" data-fiber-builder="material" data-builder-value="wool" data-active="false">{ui.woolMaterial}</button>
+              <button type="button" data-fiber-builder="material" data-builder-value="polyester" data-active="false">{ui.polyesterMaterial}</button>
+              <button type="button" data-fiber-builder="material" data-builder-value="nylon" data-active="false">{ui.nylonMaterial}</button>
+            </div>
+          </div>
+          <div class="fiber-builder-group">
+            <small>{ui.twist}</small>
+            <div class="fiber-pill-row" role="group" aria-label={ui.twist}>
+              <button type="button" data-fiber-builder="twist" data-builder-value="irregular" data-active="true">{ui.irregularTwist}</button>
+              <button type="button" data-fiber-builder="twist" data-builder-value="S" data-active="false">{ui.sTwist}</button>
+              <button type="button" data-fiber-builder="twist" data-builder-value="Z" data-active="false">{ui.zTwist}</button>
+            </div>
+          </div>
+          <label class="fiber-mini-slider">
+            <span>{ui.diameter}</span>
+            <strong id="fiber-diameter-label">18 µm</strong>
+            <input id="fiber-diameter" type="range" min="8" max="36" value="18" />
+          </label>
+          <label class="fiber-mini-slider">
+            <span>{ui.polarResponse}</span>
+            <strong id="fiber-birefringence-label">0.032</strong>
+            <input id="fiber-questioned-birefringence" type="range" min="10" max="65" value="32" />
+          </label>
+          <div class="fiber-builder-group fiber-builder-wide">
+            <small>{ui.dyeProfile}</small>
+            <div class="fiber-pill-row" role="group" aria-label={ui.dyeProfile}>
+              <button type="button" data-fiber-builder="dyePreset" data-builder-value="indigo" data-active="true">{ui.indigoDye}</button>
+              <button type="button" data-fiber-builder="dyePreset" data-builder-value="crimson" data-active="false">{ui.crimsonDye}</button>
+              <button type="button" data-fiber-builder="dyePreset" data-builder-value="navy" data-active="false">{ui.navyDye}</button>
+              <button type="button" data-fiber-builder="dyePreset" data-builder-value="violet" data-active="false">{ui.violetDye}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="fiber-field">
+        <span>{ui.knownSample}</span>
+        <select id="fiber-right" class="fiber-native-select" aria-hidden="true" tabindex="-1">
+          <option value="suspectCotton">{ui.suspectCotton}</option>
+          <option value="wool">{ui.wool}</option>
+          <option value="polyester">{ui.polyester}</option>
+          <option value="nylon">{ui.nylon}</option>
+        </select>
+        <button class="fiber-choice-trigger" type="button" data-fiber-choice-trigger="right" aria-haspopup="listbox" aria-expanded="false">
+          <span id="fiber-right-choice">{ui.suspectCotton}</span>
+          <span class="fiber-choice-mark" aria-hidden="true"></span>
+        </button>
+        <div class="fiber-choice-menu" data-fiber-choice-menu="right" role="listbox" aria-label={ui.knownSample}>
+          <button type="button" role="option" data-fiber-choice="right" data-fiber-value="suspectCotton" aria-selected="true">{ui.suspectCotton}</button>
+          <button type="button" role="option" data-fiber-choice="right" data-fiber-value="wool" aria-selected="false">{ui.wool}</button>
+          <button type="button" role="option" data-fiber-choice="right" data-fiber-value="polyester" aria-selected="false">{ui.polyester}</button>
+          <button type="button" role="option" data-fiber-choice="right" data-fiber-value="nylon" aria-selected="false">{ui.nylon}</button>
+        </div>
+      </div>
+
+      <label class="fiber-slider fiber-focus">
+        <span>{ui.focus}</span>
+        <strong id="fiber-focus-label">-</strong>
+        <input id="fiber-focus" type="range" min="0" max="100" value="62" />
+      </label>
+
+      <label class="fiber-slider fiber-polar">
+        <span>{ui.polarizer}</span>
+        <strong id="fiber-polar-label">-</strong>
+        <input id="fiber-polarizer" type="range" min="0" max="180" value="45" />
+      </label>
+
+      <div class="fiber-readouts">
+        <div>
+          <span>{ui.morphology}</span>
+          <strong id="fiber-morphology-score">-</strong>
+        </div>
+        <div>
+          <span>{ui.spectrum}</span>
+          <strong id="fiber-spectrum-score">-</strong>
+        </div>
+        <div>
+          <span>{ui.birefringence}</span>
+          <strong id="fiber-birefringence">-</strong>
+        </div>
+      </div>
+
+      <article class="fiber-verdict" id="fiber-verdict-panel" data-verdict="partial" aria-live="polite">
+        <div class="fiber-verdict-head">
+          <span id="fiber-verdict-status">-</span>
+          <strong id="fiber-verdict-score">-</strong>
+        </div>
+        <div class="fiber-verdict-meter" aria-hidden="true">
+          <span id="fiber-verdict-meter"></span>
+        </div>
+        <p id="fiber-verdict">-</p>
+      </article>
+    </aside>
+
+    <div class="fiber-chart" aria-label={ui.chartAria}>
+      <svg id="fiber-spectrum-chart" viewBox="0 0 720 270" role="img"></svg>
+    </div>
+
+    <p class="fiber-disclaimer">{ui.disclaimer}</p>
+  </div>
+</section>
+
+<script id="fiber-ui" type="application/json" set:html={JSON.stringify(ui)}></script>
+<script>
+  import { initFiberComparisonMicroscope } from './view';
+
+  initFiberComparisonMicroscope(JSON.parse(document.getElementById('fiber-ui')?.textContent || '{}'));
+</script>

package/src/tool/forensic-fiber-comparison-microscope/entry.ts

@@ -0,0 +1,32 @@
+import type { ScienceToolEntry, ToolLocaleContent } from '../../types';
+
+export interface FiberComparisonMicroscopeUI {
+  [key: string]: string;
+}
+
+export type FiberComparisonMicroscopeLocaleContent = ToolLocaleContent<FiberComparisonMicroscopeUI>;
+
+export const forensicFiberComparisonMicroscope: ScienceToolEntry<FiberComparisonMicroscopeUI> = {
+  id: 'forensic-fiber-comparison-microscope',
+  icons: {
+    bg: 'mdi:microscope',
+    fg: 'mdi:vector-polyline',
+  },
+  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),
+  },
+};