Add player leaderboard and homepage preview

components/PixelArt.tsx

@@ -0,0 +1,56 @@
+export function PixelTrophy({ className = "" }: { className?: string }) {
+  return (
+    <svg
+      className={`pixel-trophy ${className}`}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      shapeRendering="crispEdges"
+    >
+      <path
+        fill="#735523"
+        d="M2 5h4V3h12v2h4v7h-2v2h-4v2h-2v3h4v3H6v-3h4v-3H8v-2H4v-2H2z"
+      />
+      <path
+        fill="#d6b665"
+        d="M6 3h12v9h-2v2h-2v2h-4v-2H8v-2H6zM10 16h4v3h-4zM6 19h12v2H6zM2 5h4v2H4v4h2v2H4v-2H2zM18 5h4v6h-2v2h-2v-2h2V7h-2z"
+      />
+      <path fill="#f0d891" d="M6 3h12v2H8v6H6zM6 19h12v1H6z" />
+      <path fill="#a1803c" d="M16 5h2v7h-2zM14 12h2v2h-2zM12 16h2v3h-2z" />
+    </svg>
+  );
+}
+
+// Generated markers, not player skins. No third-party avatar requests.
+export function PlayerAvatar({ id }: { id: string }) {
+  const seed = [...id].reduce(
+    (value, char) => (value * 31 + char.charCodeAt(0)) >>> 0,
+    0,
+  );
+  const hair = ["#654b39", "#333e44", "#95723e", "#694f59"][seed % 4];
+  const skin = ["#c99a77", "#a67b60", "#dab28d", "#875f4d"][(seed >>> 3) % 4];
+  const shirt = ["#68876a", "#697e91", "#a68a50", "#8b6e7f"][(seed >>> 5) % 4];
+  return (
+    <svg
+      className="player-avatar"
+      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>
+  );
+}