@oddsmith/ui 0.0.0

package/src/components/leaderboard/components/ui.ts

@@ -0,0 +1,452 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { getIcon, sharedStyles } from '../styles';
+import { css } from 'lit';
+import { Badge } from '../types';
+
+@customElement('rank-badge')
+export class RankBadge extends LitElement {
+  static styles = [
+    sharedStyles,
+    css`
+      .badge {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.25rem;
+        border-radius: 0.5rem;
+        font-weight: 700;
+        font-size: 0.875rem;
+        min-width: 48px;
+        height: 32px;
+        padding: 0 0.5rem;
+      }
+      .badge.rank-1 {
+        background: var(--gold);
+        color: var(--background);
+        box-shadow: 0 0 20px oklch(0.8 0.18 85 / 0.4);
+      }
+      .badge.rank-2 {
+        background: var(--silver);
+        color: var(--background);
+      }
+      .badge.rank-3 {
+        background: var(--bronze);
+        color: var(--background);
+      }
+      .badge.rank-default {
+        background: var(--secondary);
+        color: var(--secondary-foreground);
+      }
+      .icon {
+        display: flex;
+        align-items: center;
+      }
+    `,
+  ];
+
+  @property({ type: Number }) rank = 1;
+
+  render() {
+    const rankClass = this.rank <= 3 ? `rank-${this.rank}` : 'rank-default';
+    const showIcon = this.rank <= 3;
+
+    return html`
+      <div class="badge ${rankClass}">
+        ${showIcon
+          ? html`<span class="icon">${unsafeHTML(getIcon('trophy', 12))}</span>`
+          : ''}
+        <span>${this.rank}</span>
+      </div>
+    `;
+  }
+}
+
+@customElement('xp-progress')
+export class XPProgress extends LitElement {
+  static styles = [
+    sharedStyles,
+    css`
+      .container {
+        width: 100%;
+      }
+      .label-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0.25rem;
+      }
+      .label {
+        font-size: 0.75rem;
+        color: var(--muted-foreground);
+      }
+      .track {
+        width: 100%;
+        background: var(--secondary);
+        border-radius: 9999px;
+        overflow: hidden;
+      }
+      .track.sm {
+        height: 6px;
+      }
+      .track.md {
+        height: 8px;
+      }
+      .track.lg {
+        height: 12px;
+      }
+      .fill {
+        height: 100%;
+        background: var(--primary);
+        border-radius: 9999px;
+        transition: width 0.5s ease-out;
+      }
+    `,
+  ];
+
+  @property({ type: Number }) xp = 0;
+  @property({ type: Number }) xpToNextLevel = 100;
+  @property({ type: Number }) level = 1;
+  @property({ type: Boolean }) showLabel = true;
+  @property({ type: String }) size: 'sm' | 'md' | 'lg' = 'md';
+
+  render() {
+    const progress = (this.xp / this.xpToNextLevel) * 100;
+
+    return html`
+      <div class="container">
+        ${this.showLabel
+          ? html`
+              <div class="label-row">
+                <span class="label">Level ${this.level}</span>
+                <span class="label"
+                  >${this.xp.toLocaleString()} /
+                  ${this.xpToNextLevel.toLocaleString()} XP</span
+                >
+              </div>
+            `
+          : ''}
+        <div class="track ${this.size}">
+          <div class="fill" style="width: ${progress}%"></div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+@customElement('trend-indicator')
+export class TrendIndicator extends LitElement {
+  static styles = [
+    sharedStyles,
+    css`
+      .container {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+      }
+      .up {
+        color: var(--primary);
+      }
+      .down {
+        color: var(--destructive);
+      }
+      .same {
+        color: var(--muted-foreground);
+      }
+      .change {
+        font-size: 0.75rem;
+        font-weight: 500;
+      }
+      .icon {
+        display: flex;
+        align-items: center;
+      }
+    `,
+  ];
+
+  @property({ type: String }) trend: 'up' | 'down' | 'same' = 'same';
+  @property({ type: Number }) rankChange?: number;
+
+  render() {
+    const iconName =
+      this.trend === 'up'
+        ? 'trendingUp'
+        : this.trend === 'down'
+        ? 'trendingDown'
+        : 'minus';
+    const prefix = this.trend === 'up' ? '+' : this.trend === 'down' ? '-' : '';
+
+    return html`
+      <div class="container ${this.trend}">
+        <span class="icon">${unsafeHTML(getIcon(iconName, 16))}</span>
+        ${this.rankChange
+          ? html`<span class="change">${prefix}${this.rankChange}</span>`
+          : ''}
+      </div>
+    `;
+  }
+}
+
+@customElement('streak-badge')
+export class StreakBadge extends LitElement {
+  static styles = [
+    sharedStyles,
+    css`
+      .badge {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.25rem 0.5rem;
+        border-radius: 9999px;
+        background: oklch(0.75 0.2 50 / 0.2);
+        color: var(--accent);
+        font-size: 0.75rem;
+        font-weight: 500;
+      }
+      .icon {
+        display: flex;
+        align-items: center;
+      }
+    `,
+  ];
+
+  @property({ type: Number }) streak = 0;
+
+  render() {
+    if (this.streak < 3) return html``;
+
+    return html`
+      <div class="badge">
+        <span class="icon">${unsafeHTML(getIcon('flame', 12))}</span>
+        <span>${this.streak}</span>
+      </div>
+    `;
+  }
+}
+
+@customElement('level-badge')
+export class LevelBadge extends LitElement {
+  static styles = [
+    sharedStyles,
+    css`
+      .badge {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 9999px;
+        border-width: 2px;
+        border-style: solid;
+        background: var(--background);
+        font-weight: 700;
+      }
+      .badge.sm {
+        width: 24px;
+        height: 24px;
+        font-size: 10px;
+      }
+      .badge.md {
+        width: 32px;
+        height: 32px;
+        font-size: 12px;
+      }
+      .badge.lg {
+        width: 40px;
+        height: 40px;
+        font-size: 14px;
+      }
+      .badge.level-90 {
+        border-color: var(--gold);
+        color: var(--gold);
+        box-shadow: 0 0 20px oklch(0.8 0.18 85 / 0.4);
+      }
+      .badge.level-70 {
+        border-color: var(--accent);
+        color: var(--accent);
+        box-shadow: 0 0 20px oklch(0.75 0.2 50 / 0.4);
+      }
+      .badge.level-50 {
+        border-color: var(--primary);
+        color: var(--primary);
+        box-shadow: 0 0 20px oklch(0.7 0.18 145 / 0.4);
+      }
+      .badge.level-default {
+        border-color: var(--muted-foreground);
+        color: var(--muted-foreground);
+      }
+    `,
+  ];
+
+  @property({ type: Number }) level = 1;
+  @property({ type: String }) size: 'sm' | 'md' | 'lg' = 'md';
+
+  render() {
+    const levelClass =
+      this.level >= 90
+        ? 'level-90'
+        : this.level >= 70
+        ? 'level-70'
+        : this.level >= 50
+        ? 'level-50'
+        : 'level-default';
+
+    return html`
+      <div class="badge ${this.size} ${levelClass}">${this.level}</div>
+    `;
+  }
+}
+
+@customElement('badge-display')
+export class BadgeDisplay extends LitElement {
+  static styles = [
+    sharedStyles,
+    css`
+      .container {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+      }
+      .badge {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 0.375rem;
+        border: 1px solid;
+        font-size: 0.875rem;
+      }
+      .badge.common {
+        background: oklch(0.6 0.02 260 / 0.2);
+        border-color: oklch(0.6 0.02 260 / 0.4);
+      }
+      .badge.rare {
+        background: oklch(0.7 0.18 145 / 0.2);
+        border-color: oklch(0.7 0.18 145 / 0.4);
+      }
+      .badge.epic {
+        background: oklch(0.75 0.2 50 / 0.2);
+        border-color: oklch(0.75 0.2 50 / 0.4);
+      }
+      .badge.legendary {
+        background: oklch(0.8 0.18 85 / 0.2);
+        border-color: oklch(0.8 0.18 85 / 0.4);
+      }
+      .remaining {
+        font-size: 0.75rem;
+        color: var(--muted-foreground);
+        margin-left: 0.25rem;
+      }
+      .icon {
+        display: flex;
+        align-items: center;
+      }
+    `,
+  ];
+
+  @property({ type: Array }) badges: Badge[] = [];
+  @property({ type: Number }) max = 3;
+
+  private getBadgeIcon(icon: string): string {
+    const iconMap: Record<string, string> = {
+      trophy: getIcon('trophy', 14),
+      flame: getIcon('flame', 14),
+      star: getIcon('star', 14),
+      crown: getIcon('crown', 14),
+      zap: getIcon('zap', 14),
+      gem: getIcon('gem', 14),
+    };
+    return iconMap[icon] || '';
+  }
+
+  render() {
+    const displayBadges = this.badges.slice(0, this.max);
+    const remaining = this.badges.length - this.max;
+
+    return html`
+      <div class="container">
+        ${displayBadges.map(
+          (badge) => html`
+            <div class="badge ${badge.rarity}" title="${badge.name}">
+              <span class="icon"
+                >${unsafeHTML(this.getBadgeIcon(badge.icon))}</span
+              >
+            </div>
+          `,
+        )}
+        ${remaining > 0
+          ? html`<span class="remaining">+${remaining}</span>`
+          : ''}
+      </div>
+    `;
+  }
+}
+
+@customElement('stat-card')
+export class StatCard extends LitElement {
+  static styles = [
+    sharedStyles,
+    css`
+      .card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 1rem;
+        border-radius: 0.75rem;
+        background: var(--card);
+        border: 1px solid var(--border);
+      }
+      .card.highlight {
+        border-color: var(--primary);
+        box-shadow: 0 0 20px oklch(0.7 0.18 145 / 0.4);
+      }
+      .icon {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.5rem;
+        color: var(--muted-foreground);
+      }
+      .value {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--foreground);
+      }
+      .label {
+        font-size: 0.75rem;
+        color: var(--muted-foreground);
+      }
+    `,
+  ];
+
+  @property({ type: String }) label = '';
+  @property({ type: String }) value = '';
+  @property({ type: String }) icon = '';
+  @property({ type: Boolean }) highlight = false;
+
+  render() {
+    return html`
+      <div class="card ${this.highlight ? 'highlight' : ''}">
+        ${this.icon
+          ? html`<span class="icon"
+              >${unsafeHTML(getIcon(this.icon as any, 20))}</span
+            >`
+          : ''}
+        <span class="value">${this.value}</span>
+        <span class="label">${this.label}</span>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'rank-badge': RankBadge;
+    'xp-progress': XPProgress;
+    'trend-indicator': TrendIndicator;
+    'streak-badge': StreakBadge;
+    'level-badge': LevelBadge;
+    'badge-display': BadgeDisplay;
+    'stat-card': StatCard;
+  }
+}

package/src/components/leaderboard/data.ts

@@ -0,0 +1,152 @@
+import { Player, Badge, LeaderboardStats } from './types';
+
+export const badges: Badge[] = [
+  { id: '1', name: 'First Win', icon: 'trophy', rarity: 'common' },
+  { id: '2', name: 'Streak Master', icon: 'flame', rarity: 'rare' },
+  { id: '3', name: 'Top 10', icon: 'star', rarity: 'epic' },
+  { id: '4', name: 'Legend', icon: 'crown', rarity: 'legendary' },
+  { id: '5', name: 'Speed Demon', icon: 'zap', rarity: 'rare' },
+  { id: '6', name: 'Perfectionist', icon: 'gem', rarity: 'epic' },
+];
+
+export const players: Player[] = [
+  {
+    id: '1',
+    rank: 1,
+    username: 'ShadowNinja',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=shadow',
+    level: 99,
+    xp: 45000,
+    xpToNextLevel: 50000,
+    score: 2847500,
+    wins: 342,
+    streak: 15,
+    badges: [badges[3], badges[2], badges[5]],
+    trend: 'same',
+  },
+  {
+    id: '2',
+    rank: 2,
+    username: 'CyberPhoenix',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=phoenix',
+    level: 95,
+    xp: 38000,
+    xpToNextLevel: 45000,
+    score: 2654200,
+    wins: 298,
+    streak: 8,
+    badges: [badges[2], badges[1], badges[4]],
+    trend: 'up',
+    rankChange: 2,
+  },
+  {
+    id: '3',
+    rank: 3,
+    username: 'NeonBlade',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=blade',
+    level: 92,
+    xp: 41000,
+    xpToNextLevel: 44000,
+    score: 2501800,
+    wins: 276,
+    streak: 5,
+    badges: [badges[2], badges[0], badges[1]],
+    trend: 'down',
+    rankChange: 1,
+  },
+  {
+    id: '4',
+    rank: 4,
+    username: 'StormWatcher',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=storm',
+    level: 88,
+    xp: 22000,
+    xpToNextLevel: 42000,
+    score: 2234500,
+    wins: 245,
+    streak: 12,
+    badges: [badges[1], badges[4]],
+    trend: 'up',
+    rankChange: 3,
+  },
+  {
+    id: '5',
+    rank: 5,
+    username: 'VoidRunner',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=void',
+    level: 85,
+    xp: 35000,
+    xpToNextLevel: 40000,
+    score: 2087300,
+    wins: 218,
+    streak: 3,
+    badges: [badges[0], badges[5]],
+    trend: 'same',
+  },
+  {
+    id: '6',
+    rank: 6,
+    username: 'PixelHunter',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=pixel',
+    level: 82,
+    xp: 18000,
+    xpToNextLevel: 38000,
+    score: 1956700,
+    wins: 195,
+    streak: 7,
+    badges: [badges[1], badges[0]],
+    trend: 'up',
+    rankChange: 1,
+  },
+  {
+    id: '7',
+    rank: 7,
+    username: 'GhostCoder',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ghost',
+    level: 79,
+    xp: 28000,
+    xpToNextLevel: 36000,
+    score: 1823400,
+    wins: 178,
+    streak: 2,
+    badges: [badges[4], badges[0]],
+    trend: 'down',
+    rankChange: 2,
+  },
+  {
+    id: '8',
+    rank: 8,
+    username: 'ThunderFist',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=thunder',
+    level: 76,
+    xp: 12000,
+    xpToNextLevel: 34000,
+    score: 1678900,
+    wins: 156,
+    streak: 4,
+    badges: [badges[0]],
+    trend: 'same',
+  },
+];
+
+export const stats: LeaderboardStats = {
+  totalPlayers: 12847,
+  yourRank: 156,
+  topScore: 2847500,
+};
+
+export const currentUser: Player = {
+  id: 'current',
+  rank: 156,
+  username: 'YourPlayer',
+  avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=current',
+  level: 45,
+  xp: 12500,
+  xpToNextLevel: 20000,
+  score: 456780,
+  wins: 42,
+  streak: 3,
+  badges: [badges[0], badges[1]],
+  trend: 'up',
+  rankChange: 12,
+};

package/src/components/leaderboard/index.ts

@@ -0,0 +1,2 @@
+export { LeaderboardApp } from './main.js';
+import './main.js';

package/src/components/leaderboard/main.ts

@@ -0,0 +1,42 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { players, stats, currentUser } from './data';
+import './components/leaderboard';
+import { sharedStyles } from './styles';
+import { css } from 'lit';
+
+@customElement('leaderboard-app')
+export class LeaderboardApp extends LitElement {
+  static styles = [
+    sharedStyles,
+    css`
+      :host {
+        display: block;
+        min-height: 100vh;
+        background: var(--background);
+        padding: 2rem 1rem;
+      }
+      @media (min-width: 768px) {
+        :host {
+          padding: 3rem 2rem;
+        }
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <game-leaderboard
+        .players=${players}
+        .currentUser=${currentUser}
+        .stats=${stats}
+      ></game-leaderboard>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'leaderboard-app': LeaderboardApp;
+  }
+}