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); }