Add public profiles and cosmetic shop

components/PixelArt.tsx

@@ -1,4 +1,5 @@
 import { profileAvatarUrl } from "@/shared/profile-appearance";
+import { profileCosmeticIds } from "@/shared/profile-cosmetic-ids";
 
 export function PixelTrophy({ className = "" }: { className?: string }) {
   return (
@@ -27,23 +28,28 @@ export function PixelTrophy({ className = "" }: { className?: string }) {
 export function PlayerAvatar({
   id,
   avatarPath,
+  effect,
   className = "",
 }: {
   id: string;
   avatarPath?: string | null;
+  effect?: string | null;
   className?: string;
 }) {
   const avatarUrl = profileAvatarUrl(avatarPath);
+  const activeEffect = profileCosmeticIds.find((value) => value === effect);
   if (avatarUrl)
     return (
-      <img
-        className={`player-avatar ${className}`.trim()}
-        src={avatarUrl}
-        alt=""
-        aria-hidden="true"
-        loading="lazy"
-        decoding="async"
-      />
+      <span className="profile-avatar-shell" data-effect={activeEffect}>
+        <img
+          className={`player-avatar ${className}`.trim()}
+          src={avatarUrl}
+          alt=""
+          aria-hidden="true"
+          loading="lazy"
+          decoding="async"
+        />
+      </span>
     );
   const seed = [...id].reduce(
     (value, char) => (value * 31 + char.charCodeAt(0)) >>> 0,
@@ -53,26 +59,28 @@ export function PlayerAvatar({
   const skin = ["#c99a77", "#a67b60", "#dab28d", "#875f4d"][(seed >>> 3) % 4];
   const shirt = ["#68876a", "#697e91", "#a68a50", "#8b6e7f"][(seed >>> 5) % 4];
   return (
-    <svg
-      className={`player-avatar ${className}`.trim()}
-      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>
+    <span className="profile-avatar-shell" data-effect={activeEffect}>
+      <svg
+        className={`player-avatar ${className}`.trim()}
+        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>
+    </span>
   );
 }