add OnlinePlayersPanel in Profile

src/renderer/components/HeadAvatar.tsx

@@ -0,0 +1,72 @@
+// src/renderer/components/HeadAvatar.tsx
+import { useEffect, useRef } from 'react';
+
+interface HeadAvatarProps {
+  skinUrl?: string;
+  size?: number; // финальный размер головы, px
+}
+
+export const HeadAvatar: React.FC<HeadAvatarProps> = ({
+  skinUrl,
+  size = 24,
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (!skinUrl || !canvasRef.current) return;
+
+    const img = new Image();
+    img.crossOrigin = 'anonymous'; // на всякий случай, если CDN
+    img.src = skinUrl;
+
+    img.onload = () => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+
+      canvas.width = size;
+      canvas.height = size;
+
+      ctx.clearRect(0, 0, size, size);
+
+      // Координаты головы в стандартном скине 64x64:
+      // База головы: (8, 8, 8, 8)
+      // Слой шляпы/маски: (40, 8, 8, 8)
+
+      // Рисуем основную голову
+      ctx.imageSmoothingEnabled = false;
+      ctx.drawImage(
+        img,
+        8, // sx
+        8, // sy
+        8, // sWidth
+        8, // sHeight
+        0, // dx
+        0, // dy
+        size, // dWidth
+        size, // dHeight
+      );
+
+      // Рисуем слой шляпы поверх (если есть)
+      ctx.drawImage(img, 40, 8, 8, 8, 0, 0, size, size);
+    };
+
+    img.onerror = (e) => {
+      console.error('Не удалось загрузить скин для HeadAvatar:', e);
+    };
+  }, [skinUrl, size]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{
+        width: size,
+        height: size,
+        borderRadius: 4,
+        imageRendering: 'pixelated',
+      }}
+    />
+  );
+};