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,