HikeMap
@@ -11024,6 +11050,8 @@
document.getElementById('gameContainer').classList.add('visible');
// Stop login music and transition to appropriate game music
stopMusic();
+ // Stop login monster animations
+ stopLoginMonsters();
// Fix Leaflet map sizing - must recalculate after container becomes visible
setTimeout(() => {
if (map) {
@@ -11107,6 +11135,89 @@
document.getElementById('loginScreenError').classList.remove('visible');
}
+ // Login screen animated monsters background
+ const loginMonsterAnimations = ['idle', 'attack', 'skill', 'flipy', 'flipz', 'shrink_grow'];
+ let loginMonstersInterval = null;
+
+ async function initLoginMonsters() {
+ const container = document.getElementById('loginMonstersBg');
+ if (!container) return;
+
+ // Fallback monster IDs if we can't load from API
+ let monsterIds = ['moop', 'slime', 'goblin', 'bat', 'spider', 'rat'];
+
+ // Try to load monster types from API
+ try {
+ const response = await fetch('/api/monster-types');
+ if (response.ok) {
+ const types = await response.json();
+ if (types.length > 0) {
+ monsterIds = types.map(t => t.id);
+ }
+ }
+ } catch (e) {
+ console.log('Using fallback monster IDs for login screen');
+ }
+
+ // Create 8-12 monsters at random positions
+ const numMonsters = 8 + Math.floor(Math.random() * 5);
+ for (let i = 0; i < numMonsters; i++) {
+ const monsterId = monsterIds[Math.floor(Math.random() * monsterIds.length)];
+ const monster = document.createElement('div');
+ monster.className = 'login-monster';
+ monster.style.left = `${Math.random() * 90}%`;
+ monster.style.top = `${Math.random() * 85}%`;
+ monster.style.transform = `scale(${0.6 + Math.random() * 0.8})`;
+ monster.innerHTML = `
`;
+ container.appendChild(monster);
+ }
+
+ // Start random animations
+ animateLoginMonsters();
+ loginMonstersInterval = setInterval(animateLoginMonsters, 2500);
+ }
+
+ function animateLoginMonsters() {
+ const monsters = document.querySelectorAll('.login-monster img');
+ if (!monsters.length || typeof MONSTER_ANIMATIONS === 'undefined') return;
+
+ monsters.forEach(img => {
+ // 40% chance to animate each monster per cycle
+ if (Math.random() > 0.4) return;
+
+ const animName = loginMonsterAnimations[Math.floor(Math.random() * loginMonsterAnimations.length)];
+ const anim = MONSTER_ANIMATIONS[animName];
+ if (!anim) return;
+
+ // Generate unique animation name and apply
+ const uniqueAnimName = `login-${animName}-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
+ const styleSheet = document.styleSheets[0];
+ try {
+ styleSheet.insertRule(`@keyframes ${uniqueAnimName} { ${anim.keyframes} }`, styleSheet.cssRules.length);
+ } catch (e) { return; }
+
+ img.style.animation = `${uniqueAnimName} ${anim.duration}ms ${anim.easing || 'ease'} ${anim.loop ? 'infinite' : '1'}`;
+
+ // Clean up after animation
+ if (!anim.loop) {
+ setTimeout(() => {
+ img.style.animation = '';
+ }, anim.duration + 100);
+ }
+ });
+ }
+
+ function stopLoginMonsters() {
+ if (loginMonstersInterval) {
+ clearInterval(loginMonstersInterval);
+ loginMonstersInterval = null;
+ }
+ }
+
+ // Initialize login monsters when page loads
+ initLoginMonsters();
+
// Login screen tab switching
document.getElementById('loginScreenLoginTab').addEventListener('click', () => {
document.getElementById('loginScreenLoginTab').classList.add('active');