Update UI

components/PlayerAvatar.tsx

@@ -0,0 +1,58 @@
+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>
+  );
+};