website refactor

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

@@ -1,16 +1,16 @@
 export class AchievementDisplay {
-  static getRarityColor(rarity: string) {
+  static getRarityVariant(rarity: string) {
     switch (rarity.toLowerCase()) {
       case 'common':
-        return { text: 'text-gray-400', surface: 'muted' as const, icon: '#9ca3af' };
+        return { text: 'low' as const, surface: 'rarity-common' as const, iconIntent: 'low' as const };
       case 'rare':
-        return { text: 'text-primary-blue', surface: 'gradient-blue' as const, icon: '#3b82f6' };
+        return { text: 'primary' as const, surface: 'rarity-rare' as const, iconIntent: 'primary' as const };
       case 'epic':
-        return { text: 'text-purple-400', surface: 'gradient-purple' as const, icon: '#a855f7' };
+        return { text: 'primary' as const, surface: 'rarity-epic' as const, iconIntent: 'primary' as const };
       case 'legendary':
-        return { text: 'text-yellow-400', surface: 'gradient-gold' as const, icon: '#facc15' };
+        return { text: 'warning' as const, surface: 'rarity-legendary' as const, iconIntent: 'warning' as const };
       default:
-        return { text: 'text-gray-400', surface: 'muted' as const, icon: '#9ca3af' };
+        return { text: 'low' as const, surface: 'rarity-common' as const, iconIntent: 'low' as const };
     }
   }
 

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

@@ -1,47 +1,7 @@
-/**
- * DateDisplay
- * 
- * Deterministic date formatting for display.
- * Avoids Intl and toLocaleString to prevent SSR/hydration mismatches.
- */
-
 export class DateDisplay {
-  private static readonly MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-  private static readonly FULL_MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-  private static readonly DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-  private static readonly FULL_DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-
-  /**
-   * Formats a date as "MMM D, YYYY" (e.g., "Jan 1, 2024")
-   */
-  static formatShort(date: Date | string): string {
+  static formatShort(date: string | Date): string {
     const d = typeof date === 'string' ? new Date(date) : date;
-    return `${this.MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
-  }
-
-  /**
-   * Formats a date as "YYYY-MM-DD"
-   */
-  static formatIso(date: Date | string): string {
-    const d = typeof date === 'string' ? new Date(date) : date;
-    const month = (d.getMonth() + 1).toString().padStart(2, '0');
-    const day = d.getDate().toString().padStart(2, '0');
-    return `${d.getFullYear()}-${month}-${day}`;
-  }
-
-  /**
-   * Formats a date as "Weekday, Month Day, Year"
-   */
-  static formatFull(date: Date | string): string {
-    const d = typeof date === 'string' ? new Date(date) : date;
-    return `${this.FULL_DAYS[d.getDay()]}, ${this.FULL_MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
-  }
-
-  /**
-   * Formats a date as "MMM YYYY" (e.g., "Jan 2024")
-   */
-  static formatMonthYear(date: Date | string): string {
-    const d = typeof date === 'string' ? new Date(date) : date;
-    return `${this.MONTHS[d.getMonth()]} ${d.getFullYear()}`;
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    return `${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
   }
 }

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

@@ -1,23 +1,14 @@
 export class MedalDisplay {
-  static getColor(position: number): string {
+  static getVariant(position: number): 'warning' | 'low' | 'high' {
     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';
+      case 1: return 'warning';
+      case 2: return 'high';
+      case 3: return 'warning';
+      default: return 'low';
     }
   }
 
   static getMedalIcon(position: number): string | null {
     return position <= 3 ? '🏆' : null;
   }
-}
+}

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

@@ -0,0 +1,13 @@
+export class TimeDisplay {
+  static timeAgo(timestamp: Date | string): string {
+    const date = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;
+    const diffMs = Date.now() - date.getTime();
+    const diffMinutes = Math.floor(diffMs / 60000);
+    if (diffMinutes < 1) return 'Just now';
+    if (diffMinutes < 60) return `${diffMinutes} min ago`;
+    const diffHours = Math.floor(diffMinutes / 60);
+    if (diffHours < 24) return `${diffHours} h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    return `${diffDays} d ago`;
+  }
+}