@oddsmith/ui 0.0.0

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

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

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