diff --git a/app/package-lock.json b/app/package-lock.json index 7647171..3eb81c2 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -1,12 +1,12 @@ { "name": "jwe", - "version": "2.0.1", + "version": "2.0.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "jwe", - "version": "2.0.1", + "version": "2.0.2", "dependencies": { "mapillary-js": "^4.1.2", "maplibre-gl": "^5.1.0", diff --git a/app/package.json b/app/package.json index dd28042..bf5b324 100644 --- a/app/package.json +++ b/app/package.json @@ -1,6 +1,6 @@ { "name": "jwe", - "version": "2.0.1", + "version": "2.0.2", "private": true, "type": "module", "scripts": { diff --git a/app/src/lib/components/GameMap.svelte b/app/src/lib/components/GameMap.svelte index 49bc3f8..c2a55ed 100644 --- a/app/src/lib/components/GameMap.svelte +++ b/app/src/lib/components/GameMap.svelte @@ -50,6 +50,7 @@ let guessMarker: Marker | null = null; let realMarker: Marker | null = null; let explorerMarkers: Marker[] = []; + let observateurTaille: ResizeObserver | null = null; const SRC_LIGNE = 'jwe-ligne'; const SRC_PAIRES = 'jwe-paires'; @@ -143,7 +144,12 @@ [Math.min(guess.lon, real.lon), Math.min(guess.lat, real.lat)], [Math.max(guess.lon, real.lon), Math.max(guess.lat, real.lat)] ); - map.fitBounds(bounds, { padding: 80, duration: reducedMotion ? 0 : 900, maxZoom: 12 }); + // Le panneau résultat vient de remplacer la photo : synchroniser la + // taille du canvas AVANT de calculer le cadrage, sinon il est faussé. + // maxZoom 15 (et non 12) : pour un guess proche du lieu, les deux + // marqueurs doivent rester distinguables (juger « à quel point on est bon »). + map.resize(); + map.fitBounds(bounds, { padding: 90, duration: reducedMotion ? 0 : 900, maxZoom: 15 }); } else { map.easeTo({ center: [real.lon, real.lat], zoom: 11, duration: reducedMotion ? 0 : 900 }); } @@ -316,9 +322,15 @@ syncExplorerMarkers(); if (real) dessinerRevelation(); }); + // MapLibre ne détecte pas seul les changements de taille du conteneur + // (panneau résultat qui remplace la photo, rotation d'écran…). + observateurTaille = new ResizeObserver(() => map?.resize()); + observateurTaille.observe(conteneur); })(); return () => { detruit = true; + observateurTaille?.disconnect(); + observateurTaille = null; map?.remove(); map = null; };