Merge pull request #2 from Santiago13dev/santidev

Santidev

Author: Santiago13dev

.gitignore

@@ -1,23 +1,28 @@
-# Frontend
-frontend/node_modules/
-frontend/.next/
-frontend/.turbo/
-frontend/dist/
-frontend/out/
-frontend/.vercel/
-
-# Backend
-backend/.gradle/
-backend/build/
-backend/out/
-backend/logs/
-
-# General
-*.log
-.env
-
-# Node/Next (por tu frontend)
+# --- Node / Next.js ---
 node_modules/
 .next/
+out/
 dist/
-out/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+.vercel/
+.env
+.env.* 
+!.env.example
+coverage/
+
+# --- Java / Gradle ---
+.gradle/
+build/
+!gradle/wrapper/gradle-wrapper.jar
+!gradle/wrapper/gradle-wrapper.properties
+# IDE
+.idea/
+*.iml
+# Compilados
+*.class
+
+# --- VS Code (opcional) ---
+.vscode/

backend/.gradle/8.9/executionHistory/executionHistory.lock

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import dynamic from "next/dynamic";
 
 const Globe = dynamic(() => import("../components/Globe"), { ssr: false });
@@ -9,7 +9,10 @@ const Stats = dynamic(() => import("../components/Stats"), { ssr: false });
 const API_BASE = process.env.NEXT_PUBLIC_API_BASE ?? "http://localhost:8080";
 
 type SimResponse = {
-  rings?: { P: { minutes: number; radiusKm: number }[]; S: { minutes: number; radiusKm: number }[] };
+  rings?: {
+    P: { minutes: number; radiusKm: number }[];
+    S: { minutes: number; radiusKm: number }[];
+  };
   arrivals?: { place: string; type: "P" | "S"; minutes: number }[];
   intensity?: { gridId: string; legend: { label: string; colorHex: string }[] };
 };
@@ -22,13 +25,48 @@ export default function Home() {
   const [resp, setResp] = useState<SimResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  // ✅ Chequeo de existencia de texturas para evitar crash del loader
+  const [texOk, setTexOk] = useState<boolean | null>(null);
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      try {
+        const urls = [
+          "/textures/earth_political_4k.jpg",
+          "/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" }))
+        );
+        if (!alive) return;
+        setTexOk(resps.every((r) => r.ok));
+      } catch {
+        if (!alive) return;
+        setTexOk(false);
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  // Centro del sismo
   const center = useMemo(() => {
     const la = Number(lat);
     const lo = Number(lon);
     if (Number.isFinite(la) && Number.isFinite(lo)) return { lat: la, lon: lo };
     return null;
   }, [lat, lon]);
 
+  // Adaptar formato para el globo
+  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]);
+
   async function simular() {
     setLoading(true);
     setError(null);
@@ -63,6 +101,7 @@ export default function Home() {
         const txt = await r.text().catch(() => "");
         throw new Error(`HTTP ${r.status} ${txt}`);
       }
+
       const data: SimResponse = await r.json();
       setResp(data);
       console.log("Simulación OK:", data);
@@ -125,20 +164,39 @@ export default function Home() {
       <div className="max-w-6xl mx-auto p-4 grid grid-cols-1 lg:grid-cols-3 gap-4">
         <section className="lg:col-span-2">
           <div className="relative h-[60vh] rounded-xl border border-slate-800 overflow-hidden bg-black">
-            {/* Importante: evita que el Canvas tape los controles */}
-            {/* El Canvas está solo dentro de este contenedor, bajo el header */}
-            {center && (
+            {/* Si faltan texturas, avisamos cómo resolver */}
+            {texOk === false && (
+              <div className="absolute inset-0 grid place-items-center text-center p-6">
+                <div>
+                  <p className="text-red-300 font-semibold">Faltan texturas del globo</p>
+                  <p className="text-slate-300 text-sm mt-2">
+                    Copia estos archivos en <code>/public/textures</code>:
+                  </p>
+                  <pre className="text-xs mt-2 bg-slate-800/70 p-3 rounded">
+{`/public/textures/earth_political_4k.jpg
+/public/textures/earth_normal_2k.jpg
+/public/textures/earth_specular_2k.jpg`}
+                  </pre>
+                  <p className="text-slate-400 text-xs mt-2">
+                    Luego abre en el navegador:
+                    <br />
+                    <code>/textures/earth_political_4k.jpg</code>
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {/* Montamos el globo solo si las texturas existen */}
+            {texOk && (
               <Globe
+                key={center ? `${center.lat},${center.lon}` : "no-center"}
                 center={center}
-                rings={resp?.rings ?? null}
-                intensity={resp?.intensity ?? null}
+                rings={ringsForGlobe}
               />
             )}
           </div>
 
-          {error && (
-            <p className="mt-3 text-red-400 break-words">Error: {error}</p>
-          )}
+          {error && <p className="mt-3 text-red-400 break-words">Error: {error}</p>}
         </section>
 
         <aside className="lg:col-span-1">

backend/.gradle/8.9/fileHashes/fileHashes.lock

@@ -1,17 +1,15 @@
 "use client";
+
 import * as THREE from "three";
-import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { Canvas, useFrame } from "@react-three/fiber";
 import { OrbitControls, Stars, useTexture } from "@react-three/drei";
 import { useMemo, useRef } from "react";
 
 /** Props mínimas que ya usabas */
 export type Center = { lat: number; lon: number };
 export type RingSet = { p?: number[]; s?: number[] }; // kilómetros (puede venir vacío)
 
-type GlobeProps = {
-  center: Center;
-  rings?: RingSet | null;
-};
+type GlobeProps = { center?: Center | null; rings?: RingSet | null };
 
 /* ------------------------- utilidades geo ------------------------- */
 const d2r = (d: number) => (d * Math.PI) / 180;
@@ -50,8 +48,7 @@ function destinationPoint(lat: number, lon: number, bearingDeg: number, angDistR
 /* --------------------------- materiales -------------------------- */
 
 function Atmosphere() {
-  // shader muy simple de “rim light” para la atmósfera
-  const materialRef = useRef<THREE.ShaderMaterial>(null!);
+  // shader muy simple de “rim light”
   const vertexShader = /* glsl */ `
     varying vec3 vNormal;
     void main() {
@@ -70,7 +67,6 @@ function Atmosphere() {
     <mesh scale={1.018}>
       <sphereGeometry args={[1, 64, 64]} />
       <shaderMaterial
-        ref={materialRef}
         vertexShader={vertexShader}
         fragmentShader={fragmentShader}
         blending={THREE.AdditiveBlending}
@@ -87,21 +83,18 @@ function Graticule({ color = "#2dd4bf", alpha = 0.25 }) {
   const lines = useMemo(() => {
     const group: JSX.Element[] = [];
     const mat = new THREE.LineBasicMaterial({ color, transparent: true, opacity: alpha });
+
     // paralelos cada 30°
     for (let lat = -60; lat <= 60; lat += 30) {
       const pts: THREE.Vector3[] = [];
-      for (let lon = -180; lon <= 180; lon += 3) {
-        pts.push(latLonToVector3(1.001, lat, lon));
-      }
+      for (let lon = -180; lon <= 180; lon += 3) pts.push(latLonToVector3(1.001, lat, lon));
       const geo = new THREE.BufferGeometry().setFromPoints(pts);
       group.push(<line key={`par-${lat}`} geometry={geo} material={mat} />);
     }
     // meridianos cada 30°
     for (let lon = -150; lon <= 180; lon += 30) {
       const pts: THREE.Vector3[] = [];
-      for (let lat = -90; lat <= 90; lat += 3) {
-        pts.push(latLonToVector3(1.001, lat, lon));
-      }
+      for (let lat = -90; lat <= 90; lat += 3) pts.push(latLonToVector3(1.001, lat, lon));
       const geo = new THREE.BufferGeometry().setFromPoints(pts);
       group.push(<line key={`mer-${lon}`} geometry={geo} material={mat} />);
     }
@@ -143,7 +136,7 @@ function Stand() {
 /* ----------------------------- Tierra ----------------------------- */
 
 function EarthBall() {
-  // Carga de texturas (las opcionales no son obligatorias)
+  // Carga de texturas desde /public/textures
   const [colorMap, normalMap, specMap] = useTexture(
     [
       "/textures/earth_political_4k.jpg",
@@ -153,17 +146,18 @@ function EarthBall() {
     (txs) => txs.forEach((t) => (t.anisotropy = 8))
   );
 
+  // El mapa "specular" es para Phong, no para Standard.
+  const hasNormal = (normalMap as any)?.image;
+  const hasSpec = (specMap as any)?.image;
+
   return (
     <mesh>
       <sphereGeometry args={[1, 128, 128]} />
-      <meshStandardMaterial
-        map={colorMap}
-        normalMap={(normalMap as any)?.image ? (normalMap as THREE.Texture) : undefined}
-        metalnessMap={(specMap as any)?.image ? (specMap as THREE.Texture) : undefined}
-        roughnessMap={(specMap as any)?.image ? (specMap as THREE.Texture) : undefined}
-        metalness={0.1}
-        roughness={0.9}
-        envMapIntensity={0.7}
+      <meshPhongMaterial
+        map={colorMap as THREE.Texture}
+        normalMap={hasNormal ? (normalMap as THREE.Texture) : undefined}
+        specularMap={hasSpec ? (specMap as THREE.Texture) : undefined}
+        shininess={12}
       />
     </mesh>
   );
@@ -210,41 +204,46 @@ function RingCircle({
   const geo = useMemo(() => new THREE.BufferGeometry().setFromPoints(points), [points]);
   return (
     <line geometry={geo}>
-      <lineBasicMaterial color={color} linewidth={2} />
+      <lineBasicMaterial color={color} />
     </line>
   );
 }
 
-/* ---------------------------- Controls ---------------------------- */
+/* ------------------- World: vive DENTRO del Canvas ------------------- */
 
-function Controls() {
-  const { camera } = useThree();
-  // ligera inclinación estilo “eje terrestre”
-  const group = useRef<THREE.Group>(null!);
-  useFrame(() => {
-    if (!group.current) return;
-    group.current.rotation.z = d2r(23.4);
+function World({ center, rings }: { center: Center; rings?: RingSet | null }) {
+  const worldRef = useRef<THREE.Group>(null!);
+
+  // Animación: tilt + rotación suave
+  useFrame((_, delta) => {
+    if (!worldRef.current) return;
+    worldRef.current.rotation.z = d2r(23.4);
+    worldRef.current.rotation.y += delta * 0.05;
   });
+
   return (
-    <>
-      <group ref={group} />
-      <OrbitControls
-        enableDamping
-        dampingFactor={0.08}
-        minDistance={1.6}
-        maxDistance={6}
-        rotateSpeed={0.8}
-        zoomSpeed={0.9}
-        enablePan={false}
-        target={[0, 0, 0]}
-      />
-    </>
+    <group ref={worldRef}>
+      <EarthBall />
+      <Atmosphere />
+      <Graticule />
+      <EquatorNeon />
+      <Pin lat={center.lat} lon={center.lon} />
+      {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" />
+      ))}
+    </group>
   );
 }
 
 /* ============================ GLOBE ============================ */
 
 export default function Globe({ center, rings }: GlobeProps) {
+  // 🔒 Si aún no hay center (hidratación/primer render), no dibujes nada
+  if (!center) return null;
+
   return (
     <Canvas
       camera={{ position: [0, 0, 3.1], fov: 42 }}
@@ -258,28 +257,24 @@ export default function Globe({ center, rings }: GlobeProps) {
       <pointLight position={[-4, -3, -4]} intensity={0.5} />
 
       {/* Estrellas sutiles */}
-      <Stars radius={80} depth={35} count={2000} factor={2} fade speed={0.2} />
-
-      {/* Globo */}
-      <group>
-        <EarthBall />
-        <Atmosphere />
-        <Graticule />
-        <EquatorNeon />
-        <Pin lat={center.lat} lon={center.lon} />
-        {/* Anillos P/S si existen */}
-        {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" />
-        ))}
-      </group>
+      <Stars radius={80} depth={35} count={1600} factor={2} fade speed={0.2} />
+
+      {/* Globo + elementos */}
+      <World center={center} rings={rings} />
 
       {/* Soporte / base (decorativo) */}
       <Stand />
 
-      <Controls />
+      <OrbitControls
+        enableDamping
+        dampingFactor={0.08}
+        minDistance={1.6}
+        maxDistance={6}
+        rotateSpeed={0.8}
+        zoomSpeed={0.9}
+        enablePan={false}
+        target={[0, 0, 0]}
+      />
     </Canvas>
   );
 }