Something went wrong. Try again.
Web frontend and supporting services for lance.blue
Something went wrong. Try again.
1.7 kB · 54 lines
TypeScript
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455/** * A player's picture, or the letter that stands in for it. * * Two pages draw the same account: the profile at /profile/<...> and the * record at /matches/<...>. The drawing is one function so that a face is one * thing wherever it appears — the same fallback, the same read of the same * blob, and the same classes for the same shape. * * The picture is the network's, not ours: avatars.ts reads it out of the * player's own repository, and an account with none keeps the monogram * rather than growing a hole where a picture would have gone. */
import { el } from "./dom";import { avatarUrl, monogram } from "./profile";
/** Who is being drawn. The same pair every address here resolves to. */export interface Face { did: string; handle: string | null;}
/** * The box, monogram already in it, and the portrait swapped in if one loads. * * Swapped on `load` rather than on the URL arriving: a broken blob would * otherwise replace a readable letter with a broken-image icon. */export function playerFace(actor: Face): HTMLElement { const box = el("span", { className: "profile-face" }, [ el("span", { className: "profile-monogram", textContent: monogram(actor), }), ]);
void avatarUrl(actor.did) .then((src) => { if (!src) return; const image = el("img", { className: "profile-portrait", src, // Decorative: the handle is beside it. alt: "", decoding: "async", }); image.addEventListener("load", () => box.replaceChildren(image)); }) .catch((error: unknown) => { console.warn("profile: the picture could not be found", error); });
return box;}