Make a cloud

// A made cloud is six choices, and its link is those six choices, one
// base-36 character each: "001000" is the homepage's own cloud. The lists
// only grow at the end, so a link someone shared keeps drawing their cloud.
export function encode(look: Look) {
  return [look.eyes, look.mouth, look.cheek ? 1 : 0, look.held, look.carried, look.around]
    .map((choice) => choice.toString(36))
    .join("");
}

export function decode(code: string): Look | null {
  if (!/^[0-9a-z]{6}$/.test(code)) return null;
  const choices = [...code].map((char) => parseInt(char, 36));
  if (choices.some((choice, index) => choice >= PARTS[index].length)) return null;
  const [eyes, mouth, cheek, held, carried, around] = choices;
  return { eyes, mouth, cheek: cheek === 1, held, carried, around };
}

// It behaves as the homepage's cloud does, because it's the same code:
// it blinks, naps after a minute alone, turns toward the pointer (only
// leaning, without a cheek to slide into) and has the same weather.
const blinking = useBlink();
const { napping, waking } = useNap(onScreen);
useTurn({ face, leftCheek, rightCheek }, moving && !napping, look.cheek);
useFalling(moving && !napping ? weather : null, spawn);

Parts

The cloud is characters: two brackets for its sides, eyes and a mouth in cells of a fixed width, a cheek, and whatever it holds in the margins either side. Every part here is one the homepage cloud draws at some hour, or plain ASCII: the dizzy x's and the teary T's come from Inter, the page's own face, and everything else from the Cloud font, which holds the mascot's glyphs and nothing else. A test checks every part against the font, so none can come from whatever font the system has.

Alive

It isn't a picture of the cloud but the same behaviour, from the same code as the homepage's. It turns toward your pointer, its face sliding across and its cheek fading over to the far side, or, with no cheek to slide into, only leaning its eyes. It hops when the pointer reaches it, blinks at uneven intervals (only eyes that are open), gets a heart when it's petted, and dozes off after a minute alone, z's rising, until you move. The rain, snow, stars and notes are the homepage cloud's weather and music. Under reduced motion nothing moves around it, and it doesn't turn or hop.

Its link

A made cloud is six choices, and its link is those six choices, one character each: /lab/make-a-cloud/001000 is the homepage's own cloud. That page is this one with the cloud already made, and its preview, the picture a chat app shows beside a link, draws it in the Cloud font, on the server, the first time anyone opens it. The lists of parts only ever grow at the end, so a link someone shared keeps drawing the cloud they made. Copy as text gives the characters themselves, to paste anywhere, where they're drawn in whatever font the app has.