@originkit/avatars 0.0.0-stage → 0.2.0

package/dist/controls.d.ts

@@ -0,0 +1,125 @@
+/**
+ * What the control panel can change.
+ *
+ * Generators read every value through a trait key, so a control is just a way of
+ * fixing some keys (see `Overrides`). Each avatar type describes its own controls
+ * from its current traits, which is what lets them appear and change with the avatar.
+ */
+import { type Overrides, type Traits } from "./traits.ts";
+/** A change to the overrides. `undefined` hands a key back to the name. */
+export type Patch = Record<string, number | string | undefined>;
+export interface Option {
+    id: string;
+    label: string;
+    color?: string;
+    set: Patch;
+}
+export interface ChoiceControl {
+    type: "choice";
+    id: string;
+    label: string;
+    layout: "segmented" | "list" | "swatches" | "switch";
+    options: Option[];
+    selected: string;
+    /** Offers any colour too: the override it writes, and the colour showing now. */
+    custom?: {
+        id: string;
+        color: string;
+    };
+}
+export interface SliderControl {
+    type: "slider";
+    id: string;
+    label: string;
+    /** The position from 0 to 1, which is exactly what the generator reads. */
+    value: number;
+    display: string;
+    /** The shown number at either end, so its box can be typed in and stepped in its own units. */
+    range?: [number, number];
+    /** Words for either end of the slider, and a line saying what the current setting means. */
+    ends?: [string, string];
+    note?: string;
+}
+/** Several colours set together, each by hand. */
+export interface ColorsControl {
+    type: "colors";
+    id: string;
+    label: string;
+    colors: {
+        id: string;
+        color: string;
+    }[];
+}
+/** Words of the visitor's own. Left empty, the generator's are shown as the placeholder. */
+export interface TextControl {
+    type: "text";
+    id: string;
+    label: string;
+    value: string;
+    placeholder: string;
+    maxLength: number;
+}
+/** A colour field as in a design tool: hex and opacity, each under its own key. */
+export interface FillControl {
+    type: "fill";
+    id: string;
+    label: string;
+    color: string;
+    /** From 0 to 1. */
+    opacity: number;
+    keys: {
+        color: string;
+        opacity: string;
+    };
+    /** Colours offered in its picker. */
+    presets: string[];
+}
+export type Control = ChoiceControl | SliderControl | ColorsControl | TextControl | FillControl;
+export interface Section {
+    title: string;
+    controls: Control[];
+}
+export type ControlBuilder = (name: string, overrides: Overrides) => Section[];
+/**
+ * Lifts the controls named in `ids` out of their sections, in that order, and leaves
+ * the rest behind. Controls come and go with the avatar, so a missing id is skipped.
+ */
+export declare function splitEssentials(sections: Section[], ids: string[]): {
+    essentials: Control[];
+    advanced: Section[];
+};
+export interface Entry {
+    label: string;
+    /** How much of the range this option takes, matching the generator's odds. */
+    weight?: number;
+    color?: string;
+}
+type Layout = ChoiceControl["layout"];
+/** Which entry a position lands on, for generators that pick by weight. */
+export declare const bandAt: (entries: {
+    weight?: number;
+}[], position: number) => number;
+/** A value the generator picks from a list, under one key. */
+export declare function choice(t: Traits, key: string, label: string, layout: Layout, entries: Entry[]): ChoiceControl;
+/** A whole-avatar turn in degrees: a small one from the name, or any at all set by hand. */
+export declare function turnOf(t: Traits, natural: number): number;
+export declare function turnSlider(t: Traits, natural: number): SliderControl;
+/** Makes each of a control's options also drop the colour picked by hand for `key`. */
+export declare const clearingColor: (control: ChoiceControl, key: string) => ChoiceControl;
+/** Swatches the generator picks from under one key, and any other colour by hand. */
+export declare function palette(t: Traits, key: string, label: string, colors: string[]): ChoiceControl;
+/** The same, for a colour no name picks: everything starts on the first, whatever its name. */
+export declare function fixedPalette(t: Traits, key: string, label: string, colors: string[]): ChoiceControl;
+/** A list that may not appear at all: the generator rolls `chanceKey`, then picks from `kindKey`. */
+export declare function optional(t: Traits, chanceKey: string, percent: number, kindKey: string, label: string, layout: Layout, entries: Entry[]): ChoiceControl;
+/** Something the generator either includes or leaves out. */
+export declare function toggle(t: Traits, key: string, percent: number, label: string): ChoiceControl;
+/** Normally worked out from the avatar, and can be fixed by hand. `current` is what it worked out. */
+export declare function automatic(t: Traits, key: string, label: string, labels: string[], current: string): ChoiceControl;
+/** A continuous trait, shown in the units it ends up in. */
+export declare function slider(t: Traits, key: string, label: string, min: number, max: number, unit?: string): SliderControl;
+/** The part of the art's variants a control offers, keeping their odds. */
+export declare const fromVariants: (variants: object, label: (name: string, i: number) => string) => Entry[];
+/** `bigPupils` to `Big pupils`, for names taken from the art. */
+export declare const spaced: (name: string) => string;
+export {};

package/dist/controls.js

@@ -0,0 +1,220 @@
+/**
+ * What the control panel can change.
+ *
+ * Generators read every value through a trait key, so a control is just a way of
+ * fixing some keys (see `Overrides`). Each avatar type describes its own controls
+ * from its current traits, which is what lets them appear and change with the avatar.
+ */
+import { hexToInt } from "./colors.js";
+import { colorKey } from "./traits.js";
+/**
+ * Lifts the controls named in `ids` out of their sections, in that order, and leaves
+ * the rest behind. Controls come and go with the avatar, so a missing id is skipped.
+ */
+export function splitEssentials(sections, ids) {
+    const all = sections.flatMap((section) => section.controls);
+    const essentials = ids.flatMap((id) => all.filter((control) => control.id === id));
+    const rest = sections.map((section) => ({
+        ...section,
+        controls: section.controls.filter((control) => !essentials.includes(control)),
+    }));
+    return { essentials, advanced: regroup(rest) };
+}
+/**
+ * More options, in the same groups and order for every type. Possibilities leads, with no
+ * heading of its own, as it governs all the rest.
+ */
+const GROUPS = ["", "Shape", "Face", "Details", "Colour", "Container"];
+/** Where a type's own sections land when nothing about a control says otherwise. */
+const FROM_SECTION = {
+    Colour: "Colour",
+    Paint: "Colour",
+    Eyes: "Face",
+    Face: "Face",
+    Words: "Details",
+    Parts: "Details",
+    Accessories: "Details",
+    Hair: "Details",
+    Lines: "Details",
+    Reactions: "Details",
+    Container: "Container",
+};
+/** A control's group, read from what it sets. The type's own sections are only a fallback. */
+function groupOf(control, section) {
+    const id = control.id;
+    if (id === "variance")
+        return "";
+    if (/container/.test(id))
+        return "Container";
+    // A type's Colour section holds only colours, so its word is taken as is.
+    if (FROM_SECTION[section] === "Colour")
+        return "Colour";
+    if (/colou?r|paint|tile|fill|skin|palette|^hue|^tone|ink|fur|^glow|frost|^pool|grain|blend|^mask|speckle/.test(id))
+        return "Colour";
+    if (/hover|effect|hat|glasses|earring|beard|^hair|mark|spots|^top$|^side|straps|studs|topper|holes|wobble|weight|gesture|title|lumps|clothing/.test(id))
+        return "Details";
+    if (/eye|brow|mouth|grin|teeth|^face|mood|feeling|expression|emotion|cheek|nose|blush|iris|formation|gaze|patch/.test(id))
+        return "Face";
+    if (/^pose|mirrored|roundness|angle|^body|^head|width|waist|softness|turn|depth|fluff|stretch/.test(id))
+        return "Shape";
+    return FROM_SECTION[section] ?? (GROUPS.includes(section) ? section : "Shape");
+}
+function regroup(sections) {
+    const groups = new Map();
+    for (const section of sections) {
+        for (const control of section.controls) {
+            const group = groupOf(control, section.title);
+            groups.set(group, [...(groups.get(group) ?? []), control]);
+        }
+    }
+    const rank = (title) => (GROUPS.includes(title) ? GROUPS.indexOf(title) : GROUPS.length);
+    return [...groups]
+        .map(([title, controls]) => ({ title, controls }))
+        .sort((a, b) => rank(a.title) - rank(b.title));
+}
+/** Just below 1, because a position of exactly 1 is past the end of every list. */
+const TOP = 0.999;
+/** Splits [0, 1) in proportion to the weights. Each band's middle selects that entry. */
+function bands(entries) {
+    const total = entries.reduce((sum, entry) => sum + (entry.weight ?? 1), 0);
+    let start = 0;
+    return entries.map((entry) => {
+        const width = (entry.weight ?? 1) / total;
+        const band = { ...entry, start, end: start + width, middle: start + width / 2 };
+        start += width;
+        return band;
+    });
+}
+/** Which entry a position lands on, for generators that pick by weight. */
+export const bandAt = (entries, position) => {
+    const found = bands(entries).findIndex((band) => position < band.end);
+    return found === -1 ? entries.length - 1 : found;
+};
+/** A value the generator picks from a list, under one key. */
+export function choice(t, key, label, layout, entries) {
+    return {
+        type: "choice",
+        id: key,
+        label,
+        layout,
+        options: bands(entries).map((band, i) => ({
+            id: String(i),
+            label: band.label,
+            color: band.color,
+            set: { [key]: band.middle },
+        })),
+        selected: String(bandAt(entries, t(key))),
+    };
+}
+/** A whole-avatar turn in degrees: a small one from the name, or any at all set by hand. */
+export function turnOf(t, natural) {
+    const set = t.forced("angle");
+    return set === undefined ? (t("angle") * 2 - 1) * natural : set * 360 - 180;
+}
+export function turnSlider(t, natural) {
+    const turn = turnOf(t, natural);
+    return { type: "slider", id: "angle", label: "Angle", value: (turn + 180) / 360, display: `${Math.round(turn)}°`, range: [-180, 180] };
+}
+/** Makes each of a control's options also drop the colour picked by hand for `key`. */
+export const clearingColor = (control, key) => ({
+    ...control,
+    options: control.options.map((option) => ({ ...option, set: { ...option.set, [colorKey(key)]: undefined } })),
+});
+/** Swatches the generator picks from under one key, and any other colour by hand. */
+export function palette(t, key, label, colors) {
+    const control = clearingColor(choice(t, key, label, "swatches", colors.map((color) => ({ label: color, color }))), key);
+    const picked = t.color(key);
+    return {
+        ...control,
+        selected: picked ? "custom" : control.selected,
+        custom: { id: colorKey(key), color: picked ?? control.options[Number(control.selected)].color },
+    };
+}
+/** The same, for a colour no name picks: everything starts on the first, whatever its name. */
+export function fixedPalette(t, key, label, colors) {
+    const id = colorKey(key);
+    const current = t.color(key) ?? colors[0];
+    return {
+        type: "choice",
+        id: key,
+        label,
+        layout: "swatches",
+        options: colors.map((color, i) => ({
+            id: color,
+            label: color,
+            color,
+            set: { [id]: i === 0 ? undefined : hexToInt(color) },
+        })),
+        selected: current,
+        custom: { id, color: current },
+    };
+}
+/** A list that may not appear at all: the generator rolls `chanceKey`, then picks from `kindKey`. */
+export function optional(t, chanceKey, percent, kindKey, label, layout, entries) {
+    const present = t(chanceKey) * 100 < percent;
+    return {
+        type: "choice",
+        id: chanceKey,
+        label,
+        layout,
+        options: [
+            { id: "none", label: "None", set: { [chanceKey]: TOP } },
+            ...bands(entries).map((band, i) => ({
+                id: String(i),
+                label: band.label,
+                color: band.color,
+                set: { [chanceKey]: 0, [kindKey]: band.middle },
+            })),
+        ],
+        selected: present ? String(bandAt(entries, t(kindKey))) : "none",
+    };
+}
+/** Something the generator either includes or leaves out. */
+export function toggle(t, key, percent, label) {
+    return {
+        type: "choice",
+        id: key,
+        label,
+        layout: "switch",
+        options: [
+            { id: "on", label: "On", set: { [key]: 0 } },
+            { id: "off", label: "Off", set: { [key]: TOP } },
+        ],
+        selected: t(key) * 100 < percent ? "on" : "off",
+    };
+}
+/** Normally worked out from the avatar, and can be fixed by hand. `current` is what it worked out. */
+export function automatic(t, key, label, labels, current) {
+    const forced = t.forced(key);
+    return {
+        type: "choice",
+        id: key,
+        label,
+        layout: "list",
+        options: [
+            { id: "auto", label: `Auto (${current})`, set: { [key]: undefined } },
+            ...labels.map((entry, i) => ({ id: String(i), label: entry, set: { [key]: (i + 0.5) / labels.length } })),
+        ],
+        selected: forced === undefined ? "auto" : String(Math.floor(forced * labels.length)),
+    };
+}
+/** A continuous trait, shown in the units it ends up in. */
+export function slider(t, key, label, min, max, unit = "") {
+    const value = t(key);
+    const shown = min + value * (max - min);
+    return {
+        type: "slider",
+        id: key,
+        label,
+        value,
+        display: `${Number.isInteger(min) && Number.isInteger(max) && max - min > 10 ? Math.round(shown) : shown.toFixed(1)}${unit}`,
+        range: [min, max],
+    };
+}
+/** The part of the art's variants a control offers, keeping their odds. */
+export const fromVariants = (variants, label) => Object.entries(variants).map(([name, variant], i) => ({ label: label(name, i), weight: variant.weight ?? 1 }));
+/** `bigPupils` to `Big pupils`, for names taken from the art. */
+export const spaced = (name) => {
+    const words = name.replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase();
+    return words.charAt(0).toUpperCase() + words.slice(1);
+};

package/dist/critters/calming.d.ts

@@ -0,0 +1,8 @@
+/**
+ * What Possibilities calms on a critter. Low keeps the eight mildest feelings, one for each
+ * variant, and draws the eyes' size, gap and height and the mouth's size towards their middle.
+ * Indices are into `FEELINGS`, mildest first.
+ */
+import type { Calming } from "../possibilities.ts";
+export declare const CALMING: Calming;
+export declare const NOTES: [string, string, string];

package/dist/critters/calming.js

@@ -0,0 +1,18 @@
+/**
+ * What Possibilities calms on a critter. Low keeps the eight mildest feelings, one for each
+ * variant, and draws the eyes' size, gap and height and the mouth's size towards their middle.
+ * Indices are into `FEELINGS`, mildest first.
+ */
+export const CALMING = {
+    features: /^eye\.(size|gap|y)$|^mouth\.(size|y)$|^nose\.size$/,
+    lists: {
+        // Happy, Grin, Joy, Sleepy, Smug, Surprised, Bored, Grumpy, then Sad and Angry.
+        feeling: [10, 8, [0, 4, 7, 3, 6, 2, 9, 1, 5, 8]],
+    },
+    rarer: ["spots", "blush"],
+};
+export const NOTES = [
+    "happy, sleepy and smug faces, the eyes and mouth in their usual places.",
+    "more feelings, bigger or smaller eyes and mouths.",
+    "every feeling, sad and angry too, at any size.",
+];

package/dist/critters/controls.d.ts

@@ -0,0 +1,2 @@
+import { type ControlBuilder } from "../controls.ts";
+export declare const controls: ControlBuilder;

package/dist/critters/controls.js

@@ -0,0 +1,49 @@
+import { choice, palette, slider, toggle } from "../controls.js";
+import { narrowed, possibilitiesSlider } from "../possibilities.js";
+import { CALMING, NOTES } from "./calming.js";
+import { BLUSH_PERCENT, BROWS, COLOURS, critterTraits, EYE_STYLES, FEELINGS, IRISES, KINDS, kindOf, SPOTS_PERCENT, styledOf } from "./index.js";
+const titled = (word) => word[0].toUpperCase() + word.slice(1);
+/** A choice that shows what's drawn: the creature's own until one is picked. */
+const own = (control, selected) => ({ ...control, selected: String(selected) });
+export const controls = (name, overrides) => {
+    const t = critterTraits(name, overrides);
+    const kind = kindOf(name, overrides);
+    const styled = styledOf(name, overrides);
+    // A bill or a beak stands in for the mouth, and a cyclops has no gap between its eyes.
+    const mouthed = kind.feature !== "bill" && kind.feature !== "beak";
+    return [
+        {
+            title: "Critter",
+            controls: [
+                // Showing the creature drawn, which for a variant is a step on from its name's own.
+                { ...choice(t, "kind", "Creature", "list", KINDS.map(({ name: label }) => ({ label }))), selected: String(KINDS.indexOf(kind)) },
+                narrowed(choice(t, "feeling", "Feeling", "list", FEELINGS.map(({ name: label }) => ({ label }))), t, CALMING),
+                possibilitiesSlider(t, NOTES),
+                slider(t, "eye.size", "Eye size", 0, 100, "%"),
+                ...(kind.single ? [] : [slider(t, "eye.gap", "Eye gap", 0, 100, "%")]),
+                slider(t, "eye.y", "Eye height", -100, 100, "%"),
+                ...(mouthed ? [slider(t, "mouth.size", "Mouth size", 0, 100, "%")] : []),
+                own(choice(t, "eye.style", "Eyes", "list", EYE_STYLES.map((style) => ({ label: titled(style) }))), EYE_STYLES.indexOf(styled.eyes)),
+                own(choice(t, "brows", "Brows", "list", BROWS.map((style) => ({ label: titled(style) }))), BROWS.indexOf(styled.brows)),
+                {
+                    ...choice(t, "patch", "Eye patches", "list", [{ label: "On" }, { label: "Off" }]),
+                    selected: styled.patch ? "0" : "1",
+                    options: [
+                        { id: "0", label: "On", set: { patch: 0 } },
+                        { id: "1", label: "Off", set: { patch: 0.999 } },
+                    ],
+                    layout: "switch",
+                },
+                toggle(t, "spots", SPOTS_PERCENT, "Spots"),
+                toggle(t, "blush", BLUSH_PERCENT, "Blush"),
+            ],
+        },
+        {
+            title: "Colour",
+            controls: [
+                palette(t, "body", "Colour", COLOURS),
+                palette(t, "iris", "Iris", IRISES),
+            ],
+        },
+    ];
+};

package/dist/critters/index.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Critters: original creatures in the style of close-up flat face tiles. The face fills the
+ * tile and runs off its edges, in one bold body colour with a darker tone for lids, brows and
+ * creases and a lighter one for patches, muzzles and jaws. Eyes are big whites with an iris
+ * and a glint, or glossy beads, under lids that set the mood. Each type is a creature of its
+ * own, as the animals are, and every type can feel every feeling.
+ *
+ * Every part is drawn from numbers in the 100×100 frame, so the live avatar can move its lids,
+ * pupils and brows, and the thumbnail is the very same picture at rest.
+ */
+import { type Overrides, type Traits } from "../traits.ts";
+/** Bold flat body colours. Neighbours are unlike. */
+export declare const COLOURS: string[];
+/** Rich iris colours, as the references' are, rather than a dull tint of the body's. */
+export declare const IRISES: string[];
+type Mouth = "smile" | "grin" | "laugh" | "flat" | "frown" | "o" | "smirk" | "grit";
+/** A feeling, as lids, brows, pupils and a mouth. The same feeling reads on every creature. */
+interface Feeling {
+    name: string;
+    /** How far the upper lid is down, from 0 (wide open) to 1 (shut). */
+    lid: number;
+    /** The lid's tilt in degrees: above 0 lowers it towards the nose, as in anger. */
+    tilt: number;
+    /** How far the brows are raised, and their tilt as for the lid. */
+    lift: number;
+    browTilt: number;
+    /** The pupils' size, and where they look, as shares of their reach. */
+    pupil: number;
+    look: [number, number];
+    mouth: Mouth;
+    /** Shut in happiness, as two arcs. */
+    closed?: boolean;
+}
+/** Neighbours are as unlike as they can be. */
+export declare const FEELINGS: Feeling[];
+type EyeStyle = "white" | "bead";
+type Brows = "arcs" | "pads" | "wedges" | "none";
+type Feature = "nose" | "bear" | "bill" | "beak" | "jaw" | "none";
+interface Kind {
+    name: string;
+    eyes: EyeStyle;
+    /** One eye or two, their radius, height and how far each is from the middle. */
+    single?: boolean;
+    r: number;
+    y: number;
+    gap: number;
+    /** A lighter patch round each eye, as a share of its radius. */
+    patch?: number;
+    brows: Brows;
+    feature: Feature;
+    /** Its mouth's height and half-width, and whether its smiles are toothy. */
+    mouthY: number;
+    mouthW: number;
+    toothy: boolean;
+}
+/** The creatures, each its own build. Neighbours are as unlike as they can be. */
+export declare const KINDS: Kind[];
+export declare const critterTraits: (name: string, overrides?: Overrides) => Traits;
+/**
+ * Its creature. Variants step on through them from the name's own, as the animals' are each a
+ * different animal, keeping to those Possibilities offers. Set by hand, it's that one.
+ */
+export declare function kindOf(name: string, overrides?: Overrides): Kind;
+export declare const feelingOf: (t: Traits) => Feeling;
+export declare const EYE_STYLES: EyeStyle[];
+export declare const BROWS: Brows[];
+/** How often a name is spotted or blushes, in percent. */
+export declare const SPOTS_PERCENT = 25;
+export declare const BLUSH_PERCENT = 30;
+/**
+ * Its creature as drawn: its own build, with its eyes, brows and patches as picked by hand if
+ * they are. Unpicked, every creature keeps its own, as each is built to.
+ */
+export declare function styledOf(name: string, overrides?: Overrides): Kind;
+/** Its colours: the body, and the tones every part is drawn in, all from the body's. */
+export declare function coloursOf(t: Traits): {
+    body: string;
+    lid: string;
+    shade: string;
+    dark: string;
+    light: string;
+    iris: string;
+    cream: string;
+    plate: string;
+    comb: string;
+    beak: string;
+    bill: string;
+};
+export interface Critter {
+    kind: string;
+    feeling: string;
+    body: string;
+    /** Drawn behind the eyes: patches, muzzles, jaws and noses. */
+    back: string;
+    eyes: {
+        left: string;
+        right: string;
+    };
+    brows: string;
+    mouth: string;
+    /** The bill or beak, drawn over the mouth. */
+    front: string;
+    blink: {
+        period: number;
+        delay: number;
+    };
+}
+/** `id` keeps each critter's clips its own where many share a page. */
+export declare function createCritter(name: string, overrides: Overrides | undefined, id?: string): Critter;
+export declare const CORNER = 22.22;
+/** The critter at rest, for thumbnails. */
+export declare function critterSvg(name: string, overrides?: Overrides): string;
+export {};