Browse Source

Add monster scale-up animation during combat camera zoom

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 <noreply@anthropic.com>
master
HikeMap User 4 weeks ago
parent
commit
389420ca57
  1. 13
      index.html

13
index.html

@ -2293,6 +2293,13 @@
transform: scale(0.95); transform: scale(0.95);
background: radial-gradient(circle, rgba(255,100,100,0.4) 0%, rgba(255,100,100,0) 70%); 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 { .monster-icon {
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -15802,6 +15809,12 @@
if (clickedMonster.position) { if (clickedMonster.position) {
const monsterPos = [clickedMonster.position.lng, clickedMonster.position.lat]; 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 // Fly to monster with dramatic zoom and pitch
map.flyTo({ map.flyTo({
center: monsterPos, center: monsterPos,

Loading…
Cancel
Save