Let a bot take any colour
A bot's identity was one of seven hues, and the hue picked both its colour and its stone shape. Now its colour is free and its stone is its own: - `bots.color` holds any `#rrggbb`, `bots.stone` the flat-cut shape it's drawn on. `bots.hue` stays as the palette column they replaced, read only as a fallback; `src/scripts/move-bot-colour-to-owners.ts` backfills an install from it (safe to rerun). - `src/utils/bot-color.ts` is the only place a colour is validated or resolved (`resolveBotColor`/`resolveBotStone` carry the old hue forward, `botColorNeedsPaperFace` flips the eyes to paper on a very dark body), and `src/utils/bot-stone-props.ts` gives every row its props, so a row saved before this still renders as it did. - `BotStone` takes the colour as the body's SVG `fill`, the one documented exception to the token rule: an arbitrary hex has no token to point at. `UnreadDot` follows it. - The picker keeps the palette tiles (still shape and colour together) and adds a native swatch and a hex field, so a custom colour keeps its stone. Same place as before: the header avatar's modal and Settings > Bots, for crew managers. The coordinator stays hue-less. - A recolour reaches other open tabs through `pushBotUpdated`.
This commit is contained in:
@@ -0,0 +1,61 @@
|
||||
import { describe, expect, test } from "bun:test";
|
||||
import {
|
||||
botColorNeedsPaperFace,
|
||||
normalizeBotColor,
|
||||
paletteColor,
|
||||
paletteColorTitle,
|
||||
resolveBotColor,
|
||||
resolveBotStone,
|
||||
} from "./bot-color";
|
||||
|
||||
describe("bot-color", () => {
|
||||
test("normalizes a colour to lowercase #rrggbb", () => {
|
||||
expect(normalizeBotColor({ color: " #E4572E " })).toBe("#e4572e");
|
||||
});
|
||||
|
||||
test("expands the short form", () => {
|
||||
expect(normalizeBotColor({ color: "#7C5" })).toBe("#77cc55");
|
||||
});
|
||||
|
||||
test("refuses anything that isn't a colour", () => {
|
||||
expect(normalizeBotColor({ color: "violet" })).toBeNull();
|
||||
expect(normalizeBotColor({ color: "#12345" })).toBeNull();
|
||||
expect(normalizeBotColor({ color: "" })).toBeNull();
|
||||
expect(normalizeBotColor({ color: null })).toBeNull();
|
||||
});
|
||||
|
||||
test("names a palette colour, and leaves a custom one unnamed", () => {
|
||||
expect(paletteColorTitle({ color: "#7c5cd6" })).toBe("Violet");
|
||||
expect(paletteColorTitle({ color: "#123456" })).toBeNull();
|
||||
});
|
||||
|
||||
test("a bot's own colour wins over its old hue", () => {
|
||||
expect(resolveBotColor({ color: "#123456", hue: "violet" })).toBe("#123456");
|
||||
});
|
||||
|
||||
test("a bot saved before colours were free shows its hue's colour", () => {
|
||||
expect(resolveBotColor({ hue: "teal" })).toBe("#16a394");
|
||||
});
|
||||
|
||||
test("the coordinator has no colour", () => {
|
||||
expect(resolveBotColor({})).toBeNull();
|
||||
});
|
||||
|
||||
test("keeps its own stone, else the shape its hue used to be", () => {
|
||||
expect(resolveBotStone({ stone: "rose", hue: "teal" })).toBe("rose");
|
||||
expect(resolveBotStone({ hue: "teal" })).toBe("teal");
|
||||
expect(resolveBotStone({})).toBe("ember");
|
||||
});
|
||||
|
||||
test("only a very dark colour flips the face to paper", () => {
|
||||
expect(botColorNeedsPaperFace({ color: "#000000" })).toBe(true);
|
||||
expect(botColorNeedsPaperFace({ color: "#0e1116" })).toBe(true);
|
||||
expect(botColorNeedsPaperFace({ color: "#7c5cd6" })).toBe(false);
|
||||
expect(botColorNeedsPaperFace({ color: "#ffffff" })).toBe(false);
|
||||
});
|
||||
|
||||
test("a palette entry knows its own colour", () => {
|
||||
expect(paletteColor({ hue: "ember" })).toBe("#e4572e");
|
||||
expect(paletteColor({ hue: "nonsense" })).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,103 @@
|
||||
import { BotHues, BotStoneShapes, type BotStoneShape } from "@/src/dict/bot-dict";
|
||||
|
||||
/**
|
||||
* A bot's colour is free (`#rrggbb`) and its stone shape is its own, so the
|
||||
* two are stored apart. These helpers are the only place that decides what a
|
||||
* bot actually renders in: the colour to fill its stone with and the shape
|
||||
* to draw it on.
|
||||
*/
|
||||
|
||||
const HexColorPattern = /^#[0-9a-f]{6}$/;
|
||||
|
||||
/**
|
||||
* A stored colour as `#rrggbb`, or null when it isn't one. Accepts the short
|
||||
* `#rgb` form someone typed, so a hand-entered value still saves.
|
||||
*/
|
||||
export function normalizeBotColor({ color }: { color?: string | null }): string | null {
|
||||
const trimmed = (color || "").trim().toLowerCase();
|
||||
|
||||
if (!trimmed) return null;
|
||||
|
||||
const short = trimmed.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/);
|
||||
|
||||
if (short) return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`;
|
||||
|
||||
return HexColorPattern.test(trimmed) ? trimmed : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* The hex a palette entry stands for, by its name.
|
||||
*/
|
||||
export function paletteColor({ hue }: { hue?: string | null }): string | null {
|
||||
return BotHues.find((entry) => entry.value == hue)?.color || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* The colour a bot renders in: its own, else the palette colour of a bot
|
||||
* saved before colours were free, else (the coordinator) nothing at all.
|
||||
*/
|
||||
export function resolveBotColor({
|
||||
color,
|
||||
hue,
|
||||
}: {
|
||||
color?: string | null;
|
||||
hue?: string | null;
|
||||
}): string | null {
|
||||
return normalizeBotColor({ color }) || paletteColor({ hue });
|
||||
}
|
||||
|
||||
/**
|
||||
* The stone a bot is drawn on: its own shape, else the palette shape it used
|
||||
* to be tied to, else the first stone.
|
||||
*/
|
||||
export function resolveBotStone({
|
||||
stone,
|
||||
hue,
|
||||
}: {
|
||||
stone?: string | null;
|
||||
hue?: string | null;
|
||||
}): BotStoneShape {
|
||||
const shape = BotStoneShapes.find((entry) => entry.value == stone)?.value;
|
||||
|
||||
if (shape) return shape;
|
||||
|
||||
const carried = BotStoneShapes.find((entry) => entry.value == hue)?.value;
|
||||
|
||||
return carried || BotStoneShapes[0].value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Relative luminance of a `#rrggbb` colour, 0 (black) to 1 (white), so the
|
||||
* stone's face can be flipped to paper on a dark body and stays readable.
|
||||
*/
|
||||
export function botColorLuminance({ color }: { color: string }): number {
|
||||
const hex = normalizeBotColor({ color }) || "#ffffff";
|
||||
const [red, green, blue] = [1, 3, 5].map((at) => {
|
||||
const value = parseInt(hex.slice(at, at + 2), 16) / 255;
|
||||
|
||||
return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
|
||||
});
|
||||
|
||||
return 0.2126 * red! + 0.7152 * green! + 0.0722 * blue!;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the stone's eyes must be drawn in paper instead of ink. Only a
|
||||
* very dark body needs it, so a mid-tone keeps the ink face every other
|
||||
* stone has.
|
||||
*/
|
||||
export function botColorNeedsPaperFace({ color }: { color: string }): boolean {
|
||||
return botColorLuminance({ color }) < 0.12;
|
||||
}
|
||||
|
||||
/**
|
||||
* The palette name a colour is, for a label ("Violet"); null for a colour
|
||||
* the user made up, which the UI shows as a custom one.
|
||||
*/
|
||||
export function paletteColorTitle({ color }: { color?: string | null }): string | null {
|
||||
const normalized = normalizeBotColor({ color });
|
||||
|
||||
if (!normalized) return null;
|
||||
|
||||
return BotHues.find((entry) => entry.color == normalized)?.title || null;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import type { BotStoneShape } from "@/src/dict/bot-dict";
|
||||
import { resolveBotColor, resolveBotStone } from "./bot-color";
|
||||
|
||||
type Params = {
|
||||
/**
|
||||
* The bot's own colour. Null or missing for the coordinator.
|
||||
*/
|
||||
color?: string | null;
|
||||
stone?: string | null;
|
||||
/**
|
||||
* The historical palette hue, only for a bot saved before colours were
|
||||
* free. Rows from otherwise-typed queries select it as `bot_hue`.
|
||||
*/
|
||||
hue?: string | null;
|
||||
};
|
||||
|
||||
type BotStoneProps = {
|
||||
color: string | null;
|
||||
stone: BotStoneShape;
|
||||
};
|
||||
|
||||
/**
|
||||
* The stone props for a bot row: which colour to fill it with and which
|
||||
* shape to draw, whether the row carries the new columns or only the
|
||||
* palette hue they replaced. Every `<BotAvatar color={...} stone={...} />`
|
||||
* call site goes through this, so a row saved before colours were free
|
||||
* still renders as it did.
|
||||
*/
|
||||
export default function botStoneProps({ color, stone, hue }: Params): BotStoneProps {
|
||||
return {
|
||||
color: resolveBotColor({ color, hue }),
|
||||
stone: resolveBotStone({ stone, hue }),
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { describe, expect, test } from "bun:test";
|
||||
import pickFreeColor from "./pick-free-color";
|
||||
|
||||
describe("pick-free-color", () => {
|
||||
test("takes the first palette colour nobody has", () => {
|
||||
expect(pickFreeColor({ taken: [] })).toEqual({ color: "#e4572e", stone: "ember" });
|
||||
});
|
||||
|
||||
test("skips the colours already taken", () => {
|
||||
expect(pickFreeColor({ taken: ["#e4572e", "#e9a23b", null] })).toEqual({
|
||||
color: "#7fae3c",
|
||||
stone: "moss",
|
||||
});
|
||||
});
|
||||
|
||||
test("falls back to the least used colour", () => {
|
||||
const everyone = ["#e4572e", "#e9a23b", "#7fae3c", "#16a394", "#3b7dd8", "#7c5cd6"];
|
||||
|
||||
expect(pickFreeColor({ taken: [...everyone, "#e4572e"] })).toEqual({
|
||||
color: "#d6538c",
|
||||
stone: "rose",
|
||||
});
|
||||
});
|
||||
|
||||
test("counts a colour however it's cased", () => {
|
||||
expect(pickFreeColor({ taken: ["#E4572E"] }).color).toBe("#e9a23b");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,33 @@
|
||||
import { BotHues, type BotStoneShape } from "@/src/dict/bot-dict";
|
||||
|
||||
type Params = {
|
||||
/**
|
||||
* The colours already in use, so the new bot differs from the crew.
|
||||
*/
|
||||
taken: (string | null | undefined)[];
|
||||
};
|
||||
|
||||
/**
|
||||
* The colour a new bot starts with: the first palette colour nobody on the
|
||||
* crew has yet, else the least used one. It comes with that palette entry's
|
||||
* stone, so a new bot looks like every bot did before colours were free.
|
||||
* The user can then pick any colour they like.
|
||||
*/
|
||||
export default function pickFreeColor({ taken }: Params): {
|
||||
color: string;
|
||||
stone: BotStoneShape;
|
||||
} {
|
||||
const counts = new Map<string, number>(BotHues.map((entry) => [entry.color, 0]));
|
||||
|
||||
for (const color of taken) {
|
||||
const key = (color || "").toLowerCase();
|
||||
|
||||
if (counts.has(key)) counts.set(key, counts.get(key)! + 1);
|
||||
}
|
||||
|
||||
const picked = [...BotHues].sort(
|
||||
(a, b) => counts.get(a.color)! - counts.get(b.color)!,
|
||||
)[0]!;
|
||||
|
||||
return { color: picked.color, stone: picked.value };
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import { describe, expect, test } from "bun:test";
|
||||
import pickFreeHue from "./pick-free-hue";
|
||||
|
||||
describe("pickFreeHue", () => {
|
||||
test("takes the first hue nobody has", () => {
|
||||
expect(pickFreeHue({ taken: [] })).toBe("ember");
|
||||
expect(pickFreeHue({ taken: ["ember", null, "amber"] })).toBe("moss");
|
||||
});
|
||||
|
||||
test("falls back to the least used hue", () => {
|
||||
const all = ["ember", "amber", "moss", "teal", "cobalt", "violet", "rose"];
|
||||
expect(pickFreeHue({ taken: [...all, ...all.filter((h) => h != "teal")] })).toBe("teal");
|
||||
});
|
||||
});
|
||||
@@ -1,22 +0,0 @@
|
||||
import { BotHues, type BotHue } from "@/src/dict/bot-dict";
|
||||
|
||||
type Params = {
|
||||
/**
|
||||
* Hues the crew already has.
|
||||
*/
|
||||
taken: (string | null | undefined)[];
|
||||
};
|
||||
|
||||
/**
|
||||
* The first hue nobody on the crew has yet, else the least used one, so a
|
||||
* new bot is told apart at a glance.
|
||||
*/
|
||||
export default function pickFreeHue({ taken }: Params): BotHue {
|
||||
const counts = new Map<string, number>(BotHues.map((hue) => [hue.value, 0]));
|
||||
|
||||
for (const hue of taken) {
|
||||
if (hue && counts.has(hue)) counts.set(hue, counts.get(hue)! + 1);
|
||||
}
|
||||
|
||||
return [...BotHues].sort((a, b) => counts.get(a.value)! - counts.get(b.value)!)[0]!.value;
|
||||
}
|
||||
Reference in New Issue
Block a user