Hoya26/frontend/src/lib/ts/parallax/scenes/eco.ts

import type { DrawContext } from '../types';
import { getSceneColors } from '../colors';

const FLOWER_COLORS = ['#E91E63', '#FF5722', '#FFEB3B', '#9C27B0', '#FF4081'];

export function drawEcoTrees(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const colors = getSceneColors(state);
    const parallax = state.mouseX * 0.8 + state.scrollY * 0.5;

    const drawTree = (x: number, y: number, scale: number) => {
        ctx.fillStyle = '#5D4037';
        ctx.fillRect(x - 8 * scale + parallax, y, 16 * scale, 40 * scale);

        ctx.fillStyle = colors.treeDark;
        ctx.beginPath();
        ctx.moveTo(x + parallax, y - 80 * scale);
        ctx.lineTo(x - 35 * scale + parallax, y);
        ctx.lineTo(x + 35 * scale + parallax, y);
        ctx.closePath();
        ctx.fill();

        ctx.fillStyle = colors.treeLight;
        ctx.beginPath();
        ctx.moveTo(x + parallax, y - 100 * scale);
        ctx.lineTo(x - 25 * scale + parallax, y - 30 * scale);
        ctx.lineTo(x + 25 * scale + parallax, y - 30 * scale);
        ctx.closePath();
        ctx.fill();
    };

    const treePositions = [
        { x: width * 0.1, y: height * 0.75, scale: 1.3 },
        { x: width * 0.2, y: height * 0.78, scale: 1.0 },
        { x: width * 0.35, y: height * 0.73, scale: 1.5 },
        { x: width * 0.65, y: height * 0.76, scale: 1.2 },
        { x: width * 0.8, y: height * 0.74, scale: 1.4 },
        { x: width * 0.92, y: height * 0.77, scale: 1.1 },
    ];

    treePositions.forEach((t) => drawTree(t.x, t.y, t.scale));
}

export function drawFlowers(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const parallax = state.mouseX * 1.0 + state.scrollY * 0.6;
    const time = Date.now() * 0.001;

    const drawFlower = (x: number, y: number, color: string, size: number) => {
        const sway = Math.sin(time + x * 0.01) * 3;
        ctx.strokeStyle = '#2E7D32';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(x + parallax, y + 15);
        ctx.quadraticCurveTo(x + parallax + sway, y + 7, x + parallax, y);
        ctx.stroke();

        ctx.fillStyle = color;
        for (let i = 0; i < 5; i++) {
            ctx.beginPath();
            const angle = (i * Math.PI * 2) / 5;
            ctx.ellipse(
                x + Math.cos(angle) * size * 0.5 + parallax,
                y + Math.sin(angle) * size * 0.5,
                size * 0.4, size * 0.25, angle, 0, Math.PI * 2
            );
            ctx.fill();
        }

        ctx.fillStyle = '#FFEB3B';
        ctx.beginPath();
        ctx.arc(x + parallax, y, size * 0.3, 0, Math.PI * 2);
        ctx.fill();
    };

    for (let i = 0; i < 25; i++) {
        const x = (i * width) / 25 + (i % 3) * 15;
        const y = height * 0.82 + Math.sin(i * 1.5) * 12;
        const color = FLOWER_COLORS[i % FLOWER_COLORS.length];
        drawFlower(x, y, color, 6 + (i % 4) * 2);
    }
}

export function drawBirds(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    ctx.strokeStyle = '#37474F';
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';

    const parallax = state.mouseX * 0.15 - state.scrollY * 0.02;
    const time = Date.now() * 0.002;

    const drawBird = (x: number, y: number, size: number, phase: number) => {
        const wingOffset = Math.sin(time + phase) * 5;
        ctx.beginPath();
        ctx.moveTo(x + parallax - 10 * size, y + wingOffset);
        ctx.quadraticCurveTo(x + parallax, y - 5 * size, x + parallax + 10 * size, y + wingOffset);
        ctx.stroke();
    };

    drawBird(width * 0.3, height * 0.25, 0.8, 0);
    drawBird(width * 0.35, height * 0.28, 0.6, 1);
    drawBird(width * 0.45, height * 0.22, 0.7, 2);
    drawBird(width * 0.7, height * 0.18, 0.9, 0.5);
    drawBird(width * 0.75, height * 0.21, 0.5, 1.5);
}

export function drawButterflies(dc: DrawContext): void {
    const { ctx, width, height, state } = dc;
    const time = Date.now() * 0.003;
    const parallax = state.mouseX * 0.3;

    const drawButterfly = (x: number, y: number, color: string, phase: number) => {
        const wingFlap = Math.sin(time * 5 + phase) * 0.3 + 0.7;
        const floatY = Math.sin(time + phase) * 10;
        const floatX = Math.cos(time * 0.5 + phase) * 15;

        ctx.save();
        ctx.translate(x + parallax + floatX, y + floatY);

        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.ellipse(-8 * wingFlap, 0, 8, 12, -0.3, 0, Math.PI * 2);
        ctx.fill();
        ctx.beginPath();
        ctx.ellipse(8 * wingFlap, 0, 8, 12, 0.3, 0, Math.PI * 2);
        ctx.fill();

        ctx.fillStyle = '#1a1a1a';
        ctx.fillRect(-1, -8, 2, 16);

        ctx.restore();
    };

    drawButterfly(width * 0.25, height * 0.6, '#E91E63', 0);
    drawButterfly(width * 0.55, height * 0.55, '#FFEB3B', 1.5);
    drawButterfly(width * 0.75, height * 0.62, '#9C27B0', 3);
}

export function drawEcoScene(dc: DrawContext): void {
    drawEcoTrees(dc);
    drawFlowers(dc);
    drawBirds(dc);
    drawButterflies(dc);
}