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

2
static/v2/assets/DashboardView-DggvVj9N.js → static/v2/assets/DashboardView-Dyfhjkt9.js
View file

File diff suppressed because one or more lines are too long

12
static/v2/assets/index-B0FrDIQB.js → static/v2/assets/index-Bi20HmPd.js
View file

File diff suppressed because one or more lines are too long

2
static/v2/index.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mosswart Overlord v2</title> <title>Mosswart Overlord v2</title>
<link rel="icon" type="image/png" href="/icons/7735.png" /> <link rel="icon" type="image/png" href="/icons/7735.png" />
<script type="module" crossorigin src="/v2/assets/index-B0FrDIQB.js"></script> <script type="module" crossorigin src="/v2/assets/index-Bi20HmPd.js"></script>
<link rel="stylesheet" crossorigin href="/v2/assets/index-CyLyPOVJ.css"> <link rel="stylesheet" crossorigin href="/v2/assets/index-CyLyPOVJ.css">
</head> </head>
<body> <body>