@oddsmith/ui 0.0.0

package/src/components/casino-leaderboard/data.ts

@@ -0,0 +1,111 @@
+import { Player, State } from './types';
+
+export const getState = (): State => {
+  return {
+    activeTab: 'daily',
+    prizePool: 250000,
+    totalPlayers: 12847,
+    activePlayers: 3421,
+  };
+};
+
+export const getPlayers = (): Player[] => {
+  return [
+    {
+      id: 1,
+      rank: 1,
+      name: 'CryptoKing777',
+      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=crypto',
+      score: 2847500,
+      winnings: 125000,
+      streak: 12,
+      level: 4,
+      change: 'up',
+      isOnline: true,
+    },
+    {
+      id: 2,
+      rank: 2,
+      name: 'LuckyAce_Pro',
+      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=lucky',
+      score: 2156300,
+      winnings: 89500,
+      streak: 8,
+      level: 3,
+      change: 'same',
+      isOnline: true,
+    },
+    {
+      id: 3,
+      rank: 3,
+      name: 'HighRoller99',
+      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=roller',
+      score: 1893200,
+      winnings: 67200,
+      streak: 5,
+      level: 3,
+      change: 'up',
+      isOnline: false,
+    },
+    {
+      id: 4,
+      rank: 4,
+      name: 'DiamondHands',
+      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=diamond',
+      score: 1654800,
+      winnings: 45800,
+      streak: 3,
+      level: 2,
+      change: 'down',
+      isOnline: true,
+    },
+    {
+      id: 5,
+      rank: 5,
+      name: 'VegasNight',
+      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=vegas',
+      score: 1423100,
+      winnings: 32100,
+      streak: 6,
+      level: 2,
+      change: 'up',
+      isOnline: true,
+    },
+    {
+      id: 6,
+      rank: 6,
+      name: 'JackpotJane',
+      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=jane',
+      score: 1287600,
+      winnings: 28400,
+      streak: 2,
+      level: 2,
+      change: 'down',
+      isOnline: false,
+    },
+    {
+      id: 7,
+      rank: 7,
+      name: 'SpinMaster',
+      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=spin',
+      score: 1156200,
+      winnings: 21500,
+      streak: 4,
+      level: 1,
+      change: 'same',
+      isOnline: true,
+    },
+    {
+      id: 8,
+      rank: 8,
+      name: 'GoldenGoose',
+      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=golden',
+      score: 987400,
+      winnings: 18200,
+      streak: 1,
+      level: 1,
+      change: 'up',
+      isOnline: false,
+    },
+  ];
+};

package/src/components/casino-leaderboard/index.ts

@@ -0,0 +1,5 @@
+export { CasinoLeaderboard } from './casino-leaderboard.js';
+export { getPlayers, getState } from './data.js';
+export type { Player as CasinoPlayer, State as CasinoState } from './types.js';
+
+import './casino-leaderboard.js';

package/src/components/casino-leaderboard/todo.txt

@@ -0,0 +1,2 @@
+- add scss support with map-get. Have single theme.json file and map-get (or similar) gets the color
+- inject theme into dom

package/src/components/casino-leaderboard/types.ts

@@ -0,0 +1,19 @@
+export interface State {
+  activeTab: 'daily' | 'weekly' | 'alltime';
+  prizePool: number;
+  totalPlayers: number;
+  activePlayers: number;
+}
+
+export interface Player {
+  id: number;
+  rank: number;
+  name: string;
+  avatar: string;
+  score: number;
+  winnings: number;
+  streak: number;
+  level: number;
+  change: 'up' | 'down' | 'same';
+  isOnline: boolean;
+}

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

@@ -0,0 +1,373 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { sharedStyles, getIcon } from '../styles';
+import type { Player, LeaderboardStats } from '../types';
+import './ui';
+import './player-card';
+import { css } from 'lit';
+
+@customElement('game-leaderboard')
+export class GameLeaderboard extends LitElement {
+  static styles = [
+    sharedStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        max-width: 896px;
+        margin: 0 auto;
+      }
+      .header {
+        text-align: center;
+        margin-bottom: 2rem;
+      }
+      .title-row {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        margin-bottom: 0.5rem;
+      }
+      .crown-icon {
+        color: var(--gold);
+        display: flex;
+        align-items: center;
+      }
+      .title {
+        font-size: 2rem;
+        font-weight: 900;
+        color: var(--foreground);
+        letter-spacing: -0.025em;
+      }
+      @media (min-width: 768px) {
+        .title {
+          font-size: 2.5rem;
+        }
+      }
+      .subtitle {
+        color: var(--muted-foreground);
+      }
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1rem;
+        margin-bottom: 2rem;
+      }
+      .current-user-card {
+        margin-bottom: 2rem;
+        padding: 1.5rem;
+        border-radius: 1rem;
+        background: var(--card);
+        border: 2px solid oklch(0.7 0.18 145 / 0.3);
+        box-shadow: 0 0 20px oklch(0.7 0.18 145 / 0.4);
+      }
+      .user-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+      }
+      .user-info {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+      }
+      .user-avatar-wrapper {
+        position: relative;
+      }
+      .user-avatar {
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        background: var(--secondary);
+        box-shadow: 0 0 0 2px var(--primary);
+      }
+      .user-level {
+        position: absolute;
+        bottom: -4px;
+        right: -4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background: var(--primary);
+        color: var(--primary-foreground);
+        font-size: 0.75rem;
+        font-weight: 700;
+      }
+      .user-details h2 {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--foreground);
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+      .you-badge {
+        font-size: 0.75rem;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        background: var(--primary);
+        color: var(--primary-foreground);
+        font-weight: 500;
+      }
+      .user-meta {
+        font-size: 0.875rem;
+        color: var(--muted-foreground);
+      }
+      .user-score {
+        text-align: right;
+      }
+      .score-value {
+        font-size: 1.875rem;
+        font-weight: 900;
+        color: var(--foreground);
+      }
+      .streak-info {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        justify-content: flex-end;
+        color: var(--primary);
+        font-size: 0.875rem;
+      }
+      .streak-icon {
+        display: flex;
+        align-items: center;
+      }
+      .tabs {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-bottom: 1.5rem;
+        padding: 0.25rem;
+        background: oklch(0.22 0.02 260 / 0.5);
+        border-radius: 0.75rem;
+      }
+      .tab {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        padding: 0.625rem 1rem;
+        border-radius: 0.5rem;
+        border: none;
+        background: transparent;
+        color: var(--muted-foreground);
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        font-family: inherit;
+        font-size: 0.875rem;
+      }
+      .tab:hover {
+        color: var(--foreground);
+        background: var(--secondary);
+      }
+      .tab.active {
+        background: var(--primary);
+        color: var(--primary-foreground);
+        box-shadow: 0 4px 12px oklch(0.7 0.18 145 / 0.3);
+      }
+      .tab-icon {
+        display: flex;
+        align-items: center;
+      }
+      .tab-label {
+        display: none;
+      }
+      @media (min-width: 640px) {
+        .tab-label {
+          display: inline;
+        }
+      }
+      .toggle-btn {
+        width: 100%;
+        margin-bottom: 1rem;
+        padding: 0.5rem;
+        border: none;
+        background: transparent;
+        color: var(--muted-foreground);
+        font-size: 0.75rem;
+        cursor: pointer;
+        transition: color 0.2s;
+        font-family: inherit;
+      }
+      .toggle-btn:hover {
+        color: var(--foreground);
+      }
+      .players-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+      }
+      .load-more {
+        width: 100%;
+        margin-top: 1.5rem;
+        padding: 0.75rem;
+        border-radius: 0.75rem;
+        border: 1px solid var(--border);
+        background: var(--card);
+        color: var(--foreground);
+        font-weight: 500;
+        cursor: pointer;
+        transition: background 0.2s;
+        font-family: inherit;
+        font-size: 0.875rem;
+      }
+      .load-more:hover {
+        background: var(--secondary);
+      }
+    `,
+  ];
+
+  @property({ type: Array }) players: Player[] = [];
+  @property({ type: Object }) currentUser?: Player;
+  @property({ type: Object }) stats!: LeaderboardStats;
+
+  @state() private activeTab: 'global' | 'weekly' | 'friends' = 'global';
+  @state() private showTopThree = true;
+
+  private tabs = [
+    { id: 'global' as const, label: 'Global', icon: 'trophy' },
+    { id: 'weekly' as const, label: 'Weekly', icon: 'zap' },
+    { id: 'friends' as const, label: 'Friends', icon: 'users' },
+  ];
+
+  render() {
+    return html`
+      <!-- Header -->
+      <div class="header">
+        <div class="title-row">
+          <span class="crown-icon">${unsafeHTML(getIcon('crown', 32))}</span>
+          <h1 class="title">LEADERBOARD</h1>
+          <span class="crown-icon">${unsafeHTML(getIcon('crown', 32))}</span>
+        </div>
+        <p class="subtitle">Compete, climb, and claim your glory</p>
+      </div>
+
+      <!-- Stats Bar -->
+      <div class="stats-grid">
+        <stat-card
+          label="Total Players"
+          value=${this.stats.totalPlayers.toLocaleString()}
+          icon="users"
+        ></stat-card>
+        <stat-card
+          label="Your Rank"
+          value="#${this.stats.yourRank}"
+          icon="target"
+          ?highlight=${true}
+        ></stat-card>
+        <stat-card
+          label="Top Score"
+          value=${this.stats.topScore.toLocaleString()}
+          icon="trophy"
+        ></stat-card>
+      </div>
+
+      <!-- Current User Card -->
+      ${this.currentUser
+        ? html`
+            <div class="current-user-card">
+              <div class="user-header">
+                <div class="user-info">
+                  <div class="user-avatar-wrapper">
+                    <img
+                      class="user-avatar"
+                      src=${this.currentUser.avatar}
+                      alt=${this.currentUser.username}
+                      crossorigin="anonymous"
+                    />
+                    <span class="user-level">${this.currentUser.level}</span>
+                  </div>
+                  <div class="user-details">
+                    <h2>
+                      ${this.currentUser.username}
+                      <span class="you-badge">YOU</span>
+                    </h2>
+                    <div class="user-meta">
+                      Rank #${this.currentUser.rank} • ${this.currentUser.wins}
+                      wins
+                    </div>
+                  </div>
+                </div>
+                <div class="user-score">
+                  <div class="score-value">
+                    ${this.currentUser.score.toLocaleString()}
+                  </div>
+                  <div class="streak-info">
+                    <span class="streak-icon"
+                      >${unsafeHTML(getIcon('flame', 16))}</span
+                    >
+                    <span>${this.currentUser.streak} day streak</span>
+                  </div>
+                </div>
+              </div>
+              <xp-progress
+                .xp=${this.currentUser.xp}
+                .xpToNextLevel=${this.currentUser.xpToNextLevel}
+                .level=${this.currentUser.level}
+                size="lg"
+              ></xp-progress>
+            </div>
+          `
+        : ''}
+
+      <!-- Tabs -->
+      <div class="tabs">
+        ${this.tabs.map(
+          (tab) => html`
+            <button
+              class="tab ${this.activeTab === tab.id ? 'active' : ''}"
+              @click=${() => (this.activeTab = tab.id)}
+            >
+              <span class="tab-icon"
+                >${unsafeHTML(getIcon(tab.icon as any, 16))}</span
+              >
+              <span class="tab-label">${tab.label}</span>
+            </button>
+          `,
+        )}
+      </div>
+
+      <!-- Top Three Podium -->
+      ${this.showTopThree && this.players.length >= 3
+        ? html` <top-three .players=${this.players}></top-three> `
+        : ''}
+
+      <!-- Toggle Top Three -->
+      <button
+        class="toggle-btn"
+        @click=${() => (this.showTopThree = !this.showTopThree)}
+      >
+        ${this.showTopThree ? 'Hide podium' : 'Show podium'}
+      </button>
+
+      <!-- Players List -->
+      <div class="players-list">
+        ${this.players.map(
+          (player) => html`
+            <player-row
+              .player=${player}
+              .isCurrentUser=${this.currentUser?.id === player.id}
+            ></player-row>
+          `,
+        )}
+      </div>
+
+      <!-- Load More -->
+      <button class="load-more">Load More Players</button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'game-leaderboard': GameLeaderboard;
+  }
+}