turash/bugulma/frontend/lib/pixel-art/examples.ts

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