HikeMap/animations.js

// HikeMap Monster Animation Definitions
// This file defines all available animations for monster icons
// Edit the keyframes to customize how animations look

const MONSTER_ANIMATIONS = {
    // Default attack animation - rubber band snap towards player
    attack: {
        name: 'Attack',
        description: 'Rubber band snap towards player',
        duration: 500,
        loop: false,
        easing: 'ease-out',
        keyframes: `
            0% { transform: translateX(0); }
            20% { transform: translateX(20px) scale(0.9); }
            50% { transform: translateX(-30px) scale(1.15); }
            70% { transform: translateX(-5px) scale(1.05); }
            100% { transform: translateX(0) scale(1); }
        `
    },

    // Default skill animation - quick shake back and forth
    skill: {
        name: 'Skill',
        description: 'Quick shake back and forth',
        duration: 400,
        loop: false,
        easing: 'ease-in-out',
        keyframes: `
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
            20%, 40%, 60%, 80% { transform: translateX(8px); }
        `
    },

    // Default miss animation - attack motion then fall counter-clockwise, hold, recover
    miss: {
        name: 'Miss',
        description: 'Attack then fall over counter-clockwise and recover',
        duration: 2000,
        loop: false,
        easing: 'ease-out',
        keyframes: `
            0% { transform: translateX(0) rotate(0deg); }
            10% { transform: translateX(20px) scale(0.9) rotate(0deg); }
            20% { transform: translateX(-30px) scale(1.15) rotate(0deg); }
            30% { transform: translateX(-15px) rotate(-90deg); }
            70% { transform: translateX(-15px) rotate(-90deg); }
            85% { transform: translateX(-5px) rotate(-30deg); }
            100% { transform: translateX(0) rotate(0deg); }
        `
    },

    // Default death animation - fall over counter-clockwise permanently
    death: {
        name: 'Death',
        description: 'Fall over permanently',
        duration: 600,
        loop: false,
        easing: 'ease-out',
        fillMode: 'forwards',
        keyframes: `
            0% { transform: rotate(0deg); opacity: 1; }
            100% { transform: rotate(-90deg); opacity: 0.6; }
        `
    },

    // Default idle animation - gentle dance/bob
    idle: {
        name: 'Idle',
        description: 'Gentle dance/bob animation',
        duration: 2000,
        loop: true,
        easing: 'ease-in-out',
        keyframes: `
            0%, 100% { transform: rotate(-3deg) scale(1); }
            50% { transform: rotate(3deg) scale(0.95); }
        `
    },

    // Flip Y animation - spin 360 degrees around vertical axis (like opening a door)
    flipy: {
        name: 'Flip Y',
        description: 'Horizontal flip around vertical axis',
        duration: 600,
        loop: false,
        easing: 'ease-in-out',
        keyframes: `
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(360deg); }
        `
    },

    // Flip XY animation - tumbling diagonal flip (somersault + spin)
    flipxy: {
        name: 'Flip XY',
        description: 'Tumbling diagonal flip',
        duration: 800,
        loop: false,
        easing: 'ease-in-out',
        keyframes: `
            0% { transform: rotateX(0deg) rotateY(0deg); }
            100% { transform: rotateX(360deg) rotateY(360deg); }
        `
    },

    // Flip Z animation - spin like a top viewed from above
    flipz: {
        name: 'Flip Z',
        description: 'Spin like a top',
        duration: 600,
        loop: false,
        easing: 'ease-in-out',
        keyframes: `
            0% { transform: rotateZ(0deg); }
            100% { transform: rotateZ(360deg); }
        `
    },

    // Shrink and grow animation
    shrink_grow: {
        name: 'Shrink & Grow',
        description: 'Shrink to 50% then grow back',
        duration: 1000,
        loop: false,
        easing: 'ease-in-out',
        keyframes: `
            0%, 100% { transform: scale(1); }
            50% { transform: scale(0.5); }
        `
    }
};

// Helper function to get animation list for dropdowns
function getAnimationList() {
    return Object.entries(MONSTER_ANIMATIONS).map(([id, anim]) => ({
        id,
        name: anim.name,
        description: anim.description
    }));
}

// Export for use in browser
if (typeof window !== 'undefined') {
    window.MONSTER_ANIMATIONS = MONSTER_ANIMATIONS;
    window.getAnimationList = getAnimationList;
}