Кастомизация профиля (о себе, аватар) и просмотр профилей других игроков + общая статистика

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-17 17:27:24 +03:00
parent b302ec769a
commit 96daddae05
22 changed files with 1106 additions and 23 deletions
@@ -0,0 +1,52 @@
+import type { CSSProperties } from "react";
+
+/**
+ * Чисто презентационный аватар: картинка по url или инициал ника как заглушка.
+ * Используется и в своём, и в чужом профиле, и в списках (общий примитив без логики).
+ */
+export function Avatar({
+  url,
+  nickname,
+  size = 40,
+}: {
+  url?: string | null;
+  nickname: string;
+  size?: number;
+}) {
+  const box: CSSProperties = {
+    width: size,
+    height: size,
+    borderRadius: "50%",
+    flexShrink: 0,
+  };
+  if (url) {
+    return (
+      <img
+        src={url}
+        alt={nickname}
+        width={size}
+        height={size}
+        style={{ ...box, objectFit: "cover", border: "1px solid var(--border)" }}
+      />
+    );
+  }
+  const initial = (nickname.trim()[0] ?? "?").toUpperCase();
+  return (
+    <div
+      aria-hidden
+      style={{
+        ...box,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "var(--surface-2)",
+        border: "1px solid var(--border)",
+        color: "var(--text-muted)",
+        fontWeight: 700,
+        fontSize: size * 0.42,
+      }}
+    >
+      {initial}
+    </div>
+  );
+}