@jjlmoya/utils-science 1.1.0

package/src/tool/asteroid-impact/seo.astro

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

package/src/tool/asteroid-impact/ui-helpers.ts

@@ -0,0 +1,56 @@
+import type { Composition } from "./logic/impactPhysics";
+import { formatSize, getCompositionLabel, getCompositionColor } from "./utils";
+
+export function updateVisualState(config: { diameter: number; velocity: number; composition: Composition }, visual: HTMLElement | null, surface: HTMLElement | null) {
+	const scale = 1 + (config.diameter / 5000) * 0.5;
+	if (visual) {
+		visual.style.transform = `scale(${scale})`;
+		if (config.composition === "ice") {
+			visual.classList.add("ice-type");
+		} else {
+			visual.classList.remove("ice-type");
+		}
+	}
+
+	if (surface) {
+		const spinDuration = Math.max(2, 8 - (config.velocity / 10));
+		surface.style.animation = `asteroid-spin ${spinDuration}s linear infinite`;
+		surface.style.background = getCompositionColor(config.composition);
+	}
+}
+
+export function updateMaterialButtons(composition: Composition) {
+	const matBtns = document.querySelectorAll(".asteroid-material-btn");
+	matBtns.forEach((btn) => {
+		if (btn.getAttribute("data-type") === composition) {
+			btn.classList.add("active");
+		} else {
+			btn.classList.remove("active");
+		}
+	});
+}
+
+export function updateControlUI(config: { diameter: number; velocity: number; composition: Composition }) {
+	const displaySize = document.getElementById("display-size");
+	const displayVel = document.getElementById("display-velocity");
+	const sizeInput = document.getElementById("input-size") as HTMLInputElement;
+	const velInput = document.getElementById("input-velocity") as HTMLInputElement;
+
+	if (displaySize) displaySize.textContent = formatSize(config.diameter);
+	if (displayVel) displayVel.textContent = `${config.velocity} km/s`;
+	if (sizeInput) sizeInput.value = config.diameter.toString();
+	if (velInput) velInput.value = config.velocity.toString();
+
+	const paramSizeVal = document.getElementById("asteroid-param-size-val");
+	const paramVelVal = document.getElementById("asteroid-param-vel-val");
+	const paramTypeVal = document.getElementById("asteroid-param-type-val");
+
+	if (paramSizeVal) paramSizeVal.textContent = formatSize(config.diameter);
+	if (paramVelVal) paramVelVal.textContent = `${config.velocity} km/s`;
+	if (paramTypeVal) paramTypeVal.textContent = getCompositionLabel(config.composition);
+
+	const visual = document.getElementById("asteroid-visual");
+	const surface = document.getElementById("asteroid-surface");
+	updateVisualState(config, visual, surface);
+	updateMaterialButtons(config.composition);
+}

package/src/tool/asteroid-impact/ui.ts

@@ -0,0 +1,69 @@
+import { type Composition } from "./logic/impactPhysics";
+import { formatSize, getTypeLabel, getCompositionColor } from "./helpers";
+
+let config = {
+	diameter: 10000,
+	velocity: 20,
+	composition: "rock" as Composition,
+};
+
+export function getConfig() {
+	return config;
+}
+
+export function setConfig(newConfig: typeof config) {
+	config = newConfig;
+}
+
+export function updateMainDisplay() {
+	const displaySize = document.getElementById("display-size");
+	const displayVel = document.getElementById("display-velocity");
+	const sizeInput = document.getElementById("input-size") as HTMLInputElement;
+	const velInput = document.getElementById("input-velocity") as HTMLInputElement;
+
+	if (displaySize) displaySize.textContent = formatSize(config.diameter);
+	if (displayVel) displayVel.textContent = `${config.velocity} km/s`;
+	if (sizeInput) sizeInput.value = config.diameter.toString();
+	if (velInput) velInput.value = config.velocity.toString();
+}
+
+export function updateParamBadge() {
+	const paramSizeVal = document.getElementById("asteroid-param-size-val");
+	const paramVelVal = document.getElementById("asteroid-param-vel-val");
+	const paramTypeVal = document.getElementById("asteroid-param-type-val");
+
+	if (paramSizeVal) paramSizeVal.textContent = formatSize(config.diameter);
+	if (paramVelVal) paramVelVal.textContent = `${config.velocity} km/s`;
+	if (paramTypeVal) paramTypeVal.textContent = getTypeLabel(config.composition);
+}
+
+export function updateVisual() {
+	const visual = document.getElementById("asteroid-visual");
+	const surface = document.getElementById("asteroid-surface");
+	const scale = 1 + (config.diameter / 5000) * 0.5;
+
+	if (visual) {
+		visual.style.transform = `scale(${scale})`;
+		visual.classList.toggle("ice-type", config.composition === "ice");
+	}
+
+	if (surface) {
+		const spinDuration = Math.max(2, 8 - (config.velocity / 10));
+		surface.style.animation = `asteroid-spin ${spinDuration}s linear infinite`;
+		surface.style.background = getCompositionColor(config.composition);
+	}
+}
+
+export function updateMaterialButtons() {
+	const matBtns = document.querySelectorAll(".asteroid-material-btn");
+	matBtns.forEach((btn) => {
+		btn.classList.toggle("active", btn.getAttribute("data-type") === config.composition);
+	});
+}
+
+export function updateUI() {
+	updateMainDisplay();
+	updateParamBadge();
+	updateVisual();
+	updateMaterialButtons();
+}

package/src/tool/asteroid-impact/utils.ts

@@ -0,0 +1,17 @@
+import type { Composition } from "./logic/impactPhysics";
+
+export function formatSize(diameter: number): string {
+	return diameter >= 1000 ? `${(diameter / 1000).toFixed(1)} km` : `${diameter}m`;
+}
+
+export function getCompositionLabel(composition: Composition): string {
+	if (composition === "ice") return "Hielo";
+	if (composition === "iron") return "Hierro";
+	return "Roca";
+}
+
+export function getCompositionColor(composition: Composition): string {
+	if (composition === "ice") return "#67e8f9";
+	if (composition === "iron") return "#1e293b";
+	return "#64748b";
+}

package/src/tool/cellular-renewal/CellularRenewal.css

@@ -0,0 +1 @@
+/* Cellular Renewal Styles */

package/src/tool/cellular-renewal/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography } from '@jjlmoya/utils-shared';
+import { cellularRenewal } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await cellularRenewal.i18n[locale]?.();
+---
+
+{content && <Bibliography links={content.bibliography} />}

package/src/tool/cellular-renewal/component.astro

@@ -0,0 +1,387 @@
+---
+---
+
+<div class="cellular-app" id="cellular-app">
+  <div class="cellular-card">
+    <div class="input-section">
+      <div class="input-group">
+        <div class="input-label">Cronología Biológica</div>
+        <div class="age-display">
+          <span id="ageDisplay">25</span>
+          <span class="age-unit">años de evolución</span>
+        </div>
+        <input
+          type="range"
+          id="ageRange"
+          min="1"
+          max="105"
+          step="1"
+          value="25"
+          aria-label="Edad"
+        />
+      </div>
+    </div>
+
+    <div class="results-grid">
+      <div class="main-stat">
+        <span class="main-stat-label">Tu materia es nueva en un</span>
+        <div class="main-stat-value">
+          <span id="newStatVal">93</span>
+          <span class="percent-sign">%</span>
+        </div>
+        <div class="main-stat-sublabel">Renovación Atómica</div>
+      </div>
+
+      <div class="tissue-list">
+        <div class="tissue-item">
+          <div class="tissue-header">
+            <span class="tissue-name">Epidermis y Sangre</span>
+            <span class="tissue-percentage" id="skinVal">100%</span>
+          </div>
+          <div class="bar-container">
+            <div class="bar-fill" id="skinBar" style="width: 100%;"></div>
+          </div>
+        </div>
+
+        <div class="tissue-item">
+          <div class="tissue-header">
+            <span class="tissue-name">Remodelación Ósea</span>
+            <span class="tissue-percentage" id="boneVal">85%</span>
+          </div>
+          <div class="bar-container">
+            <div class="bar-fill" id="boneBar" style="width: 85%;"></div>
+          </div>
+        </div>
+
+        <div class="tissue-item">
+          <div class="tissue-header">
+            <span class="tissue-name">Matriz Orgánica</span>
+            <span class="tissue-percentage" id="organVal">60%</span>
+          </div>
+          <div class="bar-container">
+            <div class="bar-fill" id="organBar" style="width: 60%;"></div>
+          </div>
+        </div>
+
+        <div class="tissue-item">
+          <div class="tissue-header">
+            <span class="tissue-name">Células Perennes</span>
+            <span class="tissue-percentage" id="brainVal">12%</span>
+          </div>
+          <div class="bar-container">
+            <div class="bar-fill" id="brainBar" style="width: 12%;"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <p class="disclaimer">
+      Los cálculos se basan en la vida media celular según estudios isotópicos. Mientras que la sangre y la piel se renuevan en semanas, las proteínas del cristalino y gran parte de tu corteza cerebral permanecen desde el desarrollo embrionario. Físicamente, eres una estructura dinámica en flujo constante.
+    </p>
+  </div>
+</div>
+
+<style is:inline define:vars={{}}>
+  :root {
+    --cell-primary: #f43f5e;
+    --cell-secondary: #8b5cf6;
+    --cell-text: #0f172a;
+    --cell-text-muted: #475569;
+    --cell-bg: #fff;
+    --cell-bg-secondary: #f8fafc;
+    --cell-bg-tertiary: #f1f5f9;
+    --cell-border: #e2e8f0;
+    --cell-bar: linear-gradient(90deg, #f43f5e 0%, #8b5cf6 100%);
+  }
+
+  .theme-dark {
+    --cell-primary: #ff6b7a;
+    --cell-secondary: #a78bfa;
+    --cell-text: #fff;
+    --cell-text-muted: #a0aec0;
+    --cell-bg: #0f172a;
+    --cell-bg-secondary: #1c1f2e;
+    --cell-bg-tertiary: #151720;
+    --cell-border: #2d3748;
+    --cell-bar: linear-gradient(90deg, #ff6b7a 0%, #a78bfa 100%);
+  }
+
+  .cellular-app {
+    max-width: 850px;
+    margin: 0 auto;
+  }
+
+  .cellular-card {
+    background: var(--cell-bg);
+    border: 1px solid var(--cell-border);
+    border-radius: 24px;
+    padding: 2rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  }
+
+  .theme-dark .cellular-card {
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  }
+
+  .input-section {
+    margin-bottom: 3.5rem;
+  }
+
+  .input-group {
+    background: var(--cell-bg-secondary);
+    padding: 2rem;
+    border-radius: 20px;
+    border: 1px solid var(--cell-border);
+  }
+
+  .input-label {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--cell-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 1rem;
+    display: block;
+  }
+
+  .age-display {
+    display: flex;
+    align-items: baseline;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+  }
+
+  #ageDisplay {
+    font-size: 3.5rem;
+    font-weight: 950;
+    color: var(--cell-primary);
+    line-height: 1;
+  }
+
+  .age-unit {
+    font-size: 0.95rem;
+    color: var(--cell-primary);
+    font-weight: 500;
+  }
+
+  input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 10px;
+    background: var(--cell-bg-tertiary);
+    border-radius: 8px;
+    outline: none;
+    border: 1px solid var(--cell-border);
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 24px;
+    height: 24px;
+    background: var(--cell-primary);
+    border: 3px solid var(--cell-bg);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    transition: transform 0.1s;
+  }
+
+  input[type="range"]::-webkit-slider-thumb:active {
+    transform: scale(1.2);
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    width: 24px;
+    height: 24px;
+    background: var(--cell-primary);
+    border: 3px solid var(--cell-bg);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    transition: transform 0.1s;
+  }
+
+  input[type="range"]::-moz-range-thumb:active {
+    transform: scale(1.2);
+  }
+
+  .results-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin-bottom: 2.5rem;
+  }
+
+  @media (max-width: 640px) {
+    .results-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .main-stat {
+    background: var(--cell-bg-secondary);
+    padding: 2.5rem;
+    border-radius: 20px;
+    border: 2px solid var(--cell-primary);
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 280px;
+  }
+
+  .main-stat-label {
+    font-size: 0.875rem;
+    color: var(--cell-text-muted);
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    line-height: 1.4;
+  }
+
+  .main-stat-value {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: 0.25rem;
+    margin-bottom: 1.5rem;
+  }
+
+  #newStatVal {
+    font-size: 5rem;
+    font-weight: 950;
+    color: var(--cell-primary);
+    line-height: 1;
+  }
+
+  .percent-sign {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--cell-primary);
+  }
+
+  .main-stat-sublabel {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--cell-primary);
+    letter-spacing: 2px;
+    text-transform: uppercase;
+  }
+
+  .tissue-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  .tissue-item {
+    background: var(--cell-bg-secondary);
+    padding: 1.25rem;
+    border-radius: 14px;
+    border: 1px solid var(--cell-border);
+  }
+
+  .tissue-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .tissue-name {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--cell-text);
+  }
+
+  .tissue-percentage {
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: var(--cell-primary);
+  }
+
+  .bar-container {
+    width: 100%;
+    height: 10px;
+    background: var(--cell-bg-tertiary);
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  .bar-fill {
+    height: 100%;
+    background: var(--cell-bar);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+  }
+
+  .disclaimer {
+    font-size: 0.875rem;
+    color: #78660b;
+    line-height: 1.7;
+    padding: 1.5rem;
+    background-color: #fef9e7;
+    border-radius: 12px;
+    border: 1px solid #fce8aa;
+    margin: 2.5rem auto 0;
+    max-width: 600px;
+    text-align: center;
+  }
+
+  .theme-dark .disclaimer {
+    color: #78660b;
+    background-color: #fef9e7;
+    border-color: #fce8aa;
+  }
+
+  @media (max-width: 640px) {
+    .cellular-card {
+      padding: 1.5rem;
+    }
+
+    #newStatVal {
+      font-size: 2.5rem;
+    }
+
+    .input-group {
+      padding: 1rem;
+    }
+  }
+</style>
+
+<script>
+  import { CellularRenewalEngine } from "./logic/CellularRenewalEngine";
+
+  const ageInput = document.getElementById("ageRange") as HTMLInputElement;
+  const ageDisplay = document.getElementById("ageDisplay");
+  const newStatVal = document.getElementById("newStatVal");
+  const skinVal = document.getElementById("skinVal");
+  const skinBar = document.getElementById("skinBar");
+  const boneVal = document.getElementById("boneVal");
+  const boneBar = document.getElementById("boneBar");
+  const organVal = document.getElementById("organVal");
+  const organBar = document.getElementById("organBar");
+  const brainVal = document.getElementById("brainVal");
+  const brainBar = document.getElementById("brainBar");
+
+  function updateBar(valEl: HTMLElement | null, barEl: HTMLElement | null, percent: number) {
+    if (valEl) valEl.textContent = `${percent}%`;
+    if (barEl) barEl.style.width = `${percent}%`;
+  }
+
+  function update() {
+    const age = parseInt(ageInput.value);
+    if (ageDisplay) ageDisplay.textContent = age.toString();
+
+    const result = CellularRenewalEngine.calculate(age);
+    if (newStatVal) newStatVal.textContent = result.total.toString();
+
+    updateBar(skinVal, skinBar, result.skin);
+    updateBar(boneVal, boneBar, result.bone);
+    updateBar(organVal, organBar, result.organ);
+    updateBar(brainVal, brainBar, result.brain);
+  }
+
+  ageInput?.addEventListener("input", update);
+  update();
+</script>