@jjlmoya/utils-astronomy 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jjlmoya/utils-astronomy",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/tool/bortleVisualizer/component.astro

@@ -19,7 +19,7 @@ const { ui } = Astro.props;
     <div class="bortle-bg-gradient"></div>
 
     <div id="layer-stars" class="bortle-layer layer-stars">
-      <div class="stars-image"></div>
+      <canvas id="canvas-stars" class="stars-canvas"></canvas>
     </div>
 
     <div id="layer-milkyway" class="bortle-layer layer-milkyway">
@@ -97,6 +97,70 @@ const { ui } = Astro.props;
     thumb: document.getElementById('custom-thumb'),
   };
 
+  const canvas = document.getElementById('canvas-stars') as HTMLCanvasElement | null;
+  if (canvas) {
+    const ctx = canvas.getContext('2d');
+    const STAR_COUNT = 2200;
+    type Star = { x: number; y: number; r: number; alpha: number; twinkle: number };
+    const stars: Star[] = [];
+    let cw = 0;
+    let ch = 0;
+
+    function resize(w: number, h: number) {
+      cw = w; ch = h;
+      canvas.width = w;
+      canvas.height = h;
+    }
+
+    function initStars(w: number, h: number) {
+      resize(w, h);
+      stars.length = 0;
+      for (let i = 0; i < STAR_COUNT; i++) {
+        stars.push({
+          x: Math.random() * w,
+          y: Math.random() * h,
+          r: Math.random() < 0.6 ? Math.random() * 0.7 + 0.3 : Math.random() * 1.2 + 0.8,
+          alpha: Math.random() * 0.5 + 0.5,
+          twinkle: Math.random() * Math.PI * 2,
+        });
+      }
+    }
+
+    function drawStars() {
+      if (!ctx) return;
+      ctx.clearRect(0, 0, cw, ch);
+      const now = performance.now() / 1000;
+      ctx.fillStyle = '#fff';
+      stars.forEach((s) => {
+        ctx.globalAlpha = s.alpha * (0.85 + 0.15 * Math.sin(now * 1.5 + s.twinkle));
+        ctx.beginPath();
+        ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
+        ctx.fill();
+      });
+      ctx.globalAlpha = 1;
+    }
+
+    let animFrame: number;
+    function animateStars() {
+      drawStars();
+      animFrame = requestAnimationFrame(animateStars);
+    }
+
+    const ro = new ResizeObserver(() => {
+      resize(canvas.offsetWidth, canvas.offsetHeight);
+      initStars(cw, ch);
+    });
+    ro.observe(canvas);
+
+    document.addEventListener('astro:before-swap', () => {
+      cancelAnimationFrame(animFrame);
+      ro.disconnect();
+    }, { once: true });
+
+    initStars(canvas.offsetWidth || 800, canvas.offsetHeight || 450);
+    animateStars();
+  }
+
   if (elements.slider) {
     function updateText(level: number, data: ReturnType<typeof getBortleData>) {
       if (elements.title) elements.title.innerText = data.title;
@@ -187,16 +251,14 @@ const { ui } = Astro.props;
 
   .layer-stars {
     z-index: 10;
-    mix-blend-mode: plus-lighter;
     opacity: 1;
   }
 
-  .stars-image {
+  .stars-canvas {
     position: absolute;
     inset: 0;
-    background-image: url('/images/utilities/dark-sky/stars-bg.webp');
-    background-size: cover;
-    background-position: center;
+    width: 100%;
+    height: 100%;
   }
 
   .layer-milkyway {

package/src/tool/deepSpaceScope/component.astro

@@ -174,7 +174,7 @@ const { ui } = Astro.props;
       el.className = "scope-object";
       el.dataset.mag = obj.mag.toString();
       el.innerHTML = `
-        <div class="scope-obj-icon ${obj.color}">
+        <div class="scope-obj-icon" style="color:${obj.color}">
           <span class="iconify" data-icon="${obj.icon}"></span>
         </div>
         <div class="scope-obj-label">
@@ -203,7 +203,7 @@ const { ui } = Astro.props;
     document.getElementById("modal-alt")!.innerText = `Altitud: ${obj.alt}°`;
     const iconEl = document.getElementById("modal-icon");
     if (iconEl) {
-      iconEl.innerHTML = `<span class="iconify ${obj.color}" data-icon="${obj.icon}" style="font-size:2.5rem"></span>`;
+      iconEl.innerHTML = `<span class="iconify" data-icon="${obj.icon}" style="font-size:2.5rem;color:${obj.color}"></span>`;
     }
     const descEl = document.getElementById("modal-desc");
     if (descEl) {

package/src/tool/deepSpaceScope/logic.ts

@@ -23,19 +23,19 @@ export function apertureSliderToMm(sliderValue: number): number {
 }
 
 export const DEEP_SPACE_OBJECTS: DeepSpaceObject[] = [
-  { name: 'Venus', type: 'Planeta', mag: -4.5, az: 270, alt: 30, icon: 'mdi:circle', color: 'text-yellow-200', desc: 'El planeta más brillante del cielo nocturno. Visible a plena luz del día.' },
-  { name: 'Júpiter', type: 'Planeta', mag: -2.5, az: 180, alt: 40, icon: 'mdi:circle', color: 'text-yellow-100', desc: 'El gigante del sistema solar. Con binoculares se pueden ver sus cuatro lunas galileanas.' },
-  { name: 'Saturno', type: 'Planeta', mag: 0.8, az: 220, alt: 35, icon: 'mdi:circle', color: 'text-yellow-50', desc: 'Sus anillos son visibles con un telescopio de 60mm a 50 aumentos.' },
-  { name: 'Marte', type: 'Planeta', mag: 1.5, az: 150, alt: 25, icon: 'mdi:circle', color: 'text-red-400', desc: 'El planeta rojo. Varía de magnitud -2.9 en oposición a +1.8 en conjunción.' },
-  { name: 'Sirio', type: 'Estrella', mag: -1.46, az: 145, alt: 50, icon: 'mdi:star-four-points', color: 'text-blue-200', desc: 'La estrella más brillante del cielo nocturno. Está a solo 8.6 años-luz.' },
-  { name: 'Canopus', type: 'Estrella', mag: -0.74, az: 200, alt: 20, icon: 'mdi:star-four-points', color: 'text-yellow-100', desc: 'La segunda estrella más brillante, usada para navegar en el hemisferio sur.' },
-  { name: 'Arcturus', type: 'Estrella', mag: -0.05, az: 60, alt: 55, icon: 'mdi:star-four-points', color: 'text-orange-300', desc: 'Gigante naranja en la constelación del Boyero. A 36 años-luz de la Tierra.' },
-  { name: 'Vega', type: 'Estrella', mag: 0.03, az: 40, alt: 70, icon: 'mdi:star-four-points', color: 'text-blue-100', desc: 'Vértice del Triángulo de Verano. La estrella de referencia para magnitud 0.' },
-  { name: 'M42 Orión', type: 'Nebulosa', mag: 4.0, az: 140, alt: 45, icon: 'mdi:creation', color: 'text-indigo-300', desc: 'La gran nebulosa de Orión, a 1344 años-luz. Vivero de estrellas jóvenes.' },
-  { name: 'M45 Pléyades', type: 'Cúmulo', mag: 1.6, az: 100, alt: 60, icon: 'mdi:creation', color: 'text-blue-300', desc: 'Las Siete Hermanas. A 444 años-luz, el cúmulo abierto más famoso del cielo.' },
-  { name: 'M31 Andrómeda', type: 'Galaxia', mag: 3.4, az: 30, alt: 50, icon: 'mdi:creation', color: 'text-purple-300', desc: 'La galaxia vecina más grande. A 2.5 millones de años-luz, visible a simple vista en cielos oscuros.' },
-  { name: 'M13 Hércules', type: 'Cúmulo', mag: 5.8, az: 80, alt: 65, icon: 'mdi:creation', color: 'text-yellow-300', desc: 'El gran cúmulo globular de Hércules. Contiene 300.000 estrellas a 25.100 años-luz.' },
-  { name: 'M57 Anillo', type: 'Nebulosa', mag: 8.8, az: 50, alt: 58, icon: 'mdi:creation', color: 'text-cyan-300', desc: 'Nebulosa planetaria en Lyra. Anillo de gas expulsado por una enana blanca.' },
-  { name: 'M81 Bode', type: 'Galaxia', mag: 6.9, az: 340, alt: 55, icon: 'mdi:creation', color: 'text-violet-300', desc: 'Galaxia espiral en la Osa Mayor. Interactuando gravitatoriamente con M82.' },
-  { name: 'Plutón', type: 'Planeta Enano', mag: 14.3, az: 195, alt: 22, icon: 'mdi:circle-small', color: 'text-slate-300', desc: 'El planeta enano más famoso. Requiere un telescopio de 250mm o más y cielos oscuros.' },
+  { name: 'Venus', type: 'Planeta', mag: -4.5, az: 270, alt: 30, icon: 'mdi:circle', color: '#fef08a', desc: 'El planeta más brillante del cielo nocturno. Visible a plena luz del día.' },
+  { name: 'Júpiter', type: 'Planeta', mag: -2.5, az: 180, alt: 40, icon: 'mdi:circle', color: '#fef9c3', desc: 'El gigante del sistema solar. Con binoculares se pueden ver sus cuatro lunas galileanas.' },
+  { name: 'Saturno', type: 'Planeta', mag: 0.8, az: 220, alt: 35, icon: 'mdi:circle', color: '#fefce8', desc: 'Sus anillos son visibles con un telescopio de 60mm a 50 aumentos.' },
+  { name: 'Marte', type: 'Planeta', mag: 1.5, az: 150, alt: 25, icon: 'mdi:circle', color: '#f87171', desc: 'El planeta rojo. Varía de magnitud -2.9 en oposición a +1.8 en conjunción.' },
+  { name: 'Sirio', type: 'Estrella', mag: -1.46, az: 145, alt: 50, icon: 'mdi:star-four-points', color: '#bfdbfe', desc: 'La estrella más brillante del cielo nocturno. Está a solo 8.6 años-luz.' },
+  { name: 'Canopus', type: 'Estrella', mag: -0.74, az: 200, alt: 20, icon: 'mdi:star-four-points', color: '#fef9c3', desc: 'La segunda estrella más brillante, usada para navegar en el hemisferio sur.' },
+  { name: 'Arcturus', type: 'Estrella', mag: -0.05, az: 60, alt: 55, icon: 'mdi:star-four-points', color: '#fdba74', desc: 'Gigante naranja en la constelación del Boyero. A 36 años-luz de la Tierra.' },
+  { name: 'Vega', type: 'Estrella', mag: 0.03, az: 40, alt: 70, icon: 'mdi:star-four-points', color: '#dbeafe', desc: 'Vértice del Triángulo de Verano. La estrella de referencia para magnitud 0.' },
+  { name: 'M42 Orión', type: 'Nebulosa', mag: 4.0, az: 140, alt: 45, icon: 'mdi:creation', color: '#a5b4fc', desc: 'La gran nebulosa de Orión, a 1344 años-luz. Vivero de estrellas jóvenes.' },
+  { name: 'M45 Pléyades', type: 'Cúmulo', mag: 1.6, az: 100, alt: 60, icon: 'mdi:creation', color: '#93c5fd', desc: 'Las Siete Hermanas. A 444 años-luz, el cúmulo abierto más famoso del cielo.' },
+  { name: 'M31 Andrómeda', type: 'Galaxia', mag: 3.4, az: 30, alt: 50, icon: 'mdi:creation', color: '#d8b4fe', desc: 'La galaxia vecina más grande. A 2.5 millones de años-luz, visible a simple vista en cielos oscuros.' },
+  { name: 'M13 Hércules', type: 'Cúmulo', mag: 5.8, az: 80, alt: 65, icon: 'mdi:creation', color: '#fde047', desc: 'El gran cúmulo globular de Hércules. Contiene 300.000 estrellas a 25.100 años-luz.' },
+  { name: 'M57 Anillo', type: 'Nebulosa', mag: 8.8, az: 50, alt: 58, icon: 'mdi:creation', color: '#67e8f9', desc: 'Nebulosa planetaria en Lyra. Anillo de gas expulsado por una enana blanca.' },
+  { name: 'M81 Bode', type: 'Galaxia', mag: 6.9, az: 340, alt: 55, icon: 'mdi:creation', color: '#c4b5fd', desc: 'Galaxia espiral en la Osa Mayor. Interactuando gravitatoriamente con M82.' },
+  { name: 'Plutón', type: 'Planeta Enano', mag: 14.3, az: 195, alt: 22, icon: 'mdi:circle-small', color: '#cbd5e1', desc: 'El planeta enano más famoso. Requiere un telescopio de 250mm o más y cielos oscuros.' },
 ];