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.
2026-05-23 19:32:20 -06:00
parent 008ea1677f
commit 4705b1a0ec
18 changed files with 895 additions and 0 deletions
--- a/components/character/character-piece-selector.tsx
+++ b/components/character/character-piece-selector.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import type { HSL } from "@/lib/character/color-utils";
+import { PIECE_SLOT_COUNT } from "@/lib/character/presets";
+import { cn } from "@/lib/utils";
+import type { LayerVariant } from "@/lib/character/presets";
+
+import { TintedSpriteIcon } from "./tinted-sprite-icon";
+
+type CharacterPieceSelectorProps = {
+  variants: LayerVariant[];
+  activeId: string;
+  color: HSL;
+  onSelect: (variantId: string) => void;
+};
+
+export function CharacterPieceSelector({
+  variants,
+  activeId,
+  color,
+  onSelect,
+}: CharacterPieceSelectorProps) {
+  const slots = Array.from({ length: PIECE_SLOT_COUNT }, (_, index) =>
+    variants[index] ?? null,
+  );
+
+  return (
+    <div className="grid grid-cols-8 gap-2">
+      {slots.map((variant, index) => {
+        if (!variant) {
+          return (
+            <div
+              key={`empty-${index}`}
+              aria-hidden
+              className="size-14 rounded-lg border border-dashed border-border/50 bg-muted/15"
+            />
+          );
+        }
+
+        return (
+          <button
+            key={variant.id}
+            type="button"
+            title={variant.label}
+            aria-label={variant.label}
+            aria-pressed={activeId === variant.id}
+            onClick={() => onSelect(variant.id)}
+            className={cn(
+              "flex size-14 items-center justify-center rounded-lg border bg-zinc-950/80 p-1.5 transition-colors",
+              activeId === variant.id
+                ? "border-foreground bg-zinc-900 shadow-[inset_0_0_0_1px_hsl(var(--foreground)/0.15)]"
+                : "border-border/60 hover:border-border hover:bg-zinc-900/60",
+            )}
+          >
+            <TintedSpriteIcon src={variant.src} color={color} size={36} />
+          </button>
+        );
+      })}
+    </div>
+  );
+}