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>
28 lines
964 B
TypeScript
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 ?? ""}`}
|
|
/>
|
|
)
|
|
}
|