/** * Pixel Art Library - Example Icon Builders * * Example functions demonstrating how to create different icons * using the pixel art library. */ import { PixelArtRenderer, createCircle, createPoint, createStar, createTriangle, type RadialGradient, } from '@/lib/pixel-art/index'; /** * Example: Create a simple star icon */ export function drawStarIcon(renderer: PixelArtRenderer, size: number = 32): void { const center = size / 2; // Background renderer.circle(createCircle(center, center, size / 2 - 2), renderer.color('background'), 0.3); // Star shape const starPoints = createStar(center, center, size / 3, size / 6, 5); // Draw star using triangles (simplified) for (let i = 0; i < starPoints.length - 1; i++) { const triangle = createTriangle(createPoint(center, center), starPoints[i], starPoints[i + 1]); renderer.triangle(triangle, renderer.color('stars')); } } /** * Example: Create a heart icon */ export function drawHeartIcon(renderer: PixelArtRenderer, size: number = 32): void { const center = size / 2; // Simplified heart using circles renderer.circle(createCircle(center - 3, center - 2, 4), renderer.color('heart'), 0.9); renderer.circle(createCircle(center + 3, center - 2, 4), renderer.color('heart'), 0.9); renderer.triangle( createTriangle( createPoint(center, center + 4), createPoint(center - 6, center - 2), createPoint(center + 6, center - 2) ), renderer.color('heart'), 0.9 ); } /** * Example: Create a food icon (simplified) */ export function drawFoodIcon(renderer: PixelArtRenderer, size: number = 32): void { const center = size / 2; // Plate renderer.circle(createCircle(center, center + 4, size / 3), renderer.color('crustLight')); renderer.circleOutline( createCircle(center, center + 4, size / 3), renderer.color('crustEdge'), 1 ); // Food item renderer.circle(createCircle(center, center - 2, size / 4), renderer.color('meatLight')); renderer.circle(createCircle(center, center - 2, size / 6), renderer.color('meatDark')); } /** * Example: Create a building icon */ export function drawBuildingIcon(renderer: PixelArtRenderer, size: number = 32): void { const center = size / 2; // Building base renderer.rect( { x: center - 8, y: center - 4, width: 16, height: 20 }, renderer.color('crustDark') ); // Windows for (let i = 0; i < 2; i++) { for (let j = 0; j < 3; j++) { renderer.rect( { x: center - 6 + i * 6, y: center - 2 + j * 5, width: 3, height: 3 }, renderer.color('onionLight'), 0.8 ); } } // Roof renderer.triangle( createTriangle( createPoint(center - 8, center - 4), createPoint(center, center - 10), createPoint(center + 8, center - 4) ), renderer.color('crustDarker') ); } /** * Example: Create an animated steam effect */ export function drawSteamEffect( renderer: PixelArtRenderer, x: number, y: number, intensity: number = 1 ): void { const steamGlow: RadialGradient = { cx: x, cy: y, r: 2 * intensity, stops: [ { offset: 0, color: renderer.color('steam'), alpha: 0.9 }, { offset: 1, color: renderer.color('steam'), alpha: 0.3 }, ], }; renderer.radialGradient(steamGlow, createCircle(x, y, 1.8 * intensity)); renderer.circle( createCircle(x, y + 2.5 * intensity, 1.2 * intensity), renderer.color('steam'), 0.85 ); renderer.circle( createCircle(x, y + 5 * intensity, 0.8 * intensity), renderer.color('steam'), 0.85 ); }