HaBit/lib/character/color-utils.ts

export type RGB = { r: number; g: number; b: number };
export type HSL = { h: number; s: number; l: number };

export const LIGHTNESS_MIN = 5;

export function lightnessToDisplay(lightness: number): number {
  return Math.round(
    ((lightness - LIGHTNESS_MIN) / (100 - LIGHTNESS_MIN)) * 100,
  );
}

export function displayToLightness(display: number): number {
  return Math.round(
    LIGHTNESS_MIN + (display / 100) * (100 - LIGHTNESS_MIN),
  );
}

export function clampHsl(hsl: HSL): HSL {
  return {
    h: hsl.h,
    s: Math.max(0, Math.min(100, hsl.s)),
    l: Math.max(LIGHTNESS_MIN, Math.min(100, hsl.l)),
  };
}

export function hslToRgb(h: number, s: number, l: number): RGB {
  const saturation = s / 100;
  const lightness = l / 100;
  const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
  const x = chroma * (1 - Math.abs(((h / 60) % 2) - 1));
  const m = lightness - chroma / 2;

  let r = 0;
  let g = 0;
  let b = 0;

  if (h < 60) {
    r = chroma;
    g = x;
  } else if (h < 120) {
    r = x;
    g = chroma;
  } else if (h < 180) {
    g = chroma;
    b = x;
  } else if (h < 240) {
    g = x;
    b = chroma;
  } else if (h < 300) {
    r = x;
    b = chroma;
  } else {
    r = chroma;
    b = x;
  }

  return {
    r: Math.round((r + m) * 255),
    g: Math.round((g + m) * 255),
    b: Math.round((b + m) * 255),
  };
}

export function rgbToHsl(r: number, g: number, b: number): HSL {
  const red = r / 255;
  const green = g / 255;
  const blue = b / 255;
  const max = Math.max(red, green, blue);
  const min = Math.min(red, green, blue);
  const lightness = (max + min) / 2;

  let hue = 0;
  let saturation = 0;

  if (max !== min) {
    const delta = max - min;
    saturation =
      lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);

    switch (max) {
      case red:
        hue = ((green - blue) / delta + (green < blue ? 6 : 0)) * 60;
        break;
      case green:
        hue = ((blue - red) / delta + 2) * 60;
        break;
      default:
        hue = ((red - green) / delta + 4) * 60;
        break;
    }
  }

  return {
    h: Math.round(hue),
    s: Math.round(saturation * 100),
    l: Math.round(lightness * 100),
  };
}

export function hexToRgb(hex: string): RGB {
  const normalized = hex.replace("#", "");
  const value =
    normalized.length === 3
      ? normalized
          .split("")
          .map((char) => char + char)
          .join("")
      : normalized;

  return {
    r: parseInt(value.slice(0, 2), 16),
    g: parseInt(value.slice(2, 4), 16),
    b: parseInt(value.slice(4, 6), 16),
  };
}

export function rgbToHex({ r, g, b }: RGB): string {
  return `#${[r, g, b]
    .map((channel) => channel.toString(16).padStart(2, "0"))
    .join("")}`;
}

/** Tint a monochrome sprite by mapping pixel brightness to the target color. */
export function tintImageData(imageData: ImageData, color: RGB): void {
  const { data } = imageData;

  for (let i = 0; i < data.length; i += 4) {
    const alpha = data[i + 3];
    if (alpha === 0) continue;

    const brightness =
      Math.max(data[i], data[i + 1], data[i + 2]) / 255;

    data[i] = Math.round(color.r * brightness);
    data[i + 1] = Math.round(color.g * brightness);
    data[i + 2] = Math.round(color.b * brightness);
  }
}

export function loadImage(src: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error(`Failed to load image: ${src}`));
    image.src = src;
  });
}

const imageCache = new Map<string, HTMLImageElement>();

export async function getCachedImage(src: string): Promise<HTMLImageElement> {
  if (!imageCache.has(src)) {
    imageCache.set(src, await loadImage(src));
  }
  return imageCache.get(src)!;
}

export function drawTintedSprite(
  ctx: CanvasRenderingContext2D,
  image: HTMLImageElement,
  color: RGB,
): void {
  const width = image.width;
  const height = image.height;
  const offscreen = document.createElement("canvas");
  offscreen.width = width;
  offscreen.height = height;

  const offscreenCtx = offscreen.getContext("2d", { willReadFrequently: true });
  if (!offscreenCtx) return;

  offscreenCtx.drawImage(image, 0, 0);
  const imageData = offscreenCtx.getImageData(0, 0, width, height);
  tintImageData(imageData, color);
  offscreenCtx.putImageData(imageData, 0, 0);
  ctx.drawImage(offscreen, 0, 0);
}