fix again (#1263)

web/public/js/replay-canvas.js

@@ -40,6 +40,7 @@ class ReplayCanvas {
 
         // Store both coordinate sets
         this._groundCoords = data.levelCoords;
+        this._tankMapCoords = data.tankMapCoords || data.levelCoords;
         this._airCoords = data.mapCoords || null;
         this._fullMapLevel = data.fullMapLevel || null;
         this.captureAreas = Array.isArray(data.captureAreas) ? data.captureAreas : [];
@@ -53,6 +54,7 @@ class ReplayCanvas {
         this.zRange = data.levelCoords.z1 - data.levelCoords.z0;
         // Source rect for minimap image (full image by default)
         this._mapSrc = { u: 0, v: 0, w: 1, h: 1 };
+        this._updateMapSourceRect();
 
         this.players = {};
         for (const p of data.players) this.players[p.id] = p;
@@ -470,6 +472,53 @@ class ReplayCanvas {
         ctx.drawImage(img, x - size / 2 + dx, y - size / 2 + dy, dw, dh);
     }
 
+    _updateMapSourceRect() {
+        // Air/full-map mode always uses the full source image.
+        if (this._mode !== 'ground') {
+            this._mapSrc = { u: 0, v: 0, w: 1, h: 1 };
+            return;
+        }
+        const base = this._tankMapCoords || this._groundCoords;
+        const render = this._groundCoords;
+        if (!base || !render) {
+            this._mapSrc = { u: 0, v: 0, w: 1, h: 1 };
+            return;
+        }
+
+        const bx0 = Number(base.x0), bz0 = Number(base.z0);
+        const bx1 = Number(base.x1), bz1 = Number(base.z1);
+        const rx0 = Number(render.x0), rz0 = Number(render.z0);
+        const rx1 = Number(render.x1), rz1 = Number(render.z1);
+        const dx = bx1 - bx0;
+        const dz = bz1 - bz0;
+        if (!Number.isFinite(dx) || !Number.isFinite(dz) || dx === 0 || dz === 0) {
+            this._mapSrc = { u: 0, v: 0, w: 1, h: 1 };
+            return;
+        }
+
+        const xLo = Math.min(rx0, rx1), xHi = Math.max(rx0, rx1);
+        const zLo = Math.min(rz0, rz1), zHi = Math.max(rz0, rz1);
+
+        const u0 = (xLo - bx0) / dx;
+        const u1 = (xHi - bx0) / dx;
+        const v0 = (zLo - bz0) / dz;
+        const v1 = (zHi - bz0) / dz;
+
+        const uMin = Math.max(0, Math.min(1, Math.min(u0, u1)));
+        const uMax = Math.max(0, Math.min(1, Math.max(u0, u1)));
+        const vMin = Math.max(0, Math.min(1, Math.min(v0, v1)));
+        const vMax = Math.max(0, Math.min(1, Math.max(v0, v1)));
+        const w = uMax - uMin;
+        const h = vMax - vMin;
+        if (!(w > 0 && h > 0)) {
+            this._mapSrc = { u: 0, v: 0, w: 1, h: 1 };
+            return;
+        }
+
+        // Source top-left in image space: X -> uMin, Z -> (1 - vMax)
+        this._mapSrc = { u: uMin, v: 1 - vMax, w, h };
+    }
+
     _capOutlinePoints(cap) {
         const tm = cap?.tm;
         if (!tm || !Array.isArray(tm.a0) || !Array.isArray(tm.a2) || !Array.isArray(tm.center)) return [];
@@ -694,7 +743,7 @@ class ReplayCanvas {
         this.z0 = coords.z0;
         this.xRange = coords.x1 - coords.x0;
         this.zRange = coords.z1 - coords.z0;
-        this._mapSrc = { u: 0, v: 0, w: 1, h: 1 };
+        this._updateMapSourceRect();
 
         // Redraw map background with new crop region
         this._drawMapToCanvas();