@jjlmoya/utils-science 1.24.0 → 1.26.0

package/src/tool/stellar-habitability-zone/script.ts

@@ -0,0 +1,273 @@
+import { StellarHabitabilityEngine, STELLAR_PRESETS } from './logic/StellarHabitabilityEngine';
+import { StellarHabitabilityRenderer } from './renderer';
+import type { RenderState } from './renderer';
+import { updateValTexts, updateResults, updateSliderFill } from './dom-updater';
+import { setupCanvasInteraction } from './interaction';
+
+const STORAGE_KEY = 'stellar-habitability-zone:config';
+const KEYS = ['temp', 'lum', 'mass', 'rad', 'dist', 'albedo', 'green'];
+
+function parseVal(val: string, fallback: number): number {
+  const parsed = parseFloat(val);
+  return isNaN(parsed) ? fallback : parsed;
+}
+
+export function initStellarSimulator() {
+  new StellarSimulator();
+}
+
+class StellarSimulator {
+  private curDistanceAu = 1.0; private curRunawayLimit = 0.95; private curMaxLimit = 1.67;
+  private curTemp = 5778; private curLuminosity = 1.0; private curMass = 1.0;
+  private prevStatus = 'habitable'; private isImperial = false;
+
+  private tempInput!: HTMLInputElement; private lumInput!: HTMLInputElement; private massInput!: HTMLInputElement;
+  private radInput!: HTMLInputElement; private distInput!: HTMLInputElement; private albedoInput!: HTMLInputElement;
+  private greenInput!: HTMLInputElement;
+
+  private tempVal!: HTMLElement | null; private lumVal!: HTMLElement | null; private massVal!: HTMLElement | null;
+  private radVal!: HTMLElement | null; private distVal!: HTMLElement | null; private albedoVal!: HTMLElement | null;
+  private greenVal!: HTMLElement | null;
+
+  private eqTempResult!: HTMLElement | null; private surfTempResult!: HTMLElement | null; private fluxResult!: HTMLElement | null;
+  private periodResult!: HTMLElement | null; private velocityResult!: HTMLElement | null; private innerResult!: HTMLElement | null;
+  private outerResult!: HTMLElement | null;
+
+  private statusBox!: HTMLElement | null; private statusTitle!: HTMLElement | null; private unitToggleBtn!: HTMLElement | null;
+
+  private canvas!: HTMLCanvasElement;
+  private canvasContainer!: HTMLElement;
+  private presetBtns!: NodeListOf<Element>;
+
+  private engine!: StellarHabitabilityEngine;
+  private renderer!: StellarHabitabilityRenderer;
+
+  constructor() {
+    const root = document.getElementById('hz-simulator-root');
+    if (!root) return;
+
+    this.getElements();
+    this.engine = new StellarHabitabilityEngine();
+    this.renderer = new StellarHabitabilityRenderer(this.canvas, this.canvasContainer);
+
+    this.bindEvents();
+    this.loadFromStorage();
+    this.update();
+    this.animate();
+  }
+
+  private getElements() {
+    const getEl = <T extends HTMLElement>(id: string) => document.getElementById(id) as T;
+    this.tempInput = getEl<HTMLInputElement>('hz-temperature');
+    this.lumInput = getEl<HTMLInputElement>('hz-luminosity');
+    this.massInput = getEl<HTMLInputElement>('hz-mass');
+    this.radInput = getEl<HTMLInputElement>('hz-radius');
+    this.distInput = getEl<HTMLInputElement>('hz-distance');
+    this.albedoInput = getEl<HTMLInputElement>('hz-albedo');
+    this.greenInput = getEl<HTMLInputElement>('hz-greenhouse');
+
+    this.tempVal = getEl('hz-temperature-val');
+    this.lumVal = getEl('hz-luminosity-val');
+    this.massVal = getEl('hz-mass-val');
+    this.radVal = getEl('hz-radius-val');
+    this.distVal = getEl('hz-distance-val');
+    this.albedoVal = getEl('hz-albedo-val');
+    this.greenVal = getEl('hz-greenhouse-val');
+
+    this.eqTempResult = getEl('hz-eq-temp');
+    this.surfTempResult = getEl('hz-surf-temp');
+    this.fluxResult = getEl('hz-stellar-flux');
+    this.periodResult = getEl('hz-orbit-period');
+    this.velocityResult = getEl('hz-orbit-velocity');
+    this.innerResult = getEl('hz-inner-limit');
+    this.outerResult = getEl('hz-outer-limit');
+
+    this.statusBox = getEl('hz-status-box');
+    this.statusTitle = getEl('hz-status-title');
+    this.unitToggleBtn = getEl('hz-unit-toggle');
+
+    this.canvas = getEl<HTMLCanvasElement>('hz-orbit-canvas');
+    this.canvasContainer = getEl('hz-canvas-placeholder');
+    this.presetBtns = document.querySelectorAll('.hz-preset-btn:not(#hz-unit-toggle)');
+  }
+
+  private bindEvents() {
+    setupCanvasInteraction({
+      canvasContainer: this.canvasContainer,
+      distInput: this.distInput,
+      presetBtns: this.presetBtns,
+      getCurDistanceAu: () => this.curDistanceAu,
+      getCurMaxLimit: () => this.curMaxLimit,
+      getCurRunawayLimit: () => this.curRunawayLimit,
+      onUpdate: () => this.update()
+    });
+
+    [this.tempInput, this.lumInput, this.massInput, this.radInput, this.distInput].forEach(inp => {
+      inp.addEventListener('input', () => {
+        this.presetBtns.forEach(b => b.classList.remove('active'));
+        this.update();
+      });
+    });
+
+    [this.albedoInput, this.greenInput].forEach(inp => inp.addEventListener('input', () => this.update()));
+    this.presetBtns.forEach(btn => btn.addEventListener('click', () => this.applyPreset(btn)));
+
+    if (this.unitToggleBtn) {
+      this.unitToggleBtn.addEventListener('click', () => {
+        this.isImperial = !this.isImperial;
+        this.update();
+      });
+    }
+  }
+
+  private applyPreset(btn: Element) {
+    this.presetBtns.forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    const type = btn.getAttribute('data-type');
+    const preset = STELLAR_PRESETS.find(p => p.type === type);
+    if (preset) {
+      this.tempInput.value = preset.temperature.toString();
+      this.lumInput.value = Math.log10(preset.luminosity).toString();
+      this.massInput.value = preset.mass.toString();
+      this.radInput.value = preset.radius.toString();
+
+      const hzLimits = this.engine.calculateLimits(preset.luminosity, preset.temperature);
+      this.distInput.value = Math.log10((hzLimits.runawayGreenhouse + hzLimits.maximumGreenhouse) / 2).toString();
+      this.update();
+    }
+  }
+
+  private getSelectedPresetType(): string | null {
+    const activeBtn = document.querySelector('.hz-preset-btn.active:not(#hz-unit-toggle)');
+    return activeBtn ? activeBtn.getAttribute('data-type') : null;
+  }
+
+  private saveToStorage() {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        temp: this.tempInput.value, lum: this.lumInput.value, mass: this.massInput.value, rad: this.radInput.value,
+        dist: this.distInput.value, albedo: this.albedoInput.value, green: this.greenInput.value,
+        preset: this.getSelectedPresetType(), imperial: this.isImperial,
+      }));
+    } catch {}
+  }
+
+  private loadFromStorage() {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (!stored) return;
+      const config = JSON.parse(stored);
+      const inputs: Record<string, HTMLInputElement> = {
+        temp: this.tempInput, lum: this.lumInput, mass: this.massInput, rad: this.radInput,
+        dist: this.distInput, albedo: this.albedoInput, green: this.greenInput
+      };
+      KEYS.forEach(key => {
+        const input = inputs[key];
+        if (input && config[key] !== undefined) input.value = config[key];
+      });
+      if (config.imperial !== undefined) this.isImperial = config.imperial;
+      this.presetBtns.forEach(b => {
+        const isPresetMatch = b.getAttribute('data-type') === config.preset;
+        b.classList.toggle('active', isPresetMatch);
+      });
+    } catch {}
+  }
+
+  private update() {
+    const temp = parseVal(this.tempInput.value, 5778);
+    const luminosity = Math.pow(10, parseVal(this.lumInput.value, 0));
+    const mass = parseVal(this.massInput.value, 1.0);
+    const radius = parseVal(this.radInput.value, 1.0);
+    const distanceAu = Math.pow(10, parseVal(this.distInput.value, 0));
+    const albedo = parseVal(this.albedoInput.value, 0.3);
+    const greenhouse = parseVal(this.greenInput.value, 33);
+
+    if (this.unitToggleBtn) {
+      this.unitToggleBtn.textContent = this.isImperial ? 'Units: Imperial' : 'Units: Scientific';
+    }
+
+    updateValTexts({
+      temp, luminosity, mass, radius, distanceAu, albedo, greenhouse, isImperial: this.isImperial,
+      tempVal: this.tempVal, lumVal: this.lumVal, massVal: this.massVal, radVal: this.radVal, distVal: this.distVal, albedoVal: this.albedoVal, greenVal: this.greenVal
+    });
+    [this.tempInput, this.lumInput, this.massInput, this.radInput, this.distInput, this.albedoInput, this.greenInput].forEach(updateSliderFill);
+
+    const result = this.engine.simulate({
+      luminosity, temperature: temp, mass, distanceAu, albedo, greenhouseDeltaK: greenhouse,
+    });
+
+    updateResults({
+      result, isImperial: this.isImperial, eqTempResult: this.eqTempResult, surfTempResult: this.surfTempResult,
+      fluxResult: this.fluxResult, periodResult: this.periodResult, velocityResult: this.velocityResult, innerResult: this.innerResult, outerResult: this.outerResult
+    });
+
+    this.checkStatusFlash(result.status);
+    this.updateStatusDisplay(result.status);
+    this.saveToStorage();
+  }
+
+  private checkStatusFlash(status: string) {
+    if (status !== this.prevStatus) {
+      if (this.eqTempResult && this.surfTempResult) {
+        this.eqTempResult.classList.remove('flash-cold', 'flash-hot');
+        this.surfTempResult.classList.remove('flash-cold', 'flash-hot');
+        void this.eqTempResult.offsetWidth;
+        void this.surfTempResult.offsetWidth;
+        const flashClass = status === 'too-cold' ? 'flash-cold' : 'flash-hot';
+        if (status !== 'habitable') {
+          this.eqTempResult.classList.add(flashClass);
+          this.surfTempResult.classList.add(flashClass);
+        }
+      }
+      this.prevStatus = status;
+    }
+  }
+
+  private updateStatusDisplay(status: string) {
+    if (this.statusBox && this.statusTitle) {
+      this.statusBox.className = `hz-status-box ${status}`;
+      let text = 'HABITABLE (Liquid water possible)';
+      if (status === 'too-hot') {
+        text = 'TOO HOT (Water vaporizes)';
+      } else if (status === 'too-cold') {
+        text = 'TOO COLD (Water freezes)';
+      }
+      this.statusTitle.textContent = text;
+    }
+  }
+
+  private animate() {
+    const targetDist = Math.pow(10, parseVal(this.distInput.value, 0));
+    const targetTemp = parseVal(this.tempInput.value, 5778);
+    const targetLuminosity = Math.pow(10, parseVal(this.lumInput.value, 0));
+    const targetMass = parseVal(this.massInput.value, 1.0);
+    const hzLimits = this.engine.calculateLimits(targetLuminosity, targetTemp);
+
+    this.curDistanceAu += (targetDist - this.curDistanceAu) * 0.12;
+    this.curRunawayLimit += (hzLimits.runawayGreenhouse - this.curRunawayLimit) * 0.12;
+    this.curMaxLimit += (hzLimits.maximumGreenhouse - this.curMaxLimit) * 0.12;
+    this.curTemp += (targetTemp - this.curTemp) * 0.12;
+    this.curLuminosity += (targetLuminosity - this.curLuminosity) * 0.12;
+    this.curMass += (targetMass - this.curMass) * 0.12;
+
+    const size = this.renderer.resize();
+    const canvasRect = this.canvas.getBoundingClientRect();
+    const containerRect = this.canvasContainer.getBoundingClientRect();
+    const cx = (containerRect.left - canvasRect.left) + containerRect.width / 2;
+    const cy = (containerRect.top - canvasRect.top) + containerRect.height / 2;
+    const maxDist = Math.max(this.curDistanceAu * 1.3, this.curMaxLimit * 1.25);
+    const scale = (Math.min(containerRect.width, containerRect.height) * 0.4) / maxDist;
+
+    this.renderer.draw({
+      cx, cy,
+      runawayGreenhousePx: this.curRunawayLimit * scale,
+      maximumGreenhousePx: this.curMaxLimit * scale,
+      planetDistPx: this.curDistanceAu * scale,
+      isTooHot: this.curDistanceAu < this.curRunawayLimit,
+      isTooCold: this.curDistanceAu > this.curMaxLimit,
+      curMass: this.curMass, curLuminosity: this.curLuminosity, curTemp: this.curTemp, curDistanceAu: this.curDistanceAu,
+    }, size.w, size.h);
+    requestAnimationFrame(() => this.animate());
+  }
+}
+export { type RenderState };

package/src/tool/stellar-habitability-zone/seo.astro

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

package/src/tool/stellar-habitability-zone/stellar-habitability-zone.css

@@ -0,0 +1,375 @@
+:root {
+  --hz-card-bg: #fafaf9;
+  --hz-border: rgba(0, 0, 0, 0.08);
+  --hz-text: #1c1917;
+  --hz-text-muted: #78716c;
+  --hz-input-border: rgba(0, 0, 0, 0.1);
+  --hz-canvas-bg: #fafaf9;
+  --hz-highlight: #10b981;
+  --hz-number-color: #0c0a09;
+  --hz-slider-active: rgba(28, 25, 23, 0.3);
+  --hz-slider-track: rgba(28, 25, 23, 0.08);
+}
+
+.theme-dark {
+  --hz-card-bg: #0c0c0e;
+  --hz-border: rgba(255, 255, 255, 0.08);
+  --hz-text: #f4f4f5;
+  --hz-text-muted: #a1a1aa;
+  --hz-input-border: rgba(255, 255, 255, 0.1);
+  --hz-canvas-bg: #0c0c0e;
+  --hz-highlight: #34d399;
+  --hz-number-color: #fafafa;
+  --hz-slider-active: rgba(244, 244, 245, 0.35);
+  --hz-slider-track: rgba(244, 244, 245, 0.1);
+}
+
+.hz-calculator-root {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  padding: 1.5rem;
+  background: var(--hz-card-bg);
+  color: var(--hz-text);
+  border: 1px solid var(--hz-border);
+  border-radius: 12px;
+  max-width: 1000px;
+  margin: 2rem auto;
+}
+
+@media (min-width: 769px) {
+  .hz-calculator-root {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "presets"
+      "controls"
+      "viewport";
+    gap: 3rem;
+    padding: 3rem;
+  }
+}
+
+.hz-presets-container {
+  grid-area: presets;
+  width: 100%;
+}
+
+.hz-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem 1.75rem;
+  border-bottom: 1px solid var(--hz-border);
+  padding-bottom: 0.75rem;
+}
+
+.hz-preset-btn {
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid transparent;
+  color: var(--hz-text);
+  font-weight: 600;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  transition: opacity 0.2s, border-color 0.2s;
+  padding: 6px 0;
+  opacity: 0.45;
+  white-space: nowrap;
+}
+
+.hz-preset-btn:hover {
+  opacity: 0.8;
+}
+
+.hz-preset-btn.active {
+  opacity: 1;
+  border-bottom-color: var(--hz-text);
+  border-bottom-width: 1.5px;
+  padding-bottom: 5.5px;
+}
+
+.hz-controls-section {
+  grid-area: controls;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+@media (min-width: 769px) {
+  .hz-controls-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.75rem 3.5rem;
+  }
+}
+
+.hz-input-group {
+  display: grid;
+  grid-template-columns: 200px 1fr 90px;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+@media (max-width: 600px) {
+  .hz-input-group {
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+  }
+}
+
+.hz-input-group label {
+  font-weight: 600;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--hz-text-muted);
+  white-space: nowrap;
+}
+
+.hz-input-val {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--hz-text);
+  text-align: right;
+  opacity: 0.8;
+  white-space: nowrap;
+  width: 90px;
+}
+
+.hz-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 2px;
+  background: var(--hz-slider-track);
+  outline: none;
+  cursor: pointer;
+  margin: 0;
+  padding: 12px 0;
+  background-clip: content-box;
+}
+
+.hz-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 1px solid var(--hz-text);
+  background: var(--hz-card-bg);
+  cursor: pointer;
+  margin-top: -4px;
+}
+
+.hz-slider::-moz-range-thumb {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 1px solid var(--hz-text);
+  background: var(--hz-card-bg);
+  cursor: pointer;
+}
+
+.hz-slider::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 2px;
+}
+
+.hz-viewport-container {
+  grid-area: viewport;
+  background: #050507;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  position: relative;
+  overflow: hidden;
+}
+
+@media (min-width: 769px) {
+  .hz-viewport-container {
+    display: grid;
+    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
+    gap: 3.5rem;
+    padding: 3rem;
+  }
+}
+
+#hz-orbit-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.hz-canvas-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  position: relative;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.hz-results-section {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  position: relative;
+  z-index: 1;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  padding: 2rem;
+}
+
+.theme-dark .hz-results-section {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+@media (min-width: 769px) {
+  .hz-results-section {
+    padding: 2.5rem;
+  }
+}
+
+.hz-result-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.hz-result-block {
+  display: flex;
+  flex-direction: column;
+}
+
+.hz-result-label {
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--hz-text-muted);
+  margin-bottom: 0.15rem;
+}
+
+.hz-result-number {
+  font-weight: 300;
+  font-size: 2.2rem;
+  line-height: 1.0;
+  color: var(--hz-number-color);
+  letter-spacing: -0.02em;
+  white-space: nowrap;
+}
+
+.hz-result-number.flash-cold {
+  animation: flashColdAnim 0.8s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.hz-result-number.flash-hot {
+  animation: flashHotAnim 0.8s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+@keyframes flashColdAnim {
+  0% {
+    color: #3b82f6;
+  }
+
+  100% {
+    color: var(--hz-number-color);
+  }
+}
+
+@keyframes flashHotAnim {
+  0% {
+    color: #ef4444;
+  }
+
+  100% {
+    color: var(--hz-number-color);
+  }
+}
+
+.hz-status-box {
+  margin-top: 0.75rem;
+  border-left: 2px solid transparent;
+  padding: 0.5rem 0 0.5rem 1.25rem;
+  background: rgba(0, 0, 0, 0.02);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition: border-color 0.3s;
+}
+
+.theme-dark .hz-status-box {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.hz-status-box.too-hot {
+  border-left-color: #ef4444;
+}
+
+.hz-status-box.too-cold {
+  border-left-color: #3b82f6;
+}
+
+.hz-status-box.habitable {
+  border-left-color: #10b981;
+}
+
+.hz-status-title {
+  font-weight: 400;
+  font-size: 1.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.hz-status-box.too-hot .hz-status-title {
+  color: #ef4444;
+}
+
+.hz-status-box.too-cold .hz-status-title {
+  color: #3b82f6;
+}
+
+.hz-status-box.habitable .hz-status-title {
+  color: #10b981;
+}
+
+.hz-status-desc {
+  font-size: 12px;
+  color: var(--hz-text-muted);
+  line-height: 1.5;
+}
+
+.hz-canvas-section h3 {
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--hz-text-muted);
+  margin: 0;
+}
+
+.hz-canvas-container {
+  position: relative;
+  width: 100%;
+  height: 380px;
+  background: transparent;
+  border-radius: 8px;
+  pointer-events: auto;
+}
+
+@media (min-width: 769px) {
+  .hz-canvas-container {
+    height: 540px;
+  }
+}

package/src/tools.ts

@@ -8,6 +8,8 @@ import { CELLULAR_RENEWAL_TOOL } from './tool/cellular-renewal/index';
 import { COSMIC_INFLATION_TOOL } from './tool/cosmic-inflation/index';
 import { TEMPERATURE_TIMELINE_TOOL } from './tool/temperature-timeline/index';
 import { LORENZ_ATTRACTOR_TOOL } from './tool/lorenz-attractor/index';
+import { STELLAR_HABITABILITY_ZONE_TOOL } from './tool/stellar-habitability-zone/index';
+import { RADIOACTIVE_DECAY_TOOL } from './tool/radioactive-decay/index';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   COLONY_COUNTER_TOOL,
@@ -18,6 +20,7 @@ export const ALL_TOOLS: ToolDefinition[] = [
   COSMIC_INFLATION_TOOL,
   TEMPERATURE_TIMELINE_TOOL,
   LORENZ_ATTRACTOR_TOOL,
+  STELLAR_HABITABILITY_ZONE_TOOL,
+  RADIOACTIVE_DECAY_TOOL,
 ];
 
-