cyber-mawonaj/gwada-sirius
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Amélioration du style du globe sans casser les fonctionnalités - océan bleu clair, continents beiges

Browse Source
This commit is contained in:
sucupira
2025-07-09 16:26:46 -04:00
parent 57601ada91
commit b4b898411d
1 changed files with 42 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Globe.svelte
+41 -93
View File
@@ -66,7 +66,7 @@
window.addEventListener('mousemove', (e) => { window.addEventListener('mousemove', (e) => {
if (isDragging) { if (isDragging) {
const deltaX = e.clientX - lastMouseX; 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; lastMouseX = e.clientX;
} }
}); });
@@ -84,7 +84,7 @@
canvas.addEventListener('touchmove', (e) => { canvas.addEventListener('touchmove', (e) => {
if (isDragging && e.touches.length === 1) { if (isDragging && e.touches.length === 1) {
const deltaX = e.touches[0].clientX - lastMouseX; 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; lastMouseX = e.touches[0].clientX;
e.preventDefault(); e.preventDefault();
} }
@@ -97,56 +97,29 @@
// Dessiner les continents simplifiés // Dessiner les continents simplifiés
function drawContinents(ctx, centerX, centerY, radius, rotation) { function drawContinents(ctx, centerX, centerY, radius, rotation) {
ctx.save(); ctx.save();
ctx.globalAlpha = 0.8; // Plus opaque
// Style des continents ctx.strokeStyle = '#8B7355'; // Marron clair
ctx.fillStyle = '#e6d5b8'; // Couleur sable/beige pour les terres ctx.fillStyle = '#DEB887'; // Burlywood (beige)
ctx.strokeStyle = '#b8a590'; // Contour plus foncé
ctx.lineWidth = 0.5; ctx.lineWidth = 0.5;
// Afrique // Afrique (très simplifiée)
const africa = [ const africa = [
{lat: 37, lon: 10}, {lat: 35, lon: -5}, {lat: 30, lon: -17}, {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: 15, lon: -17}, {lat: 5, lon: -10}, {lat: -5, lon: 8},
{lat: 5, lon: -10}, {lat: 0, lon: -5}, {lat: -5, lon: 8}, {lat: -15, lon: 15}, {lat: -25, lon: 20}, {lat: -35, lon: 20},
{lat: -10, lon: 12}, {lat: -15, lon: 15}, {lat: -20, lon: 18}, {lat: -35, lon: 30}, {lat: -25, lon: 35}, {lat: -10, lon: 40},
{lat: -25, lon: 20}, {lat: -30, lon: 22}, {lat: -35, lon: 20}, {lat: 5, lon: 45}, {lat: 15, lon: 45}, {lat: 30, lon: 35}, {lat: 37, lon: 10}
{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}
]; ];
drawLandmass(africa); drawLandmass(africa);
// Amérique du Sud (plus détaillée) // Amérique du Sud
const southAmerica = [ const southAmerica = [
{lat: 12, lon: -60}, {lat: 10, lon: -62}, {lat: 8, lon: -60}, {lat: 10, lon: -60}, {lat: 5, lon: -50}, {lat: -5, lon: -35},
{lat: 5, lon: -52}, {lat: 0, lon: -50}, {lat: -5, lon: -35}, {lat: -15, lon: -38}, {lat: -25, lon: -48}, {lat: -35, lon: -58},
{lat: -8, lon: -35}, {lat: -15, lon: -38}, {lat: -20, lon: -40}, {lat: -45, lon: -65}, {lat: -55, lon: -70}, {lat: -45, lon: -73},
{lat: -25, lon: -48}, {lat: -30, lon: -52}, {lat: -35, lon: -58}, {lat: -35, lon: -72}, {lat: -25, lon: -70}, {lat: -15, lon: -75},
{lat: -40, lon: -62}, {lat: -45, lon: -65}, {lat: -50, lon: -68}, {lat: -5, lon: -78}, {lat: 5, lon: -77}, {lat: 10, lon: -60}
{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}
]; ];
drawLandmass(southAmerica, landGradient); drawLandmass(southAmerica);
// 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);
// Europe (simplifiée) // Europe (simplifiée)
const europe = [ const europe = [
@@ -157,29 +130,10 @@
]; ];
drawLandmass(europe); 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) { function drawLandmass(points) {
const coords = points.map(p => { const coords = points.map(p => {
const phi = (90 - p.lat) * Math.PI / 180; 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 x = radius * Math.sin(phi) * Math.cos(theta);
const y = radius * Math.cos(phi); const y = radius * Math.cos(phi);
@@ -188,24 +142,16 @@
return { x: centerX + x, y: centerY - y, z: z }; return { x: centerX + x, y: centerY - y, z: z };
}); });
// Ne dessiner que si au moins un point est visible // Ne dessiner que si au moins un point est visible
const someVisible = coords.some(c => c.z > -radius * 0.3); if (coords.some(c => c.z > -radius * 0.5)) {
if (someVisible) {
ctx.beginPath(); ctx.beginPath();
let started = false;
coords.forEach((c, i) => { coords.forEach((c, i) => {
if (c.z > -radius * 0.3) { if (i === 0) ctx.moveTo(c.x, c.y);
if (!started) { else ctx.lineTo(c.x, c.y);
ctx.moveTo(c.x, c.y);
started = true;
} else {
ctx.lineTo(c.x, c.y);
}
}
}); });
ctx.closePath(); ctx.closePath();
if (coords[0].z > 0) {
// Remplir et tracer
ctx.fill(); ctx.fill();
}
ctx.stroke(); ctx.stroke();
} }
} }
@@ -218,23 +164,25 @@
const currentRadius = radius * zoom; const currentRadius = radius * zoom;
// Ombre du globe // Océan (fond du globe)
ctx.save(); const oceanGradient = ctx.createRadialGradient(
ctx.beginPath(); centerX - currentRadius * 0.3,
ctx.arc(centerX + 5, centerY + 5, currentRadius, 0, Math.PI * 2); centerY - currentRadius * 0.3,
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; 0,
ctx.filter = 'blur(10px)'; centerX,
ctx.fill(); centerY,
ctx.restore(); 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.beginPath();
ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2); ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
ctx.fillStyle = '#87CEEB'; // Sky blue clair ctx.fillStyle = oceanGradient;
ctx.fill(); ctx.fill();
// Grille de méridiens et parallèles // 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; ctx.lineWidth = 0.5;
// Méridiens (longitudes) // Méridiens (longitudes)
@@ -242,7 +190,7 @@
ctx.beginPath(); ctx.beginPath();
for (let lat = -90; lat <= 90; lat += 5) { for (let lat = -90; lat <= 90; lat += 5) {
const phi = (90 - lat) * Math.PI / 180; 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 x = currentRadius * Math.sin(phi) * Math.cos(theta);
const y = currentRadius * Math.cos(phi); const y = currentRadius * Math.cos(phi);
@@ -262,7 +210,7 @@
ctx.beginPath(); ctx.beginPath();
for (let lon = -180; lon <= 180; lon += 5) { for (let lon = -180; lon <= 180; lon += 5) {
const phi = (90 - lat) * Math.PI / 180; 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 x = currentRadius * Math.sin(phi) * Math.cos(theta);
const y = currentRadius * Math.cos(phi); const y = currentRadius * Math.cos(phi);
@@ -284,7 +232,7 @@
// Bordure du globe // Bordure du globe
ctx.beginPath(); ctx.beginPath();
ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2); 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.lineWidth = 2;
ctx.stroke(); ctx.stroke();
// Dessiner la vague de progression // Dessiner la vague de progression
@@ -294,7 +242,7 @@
// Dessiner les points et la vague // Dessiner les points et la vague
locations.forEach((loc, i) => { locations.forEach((loc, i) => {
const phi = (90 - loc.lat) * Math.PI / 180; 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 x = currentRadius * Math.sin(phi) * Math.cos(theta);
const y = currentRadius * Math.cos(phi); const y = currentRadius * Math.cos(phi);
@@ -357,7 +305,7 @@
// Rotation automatique lente // Rotation automatique lente
if (!isDragging) { if (!isDragging) {
rotation -= 0.002; // Inverser aussi la rotation automatique rotation += 0.002;
} }
requestAnimationFrame(draw); requestAnimationFrame(draw);