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

14
components/character/character-creator.tsx
View File

@@ -15,7 +15,7 @@ import { clampHsl } from "@/lib/character/color-utils";
import {
CHARACTER_LAYERS,
COLOR_PRESETS,
DEFAULT_SKIN_COLOR,
DEFAULT_GRAY_COLOR,
LAYER_DEFAULT_COLORS,
buildDefaultVariants,
getLayerById,
@@ -41,7 +41,7 @@ export function CharacterCreator() {
buildDefaultVariants,
);
const [activePresetId, setActivePresetId] = useState<string>(
DEFAULT_SKIN_COLOR.id,
DEFAULT_GRAY_COLOR.id,
);
const [activeLayerId, setActiveLayerId] = useState<
(typeof CHARACTER_LAYERS)[number]["id"]
@@ -69,7 +69,14 @@ export function CharacterCreator() {
const handleLayerChange = (layerId: (typeof CHARACTER_LAYERS)[number]["id"]) => {
setActiveLayerId(layerId);
setActivePresetId("");
const layerColor = colors[layerId];
const matchingPreset = COLOR_PRESETS.find(
(preset) =>
preset.hsl.h === layerColor.h &&
preset.hsl.s === layerColor.s &&
preset.hsl.l === layerColor.l,
);
setActivePresetId(matchingPreset?.id ?? "");
};
const handleVariantChange = (variantId: string) => {
@@ -107,6 +114,7 @@ export function CharacterCreator() {
variants={pieceVariants}
activeId={variants[activeLayerId]}
color={activeColor}
skinColor={colors.skin}
onSelect={handleVariantChange}
/>
</div>