@oddsmith/ui 0.0.0 → 1.0.0

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

@@ -1,111 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,2 +0,0 @@
-- 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

@@ -1,19 +0,0 @@
-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

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