tben
1a6249afd3
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`.
75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import Row from "@moduletrace/twui/layout/Row";
|
|
import Span from "@moduletrace/twui/layout/Span";
|
|
import Stack from "@moduletrace/twui/layout/Stack";
|
|
import BotAvatar from "@/src/components/general/bot-avatar";
|
|
import BotStone from "@/src/components/general/bot-stone";
|
|
import type { BotStoneShape } from "@/src/dict/bot-dict";
|
|
import { paletteColorTitle } from "@/src/utils/bot-color";
|
|
|
|
type Props = {
|
|
name: string;
|
|
role: string;
|
|
/**
|
|
* Null for the coordinator.
|
|
*/
|
|
color: string | null;
|
|
stone: BotStoneShape;
|
|
image_media_id?: number | string | null;
|
|
picked_src?: string;
|
|
};
|
|
|
|
/**
|
|
* How the bot will look in the rail as the form is filled in: its picture
|
|
* or stone, name and job, and its colour (a small stone beside the name
|
|
* when a picture hides the big one).
|
|
*/
|
|
export default function BotFormPreview({
|
|
name,
|
|
role,
|
|
color,
|
|
stone,
|
|
image_media_id,
|
|
picked_src,
|
|
}: Props) {
|
|
const has_picture = Boolean(picked_src || image_media_id);
|
|
/** A palette colour by name, else a colour the user made up. */
|
|
const color_title = color
|
|
? paletteColorTitle({ color }) || "Its own colour"
|
|
: null;
|
|
|
|
return (
|
|
<Row className="min-w-0 grow gap-3! flex-nowrap items-center">
|
|
<BotAvatar
|
|
color={color}
|
|
stone={stone}
|
|
size={56}
|
|
image_media_id={image_media_id}
|
|
src={picked_src}
|
|
/>
|
|
<Stack className="min-w-0 gap-0!">
|
|
<Row className="min-w-0 w-full gap-1.5! flex-nowrap items-center">
|
|
<Span className="text-sm font-bold leading-5 text-ink truncate">
|
|
{name.trim() || "Its name"}
|
|
</Span>
|
|
{has_picture && color ? (
|
|
<BotStone
|
|
color={color}
|
|
stone={stone}
|
|
size={18}
|
|
label={`${color_title} bot`}
|
|
/>
|
|
) : null}
|
|
</Row>
|
|
<Span className="text-xs leading-4 text-ink-secondary truncate w-full">
|
|
{role.trim() || "Its job"}
|
|
</Span>
|
|
{color_title ? (
|
|
<Span className="text-[11px] leading-4 text-ink-secondary">
|
|
{color_title}
|
|
</Span>
|
|
) : null}
|
|
</Stack>
|
|
</Row>
|
|
);
|
|
}
|