spells.js

// ECLIPSE RISING - Spell Configurations & Pose Demonstration Renderer

export const Spells = {
    "Iron Roots": {
        name: "Iron Roots",
        exercise: "Squat Hold",
        holdSeconds: 3,
        key: "1",
        description: "Squat and hold to root yourself. Deals ground-wave earth damage.",
        intensity: 2,
        manaCost: 10,
        manaReward: 15,
        damage: 20,
        color: "#a78bfa",
        drawDemo: (ctx, t) => {
            // Loop phase: Squat down and hold
            const phase = Math.sin(t * 2) * 0.5 + 0.5; // 0 to 1
            const squatAmt = 15 * phase;

            const headX = 60, headY = 35 + squatAmt;
            const shoulderX = 60, shoulderY = 48 + squatAmt;
            const hipsX = 60, hipsY = 75 + squatAmt;

            // Draw Head
            drawCircle(ctx, headX, headY, 6);
            // Spine
            drawLine(ctx, headX, headY + 6, hipsX, hipsY);

            // Arms: Extended forward
            drawLine(ctx, shoulderX, shoulderY, shoulderX - 15, shoulderY);

            // Left Leg
            drawLine(ctx, hipsX, hipsY, hipsX - 12, hipsY + 12 - squatAmt * 0.4);
            drawLine(ctx, hipsX - 12, hipsY + 12 - squatAmt * 0.4, hipsX - 14, 105);

            // Right Leg
            drawLine(ctx, hipsX, hipsY, hipsX + 12, hipsY + 12 - squatAmt * 0.4);
            drawLine(ctx, hipsX + 12, hipsY + 12 - squatAmt * 0.4, hipsX + 14, 105);
        }
    },
    "Left Fang": {
        name: "Left Fang",
        exercise: "Left Lunge",
        holdSeconds: 3,
        key: "3",
        description: "Lunge left. Releases a slashing dark projectile.",
        intensity: 3,
        manaCost: 20,
        manaReward: 25,
        damage: 25,
        color: "#22c55e",
        drawDemo: (ctx, t) => {
            const phase = Math.sin(t * 2) * 0.5 + 0.5;
            const lungeAmt = 15 * phase;

            const headX = 60 - lungeAmt * 0.6;
            const headY = 35 + lungeAmt * 0.2;
            const hipsX = 60 - lungeAmt * 0.3;
            const hipsY = 72 + lungeAmt * 0.3;

            drawCircle(ctx, headX, headY, 6);
            drawLine(ctx, headX, headY + 6, hipsX, hipsY);

            // Arms: Out for balance
            drawLine(ctx, headX, headY + 12, headX - 10, headY + 20);
            drawLine(ctx, headX, headY + 12, headX + 10, headY + 20);

            // Left leg (Forward/bent left)
            drawLine(ctx, hipsX, hipsY, hipsX - 22, hipsY + 10);
            drawLine(ctx, hipsX - 22, hipsY + 10, hipsX - 28, 105);

            // Right leg (Stretched back/right)
            drawLine(ctx, hipsX, hipsY, hipsX + 18, hipsY + 15);
            drawLine(ctx, hipsX + 18, hipsY + 15, hipsX + 24, 105);
        }
    },
    "Right Fang": {
        name: "Right Fang",
        exercise: "Right Lunge",
        holdSeconds: 3,
        key: "4",
        description: "Lunge right. Releases a slashing dark projectile.",
        intensity: 3,
        manaCost: 20,
        manaReward: 25,
        damage: 25,
        color: "#22c55e",
        drawDemo: (ctx, t) => {
            const phase = Math.sin(t * 2) * 0.5 + 0.5;
            const lungeAmt = 15 * phase;

            const headX = 60 + lungeAmt * 0.6;
            const headY = 35 + lungeAmt * 0.2;
            const hipsX = 60 + lungeAmt * 0.3;
            const hipsY = 72 + lungeAmt * 0.3;

            drawCircle(ctx, headX, headY, 6);
            drawLine(ctx, headX, headY + 6, hipsX, hipsY);

            // Arms: Out for balance
            drawLine(ctx, headX, headY + 12, headX - 10, headY + 20);
            drawLine(ctx, headX, headY + 12, headX + 10, headY + 20);

            // Left leg (Stretched back/left)
            drawLine(ctx, hipsX, hipsY, hipsX - 18, hipsY + 15);
            drawLine(ctx, hipsX - 18, hipsY + 15, hipsX - 24, 105);

            // Right leg (Forward/bent right)
            drawLine(ctx, hipsX, hipsY, hipsX + 22, hipsY + 10);
            drawLine(ctx, hipsX + 22, hipsY + 10, hipsX + 28, 105);
        }
    },
    "Storm Wings": {
        name: "Storm Wings",
        exercise: "Arms Extended Sideways",
        holdSeconds: 4,
        key: "5",
        description: "Spread arms to channel storm. Calls down lightning.",
        intensity: 1,
        manaCost: 15,
        manaReward: 20,
        damage: 22,
        color: "#06b6d4",
        drawDemo: (ctx, t) => {
            const phase = Math.sin(t * 2) * 0.5 + 0.5;
            const armAngle = 20 * phase; // flaps slightly

            const headX = 60, headY = 35;
            const shoulderX = 60, shoulderY = 48;
            const hipsX = 60, hipsY = 75;

            drawCircle(ctx, headX, headY, 6);
            drawLine(ctx, headX, headY + 6, hipsX, hipsY);

            // Arms Extended horizontally
            drawLine(ctx, shoulderX, shoulderY, shoulderX - 25, shoulderY - armAngle * 0.2);
            drawLine(ctx, shoulderX, shoulderY, shoulderX + 25, shoulderY - armAngle * 0.2);

            // Standing legs
            drawLine(ctx, hipsX, hipsY, hipsX - 10, 105);
            drawLine(ctx, hipsX, hipsY, hipsX + 10, 105);
        }
    },
    "Heaven's Gate": {
        name: "Heaven's Gate",
        exercise: "Arms Overhead",
        holdSeconds: 4,
        key: "6",
        description: "Extend arms overhead. Triggers cosmic beam of light.",
        intensity: 2,
        manaCost: 25,
        manaReward: 30,
        damage: 32,
        color: "#f43f5e",
        drawDemo: (ctx, t) => {
            const phase = Math.sin(t * 2.5) * 0.5 + 0.5;

            const headX = 60, headY = 38;
            const shoulderX = 60, shoulderY = 48;
            const hipsX = 60, hipsY = 75;

            drawCircle(ctx, headX, headY, 6);
            drawLine(ctx, headX, headY + 6, hipsX, hipsY);

            // Arms straight overhead
            const raiseAmt = 22 * phase;
            drawLine(ctx, shoulderX, shoulderY, shoulderX - 12 + (12 - 5) * phase, shoulderY - raiseAmt);
            drawLine(ctx, shoulderX, shoulderY, shoulderX + 12 - (12 - 5) * phase, shoulderY - raiseAmt);

            // Standing legs
            drawLine(ctx, hipsX, hipsY, hipsX - 8, 105);
            drawLine(ctx, hipsX, hipsY, hipsX + 8, 105);
        }
    }
};

// Vector helpers
function drawCircle(ctx, x, y, r) {
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.fillStyle = "#ffdfad";
    ctx.fill();
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#b38f54";
    ctx.stroke();
}

function drawLine(ctx, x1, y1, x2, y2) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineWidth = 3;
    ctx.strokeStyle = "#e8c99b";
    ctx.lineCap = "round";
    ctx.shadowColor = "#b38f54";
    ctx.shadowBlur = 4;
    ctx.stroke();
    ctx.shadowBlur = 0; // reset
}

// Render routine for the HUD mini spell guide
export function renderSpellGuide(canvasId, spellName, time) {
    const canvas = document.getElementById(canvasId);
    if (!canvas) return;
    const ctx = canvas.getContext("2d");

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Background grid
    ctx.strokeStyle = "rgba(179, 143, 84, 0.15)";
    ctx.lineWidth = 1;
    for (let i = 0; i <= canvas.width; i += 20) {
        ctx.beginPath();
        ctx.moveTo(i, 0);
        ctx.lineTo(i, canvas.height);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(0, i);
        ctx.lineTo(canvas.width, i);
        ctx.stroke();
    }

    const spell = Spells[spellName];
    if (spell && typeof spell.drawDemo === "function") {
        spell.drawDemo(ctx, time);
    }
}