@originkit/avatars 0.0.0-stage → 0.1.0

package/dist/faces/calming.d.ts

@@ -0,0 +1,8 @@
+/**
+ * What Possibilities calms on a face. Eight mouths stay at the lowest, one for each variant.
+ * The art lists its parts in no useful order, and the first brows are the angriest, so the
+ * calm ones are named here, chosen by looking at each: round open eyes, gentle brows, smiles.
+ */
+import type { Calming } from "../possibilities.ts";
+export declare const CALMING: Calming;
+export declare const NOTES: [string, string, string];

package/dist/faces/calming.js

@@ -0,0 +1,20 @@
+/**
+ * What Possibilities calms on a face. Eight mouths stay at the lowest, one for each variant.
+ * The art lists its parts in no useful order, and the first brows are the angriest, so the
+ * calm ones are named here, chosen by looking at each: round open eyes, gentle brows, smiles.
+ */
+export const CALMING = {
+    lists: {
+        mouth: [30, 8, [0, 24, 4, 25, 1, 8, 2, 6, 22, 3]],
+        "mouth.hover": [30, 8, [0, 24, 4, 25, 1, 8, 2, 6, 22, 3]],
+        eyes: [26, 3, [23, 24, 25, 0, 1, 2, 7]],
+        eyebrows: [15, 2, [8, 9, 10, 11, 12, 14, 4, 5]],
+        "glasses.variant": [5, 1],
+    },
+    rarer: ["glasses"],
+};
+export const NOTES = [
+    "a few calm eyes and brows, simple mouths and hardly ever glasses.",
+    "more eyes, brows and mouths, and glasses now and then.",
+    "every eye, brow, mouth and pair of glasses.",
+];

package/dist/faces/controls.d.ts

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

package/dist/faces/controls.js

@@ -0,0 +1,38 @@
+import { automatic, choice, fromVariants, optional, palette, spaced } from "../controls.js";
+import { calmed, narrowed, possibilitiesSlider } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING, NOTES } from "./calming.js";
+import definition from "./adventurer-neutral.json" with { type: "json" };
+import { createFace, EFFECTS, SKINS } from "./index.js";
+const { eyes, eyebrows, mouth, glasses } = definition.components;
+const numbered = (label) => (_, i) => `${label} ${i + 1}`;
+export const controls = (name, overrides) => {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const list = (control) => narrowed(control, t, CALMING);
+    const effect = createFace(name, "", overrides).effect;
+    return [
+        {
+            title: "Face",
+            controls: [
+                palette(t, "skin", "Colour", SKINS),
+                possibilitiesSlider(t, NOTES),
+                list(choice(t, "eyes", "Eyes", "list", fromVariants(eyes.variants, numbered("Eyes")))),
+                list(choice(t, "eyebrows", "Brows", "list", fromVariants(eyebrows.variants, numbered("Brows")))),
+                list(choice(t, "mouth", "Mouth", "list", fromVariants(mouth.variants, numbered("Mouth")))),
+            ],
+        },
+        {
+            title: "Accessories",
+            controls: [
+                optional(t, "glasses", glasses.probability, "glasses.variant", "Glasses", "list", fromVariants(glasses.variants, (variant, i) => (variant === "variant01" ? "Shades" : `Style ${i}`))),
+            ],
+        },
+        {
+            title: "Reactions",
+            controls: [
+                list(choice(t, "mouth.hover", "On hover", "list", fromVariants(mouth.variants, numbered("Mouth")))),
+                automatic(t, "effect.forced", "Tap effect", EFFECTS.map(spaced), spaced(effect)),
+            ],
+        },
+    ];
+};

package/dist/faces/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Faces from "Adventurer Neutral" by Lisa Wischofsky (CC BY 4.0), drawn from its
+ * definition in `adventurer-neutral.json`. CC BY needs a visible credit wherever
+ * this is published (see LICENSE). The changes are the separated pupils and the
+ * reactions below.
+ */
+import { type Variant } from "../art.ts";
+import { type Overrides } from "../traits.ts";
+type Part = "eyes" | "eyebrows" | "mouth" | "glasses";
+export declare const SKINS: string[];
+export declare const EFFECTS: readonly ["confetti", "hearts", "stars", "shine", "snooze", "storm"];
+export type Effect = (typeof EFFECTS)[number];
+/**
+ * Draws a pair of eyes with the pupils free to move, keeping the art's drawing
+ * order. Each pupil gets a `data-pupils` group, clipped to the whites so it can
+ * never slide out of the eye. A white straight after a pupil is a glint on it, and
+ * travels with it. Any other white belongs to an eye.
+ */
+export declare function drawEyes(variant: Variant, colors: Record<string, string>, idPrefix: string): {
+    markup: string;
+    open: boolean;
+};
+export interface Face {
+    skin: string;
+    at: Record<Part, string>;
+    eyes: string;
+    eyebrows: string;
+    glasses: string | null;
+    /** The mouth at rest, while hovered, and while reacting to a tap. */
+    mouths: {
+        rest: string;
+        hover: string;
+        tap: string;
+    };
+    /** Whether there are pupils to move. Closed eyes have none. */
+    eyesOpen: boolean;
+    effect: Effect;
+    /** Seconds, so a row of faces does not blink as one. */
+    blinkDelay: number;
+}
+export declare function createFace(name: string, idPrefix: string, overrides?: Overrides): Face;
+/** The face at rest, as a picture. */
+export declare function faceSvg(name: string, overrides?: Overrides): string;
+export {};

package/dist/faces/index.js

@@ -0,0 +1,108 @@
+/**
+ * Faces from "Adventurer Neutral" by Lisa Wischofsky (CC BY 4.0), drawn from its
+ * definition in `adventurer-neutral.json`. CC BY needs a visible credit wherever
+ * this is published (see LICENSE). The changes are the separated pupils and the
+ * reactions below.
+ */
+import { calmed } from "../possibilities.js";
+import { CALMING } from "./calming.js";
+import { draw, pickVariant } from "../art.js";
+import { createTraits } from "../traits.js";
+import definition from "./adventurer-neutral.json" with { type: "json" };
+const components = definition.components;
+/** Where the art places each part on its 400×400 canvas. */
+const placement = Object.fromEntries(definition.canvas.elements.map((element) => [element.name, element.attributes.transform]));
+const INK = Object.fromEntries(Object.entries(definition.colors)
+    .filter(([name]) => name !== "background")
+    .map(([name, color]) => [name, color.values[0]]));
+export const SKINS = definition.colors.background.values;
+export const EFFECTS = ["confetti", "hearts", "stars", "shine", "snooze", "storm"];
+const hasTag = (variant, tag) => variant.tags?.includes(tag) ?? false;
+const fillOf = (element) => {
+    const fill = element.attributes?.fill;
+    return typeof fill === "object" ? fill.name : null;
+};
+const tagged = (variants, tag) => Object.keys(variants).filter((name) => hasTag(variants[name], tag));
+/**
+ * Draws a pair of eyes with the pupils free to move, keeping the art's drawing
+ * order. Each pupil gets a `data-pupils` group, clipped to the whites so it can
+ * never slide out of the eye. A white straight after a pupil is a glint on it, and
+ * travels with it. Any other white belongs to an eye.
+ */
+export function drawEyes(variant, colors, idPrefix) {
+    const clip = `${idPrefix}whites`;
+    const whites = [];
+    const pieces = [];
+    let onPupil = false;
+    for (const element of variant.elements) {
+        const fill = fillOf(element);
+        const moves = fill === "eyes" || (onPupil && fill === "sclera");
+        if (fill === "sclera" && !moves)
+            whites.push(element);
+        pieces.push({ element, moves });
+        onPupil = moves;
+    }
+    const open = whites.length > 0 && pieces.some((piece) => piece.moves);
+    const markup = pieces
+        .map(({ element, moves }) => {
+        const art = draw(element, colors, idPrefix);
+        return open && moves ? `<g clip-path="url(#${clip})"><g data-pupils="">${art}</g></g>` : art;
+    })
+        .join("");
+    const clipPath = `<clipPath id="${clip}">${whites.map((element) => draw(element, colors, idPrefix)).join("")}</clipPath>`;
+    return { markup: open ? clipPath + markup : markup, open };
+}
+/** A face's tap effect follows from how it was generated. */
+function chooseEffect(t, eyesOpen, restingMouth, glasses) {
+    const forced = t.forced("effect.forced");
+    if (forced !== undefined)
+        return EFFECTS[Math.floor(forced * EFFECTS.length)];
+    if (glasses && hasTag(glasses, "eyewear:sunglasses"))
+        return "shine";
+    if (!eyesOpen)
+        return "snooze";
+    if (hasTag(restingMouth, "mood:negative"))
+        return "storm";
+    return t.pick("effect", ["confetti", "hearts", "stars"]);
+}
+export function createFace(name, idPrefix, overrides) {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const render = (variant) => variant.elements.map((element) => draw(element, INK, idPrefix)).join("");
+    const eyes = drawEyes(components.eyes.variants[pickVariant(t, "eyes", components.eyes.variants)], INK, idPrefix);
+    const eyebrows = components.eyebrows.variants[pickVariant(t, "eyebrows", components.eyebrows.variants)];
+    const glasses = t("glasses") * 100 < components.glasses.probability
+        ? components.glasses.variants[pickVariant(t, "glasses.variant", components.glasses.variants)]
+        : null;
+    const mouthVariants = components.mouth.variants;
+    const restingMouth = pickVariant(t, "mouth", mouthVariants);
+    const happy = tagged(mouthVariants, "mood:positive");
+    const unhappy = tagged(mouthVariants, "mood:negative");
+    const effect = chooseEffect(t, eyes.open, mouthVariants[restingMouth], glasses);
+    const tapMouths = effect === "storm" ? unhappy : happy;
+    return {
+        skin: t.color("skin") ?? t.pick("skin", SKINS),
+        at: placement,
+        eyes: eyes.markup,
+        eyebrows: render(eyebrows),
+        glasses: glasses && render(glasses),
+        mouths: {
+            rest: render(mouthVariants[restingMouth]),
+            hover: render(mouthVariants[pickVariant(t, "mouth.hover", mouthVariants, happy)]),
+            tap: render(mouthVariants[pickVariant(t, "mouth.tap", mouthVariants, tapMouths)]),
+        },
+        eyesOpen: eyes.open,
+        effect,
+        blinkDelay: t.num("blink", 0, 4),
+    };
+}
+/** The face at rest, as a picture. */
+export function faceSvg(name, overrides) {
+    const face = createFace(name, "f-", overrides);
+    return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" fill="none">` +
+        `<rect width="400" height="400" rx="96" fill="${face.skin}"/>` +
+        `<g transform="${face.at.eyes}">${face.eyes}</g>` +
+        `<g transform="${face.at.eyebrows}">${face.eyebrows}</g>` +
+        `<g transform="${face.at.mouth}">${face.mouths.rest}</g>` +
+        (face.glasses ? `<g transform="${face.at.glasses}">${face.glasses}</g>` : "") +
+        `</svg>`);
+}

package/dist/glances/calming.d.ts

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

package/dist/glances/calming.js

@@ -0,0 +1,16 @@
+/**
+ * What Possibilities calms on a glance. Low keeps the eight plainest eyes for each side, one for
+ * each variant, and draws the size, the gap, the height and the tilt towards their middle.
+ * Indices are into `EYES`, plainest first.
+ */
+// Full, Lid, Sleepy, Smile, Pill, Oval, Dot, Dash, then Dome, Ring, Slant, Moon and Squint.
+const PLAINEST = [13, 8, [0, 1, 4, 2, 3, 12, 9, 6, 7, 5, 8, 10, 11]];
+export const CALMING = {
+    features: /^eye\.(size|gap|y)$|^tilt$/,
+    lists: { "eye.left": PLAINEST, "eye.right": PLAINEST },
+};
+export const NOTES = [
+    "plain circles, lids, smiles and pills, upright and evenly spaced.",
+    "more shapes, a little tilted, set wider or closer.",
+    "every eye, up to moons, rings, slants and squints, at any size, gap and tilt.",
+];

package/dist/glances/controls.d.ts

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

package/dist/glances/controls.js

@@ -0,0 +1,27 @@
+import { choice, palette, slider } from "../controls.js";
+import { narrowed, possibilitiesSlider } from "../possibilities.js";
+import { CALMING, NOTES } from "./calming.js";
+import { EYES, glanceTraits, INKS, rightOf, TILES } from "./index.js";
+const named = EYES.map(({ name: label }) => ({ label }));
+export const controls = (name, overrides) => {
+    const t = glanceTraits(name, overrides);
+    return [
+        {
+            title: "Eyes",
+            controls: [
+                narrowed(choice(t, "eye.left", "Left eye", "list", named), t, CALMING),
+                // Showing what's drawn, which for a matching pair is the left eye's shape.
+                { ...narrowed(choice(t, "eye.right", "Right eye", "list", named), t, CALMING), selected: String(EYES.indexOf(rightOf(t))) },
+                possibilitiesSlider(t, NOTES),
+                slider(t, "eye.size", "Eye size", 0, 100, "%"),
+                slider(t, "eye.gap", "Eye gap", 0, 100, "%"),
+                slider(t, "eye.y", "Eye height", 0, 100, "%"),
+                slider(t, "tilt", "Tilt", -6, 6, "°"),
+            ],
+        },
+        {
+            title: "Colour",
+            controls: [palette(t, "tile", "Colour", TILES), palette(t, "ink", "Eyes", INKS)],
+        },
+    ];
+};

package/dist/glances/index.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Glances: just two eyes on a dark tile, after the references. Each eye is one bold flat
+ * shape: a full circle, a half-closed lid, a sleepy lid, an arched smile, and more in the same
+ * language. Each eye picks its own, so a pair can match or not, as a lid beside a full circle
+ * reads as a knowing look. The eyes are what moves: they follow the pointer, glance about,
+ * blink, and pop when tapped.
+ */
+import { type Overrides, type Traits } from "../traits.ts";
+interface Eye {
+    name: string;
+    /** Markup around the eye's middle at radius `r`, as the left eye. The right is its mirror. */
+    draw(r: number): string;
+}
+/** Measured off the references and kept in their language. Neighbours are as unlike as they can be. */
+export declare const EYES: Eye[];
+/** Dark tiles, the first the references'. Neighbours are unlike. */
+export declare const TILES: string[];
+/** Eye colours, the first the references'. */
+export declare const INKS: string[];
+export declare const glanceTraits: (name: string, overrides?: Overrides) => Traits;
+export declare const leftOf: (t: Traits) => Eye;
+/** The right eye: the left's own shape for a matching pair, unless one is picked for it. */
+export declare const rightOf: (t: Traits) => Eye;
+export declare function coloursOf(t: Traits): {
+    tile: string;
+    ink: string;
+};
+export interface Glance {
+    tile: string;
+    ink: string;
+    /** Where the eyes sit and their tilt, and each eye placed in it. */
+    face: string;
+    left: {
+        at: string;
+        shape: string;
+    };
+    right: {
+        at: string;
+        shape: string;
+    };
+    /** How long each blink cycle is, when it starts, and whether it blinks twice. */
+    blink: {
+        period: number;
+        delay: number;
+        twice: boolean;
+    };
+}
+export declare function createGlance(name: string, overrides?: Overrides): Glance;
+/** Every eye shares these, so a stroked shape is round at its ends and corners. */
+export declare const EYE_STYLE: (ink: string) => string;
+export declare const CORNER = 22.22;
+/** The eyes at rest, open, for thumbnails. */
+export declare function glanceSvg(name: string, overrides?: Overrides): string;
+export {};

package/dist/glances/index.js

@@ -0,0 +1,79 @@
+/**
+ * Glances: just two eyes on a dark tile, after the references. Each eye is one bold flat
+ * shape: a full circle, a half-closed lid, a sleepy lid, an arched smile, and more in the same
+ * language. Each eye picks its own, so a pair can match or not, as a lid beside a full circle
+ * reads as a knowing look. The eyes are what moves: they follow the pointer, glance about,
+ * blink, and pop when tapped.
+ */
+import { calmed } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING } from "./calming.js";
+const round2 = (value) => Math.round(value * 100) / 100;
+const f = round2;
+/** Measured off the references and kept in their language. Neighbours are as unlike as they can be. */
+export const EYES = [
+    // The reference's open eye.
+    { name: "Full", draw: (r) => `<circle r="${f(r)}"/>` },
+    // The reference's half-closed one: the lower half, its flat top through the middle.
+    { name: "Lid", draw: (r) => `<path d="M${f(-r)} 0A${f(r)} ${f(r)} 0 0 0 ${f(r)} 0Z"/>` },
+    // The reference's arched smile, eyes closed in happiness.
+    { name: "Smile", draw: (r) => `<path d="M${f(-1.05 * r)} ${f(0.75 * r)}Q0 ${f(-0.3 * r)} ${f(1.05 * r)} ${f(0.75 * r)}Q0 ${f(0.25 * r)} ${f(-1.05 * r)} ${f(0.75 * r)}Z" stroke-width="${f(r * 0.1)}"/>` },
+    { name: "Pill", draw: (r) => `<rect x="${f(-0.46 * r)}" y="${f(-0.95 * r)}" width="${f(0.92 * r)}" height="${f(1.9 * r)}" rx="${f(0.46 * r)}"/>` },
+    // The sleepy reference's: more than half, its lid just above the middle, its corners rounded.
+    {
+        name: "Sleepy",
+        draw: (r) => {
+            const [top, side] = [-0.2 * r, 0.98 * r];
+            return `<path d="M${f(-side)} ${f(top)}H${f(side)}A${f(r)} ${f(r)} 0 0 1 ${f(-side)} ${f(top)}Z" stroke-width="${f(r * 0.16)}"/>`;
+        },
+    },
+    { name: "Ring", draw: (r) => `<circle r="${f(r * 0.78)}" fill="none" stroke-width="${f(r * 0.42)}"/>` },
+    { name: "Dash", draw: (r) => `<rect x="${f(-0.95 * r)}" y="${f(0.1 * r)}" width="${f(1.9 * r)}" height="${f(0.44 * r)}" rx="${f(0.22 * r)}"/>` },
+    // An upper half, the eye looking up from under a lower lid.
+    { name: "Dome", draw: (r) => `<path d="M${f(-r)} ${f(0.4 * r)}A${f(r)} ${f(r)} 0 0 1 ${f(r)} ${f(0.4 * r)}Z"/>` },
+    // A lid tilted down towards the nose, as a frown.
+    { name: "Slant", draw: (r) => `<path d="M${f(-r)} 0A${f(r)} ${f(r)} 0 0 0 ${f(r)} 0Z" transform="rotate(20)"/>` },
+    { name: "Dot", draw: (r) => `<circle r="${f(r * 0.5)}"/>` },
+    // A crescent moon, open towards the nose.
+    { name: "Moon", draw: (r) => `<path d="M${f(0.2 * r)} ${f(-r)}A${f(r)} ${f(r)} 0 1 0 ${f(0.2 * r)} ${f(r)}A${f(0.72 * r)} ${f(r)} 0 1 1 ${f(0.2 * r)} ${f(-r)}Z"/>` },
+    // Squeezed tight, a chevron pointing at the nose.
+    { name: "Squint", draw: (r) => `<path d="M${f(-0.55 * r)} ${f(-0.6 * r)}L${f(0.5 * r)} 0L${f(-0.55 * r)} ${f(0.6 * r)}" fill="none" stroke-width="${f(r * 0.38)}"/>` },
+    { name: "Oval", draw: (r) => `<ellipse rx="${f(r * 0.68)}" ry="${f(r * 1.08)}"/>` },
+];
+/** Dark tiles, the first the references'. Neighbours are unlike. */
+export const TILES = ["#000000", "#1d1330", "#0e2620", "#2a1019", "#0f1b3b", "#15151c", "#262019", "#101418"];
+/** Eye colours, the first the references'. */
+export const INKS = ["#ffffff", "#fff3d6", "#cbfff0", "#ffd3ea", "#ffe08a", "#aee9ff"];
+/** How often a name's eyes are a matching pair, in percent. The rest are each their own, as in the knowing look. */
+const PAIR_PERCENT = 55;
+export const glanceTraits = (name, overrides) => calmed(createTraits(name, overrides), CALMING);
+export const leftOf = (t) => t.pick("eye.left", EYES);
+/** The right eye: the left's own shape for a matching pair, unless one is picked for it. */
+export const rightOf = (t) => t.forced("eye.right") === undefined && t("pair") * 100 < PAIR_PERCENT ? leftOf(t) : t.pick("eye.right", EYES);
+export function coloursOf(t) {
+    return { tile: t.color("tile") ?? t.pick("tile", TILES), ink: t.color("ink") ?? t.pick("ink", INKS) };
+}
+export function createGlance(name, overrides) {
+    const t = glanceTraits(name, overrides);
+    const { tile, ink } = coloursOf(t);
+    const r = t.num("eye.size", 11, 14.5);
+    const gap = t.num("eye.gap", 16, 22);
+    const place = (side, eye) => ({ at: `translate(${f(side * gap)} 0)${side > 0 ? " scale(-1 1)" : ""}`, shape: eye.draw(r) });
+    return {
+        tile,
+        ink,
+        face: `translate(50 ${f(t.num("eye.y", 42, 52))}) rotate(${f(t.jitter("tilt", 6))})`,
+        left: place(-1, leftOf(t)),
+        right: place(1, rightOf(t)),
+        blink: { period: f(t.num("blink.period", 3.4, 6)), delay: f(t.num("blink.delay", 0, 3)), twice: t("blink.twice") < 0.4 },
+    };
+}
+/** Every eye shares these, so a stroked shape is round at its ends and corners. */
+export const EYE_STYLE = (ink) => `fill="${ink}" stroke="${ink}" stroke-width="0" stroke-linecap="round" stroke-linejoin="round"`;
+export const CORNER = 22.22;
+/** The eyes at rest, open, for thumbnails. */
+export function glanceSvg(name, overrides) {
+    const g = createGlance(name, overrides);
+    return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="${CORNER}" fill="${g.tile}"/>` +
+        `<g transform="${g.face}" ${EYE_STYLE(g.ink)}><g transform="${g.left.at}">${g.left.shape}</g><g transform="${g.right.at}">${g.right.shape}</g></g></svg>`);
+}

package/dist/glyphs/calming.d.ts

@@ -0,0 +1,8 @@
+/**
+ * What Possibilities calms on a glyph. Low keeps eight shapes, one for each variant, leaving
+ * out only the spikiest, the burst, and draws its proportions, tilt and eyes towards their
+ * middle. Indices are into `SHAPES`, plainest first.
+ */
+import type { Calming } from "../possibilities.ts";
+export declare const CALMING: Calming;
+export declare const NOTES: [string, string, string];

package/dist/glyphs/calming.js

@@ -0,0 +1,17 @@
+/**
+ * What Possibilities calms on a glyph. Low keeps eight shapes, one for each variant, leaving
+ * out only the spikiest, the burst, and draws its proportions, tilt and eyes towards their
+ * middle. Indices are into `SHAPES`, plainest first.
+ */
+export const CALMING = {
+    features: /^(waist|tilt|body\.size|eye\.(size|gap))$|^(sparkle|burst|flower|cloud)\.n$/,
+    lists: {
+        // Cloud, Chip, Diamond, Star, Wedge, Flower, Sparkle, Cross, then Burst.
+        shape: [9, 8, [5, 7, 6, 2, 1, 4, 0, 8, 3]],
+    },
+};
+export const NOTES = [
+    "soft shapes like clouds, chips and stars, upright, even and middling in size.",
+    "more lean and size, and every point and lobe count.",
+    "every shape, up to bursts, at any lean and size.",
+];

package/dist/glyphs/controls.d.ts

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

package/dist/glyphs/controls.js

@@ -0,0 +1,55 @@
+import { automatic, choice, clearingColor, palette, slider, } from "../controls.js";
+import { calmed, narrowed, possibilitiesSlider } from "../possibilities.js";
+import { colorKey, createTraits } from "../traits.js";
+import { CALMING, NOTES } from "./calming.js";
+import { EYE_KINDS, eyeKindOf, FILLS, fillOf, shapeOf, SHAPES, tilesFor } from "./index.js";
+/** Weighted like the generator, so it can't use `palette`. */
+function fillControl(t) {
+    const picked = t.color("fill");
+    const control = clearingColor(choice(t, "fill", "Fill", "swatches", FILLS.map(({ color, weight }) => ({ label: color, weight, color }))), "fill");
+    return {
+        ...control,
+        selected: picked ? "custom" : control.selected,
+        custom: { id: colorKey("fill"), color: picked ?? FILLS[Number(control.selected)].color },
+    };
+}
+export const controls = (name, overrides) => {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const shape = shapeOf(t);
+    const { bright } = fillOf(t);
+    const count = shape.count
+        ? [
+            choice(t, shape.count.key, shape.count.label, "list", Array.from({ length: shape.count.max - shape.count.min + 1 }, (_, i) => ({ label: String(shape.count.min + i) }))),
+        ]
+        : [];
+    return [
+        {
+            title: "Colour",
+            controls: [fillControl(t), palette(t, "tile", "Tile", tilesFor(bright))],
+        },
+        {
+            title: "Shape",
+            controls: [
+                possibilitiesSlider(t, NOTES),
+                narrowed(choice(t, "shape", "Shape", "list", SHAPES.map(({ name: label }) => ({ label }))), t, CALMING),
+                ...count,
+                // Pixel shapes stay on their grid, so they only come in whole steps of width.
+                ...(shape.pixel
+                    ? [slider(t, "waist", "Width", 0, 100, "%")]
+                    : [
+                        slider(t, "body.size", "Body size", 0, 100, "%"),
+                        slider(t, "tilt", "Tilt", -12, 12, "°"),
+                        slider(t, "waist", "Waist", 0, 100, "%"),
+                    ]),
+            ],
+        },
+        {
+            title: "Eyes",
+            controls: [
+                automatic(t, "eyes.kind", "Eyes", EYE_KINDS, eyeKindOf(t, shape)),
+                slider(t, "eye.size", "Eye size", 0, 100, "%"),
+                slider(t, "eye.gap", "Gap", 0, 100, "%"),
+            ],
+        },
+    ];
+};

package/dist/glyphs/index.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Glyphs: a solid silhouette with two eyes, on a rounded tile. Smooth shapes are curves
+ * between tips around the centre, and pixel shapes are rows of cells. The art is markup
+ * rather than colours, so a tap can move the silhouette and leave the eyes.
+ */
+import { type Overrides, type Traits } from "../traits.ts";
+interface Paint {
+    color: string;
+    weight?: number;
+    /** A bright ink, which goes on a dark tile so it has something to stand out against. */
+    bright?: boolean;
+}
+export declare const TILES: string[];
+/** The tiles behind a bright ink. */
+export declare const NIGHTS: string[];
+/** Most glyphs are black or a bright ink, with the other dark inks as the rare ones. */
+export declare const FILLS: Paint[];
+export declare const EFFECTS: readonly ["spin", "pop", "drop", "hop"];
+export type Effect = (typeof EFFECTS)[number];
+interface Shape {
+    name: string;
+    pixel: boolean;
+    /** How it idles once selected. The motion suits the silhouette, so it comes with it. */
+    effect: Effect;
+    /** A count the visitor can choose, where the shape has one. */
+    count?: {
+        key: string;
+        label: string;
+        min: number;
+        max: number;
+    };
+    eyeY?: number;
+    draw(t: Traits, count: number): string;
+}
+export declare const SHAPES: Shape[];
+export declare const EYE_KINDS: string[];
+export declare const shapeOf: (t: Traits) => Shape;
+/** What the name, or the panel, has filled the glyph with. */
+export declare function fillOf(t: Traits): {
+    bright: boolean;
+    color: string;
+};
+/** The tiles that suit the fill, so a name can never end up black on black. */
+export declare const tilesFor: (bright: boolean) => string[];
+/** Follows the rest of the glyph: pixel shapes get square eyes, and bright inks pills. */
+export declare function eyeKindOf(t: Traits, shape: Shape): string;
+export declare const TILE_SHAPE = "<rect x=\"5\" y=\"5\" width=\"90\" height=\"90\" rx=\"20\"/>";
+/** Frames the tile exactly, so it sits the same size as the other flat avatars. */
+export declare const VIEW_BOX = "5 5 90 90";
+export interface Glyph {
+    tile: string;
+    /** The silhouette, which is what moves. */
+    body: string;
+    eyes: string;
+    pixel: boolean;
+    effect: Effect;
+    blinkDelay: number;
+}
+export declare function createGlyph(name: string, overrides?: Overrides): Glyph;
+/** The glyph at rest, for thumbnails. */
+export declare const glyphSvg: (name: string, overrides?: Overrides) => string;
+export {};