58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Cat, Dog, Bird, Fish, Rabbit, Turtle,
|
|
Ghost, Skull, Heart, Star, Moon, Sun,
|
|
Flame, Zap, Cloud, Snowflake, Leaf, Flower2,
|
|
Crown, Diamond, Gem, Trophy, Target, Anchor,
|
|
Rocket, Plane, Car, Bike, Train, Ship
|
|
} from 'lucide-react';
|
|
|
|
const ICONS = [
|
|
Cat, Dog, Bird, Fish, Rabbit, Turtle,
|
|
Ghost, Skull, Heart, Star, Moon, Sun,
|
|
Flame, Zap, Cloud, Snowflake, Leaf, Flower2,
|
|
Crown, Diamond, Gem, Trophy, Target, Anchor,
|
|
Rocket, Plane, Car, Bike, Train, Ship
|
|
];
|
|
|
|
const GRADIENT_PAIRS = [
|
|
['#f472b6', '#c026d3'],
|
|
['#fb923c', '#ea580c'],
|
|
['#facc15', '#ca8a04'],
|
|
['#4ade80', '#16a34a'],
|
|
['#2dd4bf', '#0d9488'],
|
|
['#38bdf8', '#0284c7'],
|
|
['#818cf8', '#6366f1'],
|
|
['#f87171', '#dc2626'],
|
|
['#a78bfa', '#7c3aed'],
|
|
['#fb7185', '#e11d48'],
|
|
['#34d399', '#059669'],
|
|
['#60a5fa', '#2563eb'],
|
|
];
|
|
|
|
interface PlayerAvatarProps {
|
|
seed: number;
|
|
size?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export const PlayerAvatar: React.FC<PlayerAvatarProps> = ({ seed, size = 24, className = '' }) => {
|
|
const iconIndex = Math.floor(seed * 1000) % ICONS.length;
|
|
const gradientIndex = Math.floor(seed * 10000) % GRADIENT_PAIRS.length;
|
|
|
|
const Icon = ICONS[iconIndex];
|
|
const [colorFrom, colorTo] = GRADIENT_PAIRS[gradientIndex];
|
|
const gradientId = `avatar-gradient-${seed.toString().replace('.', '-')}`;
|
|
|
|
return (
|
|
<div
|
|
className={`rounded-full flex items-center justify-center ${className}`}
|
|
style={{
|
|
background: `linear-gradient(135deg, ${colorFrom}, ${colorTo})`,
|
|
padding: size * 0.3,
|
|
}}
|
|
>
|
|
<Icon size={size} className="text-white" strokeWidth={2.5} />
|
|
</div>
|
|
);
|
|
};
|