80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
||
|
||
interface HeadAvatarProps {
|
||
skinUrl?: string;
|
||
size?: number;
|
||
style?: React.CSSProperties;
|
||
version?: number;
|
||
}
|
||
|
||
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,
|
||
version = 0,
|
||
...canvasProps
|
||
}) => {
|
||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||
const requestIdRef = useRef(0);
|
||
|
||
useEffect(() => {
|
||
requestIdRef.current += 1;
|
||
const requestId = requestIdRef.current;
|
||
|
||
const baseUrl = skinUrl?.trim() ? skinUrl : DEFAULT_SKIN;
|
||
const finalSkinUrl = `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}v=${version}`;
|
||
|
||
const canvas = canvasRef.current;
|
||
if (!canvas) return;
|
||
|
||
const img = new Image();
|
||
img.crossOrigin = 'anonymous';
|
||
img.src = finalSkinUrl;
|
||
|
||
img.onload = () => {
|
||
// ✅ игнорим старые onload
|
||
if (requestIdRef.current !== requestId) return;
|
||
|
||
const ctx = canvas.getContext('2d');
|
||
if (!ctx) return;
|
||
|
||
canvas.width = size;
|
||
canvas.height = size;
|
||
|
||
ctx.clearRect(0, 0, size, size);
|
||
ctx.imageSmoothingEnabled = false;
|
||
|
||
ctx.drawImage(img, 8, 8, 8, 8, 0, 0, size, size);
|
||
ctx.drawImage(img, 40, 8, 8, 8, 0, 0, size, size);
|
||
};
|
||
|
||
img.onerror = (e) => {
|
||
if (requestIdRef.current !== requestId) return;
|
||
console.error('Не удалось загрузить скин для HeadAvatar:', e);
|
||
};
|
||
|
||
return () => {
|
||
// ✅ гарантированно “убиваем” обработчики старого запроса
|
||
img.onload = null;
|
||
img.onerror = null;
|
||
};
|
||
}, [skinUrl, size, version]);
|
||
|
||
return (
|
||
<canvas
|
||
ref={canvasRef}
|
||
{...canvasProps}
|
||
style={{
|
||
width: size,
|
||
height: size,
|
||
borderRadius: 4,
|
||
imageRendering: 'pixelated',
|
||
...style,
|
||
}}
|
||
/>
|
||
);
|
||
};
|