website refactor

apps/website/lib/display-objects/MedalDisplay.ts

@@ -0,0 +1,23 @@
+export class MedalDisplay {
+  static getColor(position: number): string {
+    switch (position) {
+      case 1: return 'text-yellow-400';
+      case 2: return 'text-gray-300';
+      case 3: return 'text-amber-600';
+      default: return 'text-gray-500';
+    }
+  }
+
+  static getBg(position: number): string {
+    switch (position) {
+      case 1: return 'bg-yellow-400/10 border-yellow-400/30';
+      case 2: return 'bg-gray-300/10 border-gray-300/30';
+      case 3: return 'bg-amber-600/10 border-amber-600/30';
+      default: return 'bg-iron-gray/50 border-charcoal-outline';
+    }
+  }
+
+  static getMedalIcon(position: number): string | null {
+    return position <= 3 ? '🏆' : null;
+  }
+}

apps/website/lib/display-objects/RatingDisplay.ts

@@ -1,11 +1,5 @@
-/**
- * RatingDisplay
- * 
- * Deterministic rating formatting for display.
- */
-
 export class RatingDisplay {
   static format(rating: number): string {
-    return rating.toFixed(1);
+    return rating.toString();
   }
 }

apps/website/lib/display-objects/SkillLevelDisplay.ts

@@ -0,0 +1,41 @@
+export class SkillLevelDisplay {
+  static getLabel(skillLevel: string): string {
+    const levels: Record<string, string> = {
+      pro: 'Pro',
+      advanced: 'Advanced',
+      intermediate: 'Intermediate',
+      beginner: 'Beginner',
+    };
+    return levels[skillLevel] || skillLevel;
+  }
+
+  static getColor(skillLevel: string): string {
+    const colors: Record<string, string> = {
+      pro: 'text-yellow-400',
+      advanced: 'text-purple-400',
+      intermediate: 'text-primary-blue',
+      beginner: 'text-green-400',
+    };
+    return colors[skillLevel] || 'text-gray-400';
+  }
+
+  static getBgColor(skillLevel: string): string {
+    const colors: Record<string, string> = {
+      pro: 'bg-yellow-400/10',
+      advanced: 'bg-purple-400/10',
+      intermediate: 'bg-primary-blue/10',
+      beginner: 'bg-green-400/10',
+    };
+    return colors[skillLevel] || 'bg-gray-400/10';
+  }
+
+  static getBorderColor(skillLevel: string): string {
+    const colors: Record<string, string> = {
+      pro: 'border-yellow-400/30',
+      advanced: 'border-purple-400/30',
+      intermediate: 'border-primary-blue/30',
+      beginner: 'border-green-400/30',
+    };
+    return colors[skillLevel] || 'border-gray-400/30';
+  }
+}

apps/website/lib/display-objects/WinRateDisplay.ts

@@ -0,0 +1,7 @@
+export class WinRateDisplay {
+  static calculate(racesCompleted: number, wins: number): string {
+    if (racesCompleted === 0) return '0.0';
+    const rate = (wins / racesCompleted) * 100;
+    return rate.toFixed(1);
+  }
+}