Ajout de deux versions alternatives du globe : OpenGlobus et GeoJSON pour comparaison

src/App.svelte

@@ -8,6 +8,8 @@
   import Culture from './components/Culture.svelte';
   import Observatory from './components/Observatory.svelte';
   import Globe from './components/Globe.svelte';
+  import GlobeOpenGlobus from './components/GlobeOpenGlobus.svelte';
+  import GlobeGeoJSON from './components/GlobeGeoJSON.svelte';
   import Footer from './components/Footer.svelte';
   
   let scrollY = 0;
@@ -46,6 +48,8 @@
   <Culture />
   <Observatory />
   <Globe />
+  <GlobeOpenGlobus />
+  <GlobeGeoJSON />
 </main>
 
 <Footer />

src/components/Globe.svelte

@@ -319,9 +319,9 @@
 <section id="globe-section" class="globe-section">
   <div class="container">
     <div class="section-header" class:visible>
-      <h2>La Vague Planétaire de Sirius</h2>
+      <h2>Globe Original (Canvas simple)</h2>
       <p class="section-subtitle">
-        Le lever héliaque progresse d'Est en Ouest à travers le monde
+        Version actuelle avec formes simplifiées
       </p>
     </div>
     

src/components/GlobeGeoJSON.svelte

@@ -0,0 +1,382 @@
+<script>
+  import { onMount } from 'svelte';
+  
+  let canvas;
+  let visible = false;
+  
+  onMount(() => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          visible = true;
+          if (!canvas.hasAttribute('data-initialized')) {
+            initGlobe();
+            canvas.setAttribute('data-initialized', 'true');
+          }
+        }
+      });
+    });
+    
+    const section = document.getElementById('geojson-section');
+    if (section) observer.observe(section);
+    
+    return () => observer.disconnect();
+  });
+  
+  async function initGlobe() {
+    const ctx = canvas.getContext('2d');
+    const width = canvas.width = canvas.offsetWidth;
+    const height = canvas.height = canvas.offsetHeight;
+    
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const radius = Math.min(width, height) * 0.35;
+    
+    let rotation = 2.5;
+    let zoom = 1;
+    let isDragging = false;
+    let lastMouseX = 0;
+    let waveAnimation = 0;
+    
+    // Charger les données GeoJSON des continents
+    let worldData = null;
+    try {
+      const response = await fetch('https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json');
+      worldData = await response.json();
+    } catch (error) {
+      console.error('Erreur chargement GeoJSON:', error);
+    }
+    
+    // Données des lieux
+    const locations = [
+      { name: 'La Réunion', lat: -21.1151, lon: 55.5364, date: '27 Juin', day: 178 },
+      { name: 'Kinshasa', lat: -4.4419, lon: 15.2663, date: '16 Juillet', day: 197 },
+      { name: 'Guadeloupe', lat: 16.2650, lon: -61.5510, date: '22 Juillet', day: 203 },
+      { name: 'Martinique', lat: 14.6415, lon: -61.0242, date: '23 Juillet', day: 204 },
+      { name: 'Dakar', lat: 14.7167, lon: -17.4677, date: '23 Juillet', day: 204 },
+      { name: 'Abidjan', lat: 5.3600, lon: -4.0083, date: '28 Juillet', day: 209 },
+      { name: 'Le Caire', lat: 30.0444, lon: 31.2357, date: '3 Août', day: 215 },
+      { name: 'Paris', lat: 48.8566, lon: 2.3522, date: '12 Août', day: 224 }
+    ];
+    
+    // Gérer les interactions
+    canvas.addEventListener('wheel', (e) => {
+      e.preventDefault();
+      zoom += e.deltaY * -0.001;
+      zoom = Math.min(Math.max(0.5, zoom), 2);
+    });
+    
+    canvas.addEventListener('mousedown', (e) => {
+      isDragging = true;
+      lastMouseX = e.clientX;
+    });
+    
+    window.addEventListener('mousemove', (e) => {
+      if (isDragging) {
+        const deltaX = e.clientX - lastMouseX;
+        rotation -= deltaX * 0.01;
+        lastMouseX = e.clientX;
+      }
+    });
+    
+    window.addEventListener('mouseup', () => {
+      isDragging = false;
+    });
+    
+    // Fonction pour projeter les coordonnées
+    function project(lon, lat, r) {
+      const phi = (90 - lat) * Math.PI / 180;
+      const theta = (-lon - rotation * 57.3) * Math.PI / 180;
+      
+      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, y: centerY - y, z: z };
+    }
+    
+    // Dessiner un chemin GeoJSON
+    function drawPath(coordinates, ctx, radius) {
+      ctx.beginPath();
+      let started = false;
+      
+      coordinates.forEach(([lon, lat], i) => {
+        const p = project(lon, lat, radius);
+        if (p.z > -radius * 0.3) {
+          if (!started) {
+            ctx.moveTo(p.x, p.y);
+            started = true;
+          } else {
+            ctx.lineTo(p.x, p.y);
+          }
+        }
+      });
+      
+      return started;
+    }
+    
+    function draw() {
+      ctx.clearRect(0, 0, width, height);
+      
+      const currentRadius = radius * zoom;
+      
+      // Ombre du globe
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(centerX + 5, centerY + 5, currentRadius, 0, Math.PI * 2);
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
+      ctx.filter = 'blur(10px)';
+      ctx.fill();
+      ctx.restore();
+      
+      // Océan
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
+      ctx.fillStyle = '#4A90E2';
+      ctx.fill();
+      
+      // Gradient pour l'effet 3D
+      const gradient = ctx.createRadialGradient(
+        centerX - currentRadius * 0.3,
+        centerY - currentRadius * 0.3,
+        0,
+        centerX,
+        centerY,
+        currentRadius
+      );
+      gradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)');
+      gradient.addColorStop(1, 'rgba(0, 0, 0, 0.2)');
+      
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
+      ctx.fillStyle = gradient;
+      ctx.fill();
+      
+      // Dessiner les continents depuis GeoJSON
+      if (worldData && worldData.features) {
+        ctx.save();
+        ctx.fillStyle = '#228B22';
+        ctx.strokeStyle = '#1F5F1F';
+        ctx.lineWidth = 0.5;
+        
+        worldData.features.forEach(feature => {
+          if (feature.geometry.type === 'Polygon') {
+            feature.geometry.coordinates.forEach(ring => {
+              if (drawPath(ring, ctx, currentRadius)) {
+                ctx.fill();
+                ctx.stroke();
+              }
+            });
+          } else if (feature.geometry.type === 'MultiPolygon') {
+            feature.geometry.coordinates.forEach(polygon => {
+              polygon.forEach(ring => {
+                if (drawPath(ring, ctx, currentRadius)) {
+                  ctx.fill();
+                  ctx.stroke();
+                }
+              });
+            });
+          }
+        });
+        
+        ctx.restore();
+      }
+      
+      // Grille
+      ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
+      ctx.lineWidth = 0.5;
+      
+      // Méridiens
+      for (let lon = -180; lon <= 180; lon += 30) {
+        const coords = [];
+        for (let lat = -90; lat <= 90; lat += 5) {
+          coords.push([lon, lat]);
+        }
+        drawPath(coords, ctx, currentRadius);
+        ctx.stroke();
+      }
+      
+      // Parallèles
+      for (let lat = -60; lat <= 60; lat += 30) {
+        const coords = [];
+        for (let lon = -180; lon <= 180; lon += 5) {
+          coords.push([lon, lat]);
+        }
+        drawPath(coords, ctx, currentRadius);
+        ctx.stroke();
+      }
+      
+      // Bordure
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
+      ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
+      ctx.lineWidth = 2;
+      ctx.stroke();
+      
+      // Animation de la vague
+      waveAnimation += 0.02;
+      const waveDay = ((Math.sin(waveAnimation) + 1) / 2) * 46 + 178;
+      
+      // Dessiner les points
+      locations.forEach((loc, i) => {
+        const p = project(loc.lon, loc.lat, currentRadius);
+        
+        if (p.z > -currentRadius * 0.3) {
+          const isActive = waveDay >= loc.day;
+          const isNear = Math.abs(waveDay - loc.day) < 5;
+          
+          // Effet de vague
+          if (isNear && p.z > 0) {
+            const waveSize = 40 * (1 - Math.abs(waveDay - loc.day) / 5);
+            const waveGradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, waveSize);
+            waveGradient.addColorStop(0, 'rgba(255, 215, 0, 0.8)');
+            waveGradient.addColorStop(0.5, 'rgba(255, 215, 0, 0.3)');
+            waveGradient.addColorStop(1, 'rgba(255, 215, 0, 0)');
+            ctx.fillStyle = waveGradient;
+            ctx.fillRect(p.x - waveSize, p.y - waveSize, waveSize * 2, waveSize * 2);
+          }
+          
+          // Point
+          const opacity = p.z > 0 ? 1 : 0.3;
+          ctx.globalAlpha = opacity;
+          
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, isActive ? 6 : 4, 0, Math.PI * 2);
+          ctx.fillStyle = isActive ? '#FFD700' : '#666666';
+          ctx.fill();
+          ctx.strokeStyle = isActive ? '#FFFFFF' : '#999999';
+          ctx.lineWidth = 2;
+          ctx.stroke();
+          
+          // Label
+          if (p.z > 0) {
+            ctx.fillStyle = isActive ? '#FFD700' : '#999999';
+            ctx.font = `${12 * zoom}px Inter`;
+            ctx.textAlign = 'center';
+            ctx.fillText(loc.name, p.x, p.y - 12);
+            ctx.font = `${10 * zoom}px Inter`;
+            ctx.fillText(loc.date, p.x, p.y + 22);
+          }
+          
+          ctx.globalAlpha = 1;
+        }
+      });
+      
+      // Rotation automatique
+      if (!isDragging) {
+        rotation += 0.002;
+      }
+      
+      requestAnimationFrame(draw);
+    }
+    
+    draw();
+  }
+</script>
+
+<section id="geojson-section" class="globe-section">
+  <div class="container">
+    <div class="section-header" class:visible>
+      <h2>Globe avec GeoJSON</h2>
+      <p class="section-subtitle">
+        Canvas 2D avec données géographiques précises
+      </p>
+    </div>
+    
+    <div class="globe-container" class:visible>
+      <canvas bind:this={canvas} class="globe-canvas"></canvas>
+      
+      <div class="globe-controls">
+        <p>🖱️ Glisser pour tourner | 🔍 Molette pour zoomer</p>
+      </div>
+      
+      <div class="globe-info">
+        <div class="info-card card">
+          <h3>GeoJSON + Canvas 2D</h3>
+          <p><strong>Avantages :</strong></p>
+          <ul>
+            <li>✅ Léger et rapide</li>
+            <li>✅ Contrôle total du rendu</li>
+            <li>✅ Animation personnalisée de la vague</li>
+            <li>✅ Pas de dépendances externes</li>
+          </ul>
+          <p><strong>Inconvénients :</strong></p>
+          <ul>
+            <li>❌ Calculs de projection manuels</li>
+            <li>❌ Pas de textures satellite</li>
+            <li>❌ Performance limitée avec beaucoup de détails</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .globe-section {
+    padding: var(--spacing-xl) 0;
+    background: var(--gradient-dawn);
+  }
+  
+  .globe-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-lg);
+    align-items: center;
+    margin-top: var(--spacing-lg);
+    opacity: 0;
+    transform: translateY(30px);
+    transition: all 0.8s ease-out 0.3s;
+  }
+  
+  .globe-container.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  
+  .globe-canvas {
+    width: 100%;
+    height: 500px;
+    border-radius: 20px;
+    background: radial-gradient(circle at center, #0a192f 0%, #020c1b 100%);
+    cursor: grab;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
+  }
+  
+  .globe-canvas:active {
+    cursor: grabbing;
+  }
+  
+  .globe-controls {
+    text-align: center;
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--color-primary);
+    opacity: 0.7;
+  }
+  
+  .info-card h3 {
+    color: var(--color-primary);
+    margin-bottom: 1rem;
+  }
+  
+  .info-card ul {
+    list-style: none;
+    padding: 0;
+    margin: 0.5rem 0;
+  }
+  
+  .info-card li {
+    padding: 0.25rem 0;
+  }
+  
+  @media (max-width: 768px) {
+    .globe-container {
+      grid-template-columns: 1fr;
+    }
+    
+    .globe-canvas {
+      height: 400px;
+    }
+  }
+</style>

src/components/GlobeOpenGlobus.svelte

@@ -0,0 +1,217 @@
+<script>
+  import { onMount } from 'svelte';
+  
+  let container;
+  let visible = false;
+  let globeInstance;
+  
+  onMount(async () => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting && !globeInstance) {
+          visible = true;
+          initGlobe();
+        }
+      });
+    });
+    
+    const section = document.getElementById('openglobus-section');
+    if (section) observer.observe(section);
+    
+    return () => {
+      observer.disconnect();
+      if (globeInstance) {
+        globeInstance.destroy();
+      }
+    };
+  });
+  
+  async function initGlobe() {
+    // Charger OpenGlobus depuis CDN
+    const script = document.createElement('script');
+    script.src = 'https://cdn.jsdelivr.net/npm/@openglobus/og@0.10.0/dist/og.umd.js';
+    script.onload = () => {
+      const { Globe, XYZ, Vector, Entity, Label } = window.og;
+      
+      // Créer le globe
+      globeInstance = new Globe({
+        target: container,
+        name: "Earth",
+        terrain: null,
+        layers: [
+          new XYZ("OSM", {
+            url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+            visibility: true,
+            attribution: 'OpenStreetMap'
+          })
+        ]
+      });
+      
+      // Données des lieux
+      const locations = [
+        { name: 'La Réunion', lat: -21.1151, lon: 55.5364, date: '27 Juin', color: '#FF6B35' },
+        { name: 'Kinshasa', lat: -4.4419, lon: 15.2663, date: '16 Juillet', color: '#FFA500' },
+        { name: 'Guadeloupe', lat: 16.2650, lon: -61.5510, date: '22 Juillet', color: '#FFD700' },
+        { name: 'Martinique', lat: 14.6415, lon: -61.0242, date: '23 Juillet', color: '#FFD700' },
+        { name: 'Dakar', lat: 14.7167, lon: -17.4677, date: '23 Juillet', color: '#FFE44D' },
+        { name: 'Le Caire', lat: 30.0444, lon: 31.2357, date: '3 Août', color: '#FFFACD' }
+      ];
+      
+      // Ajouter une couche de vecteurs pour les marqueurs
+      const markerLayer = new Vector("Markers", {
+        entities: locations.map(loc => new Entity({
+          name: loc.name,
+          lonlat: [loc.lon, loc.lat],
+          label: {
+            text: `${loc.name}\n${loc.date}`,
+            outline: 0.77,
+            outlineColor: "rgba(0,0,0,.75)",
+            size: 14,
+            color: "white",
+            offset: [0, -35]
+          },
+          billboard: {
+            src: createMarkerCanvas(loc.color),
+            width: 32,
+            height: 32,
+            offset: [0, -16]
+          }
+        }))
+      });
+      
+      globeInstance.planet.addLayer(markerLayer);
+      
+      // Positionner la vue sur l'Atlantique
+      globeInstance.planet.viewExtentArr([-80, -30, 50, 50]);
+      
+      // Rotation automatique
+      let autoRotate = setInterval(() => {
+        if (globeInstance && globeInstance.planet) {
+          const cam = globeInstance.planet.camera;
+          cam.rotateHorizontal(0.2);
+        }
+      }, 50);
+      
+      // Nettoyage
+      container.addEventListener('mousedown', () => {
+        clearInterval(autoRotate);
+      });
+    };
+    
+    document.head.appendChild(script);
+  }
+  
+  function createMarkerCanvas(color) {
+    const canvas = document.createElement('canvas');
+    canvas.width = 32;
+    canvas.height = 32;
+    const ctx = canvas.getContext('2d');
+    
+    // Cercle avec couleur
+    ctx.beginPath();
+    ctx.arc(16, 16, 12, 0, Math.PI * 2);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    
+    // Point central
+    ctx.beginPath();
+    ctx.arc(16, 16, 4, 0, Math.PI * 2);
+    ctx.fillStyle = '#fff';
+    ctx.fill();
+    
+    return canvas.toDataURL();
+  }
+</script>
+
+<section id="openglobus-section" class="globe-section">
+  <div class="container">
+    <div class="section-header" class:visible>
+      <h2>Globe avec OpenGlobus</h2>
+      <p class="section-subtitle">
+        Bibliothèque 3D professionnelle avec textures réalistes
+      </p>
+    </div>
+    
+    <div class="globe-container openglobus" class:visible>
+      <div bind:this={container} class="openglobus-container"></div>
+      
+      <div class="globe-info">
+        <div class="info-card card">
+          <h3>OpenGlobus</h3>
+          <p><strong>Avantages :</strong></p>
+          <ul>
+            <li>✅ Textures satellite réalistes</li>
+            <li>✅ Performance WebGL optimisée</li>
+            <li>✅ Zoom et navigation fluides</li>
+            <li>✅ Support natif des marqueurs</li>
+          </ul>
+          <p><strong>Inconvénients :</strong></p>
+          <ul>
+            <li>❌ Plus lourd (~500KB)</li>
+            <li>❌ Nécessite connexion internet pour les tuiles</li>
+            <li>❌ Personnalisation plus complexe</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .globe-section {
+    padding: var(--spacing-xl) 0;
+    background: var(--gradient-dawn);
+  }
+  
+  .globe-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-lg);
+    align-items: center;
+    margin-top: var(--spacing-lg);
+    opacity: 0;
+    transform: translateY(30px);
+    transition: all 0.8s ease-out 0.3s;
+  }
+  
+  .globe-container.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  
+  .openglobus-container {
+    width: 100%;
+    height: 500px;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
+  }
+  
+  .info-card h3 {
+    color: var(--color-primary);
+    margin-bottom: 1rem;
+  }
+  
+  .info-card ul {
+    list-style: none;
+    padding: 0;
+    margin: 0.5rem 0;
+  }
+  
+  .info-card li {
+    padding: 0.25rem 0;
+  }
+  
+  @media (max-width: 768px) {
+    .globe-container {
+      grid-template-columns: 1fr;
+    }
+    
+    .openglobus-container {
+      height: 400px;
+    }
+  }
+</style>