pi-roundtable 0.22.5 → 0.23.0

package/src/characters/parse.ts

@@ -0,0 +1,196 @@
+import {
+	ACCESSORY_CHOICES,
+	BEARD_CHOICES,
+	BUILDS,
+	CATALOG,
+	CLASS_IDS,
+	HAIR_IDS,
+	HAT_IDS,
+	OUTFIT_IDS,
+	PROP_IDS,
+	SKIN_INDEXES,
+} from "./catalog.ts";
+import {
+	type CharacterColors,
+	CharacterError,
+	type CharacterSpec,
+	checkHex,
+	checkOneOf,
+	isRecord,
+	paletteOf,
+	presetSpec,
+} from "./spec.ts";
+
+const SPEC_KEYS = new Set([
+	"v",
+	"class",
+	"outfit",
+	"hat",
+	"prop",
+	"hair",
+	"beard",
+	"accessory",
+	"build",
+	"skin",
+	"hairColor",
+	"colors",
+	"palette",
+]);
+const REQUIRED_KEYS = [...SPEC_KEYS].filter((key) => key !== "palette");
+const COLOR_KEYS = ["primary", "secondary", "trim"] as const;
+
+function requireField(object: Record<string, unknown>, field: string): void {
+	if (!Object.hasOwn(object, field))
+		throw new CharacterError(field, "is required");
+}
+
+/**
+ * A complete spec from outside the process (an API body, what the page received), checked
+ * strictly: an unknown key or id, a missing field, or a color that is not `#rrggbb` throws a
+ * `CharacterError` naming the field. Colors are lowercased.
+ */
+export function parseCharacter(value: unknown): CharacterSpec {
+	if (!isRecord(value))
+		throw new CharacterError("character", "must be an object");
+	for (const key of Object.keys(value))
+		if (!SPEC_KEYS.has(key))
+			throw new CharacterError(key, "is not a known field");
+	for (const key of REQUIRED_KEYS) requireField(value, key);
+	if (value.v !== 1) throw new CharacterError("v", "must be 1");
+	const colorsIn = value.colors;
+	if (!isRecord(colorsIn))
+		throw new CharacterError("colors", "must be an object");
+	for (const key of Object.keys(colorsIn))
+		if (!(COLOR_KEYS as readonly string[]).includes(key))
+			throw new CharacterError(`colors.${key}`, "is not a known color");
+	for (const key of COLOR_KEYS) requireField(colorsIn, key);
+	const colors: CharacterColors = {
+		primary: checkHex(colorsIn.primary, "colors.primary"),
+		secondary: checkHex(colorsIn.secondary, "colors.secondary"),
+		trim: checkHex(colorsIn.trim, "colors.trim"),
+	};
+	const palette = paletteOf(colors);
+	if (value.palette !== undefined) {
+		const named = checkOneOf(
+			Object.keys(CATALOG.palettes),
+			value.palette,
+			"palette",
+		);
+		if (named !== palette)
+			throw new CharacterError("palette", "does not match the colors");
+	}
+	return {
+		v: 1,
+		class: checkOneOf(CLASS_IDS, value.class, "class"),
+		outfit: checkOneOf(OUTFIT_IDS, value.outfit, "outfit"),
+		hat: checkOneOf(HAT_IDS, value.hat, "hat"),
+		prop: checkOneOf(PROP_IDS, value.prop, "prop"),
+		hair: checkOneOf(HAIR_IDS, value.hair, "hair"),
+		beard: checkOneOf(BEARD_CHOICES, value.beard, "beard"),
+		accessory: checkOneOf(ACCESSORY_CHOICES, value.accessory, "accessory"),
+		build: checkOneOf(BUILDS, value.build, "build"),
+		skin: checkOneOf(SKIN_INDEXES, value.skin, "skin"),
+		hairColor: checkHex(value.hairColor, "hairColor"),
+		colors,
+		...(palette ? { palette } : {}),
+	};
+}
+
+/** The value if `check` accepts it, else `fallback`. */
+function lenient<T>(check: () => T, fallback: T): T {
+	try {
+		return check();
+	} catch (error) {
+		if (error instanceof CharacterError) return fallback;
+		throw error;
+	}
+}
+
+/**
+ * A spec from a stored row, read leniently so an old row, or one a newer version wrote, never
+ * throws: a field that is not valid here (an id this version does not know, a bad color) takes
+ * the class preset's value, and an unknown key is ignored. `undefined` when the value is not an
+ * object or names no known class.
+ */
+export function readCharacter(value: unknown): CharacterSpec | undefined {
+	if (!isRecord(value)) return undefined;
+	const id = lenient(
+		() => checkOneOf(CLASS_IDS, value.class, "class"),
+		undefined,
+	);
+	if (!id) return undefined;
+	const spec = presetSpec(id);
+	const take = <T>(check: () => T, set: (found: T) => void) => {
+		const none = Symbol("none");
+		const found = lenient<T | typeof none>(check, none);
+		if (found !== none) set(found as T);
+	};
+	take(
+		() => checkOneOf(OUTFIT_IDS, value.outfit, "outfit"),
+		(found) => {
+			spec.outfit = found;
+		},
+	);
+	take(
+		() => checkOneOf(HAT_IDS, value.hat, "hat"),
+		(found) => {
+			spec.hat = found;
+		},
+	);
+	take(
+		() => checkOneOf(PROP_IDS, value.prop, "prop"),
+		(found) => {
+			spec.prop = found;
+		},
+	);
+	take(
+		() => checkOneOf(HAIR_IDS, value.hair, "hair"),
+		(found) => {
+			spec.hair = found;
+		},
+	);
+	take(
+		() => checkOneOf(BEARD_CHOICES, value.beard, "beard"),
+		(found) => {
+			spec.beard = found;
+		},
+	);
+	take(
+		() => checkOneOf(ACCESSORY_CHOICES, value.accessory, "accessory"),
+		(found) => {
+			spec.accessory = found;
+		},
+	);
+	take(
+		() => checkOneOf(BUILDS, value.build, "build"),
+		(found) => {
+			spec.build = found;
+		},
+	);
+	take(
+		() => checkOneOf(SKIN_INDEXES, value.skin, "skin"),
+		(found) => {
+			spec.skin = found;
+		},
+	);
+	take(
+		() => checkHex(value.hairColor, "hairColor"),
+		(found) => {
+			spec.hairColor = found;
+		},
+	);
+	if (isRecord(value.colors)) {
+		const colors = value.colors;
+		for (const key of COLOR_KEYS)
+			take(
+				() => checkHex(colors[key], `colors.${key}`),
+				(found) => {
+					spec.colors[key] = found;
+				},
+			);
+	}
+	const palette = paletteOf(spec.colors);
+	if (palette) spec.palette = palette;
+	else delete spec.palette;
+	return spec;
+}

package/src/characters/parts-face.ts

@@ -0,0 +1,354 @@
+import type { AvatarState, Expression } from "./catalog.ts";
+
+type EyeShape =
+	| "open"
+	| "sparkle"
+	| "wide"
+	| "arc"
+	| "closed"
+	| "soft"
+	| "narrow"
+	| "xd"
+	| "wink";
+type MouthShape =
+	| "smile"
+	| "smileS"
+	| "grin"
+	| "o"
+	| "flatR"
+	| "firm"
+	| "wobble"
+	| "smirk"
+	| "tongue"
+	| "yawn"
+	| "tilt";
+type Extra = "blush" | "sweat" | "tear" | "sparkle" | "dots" | "burst";
+
+interface ExpressionRow {
+	eye: EyeShape;
+	look: readonly [number, number];
+	/** Left and right brow: [raise, tilt]; a tilt above 0 is the inner end down (angry), below 0 up (worried). */
+	bl: readonly [number, number];
+	br: readonly [number, number];
+	mouth: MouthShape;
+	fx: readonly Extra[];
+	big?: 1;
+}
+
+const EXPRESSION_ROWS: Record<Expression, ExpressionRow> = {
+	neutral: {
+		eye: "open",
+		look: [0, 0],
+		bl: [0, 0],
+		br: [0, 0],
+		mouth: "smile",
+		fx: [],
+	},
+	happy: {
+		eye: "sparkle",
+		look: [0, 0],
+		bl: [-2, 0],
+		br: [-2, 0],
+		mouth: "grin",
+		fx: ["blush"],
+	},
+	thinking: {
+		eye: "open",
+		look: [2.2, -2.4],
+		bl: [-0.5, 0],
+		br: [-4, -8],
+		mouth: "flatR",
+		fx: ["dots"],
+	},
+	concerned: {
+		eye: "open",
+		look: [0, 0.6],
+		bl: [-1, -13],
+		br: [-1, -13],
+		mouth: "wobble",
+		fx: [],
+	},
+	apologetic: {
+		eye: "soft",
+		look: [0, 0],
+		bl: [-1, -20],
+		br: [-1, -20],
+		mouth: "wobble",
+		fx: ["sweat", "blush"],
+	},
+	surprised: {
+		eye: "wide",
+		look: [0, 0],
+		bl: [-4, -4],
+		br: [-4, 4],
+		mouth: "o",
+		fx: ["burst"],
+	},
+	proud: {
+		eye: "arc",
+		look: [0, 0],
+		bl: [-3, 0],
+		br: [-3, 0],
+		mouth: "smirk",
+		fx: ["sparkle"],
+	},
+	amused: {
+		eye: "xd",
+		look: [0, 0],
+		bl: [-2, 0],
+		br: [-2, 0],
+		mouth: "grin",
+		fx: ["tear"],
+	},
+	curious: {
+		eye: "open",
+		look: [2.6, -0.4],
+		bl: [-4, -6],
+		br: [0, 0],
+		mouth: "tilt",
+		fx: [],
+		big: 1,
+	},
+	sympathetic: {
+		eye: "soft",
+		look: [0, 1],
+		bl: [-1, -10],
+		br: [-1, -10],
+		mouth: "smileS",
+		fx: ["blush"],
+	},
+	playful: {
+		eye: "wink",
+		look: [0, 0],
+		bl: [-3, -2],
+		br: [1, 0],
+		mouth: "tongue",
+		fx: ["blush"],
+	},
+	determined: {
+		eye: "narrow",
+		look: [0, 0],
+		bl: [1, 15],
+		br: [1, 15],
+		mouth: "firm",
+		fx: [],
+	},
+	sleepy: {
+		eye: "closed",
+		look: [0, 0],
+		bl: [2, 6],
+		br: [2, 6],
+		mouth: "yawn",
+		fx: [],
+	},
+};
+
+const f1 = (n: number): number => +n.toFixed(2);
+
+/** Geometry of the chibi face (the lab's direction A). */
+const FACE = {
+	ex: [39, 61] as const,
+	ey: 52,
+	rx: 5.2,
+	ry: 6.4,
+	sw: 2.5,
+	msw: 2.2,
+	bl: 8.6,
+	bw: 2.2,
+	bdy: -9.8,
+	mx: 50,
+	my: 64,
+	ms: 1,
+	bx: 6.5,
+	by: 8,
+	br: 4,
+	fx: [76, 40] as const,
+	fs: 1,
+	hw: 28,
+	by0: 42,
+};
+const OVERLAY = {
+	badge: [17, 19] as const,
+	badgeR: 9.5,
+	orbit: [50, 50, 45] as const,
+	zz: [73, 28] as const,
+};
+
+/** Where the animation turns each part; characters.css carries them. */
+export const PIVOTS = {
+	eyes: `50px ${FACE.ey}px`,
+	badge: `${OVERLAY.badge[0]}px ${OVERLAY.badge[1]}px`,
+	orbit: `${OVERLAY.orbit[0]}px ${OVERLAY.orbit[1]}px`,
+	character: "50px 94px",
+} as const;
+
+export const INK = "#2b2440";
+const TONGUE = "#ef7b8a";
+
+function eyeShape(shape: EyeShape, side: 0 | 1, ink: string): string {
+	const { rx, ry, sw } = FACE;
+	const open = (k = 1) =>
+		`<ellipse rx="${f1(rx * k)}" ry="${f1(ry * k)}" fill="${ink}"/><circle cx="${f1(-rx * 0.3)}" cy="${f1(-ry * 0.36)}" r="${f1(rx * 0.4)}" fill="#fff"/><circle cx="${f1(rx * 0.38)}" cy="${f1(ry * 0.36)}" r="${f1(rx * 0.18)}" fill="#fff"/>`;
+	const arc = `<path d="M${f1(-rx * 1.05)} ${f1(ry * 0.35)}Q0 ${f1(-ry * 1.15)} ${f1(rx * 1.05)} ${f1(ry * 0.35)}" fill="none" stroke="${ink}" stroke-width="${sw}" stroke-linecap="round"/>`;
+	switch (shape) {
+		case "open":
+			return open();
+		case "sparkle":
+			return `${open(1.1)}<circle cx="${f1(-rx * 0.1)}" cy="${f1(ry * 0.5)}" r="${f1(rx * 0.14)}" fill="#fff" opacity=".8"/>`;
+		case "wide":
+			return `<circle r="${f1(ry * 1.12)}" fill="#fff" stroke="${ink}" stroke-width="${f1(sw * 0.7)}"/><circle r="${f1(ry * 0.5)}" fill="${ink}"/>`;
+		case "arc":
+			return arc;
+		case "closed":
+			return `<path d="M${f1(-rx)} ${f1(-ry * 0.1)}Q0 ${f1(ry * 0.85)} ${f1(rx)} ${f1(-ry * 0.1)}" fill="none" stroke="${ink}" stroke-width="${sw}" stroke-linecap="round"/>`;
+		case "soft":
+			return `<path d="M${f1(-rx)} ${f1(-ry * 0.25)}H${f1(rx)}A${f1(rx)} ${f1(ry * 1.05)} 0 0 1 ${f1(-rx)} ${f1(-ry * 0.25)}Z" fill="${ink}"/><circle cx="${f1(-rx * 0.25)}" cy="${f1(ry * 0.25)}" r="${f1(rx * 0.34)}" fill="#fff"/>`;
+		case "narrow":
+			return `<ellipse rx="${f1(rx * 0.98)}" ry="${f1(ry * 0.6)}" fill="${ink}"/><circle cx="${f1(-rx * 0.3)}" cy="${f1(-ry * 0.15)}" r="${f1(rx * 0.26)}" fill="#fff"/>`;
+		case "xd": {
+			const s = side ? -1 : 1;
+			return `<path d="M${f1(-s * rx * 0.85)} ${f1(-ry * 0.75)}L${f1(s * rx * 0.6)} 0L${f1(-s * rx * 0.85)} ${f1(ry * 0.75)}" fill="none" stroke="${ink}" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round"/>`;
+		}
+		case "wink":
+			return side ? arc : open();
+	}
+}
+
+function mouthShape(shape: MouthShape, ink: string): string {
+	const stroke = `fill="none" stroke="${ink}" stroke-width="${FACE.msw}" stroke-linecap="round" stroke-linejoin="round"`;
+	switch (shape) {
+		case "smile":
+			return `<path d="M-6 0Q0 5 6 0" ${stroke}/>`;
+		case "smileS":
+			return `<path d="M-4.2 0.4Q0 3.8 4.2 0.4" ${stroke}/>`;
+		case "grin":
+			return `<path d="M-7 -1Q0 3 7 -1Q5.5 8 0 8Q-5.5 8 -7 -1Z" fill="${ink}"/><ellipse cy="6.3" rx="2.9" ry="1.5" fill="${TONGUE}"/>`;
+		case "o":
+			return `<ellipse cy="3" rx="2.9" ry="3.5" fill="${ink}"/>`;
+		case "flatR":
+			return `<path d="M-3.5 2.4L4.5 0.4" ${stroke}/>`;
+		case "firm":
+			return `<path d="M-5 1.2H4.2L5.6 -0.4" ${stroke}/>`;
+		case "wobble":
+			return `<path d="M-6 3.2q1.5 -3 3 0t3 0t3 0t3 0" ${stroke}/>`;
+		case "smirk":
+			return `<path d="M-6 2.4Q0 4 6.4 -1.6" ${stroke}/>`;
+		case "tongue":
+			return `<path d="M-6.5 -0.5Q0 4.5 6.5 -0.5Z" fill="${ink}"/><path d="M-2.6 2.2Q0 10 2.8 2.4Z" fill="${TONGUE}"/>`;
+		case "yawn":
+			return `<ellipse cy="3.4" rx="3.4" ry="4.2" fill="${ink}"/><ellipse cy="5.6" rx="2" ry="1.4" fill="${TONGUE}"/>`;
+		case "tilt":
+			return `<ellipse cx="3" cy="2" rx="1.9" ry="2.4" fill="${ink}"/>`;
+	}
+}
+
+export interface FaceColors {
+	/** Eyes and mouth. */
+	ink: string;
+	/** Brows (hair mixed toward ink). */
+	brow: string;
+	/** The thinking dots and the burst (primary mixed toward ink). */
+	dot: string;
+}
+
+export interface Face {
+	eyes: string;
+	brows: string;
+	mouth: string;
+	fx: string;
+}
+
+const star = (x: number, y: number, r: number, color: string): string =>
+	`<path d="M${x} ${y - r}Q${x + r * 0.22} ${y - r * 0.22} ${x + r} ${y}Q${x + r * 0.22} ${y + r * 0.22} ${x} ${y + r}Q${x - r * 0.22} ${y + r * 0.22} ${x - r} ${y}Q${x - r * 0.22} ${y - r * 0.22} ${x} ${y - r}Z" fill="${color}"/>`;
+const drop = (x: number, y: number, s: number, color: string): string =>
+	`<path d="M${x} ${y - 3.6 * s}Q${x + 3 * s} ${y + 0.2 * s} ${x} ${y + 2.8 * s}Q${x - 3 * s} ${y + 0.2 * s} ${x} ${y - 3.6 * s}Z" fill="${color}"/>`;
+
+export function faceParts(colors: FaceColors, expression: Expression): Face {
+	const c = FACE;
+	const row = EXPRESSION_ROWS[expression];
+	const [lx, ly] = row.look;
+	const eye = (cx: number, side: 0 | 1) => {
+		const big = row.big && !side;
+		return `<g transform="translate(${f1(cx + lx)} ${f1(c.ey + ly)})${big ? " scale(1.12)" : ""}">${eyeShape(row.eye, side, colors.ink)}</g>`;
+	};
+	const eyes = `<g class="eyes">${eye(c.ex[0], 0)}${eye(c.ex[1], 1)}</g>`;
+	const brow = (
+		cx: number,
+		[dy, tilt]: readonly [number, number],
+		side: 0 | 1,
+	) =>
+		`<path d="M${-c.bl / 2} 0H${c.bl / 2}" transform="translate(${cx} ${f1(c.ey + c.bdy + dy)}) rotate(${side ? -tilt : tilt})" stroke="${colors.brow}" stroke-width="${c.bw}" stroke-linecap="round" fill="none"/>`;
+	const brows = `<g class="brows">${brow(c.ex[0], row.bl, 0)}${brow(c.ex[1], row.br, 1)}</g>`;
+	const mouth = `<g class="mouth" transform="translate(${c.mx} ${c.my}) scale(${c.ms})">${mouthShape(row.mouth, colors.ink)}</g>`;
+	const [fx, fy] = c.fx;
+	const blush = (cx: number) =>
+		`<ellipse cx="${cx}" cy="${c.ey + c.by}" rx="${c.br}" ry="${f1(c.br * 0.62)}" fill="#ff7a8e" opacity=".5"/>`;
+	const extra: Record<Extra, string> = {
+		blush: blush(c.ex[0] - c.bx) + blush(c.ex[1] + c.bx),
+		sweat: drop(fx, fy, c.fs, "#7fd0ff"),
+		tear: drop(c.ex[1] + c.rx + 1.5, c.ey + c.ry * 0.9, c.fs * 0.8, "#7fd0ff"),
+		sparkle:
+			star(fx, fy - 1, 4.4 * c.fs, "#ffd84a") +
+			star(fx + 5 * c.fs, fy + 5 * c.fs, 2 * c.fs, "#fff1a8"),
+		dots: [1, 1.5, 2.1]
+			.map(
+				(r, i) =>
+					`<circle cx="${f1(fx - 1 + i * 4.2 * c.fs)}" cy="${f1(fy - 2 - i * 3.6 * c.fs)}" r="${f1(r * c.fs)}" fill="${colors.dot}"/>`,
+			)
+			.join(""),
+		burst: [-1, 1]
+			.map(
+				(s) =>
+					`<path d="M${50 + s * (c.hw + 1)} ${c.by0 - 3}l${s * 4.5} -3M${50 + s * (c.hw + 2)} ${c.by0 + 3}l${s * 5.5} 0M${50 + s * (c.hw + 1)} ${c.by0 + 9}l${s * 4.5} 3" stroke="${colors.dot}" stroke-width="1.7" stroke-linecap="round"/>`,
+			)
+			.join(""),
+	};
+	return {
+		eyes,
+		brows,
+		mouth,
+		fx: `<g class="fx">${row.fx.map((name) => extra[name]).join("")}</g>`,
+	};
+}
+
+/** Badge colors; the "!" "✓" and "×" are drawn paths, not text. */
+export function overlays(
+	primary: string,
+	zzColor: string,
+	only: AvatarState | null,
+): string {
+	const [bx, by] = OVERLAY.badge;
+	const r = OVERLAY.badgeR;
+	const k = r / 8;
+	const disc = (cls: string, color: string, inner: string) =>
+		`<g class="ov ${cls}"><circle cx="${bx}" cy="${by}" r="${r}" fill="${color}" stroke="#fff" stroke-width="1.6"/>${inner}</g>`;
+	const wait = disc(
+		"o-wait",
+		"#f2a81d",
+		`<path d="M${bx} ${by - 4.2 * k}V${by + 0.6 * k}" stroke="#fff" stroke-width="${f1(2.2 * k)}" stroke-linecap="round"/><circle cx="${bx}" cy="${f1(by + 3.6 * k)}" r="${f1(1.25 * k)}" fill="#fff"/>`,
+	);
+	const done = disc(
+		"o-done",
+		"#2fb36b",
+		`<path d="M${f1(bx - 3.6 * k)} ${f1(by + 0.2 * k)}L${f1(bx - 1 * k)} ${f1(by + 3 * k)}L${f1(bx + 3.8 * k)} ${f1(by - 2.8 * k)}" fill="none" stroke="#fff" stroke-width="${f1(2.2 * k)}" stroke-linecap="round" stroke-linejoin="round"/>`,
+	);
+	const err = disc(
+		"o-err",
+		"#e5484d",
+		`<path d="M${f1(bx - 3 * k)} ${f1(by - 3 * k)}L${f1(bx + 3 * k)} ${f1(by + 3 * k)}M${f1(bx + 3 * k)} ${f1(by - 3 * k)}L${f1(bx - 3 * k)} ${f1(by + 3 * k)}" stroke="#fff" stroke-width="${f1(2.2 * k)}" stroke-linecap="round"/>`,
+	);
+	const [ox, oy, orad] = OVERLAY.orbit;
+	const orbit = `<g class="ov o-think"><circle cx="${ox}" cy="${f1(oy - orad)}" r="3.3" fill="${primary}" stroke="#fff" stroke-width="1.3"/></g>`;
+	const [zx, zy] = OVERLAY.zz;
+	const z = (x: number, y: number, w: number, sw: number) =>
+		`<path d="M${x} ${y}H${x + w}L${x} ${y + w * 1.15}H${x + w}" fill="none" stroke="${zzColor}" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round"/>`;
+	const zz = `<g class="ov o-zz">${z(zx, zy, 7, 2.2)}${z(zx + 8, zy - 9, 5, 1.8)}</g>`;
+	const pick: Partial<Record<AvatarState, string>> = {
+		thinking: orbit,
+		waiting: wait,
+		done,
+		error: err,
+		sleepy: zz,
+	};
+	return `<g class="fg">${only ? (pick[only] ?? "") : orbit + wait + done + err + zz}</g>`;
+}

package/src/characters/parts-hair.ts

@@ -0,0 +1,56 @@
+import type { AccessoryId, BeardId, HairId } from "./catalog.ts";
+import type { Part, Tones } from "./colors.ts";
+
+/** Hair is two layers: behind the head, and the fringe over the forehead. */
+export interface HairLayers {
+	back: string;
+	front: string;
+}
+
+const FRINGE = "M24 47C23 29 77 29 76 47C70 39 61 35 50 35C39 35 30 39 24 47Z";
+export const HAIR: Record<HairId, (v: Tones) => HairLayers> = {
+	none: () => ({ back: "", front: "" }),
+	short: (v) => ({ back: "", front: `<path d="${FRINGE}" fill="${v.hr}"/>` }),
+	bob: (v) => ({
+		back: `<path d="M19 46C17 66 23 77 33 77H67C77 77 83 66 81 46C78 26 22 26 19 46Z" fill="${v.hr}"/>`,
+		front: `<path d="M23 50C22 28 78 28 77 50C68 38 58 36 50 41C42 36 32 38 23 50Z" fill="${v.hr}"/>`,
+	}),
+	long: (v) => ({
+		back: `<path d="M18 48C14 72 20 92 34 92H66C80 92 86 72 82 48C80 26 20 26 18 48Z" fill="${v.hr}"/>`,
+		front: `<path d="M23 52C22 28 78 28 77 52C70 38 62 36 56 38Q44 44 36 46Q28 48 23 52Z" fill="${v.hr}"/>`,
+	}),
+	bun: (v) => ({
+		back: `<circle cx="50" cy="21" r="9.5" fill="${v.hr}"/>`,
+		front: `<path d="${FRINGE}" fill="${v.hr}"/>`,
+	}),
+	curly: (v) => ({
+		back: "",
+		front: `<g fill="${v.hr}"><circle cx="30" cy="38" r="9"/><circle cx="41" cy="30" r="9.5"/><circle cx="55" cy="29" r="9.5"/><circle cx="68" cy="35" r="9"/><circle cx="23" cy="50" r="6"/><circle cx="77" cy="50" r="6"/></g>`,
+	}),
+	ponytail: (v) => ({
+		back: `<path d="M70 40C92 42 94 66 82 76C86 62 80 54 68 52Z" fill="${v.hr}"/>`,
+		front: `<path d="${FRINGE}" fill="${v.hr}"/>`,
+	}),
+	braid: (v) => ({
+		back: `<path d="M24 46C14 60 20 76 28 90L34 88C28 76 28 62 32 52Z" fill="${v.hr}"/><circle cx="28" cy="90" r="3.6" fill="${v.p}"/>`,
+		front: `<path d="${FRINGE}" fill="${v.hr}"/>`,
+	}),
+};
+
+export const BEARDS: Record<BeardId, Part> = {
+	full: (v) =>
+		`<path d="M23.4 47C22 59 36 59 50 59.4C64 59 78 59 76.6 47C81 66 66 88 50 91.5C34 88 19 66 23.4 47Z" fill="${v.hr}"/><path d="M50 62V88" stroke="${v.hd}" stroke-width="1.2" opacity=".5"/><path d="M36 60Q50 66 64 60" fill="none" stroke="${v.hd}" stroke-width="1.2" opacity=".5"/>`,
+	mustache: (v) =>
+		`<path d="M38 60C42 54 48 58 50 60C52 58 58 54 62 60C58 62 53 60 50 61.4C47 60 42 62 38 60Z" fill="${v.hr}"/>`,
+	goatee: (v) =>
+		`<path d="M44 68C46 66 54 66 56 68C56 76 52 78 50 78C48 78 44 76 44 68Z" fill="${v.hr}"/>`,
+};
+
+export const ACCESSORIES: Record<AccessoryId, Part> = {
+	glasses: (v) =>
+		`<g fill="none" stroke="${v.ink}" stroke-width="1.7"><circle cx="39" cy="52" r="8.4"/><circle cx="61" cy="52" r="8.4"/><path d="M47.4 51Q50 49 52.6 51M30.6 50L25 47M69.4 50L75 47"/></g><path d="M33 47L37 45M56 47L60 45" stroke="#fff" stroke-width="1.6" stroke-linecap="round" opacity=".7"/>`,
+	freckles: (v) =>
+		`<g fill="${v.kd}"><circle cx="32.5" cy="60" r="1"/><circle cx="36" cy="62" r="1"/><circle cx="39.5" cy="60.4" r="1"/><circle cx="60.5" cy="60.4" r="1"/><circle cx="64" cy="62" r="1"/><circle cx="67.5" cy="60" r="1"/></g>`,
+	scar: (v) =>
+		`<path d="M64 44L70 57M62.4 51H67M65 47.6H69" stroke="${v.kd}" stroke-width="1.5" stroke-linecap="round" opacity=".85"/><path d="M64 44L70 57" stroke="#e9a0a0" stroke-width=".8" opacity=".7"/>`,
+};

package/src/characters/parts-hats.ts

@@ -0,0 +1,57 @@
+import type { HatId } from "./catalog.ts";
+import type { Part } from "./colors.ts";
+import { star5 } from "./parts-outfits.ts";
+
+const STEEL = "#c7cfdd";
+const STEELD = "#9aa5ba";
+
+export const HATS: Record<HatId, Part> = {
+	none: () => "",
+	wizard: (v) =>
+		`<path d="M30 31C32 20 42 11 60 3C57 13 62 22 70 31Z" fill="${v.p}"/><path d="M30 31C32 20 42 11 60 3" fill="none" stroke="#fff" stroke-width="1.6" opacity=".35"/><ellipse cx="50" cy="30" rx="37" ry="7.6" fill="${v.pd}"/><path d="M30.6 27.6Q50 33 69.4 27.6L70 31Q50 36.5 30 31Z" fill="${v.t}"/>` +
+		star5(49, 16, v.t),
+	helm: (v) =>
+		`<path d="M50 24C42 6 66 -1 80 12C68 9 60 15 57 25Z" fill="${v.p}"/><path d="M23 47C21 23 79 23 77 47L72 39Q50 31 28 39Z" fill="${STEEL}"/><path d="M26 36Q50 24 74 36" fill="none" stroke="#fff" stroke-width="2" opacity=".55"/><path d="M28 39Q50 31 72 39" fill="none" stroke="${v.t}" stroke-width="3"/><circle cx="50" cy="26.5" r="3.4" fill="${v.t}"/>`,
+	mortar: (v) =>
+		`<path d="M30 29V37Q50 43 70 37V29Z" fill="${v.pd}"/><path d="M13 24L50 12L87 24L50 36Z" fill="${v.p}"/><path d="M13 24L50 36L87 24" fill="none" stroke="${v.pd}" stroke-width="1.6"/><path d="M50 24L82 26V38" fill="none" stroke="${v.t}" stroke-width="1.8" stroke-linejoin="round"/><rect x="79.6" y="37" width="4.8" height="7" rx="2" fill="${v.t}"/><circle cx="50" cy="24" r="2.4" fill="${v.t}"/>`,
+	goggcap: (v) =>
+		`<path d="M23 41C23 21 77 21 77 41Q50 33 23 41Z" fill="${v.p}"/><path d="M54 36Q78 32 85 41Q70 43 51 40Z" fill="${v.pd}"/><path d="M23 37Q50 28 77 37V40Q50 31 23 40Z" fill="${v.pd}"/><circle cx="40" cy="27.5" r="7" fill="#bfeaf6" stroke="${v.t}" stroke-width="2.6"/><circle cx="60" cy="27.5" r="7" fill="#bfeaf6" stroke="${v.t}" stroke-width="2.6"/><path d="M36.5 25Q39 23 42 24.5M56.5 25Q59 23 62 24.5" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/>`,
+	hood: (v) =>
+		`<path d="M21 53C20 26 80 26 79 53C76 40 66 33.5 50 33.5C34 33.5 24 40 21 53Z" fill="${v.p}"/><path d="M21 53C20 26 80 26 79 53" fill="none" stroke="${v.pd}" stroke-width="2"/><path d="M70 33Q90 24 93 8Q76 12 66 30Z" fill="${v.t}"/><path d="M72 29Q84 20 91 10" fill="none" stroke="${v.td}" stroke-width="1.2"/>`,
+	beret: (v) =>
+		`<path d="M19 39C16 14 58 4 77 19C86 27 83 40 70 38Q46 32 24 43Z" fill="${v.p}"/><path d="M22 40Q46 31 72 38" fill="none" stroke="${v.t}" stroke-width="2.6" stroke-linecap="round"/><path d="M66 20Q82 10 91 4Q90 18 76 28Z" fill="${v.s}" stroke="${v.t}" stroke-width="1.2"/><path d="M68 22Q80 14 90 6" fill="none" stroke="${v.td}" stroke-width="1"/>`,
+	goggles: (v) =>
+		`<path d="M22 41Q50 28 78 41V45Q50 33 22 45Z" fill="#5a4636"/><circle cx="39" cy="32.4" r="8" fill="#bfeaf6" stroke="${v.t}" stroke-width="3"/><circle cx="61" cy="32.4" r="8" fill="#bfeaf6" stroke="${v.t}" stroke-width="3"/><path d="M34.5 29.5Q38 26.5 42 28.5M56.5 29.5Q60 26.5 64 28.5" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/><rect x="45" y="30" width="10" height="3.4" fill="${v.t}"/>`,
+	coif: (v) =>
+		`<path d="M19 55C17 22 83 22 81 55C77 38 65 32 50 32C35 32 23 38 19 55Z" fill="#fff" stroke="#d9deeb" stroke-width="1.2"/><path d="M24 44Q50 30 76 44" fill="none" stroke="${v.t}" stroke-width="2.4"/><path d="M48.4 18H51.6V23H56.4V26H51.6V32H48.4V26H43.6V23H48.4Z" fill="${v.p}" transform="translate(0 4)"/>`,
+	tallcap: (v) =>
+		`<path d="M31 33V12Q50 6 69 12V33Z" fill="${v.pd}"/><ellipse cx="50" cy="12" rx="19" ry="4.4" fill="${v.p}"/><ellipse cx="50" cy="33" rx="30" ry="5.4" fill="${v.pd}"/><path d="M31 27H69V31H31Z" fill="${v.t}"/><rect x="46" y="25.4" width="8" height="7" rx="1.4" fill="none" stroke="${v.td}" stroke-width="1.6"/>`,
+	tricorn: (v) =>
+		`<path d="M10 36L33 16Q50 10 67 16L90 36Q50 26 10 36Z" fill="${v.pd}"/><path d="M10 36Q50 26 90 36" fill="none" stroke="${v.t}" stroke-width="2.8"/><circle cx="50" cy="22" r="3.6" fill="${v.p}" stroke="${v.t}" stroke-width="1.4"/>`,
+	turban: (v) =>
+		`<path d="M21 46C19 18 81 18 79 46C70 34 30 34 21 46Z" fill="${v.pl}"/><path d="M26 38Q50 22 74 38M23 44Q50 28 77 44" fill="none" stroke="${v.p}" stroke-width="2.4"/><path d="M50 22l2.6 4 4.6.6-3.4 3.2.9 4.6-4.7-2.4-4.7 2.4.9-4.6-3.4-3.2 4.6-.6z" fill="${v.t}" stroke="${v.td}" stroke-width="1"/>`,
+	softcap: (v) =>
+		`<path d="M23 41C20 17 76 12 78 38Q50 32 23 41Z" fill="${v.pl}"/><path d="M23 41Q50 32 78 38" fill="none" stroke="${v.p}" stroke-width="3"/><path d="M68 28Q80 20 88 6Q90 22 78 34Z" fill="${v.s}" stroke="${v.td}" stroke-width="1.2"/><path d="M70 28Q80 20 87 8" fill="none" stroke="${v.td}" stroke-width="1"/>`,
+	hardhat: (v) =>
+		`<path d="M25 41C24 11 76 11 75 41Z" fill="${v.t}"/><rect x="21" y="37" width="58" height="6.4" rx="3.2" fill="${v.td}"/><path d="M50 15V37M40 18V37M60 18V37" stroke="${v.td}" stroke-width="2" opacity=".5"/><circle cx="50" cy="24" r="5" fill="#fff" stroke="${v.ink}" stroke-width="1.6"/><circle cx="50" cy="24" r="2" fill="#ffe68a"/>`,
+	wreath: (v) =>
+		`<g fill="#4fae6c"><ellipse cx="28" cy="40" rx="6" ry="3.2" transform="rotate(60 28 40)"/><ellipse cx="31" cy="31" rx="6" ry="3.2" transform="rotate(30 31 31)"/><ellipse cx="40" cy="26" rx="6" ry="3.2" transform="rotate(8 40 26)"/><ellipse cx="50" cy="24" rx="6" ry="3.2"/><ellipse cx="60" cy="26" rx="6" ry="3.2" transform="rotate(-8 60 26)"/><ellipse cx="69" cy="31" rx="6" ry="3.2" transform="rotate(-30 69 31)"/><ellipse cx="72" cy="40" rx="6" ry="3.2" transform="rotate(-60 72 40)"/></g><g fill="#2f8a50"><ellipse cx="36" cy="28" rx="5" ry="2.6" transform="rotate(-20 36 28)"/><ellipse cx="64" cy="28" rx="5" ry="2.6" transform="rotate(20 64 28)"/></g><circle cx="50" cy="24" r="2.6" fill="${v.p}"/><circle cx="31" cy="32" r="2.2" fill="${v.t}"/><circle cx="69" cy="32" r="2.2" fill="${v.t}"/>`,
+	toque: (v) =>
+		`<path d="M31 37V30C22 28 21 12 36 12C38 5 62 5 64 12C79 12 78 28 69 30V37Z" fill="#fff" stroke="#d9deeb" stroke-width="1.2"/><rect x="31" y="32" width="38" height="6" rx="2" fill="${v.s}" stroke="#d9deeb" stroke-width="1"/><path d="M42 14Q43 24 41 30M58 14Q57 24 59 30" fill="none" stroke="#e1e5f0" stroke-width="1.4"/>`,
+	kettle: (v) =>
+		`<path d="M28 33C28 8 72 8 72 33Z" fill="${STEEL}"/><ellipse cx="50" cy="33" rx="38" ry="6.4" fill="${STEELD}"/><path d="M34 22Q50 12 66 22" fill="none" stroke="#fff" stroke-width="2" opacity=".5"/><circle cx="50" cy="17" r="2.4" fill="${v.t}"/><path d="M28 27H72" stroke="${v.p}" stroke-width="3"/>`,
+	cavalier: (v) =>
+		`<path d="M62 20Q80 4 92 6Q88 24 70 30Z" fill="${v.s}" stroke="${v.t}" stroke-width="1.4"/><path d="M30 33C30 14 70 14 70 33Z" fill="${v.p}"/><path d="M10 35Q50 18 90 35Q50 42 10 35Z" fill="${v.pd}"/><path d="M30 31Q50 36 70 31" fill="none" stroke="${v.t}" stroke-width="2.6"/>`,
+	cowl: (v) =>
+		`<path d="M19 54C16 30 38 14 58 3C58 18 82 32 81 54C75 41 63 34 50 34C37 34 25 41 19 54Z" fill="${v.pd}"/><path d="M26 44Q50 30 74 44" fill="none" stroke="${v.ink}" stroke-width="2" opacity=".3"/>`,
+	headband: (v) =>
+		`<path d="M22 39Q50 29 78 39V44.5Q50 34.5 22 44.5Z" fill="${v.p}"/><path d="M76 40Q86 38 90 46M76 42Q88 46 88 56" fill="none" stroke="${v.p}" stroke-width="3.2" stroke-linecap="round"/><circle cx="50" cy="31.5" r="2.4" fill="${v.t}"/>`,
+	fcap: (v) =>
+		`<path d="M23 42C22 20 78 18 77 40Q50 31 23 42Z" fill="${v.pd}"/><path d="M23 42Q50 31 77 40" fill="none" stroke="${v.t}" stroke-width="2.4"/><path d="M60 26Q78 22 94 8Q86 28 70 34Z" fill="${v.s}" stroke="${v.td}" stroke-width="1.2"/><path d="M62 28Q80 22 92 10" fill="none" stroke="${v.td}" stroke-width="1"/>`,
+	sailor: (v) =>
+		`<path d="M26 38C26 18 74 18 74 38Z" fill="#fff" stroke="#d9deeb" stroke-width="1.2"/><rect x="25" y="34" width="50" height="7" rx="3.4" fill="${v.pd}"/><path d="M50 14V22" stroke="${v.p}" stroke-width="3.4" stroke-linecap="round"/><path d="M26 28H74" stroke="${v.p}" stroke-width="2" opacity=".6"/>`,
+	jester: (v) =>
+		`<path d="M26 40C14 30 12 14 18 6C28 16 32 26 42 33Z" fill="${v.p}"/><path d="M74 40C86 30 88 14 82 6C72 16 68 26 58 33Z" fill="${v.s}" stroke="${v.sd}" stroke-width="1"/><path d="M26 40C26 28 74 28 74 40Q50 34 26 40Z" fill="${v.pd}"/><circle cx="18" cy="6" r="4" fill="${v.t}" stroke="${v.td}" stroke-width="1"/><circle cx="82" cy="6" r="4" fill="${v.t}" stroke="${v.td}" stroke-width="1"/><circle cx="50" cy="31" r="3.4" fill="${v.t}"/>`,
+	winghelm: (v) =>
+		`<path d="M24 36Q6 31 3 14Q18 14 30 27Z" fill="${v.s}" stroke="${v.t}" stroke-width="1.6"/><path d="M76 36Q94 31 97 14Q82 14 70 27Z" fill="${v.s}" stroke="${v.t}" stroke-width="1.6"/><path d="M23 47C21 23 79 23 77 47L72 39Q50 31 28 39Z" fill="#e6eaf3"/><path d="M28 39Q50 31 72 39" fill="none" stroke="${v.t}" stroke-width="3"/><path d="M26 36Q50 24 74 36" fill="none" stroke="#fff" stroke-width="2" opacity=".7"/><path d="M50 26l2.4 4.4 4.8.8-3.4 3.4.8 4.8-4.6-2.2-4.6 2.2.8-4.8-3.4-3.4 4.8-.8z" fill="${v.t}" transform="translate(0 -1)"/>`,
+};