57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
export function PixelTrophy({ className = "" }: { className?: string }) {
|
|
return (
|
|
<svg
|
|
className={`pixel-trophy ${className}`}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
aria-hidden="true"
|
|
shapeRendering="crispEdges"
|
|
>
|
|
<path
|
|
fill="#735523"
|
|
d="M2 5h4V3h12v2h4v7h-2v2h-4v2h-2v3h4v3H6v-3h4v-3H8v-2H4v-2H2z"
|
|
/>
|
|
<path
|
|
fill="#d6b665"
|
|
d="M6 3h12v9h-2v2h-2v2h-4v-2H8v-2H6zM10 16h4v3h-4zM6 19h12v2H6zM2 5h4v2H4v4h2v2H4v-2H2zM18 5h4v6h-2v2h-2v-2h2V7h-2z"
|
|
/>
|
|
<path fill="#f0d891" d="M6 3h12v2H8v6H6zM6 19h12v1H6z" />
|
|
<path fill="#a1803c" d="M16 5h2v7h-2zM14 12h2v2h-2zM12 16h2v3h-2z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
// Generated markers, not player skins. No third-party avatar requests.
|
|
export function PlayerAvatar({ id }: { id: string }) {
|
|
const seed = [...id].reduce(
|
|
(value, char) => (value * 31 + char.charCodeAt(0)) >>> 0,
|
|
0,
|
|
);
|
|
const hair = ["#654b39", "#333e44", "#95723e", "#694f59"][seed % 4];
|
|
const skin = ["#c99a77", "#a67b60", "#dab28d", "#875f4d"][(seed >>> 3) % 4];
|
|
const shirt = ["#68876a", "#697e91", "#a68a50", "#8b6e7f"][(seed >>> 5) % 4];
|
|
return (
|
|
<svg
|
|
className="player-avatar"
|
|
viewBox="0 0 8 8"
|
|
aria-hidden="true"
|
|
shapeRendering="crispEdges"
|
|
>
|
|
<path fill={shirt} d="M0 0h8v8H0z" />
|
|
<path fill={skin} d="M1 1h6v6H1z" />
|
|
<path
|
|
fill={hair}
|
|
d={
|
|
seed % 2
|
|
? "M1 0h6v2H3v1H1zM6 2h1v2H6z"
|
|
: "M1 0h6v2H1zM1 2h1v2H1zM6 2h1v2H6z"
|
|
}
|
|
/>
|
|
<path fill="#e6ded0" d="M2 3h1v1H2zM5 3h1v1H5z" />
|
|
<path fill="#3b4140" d="M3 3h1v1H3zM4 3h1v1H4z" />
|
|
<path fill="#825b49" d="M3 5h2v1H3z" />
|
|
<path fill={shirt} d="M0 7h8v1H0z" />
|
|
</svg>
|
|
);
|
|
}
|