Files
DorkNet/DorkNet.Server/site/src/components/PlayerAvatar.tsx
T
Alexa 4edf25b2d5 Import december-2020-12-18 from private repo (scrubbed 2026-05-27)
Targets Rec Room 2020.12.18 client.

Re-import after adding:
- DorkNet.ClientMod/dorknet-clientmod.json.template — config schema
  the launcher's manifest-driven patcher renders into UserData/.
- tools/build-patcher-zip.ps1 — produces the dorknet-clientpatch-{key}.zip
  Release asset the launcher fetches.
- .github/workflows/release.yml — auto-publishes both Release assets
  on v1-december-* tag push.

Scrubbed via maintainer-side scrub-for-public.ps1: same drop rules as
the prior import, plus build-patcher-zip.ps1 added to the tools/
allow-list so it survives the scrub.
2026-05-27 01:04:12 +03:00

46 lines
1.4 KiB
TypeScript

import { useState } from 'react';
import { profileImageUrl } from '../lib/types';
// Round avatar with onError fallback to a gradient circle stamped with
// the display-name initial. Mirrors the admin SPA's PlayerAvatar so the
// two surfaces feel consistent. img.* CDN signs the URL via the p1
// key-id baked into the patched client; browsers either render or 404,
// no extra client-side handling required.
export function PlayerAvatar({
name,
displayName,
size = 36,
className = '',
}: {
name?: string | null;
displayName?: string | null;
size?: number;
className?: string;
}) {
const [errored, setErrored] = useState(false);
const url = errored ? null : profileImageUrl(name, Math.max(size * 2, 64));
const initial = (displayName ?? '?').charAt(0).toUpperCase();
const dim = { width: size, height: size };
if (!url) {
return (
<div
style={dim}
className={`shrink-0 rounded-full bg-gradient-to-br from-ink-700 to-ink-800 flex items-center justify-center font-semibold text-ink-200 ${className}`}
>
<span style={{ fontSize: size * 0.42 }}>{initial}</span>
</div>
);
}
return (
<img
src={url}
style={dim}
onError={() => setErrored(true)}
alt={displayName ? `${displayName}'s avatar` : 'player avatar'}
className={`shrink-0 rounded-full bg-ink-800 object-cover ${className}`}
loading="lazy"
/>
);
}