function pixelColor(ch, p) {
    switch (ch) {
        case ".":
            return null;
        case "k":
        case "K":
            return "#1c1410";
        case "s":
            return p.skin;
        case "h":
        case "H":
            return p.hair;
        case "c":
            return p.cap;
        case "C":
            return "#1c1410";
        case "e":
            return "#1c1410";
        case "w":
            return p.accent;
        case "n":
            return "#2a221c";
        case "a":
            return p.cloth;
        case "A":
            return p.accent;
        case "b":
            return "#5c4638";
        default:
            return p.cloth;
    }
}
function PixelAvatar({ rival, size = 96 }) {
    const ref = useRef(null);
    useEffect(() => {
        const canvas = ref.current;
        if (!canvas)
            return;
        const rows = rival.sprite;
        const h = rows.length;
        const w = Math.max(...rows.map((r) => r.length), 1);
        canvas.width = w;
        canvas.height = h;
        const ctx = canvas.getContext("2d");
        if (!ctx)
            return;
        ctx.clearRect(0, 0, w, h);
        for (let y = 0; y < h; y++) {
            const row = rows[y] ?? "";
            for (let x = 0; x < w; x++) {
                const color = pixelColor(row[x] ?? ".", rival.palette);
                if (!color)
                    continue;
                ctx.fillStyle = color;
                ctx.fillRect(x, y, 1, 1);
            }
        }
    }, [rival]);
    return (<canvas ref={ref} width={16} height={16} aria-hidden className="pixelated pointer-events-none" style={{ width: size, height: size }}/>);
}