RecentRunner/HaBit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Complete character creation screen

Browse Source 
Finished the character creation screen with the final layout, UI elements, and customization flow ready for integration.
This commit is contained in:
pricewowen
2026-05-23 21:35:59 -06:00
parent 4705b1a0ec
commit 1023b3edc6
26 changed files with 232 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
lib/character/color-utils.ts
View File

@@ -128,15 +128,79 @@ export function tintImageData(imageData: ImageData, color: RGB): void {
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);
applyMonochromeTint(data, i, color);
}
}
function isWhitePixel(r: number, g: number, b: number): boolean {
return r >= 240 && g >= 240 && b >= 240;
}
function isMagentaPixel(r: number, g: number, b: number): boolean {
return r >= 200 && g <= 80 && b >= 200;
}
function applyMonochromeTint(
data: Uint8ClampedArray,
index: number,
color: RGB,
brightness?: number,
): void {
const pixelBrightness =
brightness ??
Math.max(data[index], data[index + 1], data[index + 2]) / 255;
data[index] = Math.round(color.r * pixelBrightness);
data[index + 1] = Math.round(color.g * pixelBrightness);
data[index + 2] = Math.round(color.b * pixelBrightness);
}
/** Darkest shadow in the skin template — magenta maps here, not bright red. */
const SKIN_TEMPLATE_SHADOW = hexToRgb("#330000");
const SKIN_SHADOW_BRIGHTNESS =
Math.max(
SKIN_TEMPLATE_SHADOW.r,
SKIN_TEMPLATE_SHADOW.g,
SKIN_TEMPLATE_SHADOW.b,
) / 255;
/** Eyes: white stays white, magenta uses skin color, other pixels use eye color. */
export function tintEyesImageData(
imageData: ImageData,
eyeColor: RGB,
skinColor: RGB,
): void {
const { data } = imageData;
for (let i = 0; i < data.length; i += 4) {
const alpha = data[i + 3];
if (alpha === 0) continue;
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
if (isWhitePixel(r, g, b)) {
data[i] = 255;
data[i + 1] = 255;
data[i + 2] = 255;
continue;
}
if (isMagentaPixel(r, g, b)) {
applyMonochromeTint(data, i, skinColor, SKIN_SHADOW_BRIGHTNESS);
continue;
}
applyMonochromeTint(data, i, eyeColor);
}
}
export type TintOptions = {
mode?: "monochrome" | "eyes";
skinColor?: RGB;
};
export function loadImage(src: string): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => {
const image = new Image();
@@ -159,6 +223,7 @@ export function drawTintedSprite(
ctx: CanvasRenderingContext2D,
image: HTMLImageElement,
color: RGB,
options?: TintOptions,
): void {
const width = image.width;
const height = image.height;
@@ -171,7 +236,13 @@ export function drawTintedSprite(
offscreenCtx.drawImage(image, 0, 0);
const imageData = offscreenCtx.getImageData(0, 0, width, height);
tintImageData(imageData, color);
if (options?.mode === "eyes" && options.skinColor) {
tintEyesImageData(imageData, color, options.skinColor);
} else {
tintImageData(imageData, color);
}
offscreenCtx.putImageData(imageData, 0, 0);
ctx.drawImage(offscreen, 0, 0);
}

100
lib/character/presets.ts
View File

@@ -21,7 +21,21 @@ export type LayerVariant = {
src: string;
};
export type CharacterLayerId = "skin" | "pants" | "torso" | "head" | "eyes";
export const NONE_VARIANT_ID = "none";
export const NONE_VARIANT: LayerVariant = {
id: NONE_VARIANT_ID,
label: "None",
src: "",
};
export type CharacterLayerId =
| "skin"
| "pants"
| "shoes"
| "torso"
| "eyes"
| "head";
export type CharacterLayer = {
id: CharacterLayerId;
@@ -45,10 +59,33 @@ function presetFromHex(id: string, name: string, hex: string): ColorPreset {
return presetFromHsl(id, name, rgbToHsl(rgb.r, rgb.g, rgb.b));
}
function layerVariants(
layerId: Exclude<CharacterLayerId, "skin">,
label: string,
count: number,
): LayerVariant[] {
return Array.from({ length: count }, (_, index) => {
const number = index + 1;
return {
id: `${layerId}-${number}`,
label: `${label} ${number}`,
src: `/character/${layerId}/${layerId}-${number}.png`,
};
});
}
function layerVariantsWithNone(
layerId: Exclude<CharacterLayerId, "skin">,
label: string,
count: number,
): LayerVariant[] {
return [NONE_VARIANT, ...layerVariants(layerId, label, count)];
}
export const COLOR_PRESETS: ColorPreset[] = [
presetFromHsl("black", "Black", { h: 0, s: 0, l: 5 }),
presetFromHsl("gray", "Gray", { h: 0, s: 0, l: 50 }),
presetFromHsl("white", "White", { h: 0, s: 0, l: 100 }),
presetFromHsl("black", "Black", { h: 0, s: 0, l: 5 }),
presetFromHex("red", "Red", "#FF2020"),
presetFromHex("orange", "Orange", "#FF8800"),
presetFromHex("yellow", "Yellow", "#FFD700"),
@@ -66,11 +103,14 @@ export const COLOR_PRESETS: ColorPreset[] = [
presetFromHex("onyx", "Onyx", "#140C08"),
];
export const DEFAULT_SKIN_COLOR =
COLOR_PRESETS.find((preset) => preset.id === "light")!;
export const DEFAULT_GRAY_COLOR =
COLOR_PRESETS.find((preset) => preset.id === "gray")!;
export const DEFAULT_SKIN_COLOR = DEFAULT_GRAY_COLOR;
export const PIECE_SLOT_COUNT = 8;
/** Stack order: bottom → top */
export const CHARACTER_LAYERS: CharacterLayer[] = [
{
id: "skin",
@@ -84,42 +124,48 @@ export const CHARACTER_LAYERS: CharacterLayer[] = [
id: "pants",
label: "Pants",
allowVariants: true,
variants: [],
variants: layerVariantsWithNone("pants", "Pants", 3),
},
{
id: "shoes",
label: "Shoes",
allowVariants: true,
variants: layerVariantsWithNone("shoes", "Shoes", 3),
},
{
id: "torso",
label: "Torso",
allowVariants: true,
variants: [
{ id: "torso-1", label: "Torso 1", src: "/character/torso/torso-1.png" },
{ id: "torso-2", label: "Torso 2", src: "/character/torso/torso-2.png" },
],
},
{
id: "head",
label: "Head",
allowVariants: true,
variants: [],
variants: layerVariantsWithNone("torso", "Torso", 4),
},
{
id: "eyes",
label: "Eyes",
allowVariants: true,
variants: [],
variants: layerVariantsWithNone("eyes", "Eyes", 2),
},
{
id: "head",
label: "Head",
allowVariants: true,
variants: layerVariantsWithNone("head", "Head", 7),
},
];
export const LAYER_DEFAULT_COLORS: Record<CharacterLayerId, HSL> = {
skin: DEFAULT_SKIN_COLOR.hsl,
pants: COLOR_PRESETS.find((preset) => preset.id === "blue")!.hsl,
torso: COLOR_PRESETS.find((preset) => preset.id === "red")!.hsl,
head: COLOR_PRESETS.find((preset) => preset.id === "yellow")!.hsl,
eyes: COLOR_PRESETS.find((preset) => preset.id === "indigo")!.hsl,
skin: DEFAULT_GRAY_COLOR.hsl,
pants: DEFAULT_GRAY_COLOR.hsl,
shoes: DEFAULT_GRAY_COLOR.hsl,
torso: DEFAULT_GRAY_COLOR.hsl,
eyes: DEFAULT_GRAY_COLOR.hsl,
head: DEFAULT_GRAY_COLOR.hsl,
};
export function buildDefaultVariants(): LayerVariantState {
return CHARACTER_LAYERS.reduce((state, layer) => {
state[layer.id] = layer.variants[0]?.id ?? "";
state[layer.id] = layer.allowVariants
? NONE_VARIANT_ID
: (layer.variants[0]?.id ?? "");
return state;
}, {} as LayerVariantState);
}
@@ -132,9 +178,15 @@ export function getSelectedVariant(
layerId: CharacterLayerId,
variantId: string,
): LayerVariant | undefined {
return getLayerById(layerId).variants.find(
(variant) => variant.id === variantId,
if (variantId === NONE_VARIANT_ID) return undefined;
const variant = getLayerById(layerId).variants.find(
(entry) => entry.id === variantId,
);
if (!variant?.src) return undefined;
return variant;
}
/** @deprecated Use DEFAULT_SKIN_COLOR */