SawatoMosswartsEnjoyersClub/MosswartOverlord
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(v2): player zoom no longer locks the map

Browse source 
The zoom-to-player effect was re-triggering on every telemetry
update (every 2s) because selectedPlayer stayed set and players
array kept changing. Now tracks lastZoomedRef — zoom only fires
once per selection. Map is immediately free to pan/zoom after.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Erik 2026-04-14 10:07:19 +02:00
parent 869507a3ef
commit 2095f54d79
4 changed files with 17 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/components/map/MapView.tsx
View file

@ -97,11 +97,14 @@ export const MapView: React.FC<Props> = ({ players, getColor, onSelectPlayer, sh
return () => { window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('mouseup', onMouseUp); };
}, [applyTransform, imgSize.w, imgSize.h]);
// Zoom to selected player
// Zoom to selected player — fires once then releases
const lastZoomedRef = useRef<string | null>(null);
useEffect(() => {
if (!selectedPlayer || imgSize.w === 0 || !containerRef.current) return;
if (lastZoomedRef.current === selectedPlayer) return; // already zoomed to this player
const player = players.find(p => p.character_name === selectedPlayer);
if (!player) return;
lastZoomedRef.current = selectedPlayer;
const { x, y } = worldToPx(player.ew, player.ns, imgSize.w, imgSize.h);
const rect = containerRef.current.getBoundingClientRect();
const focusZoom = 3;
@ -113,6 +116,11 @@ export const MapView: React.FC<Props> = ({ players, getColor, onSelectPlayer, sh
applyTransform();
}, [selectedPlayer, players, imgSize.w, imgSize.h, applyTransform]);
// Reset zoom lock when player is deselected
useEffect(() => {
if (!selectedPlayer) lastZoomedRef.current = null;
}, [selectedPlayer]);
const handleDotHover = useCallback((player: TelemetrySnapshot | null, x: number, y: number) => {
setTooltip(player ? { x, y, player } : null);
}, []);