@jjlmoya/utils-forensic-science 1.1.0

package/src/tool/forensic-microcrystal-drug-simulator/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'SWGDRUG Recommendations. Scientific Working Group for the Analysis of Seized Drugs.',
+    url: 'https://www.swgdrug.org/Documents/SWGDRUG%20Recommendations%20Version%208_FINAL_ForPosting_092919.pdf',
+  },
+  {
+    name: 'United Nations Office on Drugs and Crime. Recommended Methods for the Identification and Analysis of Cocaine in Seized Materials.',
+    url: 'https://www.unodc.org/documents/scientific/Cocaine_Manual_Rev_1.pdf',
+  }
+];

package/src/tool/forensic-microcrystal-drug-simulator/component.astro

@@ -0,0 +1,240 @@
+---
+import './forensic-microcrystal-drug-simulator.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<section class="microcrystal-shell" data-microcrystal-tool>
+  <div class="microcrystal-card">
+    <div class="microcrystal-stage">
+      <div class="microcrystal-toolbar">
+        <span>{ui.microscope}</span>
+        <strong id="microcrystal-match">-</strong>
+      </div>
+      <div class="microcrystal-lens" aria-label={ui.canvasAria}>
+        <canvas id="microcrystal-canvas" width="760" height="560"></canvas>
+        <div class="microcrystal-reticle" aria-hidden="true"></div>
+      </div>
+      <div class="microcrystal-readout">
+        <span id="microcrystal-habit">-</span>
+        <span id="microcrystal-cue">-</span>
+      </div>
+    </div>
+
+    <aside class="microcrystal-controls">
+      <label class="microcrystal-sample-field">
+        <span>{ui.sample}</span>
+        <span class="microcrystal-select">
+          <select id="microcrystal-sample">
+            <option value="cocaine">{ui.sampleCocaine}</option>
+            <option value="heroin">{ui.sampleHeroin}</option>
+            <option value="amphetamine">{ui.sampleAmphetamine}</option>
+            <option value="methamphetamine">{ui.sampleMethamphetamine}</option>
+          </select>
+        </span>
+      </label>
+
+      <div class="microcrystal-reagents" role="group" aria-label={ui.reagent}>
+        <button type="button" data-reagent="platinumChloride" data-active="true">
+          <span></span>
+          {ui.reagentPlatinum}
+        </button>
+        <button type="button" data-reagent="goldChloride" data-active="false">
+          <span></span>
+          {ui.reagentGold}
+        </button>
+        <button type="button" data-reagent="dragendorff" data-active="false">
+          <span></span>
+          {ui.reagentDragendorff}
+        </button>
+      </div>
+
+      <label>
+        <span>{ui.polarization}</span>
+        <input id="microcrystal-polarization" type="range" min="0" max="100" value="72" />
+      </label>
+
+      <div class="microcrystal-metrics">
+        <div>
+          <span>{ui.confidence}</span>
+          <strong id="microcrystal-confidence">-</strong>
+          <i id="microcrystal-confidence-bar"></i>
+        </div>
+        <div>
+          <span>{ui.growth}</span>
+          <strong id="microcrystal-growth">-</strong>
+          <i id="microcrystal-growth-bar"></i>
+        </div>
+        <div>
+          <span>{ui.birefringence}</span>
+          <strong id="microcrystal-birefringence">-</strong>
+          <i id="microcrystal-birefringence-bar"></i>
+        </div>
+      </div>
+
+      <button class="microcrystal-grow" type="button" id="microcrystal-grow">{ui.regrow}</button>
+      <aside class="microcrystal-warning" aria-label={ui.warningLabel}>
+        <strong>{ui.warningTitle}</strong>
+        <p>{ui.disclaimer}</p>
+      </aside>
+    </aside>
+  </div>
+</section>
+
+<script id="microcrystal-ui" type="application/json" set:html={JSON.stringify(ui)}></script>
+<script>
+  import { CrystallographyEngine } from './logic';
+  import type { CrystalHabit, CrystalReagent, CrystalSeed, DrugSample } from './logic';
+
+  const engine = new CrystallographyEngine();
+  const ui = JSON.parse(document.getElementById('microcrystal-ui')?.textContent || '{}');
+  const canvas = document.getElementById('microcrystal-canvas') as HTMLCanvasElement | null;
+  const context = canvas?.getContext('2d');
+  const sampleSelect = document.getElementById('microcrystal-sample') as HTMLSelectElement | null;
+  const polarizationInput = document.getElementById('microcrystal-polarization') as HTMLInputElement | null;
+  let reagent: CrystalReagent = 'platinumChloride';
+  let growthStart = performance.now();
+
+  function setText(id: string, value: string): void {
+    const element = document.getElementById(id);
+    if (element) element.textContent = value;
+  }
+
+  function setMeter(id: string, value: number): void {
+    const element = document.getElementById(id);
+    if (element) element.style.setProperty('--value', `${Math.max(0, Math.min(100, value))}%`);
+  }
+
+  function habitLabel(habit: CrystalHabit): string {
+    return ui[`habit${habit.charAt(0).toUpperCase()}${habit.slice(1)}`] ?? habit;
+  }
+
+  function matchLabel(match: string): string {
+    if (match === 'reference-like') return ui.matchReference;
+    if (match === 'partial') return ui.matchPartial;
+    return ui.matchNonSpecific;
+  }
+
+  function drawBackground(isDark: boolean, polarization: number): void {
+    if (!canvas || !context) return;
+    context.fillStyle = isDark ? '#10262c' : '#edf4f1';
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    context.globalAlpha = isDark ? 0.05 + polarization / 900 : 0.025 + polarization / 1400;
+    context.strokeStyle = isDark ? '#f5fbff' : '#4f7a74';
+    context.lineWidth = isDark ? 1 : 0.8;
+    for (let x = -140; x < canvas.width; x += 38) {
+      context.beginPath();
+      context.moveTo(x, 0);
+      context.lineTo(x + 210, canvas.height);
+      context.stroke();
+    }
+    context.globalAlpha = 1;
+  }
+
+  function drawNeedle(seed: CrystalSeed, progress: number, hue: number, polarization: number): void {
+    if (!context) return;
+    const x = seed.x * 7.6;
+    const y = seed.y * 5.6;
+    const length = seed.length * progress;
+    const glow = 0.35 + polarization / 180;
+    context.save();
+    context.translate(x, y);
+    context.rotate(seed.angle);
+    context.strokeStyle = `hsla(${hue}, 88%, ${56 + polarization * 0.18}%, ${glow})`;
+    context.lineWidth = seed.width;
+    context.beginPath();
+    context.moveTo(0, 0);
+    context.lineTo(length, 0);
+    context.moveTo(length * 0.35, 0);
+    context.lineTo(length * 0.72, length * 0.22 * seed.branch);
+    context.moveTo(length * 0.42, 0);
+    context.lineTo(length * 0.82, -length * 0.2 * seed.branch);
+    context.stroke();
+    context.restore();
+  }
+
+  function drawRosette(seed: CrystalSeed, progress: number, hue: number, polarization: number): void {
+    for (let spoke = 0; spoke < 9; spoke++) {
+      drawNeedle({ ...seed, angle: seed.angle + spoke * 0.7, length: seed.length * 0.62 }, progress, hue + spoke * 7, polarization);
+    }
+  }
+
+  function drawPlate(seed: CrystalSeed, progress: number, hue: number, polarization: number): void {
+    if (!context) return;
+    const radius = seed.length * progress * 0.42;
+    context.save();
+    context.translate(seed.x * 7.6, seed.y * 5.6);
+    context.rotate(seed.angle);
+    context.fillStyle = `hsla(${hue}, 74%, ${60 + polarization * 0.15}%, 0.38)`;
+    context.strokeStyle = `hsla(${hue + 18}, 92%, 74%, 0.72)`;
+    context.lineWidth = 1.4;
+    context.beginPath();
+    for (let side = 0; side < 6; side++) {
+      const angle = side * Math.PI / 3;
+      const x = Math.cos(angle) * radius;
+      const y = Math.sin(angle) * radius * 0.62;
+      if (side === 0) context.moveTo(x, y);
+      else context.lineTo(x, y);
+    }
+    context.closePath();
+    context.fill();
+    context.stroke();
+    context.restore();
+  }
+
+  function drawPattern(result: { habit: CrystalHabit; seeds: CrystalSeed[]; hue: number }, progress: number, polarization: number): void {
+    const { habit, seeds, hue } = result;
+    seeds.forEach((seed, index) => {
+      const localProgress = Math.max(0, Math.min(1, progress - index / (seeds.length * 2.5)));
+      if (habit === 'rosettes') drawRosette(seed, localProgress, hue, polarization);
+      else if (habit === 'plates') drawPlate(seed, localProgress, hue, polarization);
+      else if (habit === 'weakScatter') drawPlate({ ...seed, length: seed.length * 0.42 }, localProgress, hue, polarization);
+      else drawNeedle(seed, localProgress, hue, polarization);
+    });
+  }
+
+  function render(): void {
+    if (!canvas || !context || !sampleSelect || !polarizationInput) return;
+    const sample = sampleSelect.value as DrugSample;
+    const polarization = Number(polarizationInput.value);
+    const result = engine.simulate(sample, reagent);
+    const progress = Math.min(1, (performance.now() - growthStart) / (1800 - result.growthRate * 9));
+    const isDark = document.documentElement.classList.contains('theme-dark');
+    drawBackground(isDark, polarization);
+    drawPattern(result, progress, polarization);
+    setText('microcrystal-match', matchLabel(result.matchLabel));
+    setText('microcrystal-habit', habitLabel(result.habit));
+    setText('microcrystal-cue', ui[result.cueKey] || '');
+    setText('microcrystal-confidence', `${result.confidence}%`);
+    setText('microcrystal-growth', `${result.growthRate}%`);
+    setText('microcrystal-birefringence', `${result.birefringence}%`);
+    setMeter('microcrystal-confidence-bar', result.confidence);
+    setMeter('microcrystal-growth-bar', result.growthRate);
+    setMeter('microcrystal-birefringence-bar', result.birefringence);
+    if (progress < 1) requestAnimationFrame(render);
+  }
+
+  function restart(): void {
+    growthStart = performance.now();
+    render();
+  }
+
+  sampleSelect?.addEventListener('change', restart);
+  polarizationInput?.addEventListener('input', render);
+  document.getElementById('microcrystal-grow')?.addEventListener('click', restart);
+  document.querySelectorAll<HTMLButtonElement>('[data-reagent]').forEach((button) => {
+    button.addEventListener('click', () => {
+      reagent = (button.dataset.reagent ?? 'platinumChloride') as CrystalReagent;
+      document.querySelectorAll<HTMLButtonElement>('[data-reagent]').forEach((item) => {
+        item.dataset.active = item === button ? 'true' : 'false';
+      });
+      restart();
+    });
+  });
+  new MutationObserver(render).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+  restart();
+</script>

package/src/tool/forensic-microcrystal-drug-simulator/entry.ts

@@ -0,0 +1,32 @@
+import type { ScienceToolEntry, ToolLocaleContent } from '../../types';
+
+export interface MicrocrystalDrugSimulatorUI {
+  [key: string]: string;
+}
+
+export type MicrocrystalDrugSimulatorLocaleContent = ToolLocaleContent<MicrocrystalDrugSimulatorUI>;
+
+export const forensicMicrocrystalDrugSimulator: ScienceToolEntry<MicrocrystalDrugSimulatorUI> = {
+  id: 'forensic-microcrystal-drug-simulator',
+  icons: {
+    bg: 'mdi:microscope',
+    fg: 'mdi:crystal-ball',
+  },
+  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/forensic-microcrystal-drug-simulator/forensic-microcrystal-drug-simulator.css

@@ -0,0 +1,430 @@
+.microcrystal-shell {
+  --ink: #25302f;
+  --muted: #6d7875;
+  --card: #fff;
+  --panel: #f4f7f5;
+  --control: #fff;
+  --control-strong: #fff;
+  --border: rgba(37, 48, 47, 0.12);
+  --border-soft: rgba(37, 48, 47, 0.08);
+  --accent: #4f8f88;
+  --accent-soft: #dcebe8;
+  --amber: #b88a36;
+  --rose: #b56b82;
+  --stage: #eef3f1;
+  --stage-ink: #25302f;
+  --shadow: rgba(37, 48, 47, 0.08);
+
+  color: var(--ink);
+  padding: 0.75rem;
+  width: 100%;
+}
+
+.microcrystal-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 14px 34px var(--shadow);
+  display: grid;
+  gap: 0.75rem;
+  overflow: hidden;
+  padding: 0.75rem;
+}
+
+.microcrystal-stage,
+.microcrystal-controls {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.microcrystal-stage {
+  background: var(--stage);
+}
+
+.microcrystal-toolbar,
+.microcrystal-readout {
+  align-items: center;
+  color: var(--stage-ink);
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+  padding: 0.82rem 0.9rem;
+}
+
+.microcrystal-toolbar span,
+.microcrystal-toolbar strong,
+.microcrystal-controls span,
+.microcrystal-metrics span {
+  font-size: 0.76rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.microcrystal-toolbar strong {
+  color: var(--accent);
+}
+
+.microcrystal-lens {
+  aspect-ratio: 1.25;
+  display: grid;
+  overflow: hidden;
+  position: relative;
+}
+
+#microcrystal-canvas,
+.microcrystal-reticle {
+  grid-area: 1 / 1;
+}
+
+#microcrystal-canvas {
+  height: 100%;
+  width: 100%;
+}
+
+.microcrystal-reticle {
+  border: 8px solid rgba(55, 68, 67, 0.16);
+  border-radius: 50%;
+  margin: 1rem;
+  pointer-events: none;
+}
+
+.microcrystal-reticle::before,
+.microcrystal-reticle::after {
+  background: rgba(55, 68, 67, 0.1);
+  content: "";
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.microcrystal-reticle::before {
+  height: 1px;
+  width: 100%;
+}
+
+.microcrystal-reticle::after {
+  height: 100%;
+  width: 1px;
+}
+
+.microcrystal-readout {
+  align-items: flex-start;
+  background: var(--stage);
+  border-top: 1px solid var(--border-soft);
+  display: grid;
+}
+
+.microcrystal-readout span:first-child {
+  color: var(--accent);
+  font-weight: 900;
+}
+
+.microcrystal-readout span:last-child,
+.microcrystal-controls p {
+  color: var(--muted);
+  font-size: 0.9rem;
+  line-height: 1.45;
+  margin: 0;
+}
+
+.microcrystal-controls {
+  background: var(--panel);
+  display: grid;
+  gap: 0.75rem;
+  padding: 0.75rem;
+}
+
+.microcrystal-controls label {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.microcrystal-controls input {
+  accent-color: var(--accent);
+  width: 100%;
+}
+
+.microcrystal-sample-field {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.microcrystal-select {
+  background: var(--control);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  display: grid;
+  min-height: 58px;
+  position: relative;
+}
+
+.microcrystal-select::before {
+  background: var(--accent-soft);
+  border-radius: 999px;
+  content: "";
+  height: 28px;
+  position: absolute;
+  right: 0.65rem;
+  top: calc(50% - 14px);
+  width: 28px;
+}
+
+.microcrystal-select::after {
+  border-bottom: 2px solid var(--accent);
+  border-right: 2px solid var(--accent);
+  content: "";
+  height: 7px;
+  pointer-events: none;
+  position: absolute;
+  right: 1.24rem;
+  top: calc(50% - 5px);
+  transform: rotate(45deg);
+  width: 7px;
+}
+
+.microcrystal-select select {
+  appearance: none;
+  background: var(--control);
+  border: 0;
+  color: var(--ink);
+  cursor: pointer;
+  font-size: inherit;
+  font-weight: 800;
+  line-height: inherit;
+  min-height: 56px;
+  padding: 0.75rem 3.1rem 0.75rem 0.85rem;
+  width: 100%;
+}
+
+.microcrystal-select option {
+  background: var(--control);
+  color: var(--ink);
+}
+
+.microcrystal-select:focus-within {
+  border-color: rgba(79, 143, 136, 0.62);
+  box-shadow: 0 0 0 3px rgba(79, 143, 136, 0.14);
+}
+
+.microcrystal-reagents {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.microcrystal-reagents button,
+.microcrystal-grow {
+  align-items: center;
+  background: var(--control-strong);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--ink);
+  cursor: pointer;
+  display: flex;
+  font-weight: 800;
+  gap: 0.6rem;
+  justify-content: flex-start;
+  min-height: 52px;
+  padding: 0.6rem 0.7rem;
+  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
+}
+
+.microcrystal-reagents button[data-active="true"] {
+  background: var(--accent-soft);
+  border-color: rgba(79, 143, 136, 0.44);
+  color: var(--ink);
+  transform: translateY(-1px);
+}
+
+.microcrystal-reagents span {
+  border-radius: 999px;
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+}
+
+.microcrystal-reagents button:nth-child(1) span {
+  background: var(--accent);
+}
+
+.microcrystal-reagents button:nth-child(2) span {
+  background: var(--amber);
+}
+
+.microcrystal-reagents button:nth-child(3) span {
+  background: var(--rose);
+}
+
+.microcrystal-metrics {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.microcrystal-metrics div {
+  background: var(--control);
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  display: grid;
+  gap: 0.45rem;
+  min-height: 96px;
+  overflow: hidden;
+  padding: 0.7rem;
+  position: relative;
+}
+
+.microcrystal-metrics div::before {
+  background: var(--accent-soft);
+  border-radius: 999px;
+  content: "";
+  height: 38px;
+  opacity: 0.8;
+  position: absolute;
+  right: -14px;
+  top: -16px;
+  width: 38px;
+}
+
+.microcrystal-metrics span,
+.microcrystal-metrics strong,
+.microcrystal-metrics i {
+  position: relative;
+  z-index: 1;
+}
+
+.microcrystal-metrics span {
+  color: var(--muted);
+}
+
+.microcrystal-metrics strong {
+  color: var(--ink);
+  font-size: 1.55rem;
+  line-height: 1;
+}
+
+.microcrystal-metrics i {
+  --value: 0%;
+
+  background: rgba(37, 48, 47, 0.09);
+  border-radius: 999px;
+  display: block;
+  height: 7px;
+  overflow: hidden;
+}
+
+.microcrystal-metrics i::before {
+  background: var(--accent);
+  border-radius: inherit;
+  content: "";
+  display: block;
+  height: 100%;
+  width: var(--value);
+}
+
+.microcrystal-metrics div:nth-child(2)::before {
+  background: rgba(184, 138, 54, 0.18);
+}
+
+.microcrystal-metrics div:nth-child(2) i::before {
+  background: var(--amber);
+}
+
+.microcrystal-metrics div:nth-child(3)::before {
+  background: rgba(181, 107, 130, 0.18);
+}
+
+.microcrystal-metrics div:nth-child(3) i::before {
+  background: var(--rose);
+}
+
+.microcrystal-grow {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+  justify-content: center;
+  min-height: 56px;
+}
+
+.microcrystal-warning {
+  background: #fffaf0;
+  border: 1px solid rgba(184, 138, 54, 0.28);
+  border-left: 5px solid var(--amber);
+  border-radius: 8px;
+  display: grid;
+  gap: 0.35rem;
+  padding: 0.75rem 0.85rem;
+}
+
+.microcrystal-warning strong {
+  color: #7c5b1c;
+  font-size: 0.78rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.microcrystal-warning p {
+  color: #5f594d;
+  margin: 0;
+}
+
+.theme-dark .microcrystal-shell {
+  --ink: #eef8f7;
+  --muted: #a5b6b4;
+  --card: #10191d;
+  --panel: #142429;
+  --control: #1b3035;
+  --control-strong: #1b3035;
+  --border: rgba(238, 248, 247, 0.14);
+  --border-soft: rgba(238, 248, 247, 0.09);
+  --accent: #45bcc1;
+  --accent-soft: #1f3c42;
+  --amber: #e1a843;
+  --rose: #e06b95;
+  --stage: #0d2224;
+  --stage-ink: #eef8f7;
+  --shadow: rgba(0, 0, 0, 0.34);
+}
+
+.theme-dark .microcrystal-card,
+.theme-dark .microcrystal-controls {
+  background: var(--card);
+}
+
+.theme-dark .microcrystal-select,
+.theme-dark .microcrystal-metrics div {
+  background: var(--control);
+}
+
+.theme-dark .microcrystal-warning {
+  background: #211d12;
+  border-color: rgba(225, 168, 67, 0.28);
+  border-left-color: var(--amber);
+}
+
+.theme-dark .microcrystal-warning strong {
+  color: #e8c46a;
+}
+
+.theme-dark .microcrystal-warning p {
+  color: var(--muted);
+}
+
+.theme-dark .microcrystal-reticle {
+  border-color: rgba(1, 10, 13, 0.22);
+}
+
+.theme-dark .microcrystal-reticle::before,
+.theme-dark .microcrystal-reticle::after {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+@media (min-width: 900px) {
+  .microcrystal-shell {
+    padding: 1rem;
+  }
+
+  .microcrystal-card {
+    grid-template-columns: minmax(520px, 1fr) minmax(300px, 0.34fr);
+  }
+}