From 53812cbc6c30f91205d340f086f2cc277416c75b Mon Sep 17 00:00:00 2001
From: HikeMap User <melancholytron@gmail.com>
Date: Sat, 10 Jan 2026 21:33:28 -0600
Subject: [PATCH] Fix fog inversion at high zoom + adjust building animation to
 100-150%
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fog fix:
- Check all 4 viewport corners before drawing fog
- If entire viewport is within revealed area, skip fog entirely
- Prevents polygon rendering artifacts at high zoom levels

Building animation:
- Changed range from 75-125% to 100-150%
- Buildings now grow up to 50% taller but never shrink below normal

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 index.html | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index d0f9906..d7fd3ee 100644
--- a/index.html
+++ b/index.html
@@ -5143,6 +5143,54 @@
                 return;
             }
 
+            // Check if we're zoomed in so far that the viewport is entirely within a revealed area
+            // If so, skip drawing fog entirely to avoid rendering artifacts
+            const mapCenter = map.getCenter();
+            const mapCenterLngLat = [mapCenter.lng, mapCenter.lat];
+
+            // Check all four corners of the viewport
+            const corners = [
+                map.unproject([0, 0]),
+                map.unproject([width, 0]),
+                map.unproject([width, height]),
+                map.unproject([0, height])
+            ];
+
+            // Check if all corners are inside a revealed area
+            let allCornersRevealed = true;
+            for (const corner of corners) {
+                const cornerLngLat = [corner.lng, corner.lat];
+                let cornerRevealed = false;
+
+                // Check homebase
+                if (playerStats && playerStats.homeBaseLat != null && playerStats.homeBaseLng != null) {
+                    const homeLngLat = [playerStats.homeBaseLng, playerStats.homeBaseLat];
+                    const effectiveHomebaseRadius = playerRevealRadius * homebaseRadiusMultiplier;
+                    if (distanceMeters(cornerLngLat, homeLngLat) <= effectiveHomebaseRadius) {
+                        cornerRevealed = true;
+                    }
+                }
+
+                // Check player explore radius
+                if (!cornerRevealed && userLocation) {
+                    const playerLngLat = [userLocation.lng, userLocation.lat];
+                    const effectiveExploreRadius = playerExploreRadius * exploreRadiusMultiplier;
+                    if (distanceMeters(cornerLngLat, playerLngLat) <= effectiveExploreRadius) {
+                        cornerRevealed = true;
+                    }
+                }
+
+                if (!cornerRevealed) {
+                    allCornersRevealed = false;
+                    break;
+                }
+            }
+
+            // If entire viewport is revealed, no need to draw fog
+            if (allCornersRevealed) {
+                return;
+            }
+
             // Draw semi-transparent fog over entire canvas
             fogCtx.fillStyle = 'rgba(0, 0, 0, 0.6)';
             fogCtx.fillRect(0, 0, width, height);
@@ -5285,17 +5333,18 @@
         let buildingAnimationEnabled = true;  // Set to false to disable
         let buildingAnimationId = null;
         const buildingAnimationSpeed = 0.005;  // How fast buildings breathe (higher = faster)
-        const buildingAnimationRange = 0.25;   // How much they grow/shrink (0.25 = ±25%)
 
         function animateBuildings(timestamp) {
             if (!buildingAnimationEnabled) return;
 
             // Create 8 different phase offsets for pseudo-random effect
             // Buildings are grouped by their height mod 8, each group has different phase
+            // Range: 100% to 150% (1.0 to 1.5)
             const phases = [];
             for (let i = 0; i < 8; i++) {
                 const phaseOffset = (i / 8) * Math.PI * 2;  // Evenly distributed phases
-                phases[i] = 1 + Math.sin(timestamp * buildingAnimationSpeed + phaseOffset) * buildingAnimationRange;
+                // (sin + 1) gives 0 to 2, multiply by 0.25 gives 0 to 0.5, add 1 gives 1.0 to 1.5
+                phases[i] = 1 + (Math.sin(timestamp * buildingAnimationSpeed + phaseOffset) + 1) * 0.25;
             }
 
             // Update building height with per-building variation based on render_height