From 34fd0900638257ae370682745ba0a4714fae7b0d Mon Sep 17 00:00:00 2001
From: sucupira <sucupira@nhedkxone.net>
Date: Mon, 21 Jul 2025 00:51:19 -0400
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Fix:=20Globe=20"Vague=20Plan=C3=A9t?=
 =?UTF-8?q?aire"=20-=20Version=20finale=20fonctionnelle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Correction variable currentRadius manquante (grille, continents, marqueurs)
- Inversion projection X pour orientation correcte des continents
- Inversion sens de rotation pour mouvement naturel
- Chargement GeoJSON externe avec fallback local
- Globe maintenant pleinement opérationnel avec carte, villes et animations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/GlobeGeoJSON.svelte | 68 +++++++++++++--------------
 src/components/Predictions.svelte  |  4 +-
 src/data/world-detailed.json       | 75 ++++++++++++++++++++++++++++++
 3 files changed, 110 insertions(+), 37 deletions(-)
 create mode 100644 src/data/world-detailed.json

diff --git a/src/components/GlobeGeoJSON.svelte b/src/components/GlobeGeoJSON.svelte
index f06ea53..70c740a 100644
--- a/src/components/GlobeGeoJSON.svelte
+++ b/src/components/GlobeGeoJSON.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { onMount } from 'svelte';
-  import anime from '../lib/anime.js';
+import { onMount } from 'svelte';
+import anime from '../lib/anime.js';
   
   let canvas;
   let visible = false;
@@ -58,6 +58,7 @@
       duration: 1000
     }, '-=600');
     
+    
     // Charger les données GeoJSON des continents
     let worldData = null;
     try {
@@ -66,7 +67,6 @@
     } catch (error) {
       console.error('Erreur chargement GeoJSON:', error);
     }
-    
     // Données des lieux avec animation de vague
     const locations = [
       { name: 'La Réunion', lat: -21.1151, lon: 55.5364, date: '27 Juin', color: '#FF6B35', day: 178 },
@@ -151,18 +151,18 @@
       });
     });
     
-    // Projection 3D
+    // Projection 3D (lon/lat to screen coordinates)
     function project(lon, lat, r) {
       const phi = (90 - lat) * Math.PI / 180;
-      const theta = (lon + rotation) * Math.PI / 180;
-      
+      const theta = lon * Math.PI / 180 - rotation;
+
       const x = r * Math.sin(phi) * Math.cos(theta);
       const y = r * Math.cos(phi);
       const z = r * Math.sin(phi) * Math.sin(theta);
-      
+
       return {
-        x: centerX + x * zoom,
-        y: centerY - y * zoom,
+        x: centerX - x,
+        y: centerY - y,
         z: z,
         visible: z > 0
       };
@@ -172,8 +172,11 @@
     function draw() {
       ctx.clearRect(0, 0, width, height);
       
+      // Calculer le rayon actuel avec zoom
+      const currentRadius = radius * zoom;
+      
       // Fond avec dégradé
-      const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius * zoom);
+      const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, currentRadius);
       gradient.addColorStop(0, 'rgba(10, 22, 40, 0.2)');
       gradient.addColorStop(1, 'rgba(10, 22, 40, 0.8)');
       ctx.fillStyle = gradient;
@@ -181,18 +184,18 @@
       
       // Ombre du globe
       ctx.beginPath();
-      ctx.arc(centerX + 10, centerY + 10, radius * zoom, 0, Math.PI * 2);
+      ctx.arc(centerX + 10, centerY + 10, currentRadius, 0, Math.PI * 2);
       ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
       ctx.fill();
       
       // Globe principal
       ctx.beginPath();
-      ctx.arc(centerX, centerY, radius * zoom, 0, Math.PI * 2);
+      ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
       const globeGradient = ctx.createRadialGradient(
         centerX - radius * 0.3 * zoom, 
         centerY - radius * 0.3 * zoom, 
         0,
-        centerX, centerY, radius * zoom
+        centerX, centerY, currentRadius
       );
       globeGradient.addColorStop(0, '#1a3a5a');
       globeGradient.addColorStop(0.5, '#0f2847');
@@ -200,21 +203,18 @@
       ctx.fillStyle = globeGradient;
       ctx.fill();
       
-      // Grille de latitude/longitude avec animation
-      ctx.strokeStyle = 'rgba(255, 215, 0, 0.1)';
-      ctx.lineWidth = 1;
+    // Grille de latitude/longitude
+    ctx.strokeStyle = 'rgba(255, 215, 0, 0.1)';
+    ctx.lineWidth = 1;
       
       // Lignes de latitude
       for (let lat = -80; lat <= 80; lat += 20) {
         ctx.beginPath();
         for (let lon = -180; lon <= 180; lon += 5) {
-          const p = project(lon, lat, radius);
+          const p = project(lon, lat, currentRadius);
           if (p.visible) {
-            if (lon === -180) {
-              ctx.moveTo(p.x, p.y);
-            } else {
-              ctx.lineTo(p.x, p.y);
-            }
+            if (lon === -180) ctx.moveTo(p.x, p.y);
+            else ctx.lineTo(p.x, p.y);
           }
         }
         ctx.stroke();
@@ -224,13 +224,10 @@
       for (let lon = -180; lon <= 180; lon += 30) {
         ctx.beginPath();
         for (let lat = -90; lat <= 90; lat += 5) {
-          const p = project(lon, lat, radius);
+          const p = project(lon, lat, currentRadius);
           if (p.visible) {
-            if (lat === -90) {
-              ctx.moveTo(p.x, p.y);
-            } else {
-              ctx.lineTo(p.x, p.y);
-            }
+            if (lat === -90) ctx.moveTo(p.x, p.y);
+            else ctx.lineTo(p.x, p.y);
           }
         }
         ctx.stroke();
@@ -238,10 +235,11 @@
       
       // Dessiner les continents
       if (worldData) {
+        ctx.save();
         ctx.strokeStyle = '#4CAF50';
         ctx.fillStyle = 'rgba(76, 175, 80, 0.3)';
         ctx.lineWidth = 2;
-        
+
         worldData.features.forEach(feature => {
           if (feature.geometry.type === 'Polygon') {
             drawPolygon(feature.geometry.coordinates[0]);
@@ -251,6 +249,7 @@
             });
           }
         });
+        ctx.restore();
       }
       
       // Dessiner les particules de la vague
@@ -258,7 +257,7 @@
         const p = project(
           particle.angle * 180 / Math.PI - 180,
           Math.sin(Date.now() * 0.001 * particle.speed) * 30,
-          particle.radius
+          currentRadius + (particle.radius - radius)
         );
         
         if (p.visible && particle.opacity > 0) {
@@ -271,7 +270,7 @@
       
       // Dessiner les marqueurs avec effet de pulsation
       locations.forEach((location, index) => {
-        const p = project(location.lon, location.lat, radius);
+        const p = project(location.lon, location.lat, currentRadius);
         
         if (p.visible) {
           // Vérifier si la vague est passée
@@ -327,7 +326,7 @@
       
       // Rotation automatique
       if (!isDragging) {
-        rotation -= 0.002;
+        rotation += 0.002;
       }
       
       animationId = requestAnimationFrame(draw);
@@ -336,9 +335,10 @@
     function drawPolygon(coordinates) {
       ctx.beginPath();
       let firstPoint = true;
+      const currentRadius = radius * zoom;
       
       coordinates.forEach(coord => {
-        const p = project(coord[0], coord[1], radius);
+        const p = project(coord[0], coord[1], currentRadius);
         if (p.visible) {
           if (firstPoint) {
             ctx.moveTo(p.x, p.y);
@@ -524,4 +524,4 @@
       height: 400px;
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Predictions.svelte b/src/components/Predictions.svelte
index 1acf49b..f144502 100644
--- a/src/components/Predictions.svelte
+++ b/src/components/Predictions.svelte
@@ -338,7 +338,6 @@
     background: rgba(255, 255, 255, 0.05);
     border-radius: 20px;
     padding: 2rem;
-    opacity: 0;
   }
   
   .results-container h3 {
@@ -360,7 +359,6 @@
     border-radius: 15px;
     padding: 1.5rem;
     text-align: center;
-    opacity: 0;
   }
   
   .result-item.highlight {
@@ -429,4 +427,4 @@
       padding: 1.5rem;
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/data/world-detailed.json b/src/data/world-detailed.json
new file mode 100644
index 0000000..b59c2b0
--- /dev/null
+++ b/src/data/world-detailed.json
@@ -0,0 +1,75 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": { "name": "Africa" },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [-17.625, 35.96], [-11.25, 37.35], [-8.67, 36.48], [-2.17, 35.16], [11.05, 37.09], [15.28, 36.75], [22.49, 36.48], [31.17, 31.4], [34.92, 29.5], [39.2, 23.89], [41.66, 16.35], [50.2, 11.28], [51.28, 4.28], [51.25, -3.73], [49.54, -12.47], [43.68, -20.93], [38.41, -24.98], [31.92, -29.46], [24.36, -33.87], [16.34, -34.84], [8.32, -26.89], [2.49, -16.14], [-9.23, -8.8], [-12.88, 4.61], [-16.71, 12.13], [-17.625, 35.96]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": { "name": "Europe" },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [-25.36, 71.03], [-13.69, 69.29], [-3.31, 69.85], [17.13, 68.87], [31.29, 70.45], [40.05, 64.78], [47.99, 58.36], [46.63, 55.39], [45.74, 52.64], [42.45, 50.61], [37.4, 49.8], [35.04, 48.1], [33.75, 45.14], [36.53, 41.62], [40.93, 36.54], [26.06, 35.3], [23.7, 38.25], [20.22, 39.34], [19.37, 42.69], [16.56, 46.05], [10.49, 46.89], [6.84, 49.9], [3.31, 51.35], [-2.57, 54.21], [-3.31, 56.01], [-5.67, 58.63], [-11.03, 58.13], [-25.36, 71.03]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": { "name": "Asia" },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [40.08, 64.78], [46.46, 67.69], [63.55, 68.44], [77.11, 68.9], [104.35, 70.11], [121.64, 71.28], [139.9, 71.52], [159.31, 70.9], [169.9, 66.48], [179.99, 64.97], [179.99, 50.25], [170.59, 50.15], [159.31, 52.58], [146.89, 48.54], [133.17, 45.14], [127.41, 50.74], [120.26, 53.33], [109.45, 49.67], [103.31, 41.91], [95.16, 40.08], [88.59, 35.64], [81.21, 30.22], [77.84, 35.49], [73.65, 39.43], [68.93, 38.9], [66.52, 37.36], [61.21, 35.65], [56.32, 33.75], [53.92, 32.72], [46.57, 38.9], [40.08, 36.58], [40.08, 64.78]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": { "name": "North America" },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [-168.13, 65.65], [-166.45, 68.79], [-163.69, 69.61], [-160.78, 69.52], [-156.58, 71.36], [-152.27, 70.83], [-140.99, 69.71], [-140.99, 60.31], [-139.04, 60.0], [-135.48, 59.79], [-131.97, 56.55], [-128.06, 54.89], [-125.64, 50.42], [-124.91, 49.98], [-95.15, 49.38], [-83.14, 62.0], [-74.87, 45.0], [-67.13, 45.14], [-67.79, 47.07], [-87.44, 47.94], [-109.04, 31.34], [-114.72, 32.72], [-117.13, 32.54], [-125.24, 40.39], [-124.4, 43.38], [-140.99, 60.31], [-168.13, 65.65]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": { "name": "South America" },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [-81.33, 12.44], [-84.05, 9.55], [-84.23, 5.24], [-82.89, -3.94], [-70.04, -9.49], [-65.32, -20.5], [-57.62, -30.22], [-53.37, -33.77], [-53.65, -33.21], [-66.95, -54.9], [-68.63, -54.87], [-74.71, -52.83], [-80.24, -50.54], [-81.77, -45.55], [-81.11, -38.68], [-75.52, -37.71], [-70.36, -18.35], [-70.049, -9.42], [-74.31, -7.44], [-79.0, -4.3], [-79.21, 2.69], [-72.42, 11.25], [-81.33, 12.44]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": { "name": "Australia" },
+      "geometry": {
+        "type": "Polygon", 
+        "coordinates": [[
+          [112.91, -21.93], [153.14, -10.58], [153.57, -27.87], [159.1, -31.49], [158.37, -37.81], [147.71, -42.96], [131.33, -39.19], [113.16, -33.76], [112.91, -21.93]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": { "name": "Greenland" },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [-46.76, 82.63], [-37.34, 83.03], [-20.45, 82.73], [-22.11, 70.17], [-28.42, 70.37], [-33.75, 66.96], [-39.15, 65.93], [-44.47, 59.99], [-59.57, 75.52], [-68.5, 76.06], [-71.18, 78.05], [-68.31, 83.11], [-46.76, 82.63]
+        ]]
+      }
+    }
+  ]
+}