diff --git a/src/components/Globe.svelte b/src/components/Globe.svelte index 4157711..5286959 100644 --- a/src/components/Globe.svelte +++ b/src/components/Globe.svelte @@ -66,7 +66,7 @@ window.addEventListener('mousemove', (e) => { if (isDragging) { const deltaX = e.clientX - lastMouseX; - rotation += deltaX * 0.01; // Retour au + pour inverser la rotation + rotation -= deltaX * 0.01; // Inverser pour tourner dans le bon sens lastMouseX = e.clientX; } }); @@ -84,7 +84,7 @@ canvas.addEventListener('touchmove', (e) => { if (isDragging && e.touches.length === 1) { const deltaX = e.touches[0].clientX - lastMouseX; - rotation += deltaX * 0.01; // Retour au + pour le tactile aussi + rotation -= deltaX * 0.01; lastMouseX = e.touches[0].clientX; e.preventDefault(); } @@ -97,56 +97,29 @@ // Dessiner les continents simplifiés function drawContinents(ctx, centerX, centerY, radius, rotation) { ctx.save(); - - // Style des continents - ctx.fillStyle = '#e6d5b8'; // Couleur sable/beige pour les terres - ctx.strokeStyle = '#b8a590'; // Contour plus foncé + ctx.globalAlpha = 0.8; // Plus opaque + ctx.strokeStyle = '#8B7355'; // Marron clair + ctx.fillStyle = '#DEB887'; // Burlywood (beige) ctx.lineWidth = 0.5; - // Afrique + // Afrique (très simplifiée) const africa = [ {lat: 37, lon: 10}, {lat: 35, lon: -5}, {lat: 30, lon: -17}, - {lat: 20, lon: -17}, {lat: 15, lon: -17}, {lat: 10, lon: -15}, - {lat: 5, lon: -10}, {lat: 0, lon: -5}, {lat: -5, lon: 8}, - {lat: -10, lon: 12}, {lat: -15, lon: 15}, {lat: -20, lon: 18}, - {lat: -25, lon: 20}, {lat: -30, lon: 22}, {lat: -35, lon: 20}, - {lat: -35, lon: 25}, {lat: -35, lon: 30}, {lat: -30, lon: 32}, - {lat: -25, lon: 35}, {lat: -20, lon: 35}, {lat: -15, lon: 37}, - {lat: -10, lon: 40}, {lat: -5, lon: 42}, {lat: 0, lon: 43}, - {lat: 5, lon: 45}, {lat: 10, lon: 47}, {lat: 15, lon: 45}, - {lat: 20, lon: 40}, {lat: 25, lon: 35}, {lat: 30, lon: 35}, - {lat: 35, lon: 25}, {lat: 37, lon: 10} + {lat: 15, lon: -17}, {lat: 5, lon: -10}, {lat: -5, lon: 8}, + {lat: -15, lon: 15}, {lat: -25, lon: 20}, {lat: -35, lon: 20}, + {lat: -35, lon: 30}, {lat: -25, lon: 35}, {lat: -10, lon: 40}, + {lat: 5, lon: 45}, {lat: 15, lon: 45}, {lat: 30, lon: 35}, {lat: 37, lon: 10} ]; drawLandmass(africa); - // Amérique du Sud (plus détaillée) + // Amérique du Sud const southAmerica = [ - {lat: 12, lon: -60}, {lat: 10, lon: -62}, {lat: 8, lon: -60}, - {lat: 5, lon: -52}, {lat: 0, lon: -50}, {lat: -5, lon: -35}, - {lat: -8, lon: -35}, {lat: -15, lon: -38}, {lat: -20, lon: -40}, - {lat: -25, lon: -48}, {lat: -30, lon: -52}, {lat: -35, lon: -58}, - {lat: -40, lon: -62}, {lat: -45, lon: -65}, {lat: -50, lon: -68}, - {lat: -55, lon: -70}, {lat: -55, lon: -68}, {lat: -50, lon: -73}, - {lat: -45, lon: -73}, {lat: -40, lon: -73}, {lat: -35, lon: -72}, - {lat: -30, lon: -71}, {lat: -25, lon: -70}, {lat: -20, lon: -70}, - {lat: -15, lon: -75}, {lat: -10, lon: -78}, {lat: -5, lon: -78}, - {lat: 0, lon: -80}, {lat: 5, lon: -77}, {lat: 8, lon: -75}, - {lat: 10, lon: -72}, {lat: 12, lon: -70}, {lat: 12, lon: -60} + {lat: 10, lon: -60}, {lat: 5, lon: -50}, {lat: -5, lon: -35}, + {lat: -15, lon: -38}, {lat: -25, lon: -48}, {lat: -35, lon: -58}, + {lat: -45, lon: -65}, {lat: -55, lon: -70}, {lat: -45, lon: -73}, + {lat: -35, lon: -72}, {lat: -25, lon: -70}, {lat: -15, lon: -75}, + {lat: -5, lon: -78}, {lat: 5, lon: -77}, {lat: 10, lon: -60} ]; - drawLandmass(southAmerica, landGradient); - - // Amérique du Nord - const northAmerica = [ - {lat: 15, lon: -92}, {lat: 20, lon: -97}, {lat: 25, lon: -97}, - {lat: 30, lon: -95}, {lat: 35, lon: -90}, {lat: 40, lon: -85}, - {lat: 45, lon: -80}, {lat: 50, lon: -75}, {lat: 55, lon: -70}, - {lat: 60, lon: -65}, {lat: 65, lon: -65}, {lat: 70, lon: -70}, - {lat: 70, lon: -90}, {lat: 70, lon: -110}, {lat: 65, lon: -125}, - {lat: 60, lon: -130}, {lat: 55, lon: -130}, {lat: 50, lon: -125}, - {lat: 45, lon: -124}, {lat: 40, lon: -124}, {lat: 35, lon: -120}, - {lat: 30, lon: -115}, {lat: 25, lon: -110}, {lat: 20, lon: -105}, - {lat: 15, lon: -92} - ]; - drawLandmass(northAmerica, landGradient); + drawLandmass(southAmerica); // Europe (simplifiée) const europe = [ @@ -157,29 +130,10 @@ ]; drawLandmass(europe); - // Asie - const asia = [ - {lat: 70, lon: 60}, {lat: 65, lon: 90}, {lat: 60, lon: 120}, - {lat: 50, lon: 130}, {lat: 40, lon: 125}, {lat: 30, lon: 120}, - {lat: 20, lon: 110}, {lat: 10, lon: 100}, {lat: 0, lon: 100}, - {lat: 10, lon: 80}, {lat: 20, lon: 70}, {lat: 30, lon: 60}, - {lat: 40, lon: 50}, {lat: 50, lon: 40}, {lat: 60, lon: 50}, - {lat: 70, lon: 60} - ]; - drawLandmass(asia); - - // Australie - const australia = [ - {lat: -10, lon: 130}, {lat: -15, lon: 140}, {lat: -25, lon: 150}, - {lat: -35, lon: 150}, {lat: -38, lon: 145}, {lat: -35, lon: 135}, - {lat: -25, lon: 120}, {lat: -15, lon: 125}, {lat: -10, lon: 130} - ]; - drawLandmass(australia); - function drawLandmass(points) { const coords = points.map(p => { const phi = (90 - p.lat) * Math.PI / 180; - const theta = (-p.lon - rotation * 57.3) * Math.PI / 180; // Inverser aussi pour les continents + const theta = (p.lon - rotation * 57.3) * Math.PI / 180; const x = radius * Math.sin(phi) * Math.cos(theta); const y = radius * Math.cos(phi); @@ -188,24 +142,16 @@ return { x: centerX + x, y: centerY - y, z: z }; }); // Ne dessiner que si au moins un point est visible - const someVisible = coords.some(c => c.z > -radius * 0.3); - if (someVisible) { + if (coords.some(c => c.z > -radius * 0.5)) { ctx.beginPath(); - let started = false; coords.forEach((c, i) => { - if (c.z > -radius * 0.3) { - if (!started) { - ctx.moveTo(c.x, c.y); - started = true; - } else { - ctx.lineTo(c.x, c.y); - } - } + if (i === 0) ctx.moveTo(c.x, c.y); + else ctx.lineTo(c.x, c.y); }); ctx.closePath(); - - // Remplir et tracer - ctx.fill(); + if (coords[0].z > 0) { + ctx.fill(); + } ctx.stroke(); } } @@ -218,23 +164,25 @@ 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 (fond du globe) + const oceanGradient = ctx.createRadialGradient( + centerX - currentRadius * 0.3, + centerY - currentRadius * 0.3, + 0, + centerX, + centerY, + currentRadius + ); oceanGradient.addColorStop(0, '#87CEEB'); // Sky blue clair + oceanGradient.addColorStop(0.7, '#5F9EA0'); // Cadet blue + oceanGradient.addColorStop(1, '#4682B4'); // Steel blue - // Océan (fond du globe) - style simple ctx.beginPath(); ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2); - ctx.fillStyle = '#87CEEB'; // Sky blue clair + ctx.fillStyle = oceanGradient; ctx.fill(); // Grille de méridiens et parallèles - ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)'; + ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)'; // Noir transparent ctx.lineWidth = 0.5; // Méridiens (longitudes) @@ -242,7 +190,7 @@ ctx.beginPath(); for (let lat = -90; lat <= 90; lat += 5) { const phi = (90 - lat) * Math.PI / 180; - const theta = (-lon - rotation * 57.3) * Math.PI / 180; // Inverser ici aussi + const theta = (lon - rotation * 57.3) * Math.PI / 180; const x = currentRadius * Math.sin(phi) * Math.cos(theta); const y = currentRadius * Math.cos(phi); @@ -262,7 +210,7 @@ ctx.beginPath(); for (let lon = -180; lon <= 180; lon += 5) { const phi = (90 - lat) * Math.PI / 180; - const theta = (-lon - rotation * 57.3) * Math.PI / 180; // Inverser ici aussi + const theta = (lon - rotation * 57.3) * Math.PI / 180; const x = currentRadius * Math.sin(phi) * Math.cos(theta); const y = currentRadius * Math.cos(phi); @@ -284,7 +232,7 @@ // Bordure du globe ctx.beginPath(); ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2); - ctx.strokeStyle = '#000000'; + ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)'; // Noir semi-transparent ctx.lineWidth = 2; ctx.stroke(); // Dessiner la vague de progression @@ -294,7 +242,7 @@ // Dessiner les points et la vague locations.forEach((loc, i) => { const phi = (90 - loc.lat) * Math.PI / 180; - const theta = (-loc.lon - rotation * 57.3) * Math.PI / 180; // Inverser la longitude avec -loc.lon + const theta = (loc.lon - rotation * 57.3) * Math.PI / 180; const x = currentRadius * Math.sin(phi) * Math.cos(theta); const y = currentRadius * Math.cos(phi); @@ -357,7 +305,7 @@ // Rotation automatique lente if (!isDragging) { - rotation -= 0.002; // Inverser aussi la rotation automatique + rotation += 0.002; } requestAnimationFrame(draw);