nerdware/apps/web/src/components/avatar.tsx
AyoubBenziza c3e00ab9d9 refactor(web): generate DiceBear avatars locally instead of via HTTP API
Self-hosted over the HTTP API: no runtime dependency on api.dicebear.com,
works offline/LAN, and no player pseudo leaks to a third party.

- @dicebear/core@10 + @dicebear/styles@10 (lorelei.json), CC0 1.0
- Avatar builds a data URI locally (new Style/Avatar), memoized per seed
- same component API (seed/className) → no call-site changes
- enable resolveJsonModule for the style import

Cost: ~64 kB gzip added to the bundle — acceptable for a self-hosted game.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-09 10:58:23 +02:00

28 lines
964 B
TypeScript

import { Avatar as DicebearAvatar, Style } from "@dicebear/core"
import loreleiDefinition from "@dicebear/styles/lorelei.json"
// Génération locale (pas d'appel à l'API DiceBear) : self-hosted, offline,
// aucun pseudo envoyé à un tiers. Lorelei par Lisa Wischofsky — licence CC0 1.0.
const style = new Style(loreleiDefinition)
const cache = new Map<string, string>()
/** Data URI de l'avatar pour un seed donné, mémoïsé. */
function avatarUri(seed: string): string {
let uri = cache.get(seed)
if (!uri) {
uri = new DicebearAvatar(style, { seed }).toDataUri()
cache.set(seed, uri)
}
return uri
}
/** Avatar DiceBear (style lorelei), seedé par le pseudo → stable et reconnaissable. */
export function Avatar({ seed, className }: { seed: string; className?: string }) {
return (
<img
src={avatarUri(seed)}
alt={`Avatar de ${seed}`}
className={`bg-muted shrink-0 rounded-full ${className ?? ""}`}
/>
)
}