@oddsmith/ui 0.0.0 → 1.0.1

package/src/components/casino-leaderboard/casino-leaderboard.scss

@@ -1,585 +0,0 @@
-:host {
-    display: block;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-      sans-serif;
-  }
-
-  .leaderboard {
-    background: linear-gradient(145deg, #12151a 0%, #0d1015 100%);
-    border: 1px solid rgba(212, 175, 55, 0.2);
-    border-radius: 24px;
-    padding: 2rem;
-    width: 100%;
-    max-width: 900px;
-    box-shadow: 0 0 60px rgba(212, 175, 55, 0.1),
-      0 25px 50px -12px rgba(0, 0, 0, 0.8),
-      inset 0 1px 0 rgba(255, 255, 255, 0.05);
-    overflow: hidden;
-    position: relative;
-  }
-
-  .leaderboard::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      #d4af37 20%,
-      #ffd700 50%,
-      #d4af37 80%,
-      transparent
-    );
-  }
-
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 2rem;
-    padding-bottom: 1.5rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  }
-
-  .header-left {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
-
-  .trophy-icon {
-    width: 48px;
-    height: 48px;
-    background: linear-gradient(145deg, #ffd700, #d4af37);
-    border-radius: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
-  }
-
-  .title-container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .title {
-    font-family: 'Orbitron', sans-serif;
-    font-size: 1.75rem;
-    font-weight: 900;
-    background: linear-gradient(135deg, #ffd700 0%, #d4af37 50%, #ffeeba 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-  }
-
-  .subtitle {
-    font-size: 0.75rem;
-    color: #6b7280;
-    text-transform: uppercase;
-    letter-spacing: 3px;
-    margin-top: 4px;
-  }
-
-  .prize-pool {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 4px;
-  }
-
-  .prize-label {
-    font-size: 0.7rem;
-    color: #6b7280;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-  }
-
-  .prize-amount {
-    font-family: 'Orbitron', sans-serif;
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: #10b981;
-    text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
-  }
-
-  .tabs {
-    display: flex;
-    gap: 0.5rem;
-    margin-bottom: 1.5rem;
-    background: rgba(0, 0, 0, 0.3);
-    padding: 6px;
-    border-radius: 12px;
-    width: fit-content;
-  }
-
-  .tab {
-    padding: 0.625rem 1.25rem;
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: #6b7280;
-    background: transparent;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-  }
-
-  .tab:hover {
-    color: #9ca3af;
-    background: rgba(255, 255, 255, 0.05);
-  }
-
-  .tab.active {
-    background: linear-gradient(145deg, #d4af37, #b8962e);
-    color: #0a0a0f;
-    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
-  }
-
-  .table-header {
-    display: grid;
-    grid-template-columns: 60px 1fr 120px 140px 100px 80px;
-    padding: 0.75rem 1rem;
-    font-size: 0.7rem;
-    font-weight: 600;
-    color: #6b7280;
-    text-transform: uppercase;
-    letter-spacing: 1.5px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  }
-
-  .player-list {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .player-row {
-    display: grid;
-    grid-template-columns: 60px 1fr 120px 140px 100px 80px;
-    align-items: center;
-    padding: 1rem;
-    background: rgba(255, 255, 255, 0.02);
-    border-radius: 12px;
-    transition: all 0.3s ease;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .player-row::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background: transparent;
-    transition: background 0.3s ease;
-  }
-
-  .player-row:hover {
-    background: rgba(212, 175, 55, 0.08);
-    transform: translateX(4px);
-  }
-
-  .player-row:hover::before {
-    background: linear-gradient(180deg, #d4af37, #ffd700);
-  }
-
-  .player-row.top-1 {
-    background: linear-gradient(
-      90deg,
-      rgba(255, 215, 0, 0.15) 0%,
-      rgba(255, 215, 0, 0.02) 100%
-    );
-    border: 1px solid rgba(255, 215, 0, 0.2);
-  }
-
-  .player-row.top-2 {
-    background: linear-gradient(
-      90deg,
-      rgba(192, 192, 192, 0.12) 0%,
-      rgba(192, 192, 192, 0.02) 100%
-    );
-    border: 1px solid rgba(192, 192, 192, 0.15);
-  }
-
-  .player-row.top-3 {
-    background: linear-gradient(
-      90deg,
-      rgba(205, 127, 50, 0.12) 0%,
-      rgba(205, 127, 50, 0.02) 100%
-    );
-    border: 1px solid rgba(205, 127, 50, 0.15);
-  }
-
-  .rank {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    font-weight: 800;
-    font-size: 1rem;
-    border-radius: 10px;
-    position: relative;
-  }
-
-  .rank.gold {
-    background: linear-gradient(145deg, #ffd700, #d4af37);
-    color: #0a0a0f;
-    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
-  }
-
-  .rank.silver {
-    background: linear-gradient(145deg, #e8e8e8, #c0c0c0);
-    color: #0a0a0f;
-    box-shadow: 0 4px 15px rgba(192, 192, 192, 0.3);
-  }
-
-  .rank.bronze {
-    background: linear-gradient(145deg, #cd7f32, #a0522d);
-    color: #fff;
-    box-shadow: 0 4px 15px rgba(205, 127, 50, 0.3);
-  }
-
-  .rank.regular {
-    background: rgba(255, 255, 255, 0.08);
-    color: #9ca3af;
-    font-size: 0.9rem;
-  }
-
-  .player-info {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
-
-  .avatar-container {
-    position: relative;
-  }
-
-  .avatar {
-    width: 44px;
-    height: 44px;
-    border-radius: 12px;
-    object-fit: cover;
-    border: 2px solid rgba(255, 255, 255, 0.1);
-  }
-
-  .online-indicator {
-    position: absolute;
-    bottom: -2px;
-    right: -2px;
-    width: 12px;
-    height: 12px;
-    background: #10b981;
-    border-radius: 50%;
-    border: 2px solid #12151a;
-    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
-  }
-
-  .online-indicator.offline {
-    background: #6b7280;
-    box-shadow: none;
-  }
-
-  .player-details {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .player-name {
-    font-weight: 700;
-    font-size: 0.95rem;
-    color: #f3f4f6;
-  }
-
-  .player-level {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }
-
-  .level-badge {
-    font-size: 0.65rem;
-    font-weight: 700;
-    padding: 2px 8px;
-    border-radius: 4px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-
-  .level-badge.legendary {
-    background: linear-gradient(135deg, #8b5cf6, #6366f1);
-    color: #fff;
-  }
-
-  .level-badge.diamond {
-    background: linear-gradient(135deg, #06b6d4, #0891b2);
-    color: #fff;
-  }
-
-  .level-badge.platinum {
-    background: linear-gradient(135deg, #6b7280, #4b5563);
-    color: #fff;
-  }
-
-  .level-badge.gold {
-    background: linear-gradient(135deg, #d4af37, #b8962e);
-    color: #0a0a0f;
-  }
-
-  .score {
-    font-family: 'Orbitron', sans-serif;
-    font-weight: 700;
-    font-size: 1.1rem;
-    color: #f3f4f6;
-  }
-
-  .winnings {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-weight: 700;
-    font-size: 1rem;
-    color: #10b981;
-  }
-
-  .winnings-icon {
-    font-size: 1.1rem;
-  }
-
-  .streak {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-weight: 600;
-    font-size: 0.9rem;
-  }
-
-  .streak.hot {
-    color: #f97316;
-  }
-
-  .streak.cold {
-    color: #6b7280;
-  }
-
-  .streak-icon {
-    font-size: 1rem;
-  }
-
-  .change {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    font-weight: 700;
-    font-size: 0.85rem;
-  }
-
-  .change.up {
-    color: #10b981;
-  }
-
-  .change.down {
-    color: #ef4444;
-  }
-
-  .change.same {
-    color: #6b7280;
-  }
-
-  .change-arrow {
-    font-size: 0.75rem;
-  }
-
-  .footer {
-    margin-top: 1.5rem;
-    padding-top: 1.5rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .footer-stats {
-    display: flex;
-    gap: 2rem;
-  }
-
-  .stat {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .stat-label {
-    font-size: 0.65rem;
-    color: #6b7280;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-  }
-
-  .stat-value {
-    font-weight: 700;
-    font-size: 1rem;
-    color: #f3f4f6;
-  }
-
-  .refresh-btn {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 20px;
-    background: rgba(212, 175, 55, 0.1);
-    border: 1px solid rgba(212, 175, 55, 0.3);
-    border-radius: 10px;
-    color: #d4af37;
-    font-weight: 600;
-    font-size: 0.8rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-  }
-
-  .refresh-btn:hover {
-    background: rgba(212, 175, 55, 0.2);
-    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
-  }
-
-  .refresh-icon {
-    transition: transform 0.5s ease;
-  }
-
-  .refresh-btn:hover .refresh-icon {
-    transform: rotate(180deg);
-  }
-
-  @keyframes pulse {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.5;
-    }
-  }
-
-  .live-indicator {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 0.7rem;
-    color: #ef4444;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-weight: 600;
-  }
-
-  .live-dot {
-    width: 8px;
-    height: 8px;
-    background: #ef4444;
-    border-radius: 50%;
-    animation: pulse 1.5s ease-in-out infinite;
-    box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
-  }
-
-  @media (max-width: 768px) {
-    .leaderboard {
-      padding: 1.25rem;
-    }
-
-    .header {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 1rem;
-    }
-
-    .prize-pool {
-      align-items: flex-start;
-    }
-
-    .table-header {
-      display: none;
-    }
-
-    .player-row {
-      grid-template-columns: 40px 1fr auto;
-      gap: 0.75rem;
-      padding: 0.875rem;
-    }
-
-    .rank {
-      width: 32px;
-      height: 32px;
-      font-size: 0.85rem;
-    }
-
-    .avatar {
-      width: 36px;
-      height: 36px;
-    }
-
-    .score,
-    .winnings,
-    .streak,
-    .change {
-      display: none;
-    }
-
-    .player-name {
-      font-size: 0.85rem;
-    }
-
-    .mobile-stats {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      gap: 2px;
-    }
-
-    .mobile-score {
-      font-family: 'Orbitron', sans-serif;
-      font-weight: 700;
-      font-size: 0.9rem;
-      color: #f3f4f6;
-    }
-
-    .mobile-winnings {
-      font-size: 0.75rem;
-      color: #10b981;
-      font-weight: 600;
-    }
-
-    .footer {
-      flex-direction: column;
-      gap: 1rem;
-    }
-
-    .footer-stats {
-      width: 100%;
-      justify-content: space-between;
-    }
-
-    .title {
-      font-size: 1.25rem;
-    }
-
-    .prize-amount {
-      font-size: 1.25rem;
-    }
-  }

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

@@ -1,136 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { scss } from '../../lib/lit/scss.js';
-import { getPlayers, getState } from './data.js';
-import renderTemplate from './casino-leaderboard.html?lit-html';
-import styles from './casino-leaderboard.scss?inline';
-
-@customElement('casino-leaderboard')
-export class CasinoLeaderboard extends LitElement {
-  static styles = scss(styles);
-
-  @property({ type: Array })
-  players = getPlayers();
-
-  initialData = getState();
-
-  @state()
-  private activeTab: 'daily' | 'weekly' | 'alltime' = this.initialData.activeTab;
-
-  @state()
-  private prizePool = this.initialData.prizePool;
-
-  @state()
-  private totalPlayers = this.initialData.totalPlayers;
-
-  @state()
-  private activePlayers = this.initialData.activePlayers;
-
-  formatNumber(num: number): string {
-    if (num >= 1000000) {
-      return (num / 1000000).toFixed(1) + 'M';
-    }
-    if (num >= 1000) {
-      return (num / 1000).toFixed(1) + 'K';
-    }
-    return num.toLocaleString();
-  }
-
-  formatMoney(num: number): string {
-    return '$' + num.toLocaleString();
-  }
-
-  getRankClass(rank: number): string {
-    if (rank === 1) return 'gold';
-    if (rank === 2) return 'silver';
-    if (rank === 3) return 'bronze';
-    return 'regular';
-  }
-
-  getRowClass(rank: number): string {
-    if (rank === 1) return 'top-1';
-    if (rank === 2) return 'top-2';
-    if (rank === 3) return 'top-3';
-    return '';
-  }
-
-  getLevelBadge(level: number): { class: string; text: string } {
-    const levels = [
-      { class: 'gold', text: 'Gold' },
-      { class: 'platinum', text: 'Platinum' },
-      { class: 'diamond', text: 'Diamond' },
-      { class: 'legendary', text: 'Legendary' },
-    ];
-    return levels[level - 1] || levels[0];
-  }
-
-  handleTabClick(tab: 'daily' | 'weekly' | 'alltime') {
-    this.activeTab = tab;
-  }
-
-  handleRefresh() {
-    this.dispatchEvent(
-      new CustomEvent('refresh', { bubbles: true, composed: true }),
-    );
-  }
-
-  renderPlayerList() {
-    return this.players.map(
-      (player) => html`
-        <div class="player-row ${this.getRowClass(player.rank)}">
-          <div class="rank ${this.getRankClass(player.rank)}">${player.rank}</div>
-          <div class="player-info">
-            <div class="avatar-container">
-              <img class="avatar" src="${player.avatar}" alt="${player.name}" />
-              <div
-                class="online-indicator ${player.isOnline ? '' : 'offline'}"
-              ></div>
-            </div>
-            <div class="player-details">
-              <span class="player-name">${player.name}</span>
-              <div class="player-level">
-                <span
-                  class="level-badge ${this.getLevelBadge(player.level).class}"
-                >
-                  ${this.getLevelBadge(player.level).text}
-                </span>
-              </div>
-            </div>
-          </div>
-          <div class="score">${this.formatNumber(player.score)}</div>
-          <div class="winnings">
-            <span class="winnings-icon">💰</span>
-            ${this.formatMoney(player.winnings)}
-          </div>
-          <div class="streak ${player.streak >= 5 ? 'hot' : 'cold'}">
-            <span class="streak-icon">${player.streak >= 5 ? '🔥' : '⚡'}</span>
-            ${player.streak} wins
-          </div>
-          <div class="change ${player.change}">
-            ${player.change === 'up'
-              ? html`<span class="change-arrow">▲</span> +3`
-              : ''}
-            ${player.change === 'down'
-              ? html`<span class="change-arrow">▼</span> -2`
-              : ''}
-            ${player.change === 'same' ? '—' : ''}
-          </div>
-          <div class="mobile-stats">
-            <span class="mobile-score">${this.formatNumber(player.score)}</span>
-            <span class="mobile-winnings">${this.formatMoney(player.winnings)}</span>
-          </div>
-        </div>
-      `,
-    );
-  }
-
-  render() {
-    return renderTemplate(this);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'casino-leaderboard': CasinoLeaderboard;
-  }
-}