Add profile photo uploads and custom difficulty support

components/PixelArt.tsx

@@ -1,3 +1,5 @@
+import { profileAvatarUrl } from "@/shared/profile-appearance";
+
 export function PixelTrophy({ className = "" }: { className?: string }) {
   return (
     <svg
@@ -22,7 +24,27 @@ export function PixelTrophy({ className = "" }: { className?: string }) {
 }
 
 // Generated markers, not player skins. No third-party avatar requests.
-export function PlayerAvatar({ id }: { id: string }) {
+export function PlayerAvatar({
+  id,
+  avatarPath,
+  className = "",
+}: {
+  id: string;
+  avatarPath?: string | null;
+  className?: string;
+}) {
+  const avatarUrl = profileAvatarUrl(avatarPath);
+  if (avatarUrl)
+    return (
+      <img
+        className={`player-avatar ${className}`.trim()}
+        src={avatarUrl}
+        alt=""
+        aria-hidden="true"
+        loading="lazy"
+        decoding="async"
+      />
+    );
   const seed = [...id].reduce(
     (value, char) => (value * 31 + char.charCodeAt(0)) >>> 0,
     0,
@@ -32,7 +54,7 @@ export function PlayerAvatar({ id }: { id: string }) {
   const shirt = ["#68876a", "#697e91", "#a68a50", "#8b6e7f"][(seed >>> 5) % 4];
   return (
     <svg
-      className="player-avatar"
+      className={`player-avatar ${className}`.trim()}
       viewBox="0 0 8 8"
       aria-hidden="true"
       shapeRendering="crispEdges"