Add initial character creation screen

Created the first version of the character creation feature, including the base layout and starting UI elements for customizing a character.

lib/character/color-utils.ts

@@ -0,0 +1,177 @@
+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);
+}