mnoga che sdelal

src/renderer/components/HeadAvatar.tsx

@@ -1,28 +1,33 @@
 // src/renderer/components/HeadAvatar.tsx
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 interface HeadAvatarProps {
   skinUrl?: string;
-  size?: number; // финальный размер головы, px
+  size?: number;
+  style?: React.CSSProperties;
 }
 
+const DEFAULT_SKIN =
+  'https://static.planetminecraft.com/files/resource_media/skin/original-steve-15053860.png';
+
 export const HeadAvatar: React.FC<HeadAvatarProps> = ({
   skinUrl,
   size = 24,
+  style,
+  ...canvasProps
 }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    if (!skinUrl || !canvasRef.current) return;
+    const finalSkinUrl = skinUrl?.trim() ? skinUrl : DEFAULT_SKIN;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
 
     const img = new Image();
-    img.crossOrigin = 'anonymous'; // на всякий случай, если CDN
-    img.src = skinUrl;
+    img.crossOrigin = 'anonymous';
+    img.src = finalSkinUrl;
 
     img.onload = () => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-
       const ctx = canvas.getContext('2d');
       if (!ctx) return;
 
@@ -30,26 +35,12 @@ export const HeadAvatar: React.FC<HeadAvatarProps> = ({
       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
-      );
 
-      // Рисуем слой шляпы поверх (если есть)
+      // База головы: (8, 8, 8, 8)
+      ctx.drawImage(img, 8, 8, 8, 8, 0, 0, size, size);
+
+      // Слой шляпы: (40, 8, 8, 8)
       ctx.drawImage(img, 40, 8, 8, 8, 0, 0, size, size);
     };
 
@@ -61,11 +52,13 @@ export const HeadAvatar: React.FC<HeadAvatarProps> = ({
   return (
     <canvas
       ref={canvasRef}
+      {...canvasProps}
       style={{
         width: size,
         height: size,
         borderRadius: 4,
         imageRendering: 'pixelated',
+        ...style, // 👈 даём переопределять снаружи
       }}
     />
   );