Merge pull request #5 from Santiago13dev/santidev

Santiago13dev · web-flow · commit 14f72952b3ee · 2025-08-28T21:39:44.000-05:00
Animación temporal de las ondas P/S con un “timeline”
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useMemo, useEffect } from "react";
 import dynamic from "next/dynamic";
+import Playback from "../components/Playback"; // timeline play/pause/slider
 
 // Carga en cliente
 const Globe = dynamic(() => import("../components/Globe"), { ssr: false });
@@ -27,6 +28,9 @@ export default function Home() {
   const [resp, setResp] = useState<SimResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  // Timeline (minutos)
+  const [liveT, setLiveT] = useState(0);
+
   // Chequeo de texturas para evitar crash del loader
   const [texOk, setTexOk] = useState<boolean | null>(null);
   useEffect(() => {
@@ -38,7 +42,9 @@ export default function Home() {
           "/textures/earth_normal_2k.jpg",
           "/textures/earth_specular_2k.jpg",
         ];
-        const resps = await Promise.all(urls.map((u) => fetch(u, { method: "HEAD", cache: "no-store" })));
+        const resps = await Promise.all(
+          urls.map((u) => fetch(u, { method: "HEAD", cache: "no-store" }))
+        );
         if (!alive) return;
         setTexOk(resps.every((r) => r.ok));
       } catch {
@@ -59,14 +65,44 @@ export default function Home() {
     return null;
   }, [lat, lon]);
 
-  // Adaptar formato para el globo
+  // Adaptar formato para el globo (solo radios)
   const ringsForGlobe = useMemo(() => {
     const p = resp?.rings?.P?.map((r) => r.radiusKm) ?? [];
     const s = resp?.rings?.S?.map((r) => r.radiusKm) ?? [];
     if (p.length === 0 && s.length === 0) return null;
     return { p, s };
   }, [resp]);
 
+  // Estimar velocidades P/S a partir de los anillos (si existen)
+  const vp = useMemo(() => {
+    const arr = resp?.rings?.P;
+    if (!arr || arr.length === 0) return undefined;
+    const best = [...arr].sort((a, b) => a.minutes - b.minutes)[0];
+    if (!best || best.minutes <= 0) return undefined;
+    return best.radiusKm / (best.minutes * 60); // km/s
+  }, [resp]);
+
+  const vs = useMemo(() => {
+    const arr = resp?.rings?.S;
+    if (!arr || arr.length === 0) return undefined;
+    const best = [...arr].sort((a, b) => a.minutes - b.minutes)[0];
+    if (!best || best.minutes <= 0) return undefined;
+    return best.radiusKm / (best.minutes * 60); // km/s
+  }, [resp]);
+
+  // Tope del timeline (min) según data (fallback 60)
+  const maxTimeline = useMemo(() => {
+    const pMax = Math.max(0, ...(resp?.rings?.P?.map((r) => r.minutes) ?? [0]));
+    const sMax = Math.max(0, ...(resp?.rings?.S?.map((r) => r.minutes) ?? [0]));
+    const m = Math.max(pMax, sMax);
+    return m > 0 ? Math.ceil(m * 1.1) : 60;
+  }, [resp]);
+
+  // Reset del timeline al cambiar simulación
+  useEffect(() => {
+    setLiveT(0);
+  }, [resp?.rings]);
+
   async function simular() {
     setLoading(true);
     setError(null);
@@ -188,6 +224,9 @@ export default function Home() {
                 key={center ? `${center.lat},${center.lon}` : "no-center"}
                 center={center}
                 rings={ringsForGlobe}
+                liveMinutes={liveT}
+                liveVpKmS={vp}
+                liveVsKmS={vs}
               />
             )}
 
@@ -212,6 +251,18 @@ export default function Home() {
           )}
           {error && <p className="text-red-400 text-sm mt-3 break-words">Error: {error}</p>}
         </aside>
+
+        {/* Timeline debajo del globo, ocupando las mismas 3 columnas */}
+        <div className="lg:col-span-3">
+          <div className="mt-2">
+            <Playback
+              value={liveT}
+              onChange={setLiveT}
+              max={maxTimeline}
+              disabled={!center || texOk === false}
+            />
+          </div>
+        </div>
       </div>
 
       {/* Debug JSON */}
diff --git a/frontend/components/Globe.tsx b/frontend/components/Globe.tsx
@@ -8,7 +8,13 @@ import { useMemo, useRef } from "react";
 export type Center = { lat: number; lon: number };
 export type RingSet = { p?: number[]; s?: number[] };
 
-type GlobeProps = { center?: Center | null; rings?: RingSet | null };
+type GlobeProps = {
+  center?: Center | null;
+  rings?: RingSet | null;
+  liveMinutes?: number;   // minutos transcurridos para frentes vivos
+  liveVpKmS?: number;     // velocidad P (km/s)
+  liveVsKmS?: number;     // velocidad S (km/s)
+};
 
 /* ------------------- utilidades geo ------------------- */
 const d2r = (d: number) => (d * Math.PI) / 180;
@@ -206,7 +212,19 @@ function RingCircle({
 }
 
 /* ------------------- World (dentro del Canvas) ------------------- */
-function World({ center, rings }: { center: Center; rings?: RingSet | null }) {
+function World({
+  center,
+  rings,
+  liveMinutes,
+  liveVpKmS,
+  liveVsKmS,
+}: {
+  center: Center;
+  rings?: RingSet | null;
+  liveMinutes?: number;
+  liveVpKmS?: number;
+  liveVsKmS?: number;
+}) {
   const worldRef = useRef<THREE.Group>(null!);
 
   useFrame((_, delta) => {
@@ -216,25 +234,55 @@ function World({ center, rings }: { center: Center; rings?: RingSet | null }) {
     g.rotation.y += delta * 0.05; // rotación suave
   });
 
+  // defaults de velocidad si no llegan por props
+  const vp = typeof liveVpKmS === "number" ? liveVpKmS : 6.0;
+  const vs = typeof liveVsKmS === "number" ? liveVsKmS : 3.5;
+
   return (
     <group ref={worldRef}>
       <EarthBall />
       <Atmosphere radius={1.04} />
       <Graticule />
       <EquatorNeon />
+
+      {/* Epicentro */}
       <Pin lat={center.lat} lon={center.lon} />
+
+      {/* Anillos estáticos (respuesta de backend) */}
       {rings?.p?.map((r, i) => (
         <RingCircle key={`p-${i}`} center={center} radiusKm={r} color="#7cf9f1" />
       ))}
       {rings?.s?.map((r, i) => (
         <RingCircle key={`s-${i}`} center={center} radiusKm={r} color="#ff8ec9" />
       ))}
+
+      {/* Frentes vivos P/S (timeline) */}
+      {typeof liveMinutes === "number" && (
+        <>
+          <RingCircle
+            center={center}
+            radiusKm={liveMinutes * 60 * vp}
+            color="#b0fff7"
+          />
+          <RingCircle
+            center={center}
+            radiusKm={liveMinutes * 60 * vs}
+            color="#ffb3d5"
+          />
+        </>
+      )}
     </group>
   );
 }
 
 /* ============================ GLOBE ============================ */
-export default function Globe({ center, rings }: GlobeProps) {
+export default function Globe({
+  center,
+  rings,
+  liveMinutes,
+  liveVpKmS,
+  liveVsKmS,
+}: GlobeProps) {
   if (!center) return null;
 
   return (
@@ -244,16 +292,22 @@ export default function Globe({ center, rings }: GlobeProps) {
       gl={{ antialias: true, alpha: true, toneMapping: THREE.ACESFilmicToneMapping }}
       style={{ width: "100%", height: "100%" }}
     >
-      {/* Luces y fondo (Canvas transparente para ver las estrellas del body) */}
+      {/* Luces */}
       <hemisphereLight intensity={0.5} color={"#cde8ff"} groundColor={"#0b1220"} />
       <directionalLight position={[5, 3, 5]} intensity={1.2} />
       <pointLight position={[-4, -3, -4]} intensity={0.5} />
 
-      {/* Estrellas suaves dentro del Canvas (además de las del body si las tienes) */}
+      {/* Estrellas dentro del Canvas */}
       <Stars radius={120} depth={50} count={4000} factor={3} fade speed={0.15} />
 
       {/* Mundo */}
-      <World center={center} rings={rings} />
+      <World
+        center={center}
+        rings={rings}
+        liveMinutes={liveMinutes}
+        liveVpKmS={liveVpKmS}
+        liveVsKmS={liveVsKmS}
+      />
       <Stand />
 
       {/* Controles */}
diff --git a/frontend/components/Playback.tsx b/frontend/components/Playback.tsx
@@ -0,0 +1,103 @@
+// frontend/components/Playback.tsx
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+type Props = {
+  value: number;                 // minutos actuales
+  onChange: (t: number) => void; // callback al mover/animar
+  min?: number;
+  max?: number;                  // tope del timeline (min)
+  step?: number;
+  disabled?: boolean;
+};
+
+export default function Playback({
+  value,
+  onChange,
+  min = 0,
+  max = 60,
+  step = 0.1,
+  disabled,
+}: Props) {
+  const [playing, setPlaying] = useState(false);
+  const [speed, setSpeed] = useState(1); // 1x, 2x
+  const raf = useRef<number | null>(null);
+  const last = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!playing || disabled) return;
+
+    const tick = (ts: number) => {
+      if (last.current == null) last.current = ts;
+      const dt = (ts - last.current) / 1000; // seg
+      last.current = ts;
+
+      const tNext = value + dt * speed; // minutos por segundo = 1
+      onChange(Math.min(max, tNext));
+
+      if (tNext >= max) {
+        setPlaying(false);
+        last.current = null;
+        raf.current && cancelAnimationFrame(raf.current);
+        return;
+      }
+      raf.current = requestAnimationFrame(tick);
+    };
+
+    raf.current = requestAnimationFrame(tick);
+    return () => {
+      last.current = null;
+      if (raf.current) cancelAnimationFrame(raf.current);
+    };
+  }, [playing, speed, disabled, value, max, onChange]);
+
+  return (
+    <div className="card p-3 flex flex-wrap items-center gap-3">
+      <button
+        className="btn-primary"
+        onClick={() => setPlaying((p) => !p)}
+        disabled={disabled}
+      >
+        {playing ? "Pausar" : "Play"}
+      </button>
+
+      <div className="flex items-center gap-2">
+        <label className="text-xs text-slate-300">Vel</label>
+        <select
+          className="input w-20"
+          value={speed}
+          onChange={(e) => setSpeed(Number(e.target.value))}
+          disabled={disabled}
+        >
+          <option value={0.5}>0.5×</option>
+          <option value={1}>1×</option>
+          <option value={2}>2×</option>
+          <option value={4}>4×</option>
+        </select>
+      </div>
+
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="flex-1"
+        disabled={disabled}
+      />
+      <span className="tabular-nums text-sm text-slate-300">
+        {value.toFixed(1)} min
+      </span>
+
+      <button
+        className="input px-3 py-2"
+        onClick={() => onChange(min)}
+        disabled={disabled}
+      >
+        Reset
+      </button>
+    </div>
+  );
+}
