51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import chroma from 'chroma-js';
|
|
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
|
|
];
|
|
|
|
export const getAvatarColors = (seed: number): [string, string] => {
|
|
const hue = Math.floor(seed * 360);
|
|
const primaryColor = chroma.hsl(hue, 0.85, 0.55);
|
|
const secondaryColor = chroma.hsl((hue + 35) % 360, 0.8, 0.45);
|
|
|
|
return [primaryColor.hex(), secondaryColor.hex()];
|
|
};
|
|
|
|
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 Icon = ICONS[iconIndex];
|
|
const [colorFrom, colorTo] = getAvatarColors(seed);
|
|
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>
|
|
);
|
|
};
|