From 389420ca5785d5040e4cb6fa702b3ca306e80fce Mon Sep 17 00:00:00 2001 From: HikeMap User Date: Sat, 10 Jan 2026 22:02:12 -0600 Subject: [PATCH] Add monster scale-up animation during combat camera zoom MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Monster marker now grows 3x its size in sync with the camera flyTo animation when initiating combat, creating a more dramatic zoom-in effect. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- index.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/index.html b/index.html index 1a1b687..9430423 100644 --- a/index.html +++ b/index.html @@ -2293,6 +2293,13 @@ transform: scale(0.95); background: radial-gradient(circle, rgba(255,100,100,0.4) 0%, rgba(255,100,100,0) 70%); } + .monster-marker.combat-zoom-in { + animation: monster-combat-zoom 1.2s ease-in-out forwards; + } + @keyframes monster-combat-zoom { + 0% { transform: scale(1); } + 100% { transform: scale(3); } + } .monster-icon { width: 50px; height: 50px; @@ -15802,6 +15809,12 @@ if (clickedMonster.position) { const monsterPos = [clickedMonster.position.lng, clickedMonster.position.lat]; + // Scale up the monster marker during zoom animation + const monsterMarkerEl = document.querySelector(`.monster-marker[data-monster-id="${clickedMonster.id}"]`); + if (monsterMarkerEl) { + monsterMarkerEl.classList.add('combat-zoom-in'); + } + // Fly to monster with dramatic zoom and pitch map.flyTo({ center: monsterPos,