@jjlmoya/utils-science 1.42.0 → 1.43.0

package/src/tool/fermi-paradox-filter-lab/component.astro

@@ -0,0 +1,257 @@
+---
+import './fermi-paradox-filter-lab.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="fermi-lab" id="fermi-lab" data-max-label={ui.maxLabel} data-year-unit={ui.yearUnit}>
+  <div class="fermi-sieve">
+    <section class="fermi-metrics" aria-label={ui.metricsLabel}>
+      <div><span>{ui.birthRate}</span><strong><span id="fermi-rate">0.00</span><small>/{ui.yearUnit}</small></strong></div>
+      <div><span>{ui.peakCivilizations}</span><strong id="fermi-peak">0</strong></div>
+      <div><span>{ui.finalCivilizations}</span><strong id="fermi-final">0</strong></div>
+      <div><span>{ui.silenceScore}</span><strong><span id="fermi-silence">0</span><small>/{ui.silenceScale}</small></strong></div>
+    </section>
+
+    <section class="fermi-graph" aria-label={ui.chartLabel}>
+      <canvas id="fermi-chart" width="920" height="420" aria-label={ui.chartLabel}></canvas>
+    </section>
+
+    <section class="fermi-console" aria-label={ui.controlsLabel}>
+      <div class="fermi-steps" aria-label={ui.controlsLabel}>
+        <button type="button" class="is-active" data-step="stars" data-label={ui.starFormationRate}>{ui.step01}</button>
+        <button type="button" data-step="planets" data-label={ui.habitableFraction}>{ui.step02}</button>
+        <button type="button" data-step="life" data-label={ui.lifeFraction}>{ui.step03}</button>
+        <button type="button" data-step="intelligence" data-label={ui.intelligenceFraction}>{ui.step04}</button>
+        <button type="button" data-step="technology" data-label={ui.technologyFraction}>{ui.step05}</button>
+        <button type="button" data-step="lifetime" data-label={ui.signalLifetime}>{ui.step06}</button>
+        <button type="button" data-step="filter" data-label={ui.filterSeverity}>{ui.step07}</button>
+        <button type="button" data-step="horizon" data-label={ui.horizonYears}>{ui.step08}</button>
+      </div>
+
+      <label class="fermi-active-filter">
+        <span id="fermi-active-label">{ui.starFormationRate}</span>
+        <output id="fermi-active-value">6.0</output>
+        <input id="fermi-active-input" type="range" min="1" max="12" step="0.1" value="6" />
+      </label>
+    </section>
+  </div>
+</div>
+
+<script>
+  import { simulateFermiFilters } from './logic';
+
+  const canvas = document.getElementById('fermi-chart') as HTMLCanvasElement | null;
+  const context = canvas?.getContext('2d');
+  const activeInput = document.getElementById('fermi-active-input') as HTMLInputElement | null;
+  const activeLabel = document.getElementById('fermi-active-label');
+  const activeValue = document.getElementById('fermi-active-value');
+  const stepButtons = Array.from(document.querySelectorAll<HTMLButtonElement>('[data-step]'));
+  const labRoot = document.getElementById('fermi-lab');
+  const currentLocale = document.documentElement.lang || 'en';
+  const maxLabel = labRoot?.dataset.maxLabel ?? '';
+  const yearUnit = labRoot?.dataset.yearUnit ?? '';
+
+  const outputs = {
+    rate: document.getElementById('fermi-rate'),
+    peak: document.getElementById('fermi-peak'),
+    final: document.getElementById('fermi-final'),
+    silence: document.getElementById('fermi-silence'),
+  };
+
+  const state = {
+    stars: 6,
+    planets: 30,
+    life: 15,
+    intelligence: 8,
+    technology: 40,
+    lifetime: 4,
+    filter: 45,
+    horizon: 5.3,
+  };
+
+  const steps = {
+    stars: { min: 1, max: 12, step: 0.1, format: (value: number) => value.toFixed(1) },
+    planets: { min: 1, max: 100, step: 1, format: (value: number) => `${Math.round(value)}%` },
+    life: { min: 1, max: 100, step: 1, format: (value: number) => `${Math.round(value)}%` },
+    intelligence: { min: 1, max: 100, step: 1, format: (value: number) => `${Math.round(value)}%` },
+    technology: { min: 1, max: 100, step: 1, format: (value: number) => `${Math.round(value)}%` },
+    lifetime: { min: 2, max: 6, step: 0.05, format: (value: number) => `${Math.round(10 ** value).toLocaleString(currentLocale)} ${yearUnit}` },
+    filter: { min: 0, max: 98, step: 1, format: (value: number) => `${Math.round(value)}%` },
+    horizon: { min: 4, max: 6, step: 0.05, format: (value: number) => `${Math.round(10 ** value).toLocaleString(currentLocale)} ${yearUnit}` },
+  } as const;
+
+  type StepKey = keyof typeof steps;
+  let activeStep: StepKey = 'stars';
+
+  const formatCount = (value: number) => value.toLocaleString(currentLocale, { maximumFractionDigits: value < 10 ? 2 : 0 });
+
+  const chartFrame = () => ({
+    width: canvas?.width ?? 0,
+    height: canvas?.height ?? 0,
+    padX: 44,
+    padTop: 34,
+    padBottom: 44,
+  });
+
+  const chartY = (value: number, maxValue: number, frame: ReturnType<typeof chartFrame>) =>
+    frame.height - frame.padBottom - (value / maxValue) * (frame.height - frame.padTop - frame.padBottom);
+
+  const chartX = (index: number, count: number, frame: ReturnType<typeof chartFrame>) =>
+    frame.padX + (index / (count - 1)) * (frame.width - frame.padX * 2);
+
+  const chartStyles = () => {
+    const styles = getComputedStyle(canvas);
+    return {
+      bg: styles.getPropertyValue('--fermi-bg').trim() || '#fbfaf4',
+      grid: styles.getPropertyValue('--fermi-hairline').trim() || 'rgba(16, 20, 18, 0.18)',
+      text: styles.getPropertyValue('--fermi-muted').trim() || '#5e6863',
+      line: styles.getPropertyValue('--fermi-curve').trim() || '#101412',
+      fill: styles.getPropertyValue('--fermi-fill').trim() || 'rgba(16, 20, 18, 0.055)',
+      accent: styles.getPropertyValue('--fermi-accent').trim() || '#006f6f',
+    };
+  };
+
+  const drawChartBase = (frame: ReturnType<typeof chartFrame>, styles: ReturnType<typeof chartStyles>) => {
+    context.clearRect(0, 0, frame.width, frame.height);
+    context.fillStyle = styles.bg;
+    context.fillRect(0, 0, frame.width, frame.height);
+
+    context.strokeStyle = styles.grid;
+    context.lineWidth = 1;
+    for (let i = 0; i < 5; i += 1) {
+      const y = frame.padTop + ((frame.height - frame.padTop - frame.padBottom) / 4) * i;
+      context.beginPath();
+      context.moveTo(frame.padX, y);
+      context.lineTo(frame.width - frame.padX, y);
+      context.stroke();
+    }
+  };
+
+  const drawChartGates = (frame: ReturnType<typeof chartFrame>, styles: ReturnType<typeof chartStyles>) => {
+    const gates = ['stars', 'planets', 'life', 'intelligence', 'technology', 'lifetime', 'filter', 'horizon'];
+    gates.forEach((gate, index) => {
+      const x = frame.padX + ((index + 0.5) / gates.length) * (frame.width - frame.padX * 2);
+      context.globalAlpha = gate === activeStep ? 0.7 : 0.24;
+      context.strokeStyle = gate === activeStep ? styles.accent : styles.grid;
+      context.beginPath();
+      context.moveTo(x, frame.padTop);
+      context.lineTo(x, frame.height - frame.padBottom);
+      context.stroke();
+    });
+    context.globalAlpha = 1;
+  };
+
+  const drawChartArea = (
+    series: ReturnType<typeof simulateFermiFilters>['series'],
+    maxValue: number,
+    frame: ReturnType<typeof chartFrame>,
+    styles: ReturnType<typeof chartStyles>
+  ) => {
+    const gradient = context.createLinearGradient(0, frame.padTop, 0, frame.height - frame.padBottom);
+    gradient.addColorStop(0, styles.fill);
+    gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+
+    context.beginPath();
+    series.forEach((point, index) => {
+      const x = chartX(index, series.length, frame);
+      const y = chartY(point.detectable, maxValue, frame);
+      if (index === 0) context.moveTo(x, y);
+      else context.lineTo(x, y);
+    });
+    context.lineTo(frame.width - frame.padX, frame.height - frame.padBottom);
+    context.lineTo(frame.padX, frame.height - frame.padBottom);
+    context.closePath();
+    context.fillStyle = gradient;
+    context.fill();
+  };
+
+  const drawChartLine = (
+    series: ReturnType<typeof simulateFermiFilters>['series'],
+    maxValue: number,
+    frame: ReturnType<typeof chartFrame>,
+    styles: ReturnType<typeof chartStyles>
+  ) => {
+    context.beginPath();
+    series.forEach((point, index) => {
+      const x = chartX(index, series.length, frame);
+      const y = chartY(point.detectable, maxValue, frame);
+      if (index === 0) context.moveTo(x, y);
+      else context.lineTo(x, y);
+    });
+    context.strokeStyle = styles.line;
+    context.lineWidth = 2;
+    context.stroke();
+  };
+
+  const drawChartLabel = (maxValue: number, frame: ReturnType<typeof chartFrame>, styles: ReturnType<typeof chartStyles>) => {
+    context.fillStyle = styles.text;
+    context.font = '600 13px system-ui, sans-serif';
+    context.fillText(`${formatCount(maxValue)} ${maxLabel}`, frame.padX, 22);
+  };
+
+  const drawChart = (series: ReturnType<typeof simulateFermiFilters>['series']) => {
+    if (!canvas || !context) return;
+    const frame = chartFrame();
+    const styles = chartStyles();
+    const maxValue = Math.max(1, ...series.map((point) => point.detectable));
+    drawChartBase(frame, styles);
+    drawChartGates(frame, styles);
+    drawChartArea(series, maxValue, frame, styles);
+    drawChartLine(series, maxValue, frame, styles);
+    drawChartLabel(maxValue, frame, styles);
+  };
+
+  const calculate = () => simulateFermiFilters({
+    starFormationRate: state.stars,
+    habitableFraction: state.planets / 100,
+    lifeFraction: state.life / 100,
+    intelligenceFraction: state.intelligence / 100,
+    technologyFraction: state.technology / 100,
+    signalLifetime: 10 ** state.lifetime,
+    filterSeverity: state.filter / 100,
+    horizonYears: 10 ** state.horizon,
+  });
+
+  const syncActiveControl = () => {
+    if (!activeInput || !activeLabel || !activeValue) return;
+    const config = steps[activeStep];
+    activeInput.min = String(config.min);
+    activeInput.max = String(config.max);
+    activeInput.step = String(config.step);
+    activeInput.value = String(state[activeStep]);
+    activeLabel.textContent = stepButtons.find((button) => button.dataset.step === activeStep)?.dataset.label ?? '';
+    activeValue.textContent = config.format(state[activeStep]);
+    stepButtons.forEach((button) => {
+      button.classList.toggle('is-active', button.dataset.step === activeStep);
+    });
+  };
+
+  const update = () => {
+    const result = calculate();
+    outputs.rate!.textContent = result.drakeRate.toFixed(3);
+    outputs.peak!.textContent = formatCount(result.peakCivilizations);
+    outputs.final!.textContent = formatCount(result.finalCivilizations);
+    outputs.silence!.textContent = `${Math.round(result.silenceScore)}`;
+    syncActiveControl();
+    drawChart(result.series);
+  };
+
+  activeInput?.addEventListener('input', () => {
+    state[activeStep] = Number(activeInput.value);
+    update();
+  });
+
+  stepButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      activeStep = (button.dataset.step ?? 'stars') as StepKey;
+      update();
+    });
+  });
+
+  update();
+</script>

package/src/tool/fermi-paradox-filter-lab/entry.ts

@@ -0,0 +1,26 @@
+import type { ScienceToolEntry } from '../../types';
+
+export const fermiParadoxFilterLab: ScienceToolEntry = {
+  id: 'fermi-paradox-filter-lab',
+  icons: {
+    bg: 'mdi:telescope',
+    fg: 'mdi:alien',
+  },
+  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/fermi-paradox-filter-lab/fermi-paradox-filter-lab.css

@@ -0,0 +1,228 @@
+.fermi-lab {
+  --fermi-bg: #fbfaf4;
+  --fermi-ink: #101412;
+  --fermi-muted: #626b66;
+  --fermi-hairline: rgba(16, 20, 18, 0.18);
+  --fermi-soft: rgba(16, 20, 18, 0.045);
+  --fermi-curve: #101412;
+  --fermi-fill: rgba(16, 20, 18, 0.06);
+  --fermi-accent: #006f6f;
+  --fermi-warm: #a85336;
+  --fermi-shadow: rgba(22, 24, 20, 0.13);
+
+  width: min(100%, 980px);
+  margin: 0 auto;
+  color: var(--fermi-ink);
+}
+
+.theme-dark .fermi-lab,
+body.theme-dark .fermi-lab,
+html.theme-dark .fermi-lab {
+  --fermi-bg: #05090c;
+  --fermi-ink: #eff8f5;
+  --fermi-muted: #9aa9a5;
+  --fermi-hairline: rgba(239, 248, 245, 0.18);
+  --fermi-soft: rgba(239, 248, 245, 0.05);
+  --fermi-curve: #f1c84c;
+  --fermi-fill: rgba(20, 184, 166, 0.14);
+  --fermi-accent: #57d7cb;
+  --fermi-warm: #ff755f;
+  --fermi-shadow: rgba(0, 0, 0, 0.44);
+}
+
+.fermi-sieve {
+  display: grid;
+  gap: clamp(0.6rem, 1.6vw, 0.95rem);
+  padding: clamp(0.9rem, 2vw, 1.25rem);
+  border: 1px solid var(--fermi-hairline);
+  border-radius: 8px;
+  background:
+    linear-gradient(90deg, var(--fermi-soft) 1px, transparent 1px),
+    linear-gradient(0deg, var(--fermi-soft) 1px, transparent 1px),
+    var(--fermi-bg);
+  background-size: 28px 28px, 28px 28px, auto;
+  box-shadow: 0 22px 70px var(--fermi-shadow);
+}
+
+.fermi-graph {
+  position: relative;
+  min-width: 0;
+  min-height: 280px;
+}
+
+.fermi-graph canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.fermi-metrics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: clamp(0.75rem, 2vw, 1.6rem);
+  justify-content: space-between;
+  padding: 0 0.25rem;
+  background: transparent;
+}
+
+.fermi-metrics div {
+  display: grid;
+  gap: 0.2rem;
+  min-width: max-content;
+  padding: 0;
+}
+
+.fermi-metrics span,
+.fermi-active-filter span {
+  color: var(--fermi-muted);
+  font-size: clamp(0.62rem, 1.5vw, 0.76rem);
+  font-weight: 760;
+  letter-spacing: 0.16em;
+  line-height: 1.35;
+  text-transform: uppercase;
+}
+
+.fermi-metrics strong {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.12em;
+  color: var(--fermi-ink);
+  font-size: clamp(1rem, 2vw, 1.35rem);
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.fermi-metrics small {
+  color: var(--fermi-muted);
+  font-size: 0.64em;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.fermi-console {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: clamp(0.75rem, 2vw, 1.1rem);
+  border-top: 1px solid var(--fermi-hairline);
+  padding-top: clamp(0.85rem, 2vw, 1.1rem);
+}
+
+.fermi-steps {
+  display: grid;
+  gap: 0.38rem;
+  align-content: center;
+}
+
+.fermi-steps button {
+  width: 32px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  color: color-mix(in srgb, var(--fermi-muted) 32%, transparent);
+  background: transparent;
+  font-size: 0.66rem;
+  letter-spacing: 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+.fermi-steps button::after {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  margin-left: 0.45rem;
+  border-radius: 50%;
+  background: transparent;
+  content: "";
+}
+
+.fermi-steps button.is-active {
+  color: var(--fermi-accent);
+}
+
+.fermi-steps button.is-active::after {
+  background: var(--fermi-accent);
+}
+
+.fermi-active-filter {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0 clamp(0.8rem, 2vw, 1.4rem);
+  align-items: center;
+  min-width: 0;
+}
+
+.fermi-active-filter span {
+  align-self: center;
+  padding-bottom: 0;
+  letter-spacing: 0.15em;
+}
+
+.fermi-active-filter output {
+  color: var(--fermi-accent);
+  font-size: clamp(2rem, 10vw, 5.6rem);
+  font-weight: 760;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+  line-height: 0.82;
+}
+
+.fermi-active-filter input[type='range'] {
+  grid-column: 1 / -1;
+  width: 100%;
+  height: 22px;
+  margin: 0;
+  appearance: none;
+  background: transparent;
+  cursor: ew-resize;
+}
+
+.fermi-active-filter input[type='range']::-webkit-slider-runnable-track {
+  height: 1px;
+  background: linear-gradient(90deg, var(--fermi-accent), var(--fermi-hairline));
+}
+
+.fermi-active-filter input[type='range']::-webkit-slider-thumb {
+  width: 10px;
+  height: 24px;
+  margin-top: -11.5px;
+  border: 0;
+  border-radius: 0;
+  appearance: none;
+  background: var(--fermi-warm);
+  box-shadow: 0 0 22px color-mix(in srgb, var(--fermi-warm) 60%, transparent);
+}
+
+.fermi-active-filter input[type='range']::-moz-range-track {
+  height: 1px;
+  background: linear-gradient(90deg, var(--fermi-accent), var(--fermi-hairline));
+}
+
+.fermi-active-filter input[type='range']::-moz-range-thumb {
+  width: 10px;
+  height: 24px;
+  border: 0;
+  border-radius: 0;
+  background: var(--fermi-warm);
+  box-shadow: 0 0 22px color-mix(in srgb, var(--fermi-warm) 60%, transparent);
+}
+
+.fermi-active-filter:focus-within output {
+  color: var(--fermi-warm);
+}
+
+@media (max-width: 680px) {
+  .fermi-metrics {
+    justify-content: flex-start;
+  }
+
+  .fermi-console {
+    grid-template-columns: 1fr;
+  }
+
+  .fermi-steps {
+    display: flex;
+    justify-content: space-between;
+  }
+}