@oddsmith/ui 0.0.0

package/src/components/leaderboard-v2/components/sf-leaderboard-ui.ts

@@ -0,0 +1,512 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { css } from 'lit';
+import { lbTokens } from '../tokens.js';
+import { getIcon } from '../icons.js';
+import type { LbBadge } from '../types.js';
+
+@customElement('sf-lb-rank-badge')
+class SfLbRankBadge extends LitElement {
+  static styles = [
+    lbTokens,
+    css`
+      .badge {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.25rem;
+        border-radius: 8px;
+        font-family: var(--lb-font);
+        font-weight: 800;
+        font-size: 0.8rem;
+        min-width: 48px;
+        height: 32px;
+        padding: 0 0.5rem;
+        border: 1px solid transparent;
+        backdrop-filter: blur(8px);
+      }
+      .badge.rank-1 {
+        background: linear-gradient(
+          135deg,
+          rgba(255, 213, 74, 0.35),
+          rgba(255, 170, 0, 0.2)
+        );
+        color: var(--lb-gold);
+        border-color: var(--lb-gold);
+        box-shadow: var(--lb-glow-gold);
+        text-shadow: 0 0 12px rgba(255, 213, 74, 0.6);
+      }
+      .badge.rank-2 {
+        background: linear-gradient(
+          135deg,
+          rgba(192, 212, 232, 0.25),
+          rgba(160, 180, 210, 0.15)
+        );
+        color: var(--lb-silver);
+        border-color: var(--lb-silver);
+        box-shadow: 0 0 16px rgba(192, 212, 232, 0.35);
+      }
+      .badge.rank-3 {
+        background: linear-gradient(
+          135deg,
+          rgba(205, 127, 50, 0.3),
+          rgba(180, 100, 40, 0.15)
+        );
+        color: var(--lb-bronze);
+        border-color: var(--lb-bronze);
+        box-shadow: 0 0 16px rgba(205, 127, 50, 0.35);
+      }
+      .badge.rank-default {
+        background: rgba(12, 14, 28, 0.7);
+        color: var(--lb-muted);
+        border-color: var(--lb-border);
+      }
+      .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('sf-lb-xp-progress')
+class SfLbXpProgress extends LitElement {
+  static styles = [
+    lbTokens,
+    css`
+      .container {
+        width: 100%;
+      }
+      .label-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0.25rem;
+      }
+      .label {
+        font-size: 0.7rem;
+        color: var(--lb-muted);
+        letter-spacing: 0.04em;
+      }
+      .track {
+        width: 100%;
+        background: rgba(0, 0, 0, 0.45);
+        border-radius: 9999px;
+        overflow: hidden;
+        border: 1px solid var(--lb-border);
+        box-shadow: inset 0 0 8px rgba(0, 245, 255, 0.08);
+      }
+      .track.sm {
+        height: 6px;
+      }
+      .track.md {
+        height: 8px;
+      }
+      .track.lg {
+        height: 12px;
+      }
+      .fill {
+        height: 100%;
+        border-radius: 9999px;
+        background: linear-gradient(
+          90deg,
+          var(--lb-cyan),
+          var(--lb-violet),
+          var(--lb-magenta)
+        );
+        box-shadow: 0 0 12px rgba(0, 245, 255, 0.5);
+        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('sf-lb-trend')
+class SfLbTrend extends LitElement {
+  static styles = [
+    lbTokens,
+    css`
+      .container {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+      }
+      .up {
+        color: var(--lb-success);
+        filter: drop-shadow(0 0 6px rgba(34, 255, 154, 0.5));
+      }
+      .down {
+        color: var(--lb-danger);
+        filter: drop-shadow(0 0 6px rgba(255, 68, 102, 0.5));
+      }
+      .same {
+        color: var(--lb-muted);
+      }
+      .change {
+        font-size: 0.75rem;
+        font-weight: 600;
+        font-family: var(--lb-font);
+      }
+      .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('sf-lb-streak-badge')
+class SfLbStreakBadge extends LitElement {
+  static styles = [
+    lbTokens,
+    css`
+      .badge {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.25rem 0.5rem;
+        border-radius: 9999px;
+        background: rgba(255, 43, 214, 0.12);
+        border: 1px solid rgba(255, 43, 214, 0.35);
+        color: var(--lb-magenta);
+        font-size: 0.7rem;
+        font-weight: 600;
+        box-shadow: 0 0 14px rgba(255, 43, 214, 0.25);
+      }
+      .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('sf-lb-level-badge')
+class SfLbLevelBadge extends LitElement {
+  static styles = [
+    lbTokens,
+    css`
+      .badge {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 9999px;
+        border-width: 2px;
+        border-style: solid;
+        background: rgba(5, 5, 16, 0.85);
+        font-family: var(--lb-font);
+        font-weight: 800;
+        backdrop-filter: blur(6px);
+      }
+      .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(--lb-gold);
+        color: var(--lb-gold);
+        box-shadow: var(--lb-glow-gold);
+      }
+      .badge.level-70 {
+        border-color: var(--lb-magenta);
+        color: var(--lb-magenta);
+        box-shadow: 0 0 20px rgba(255, 43, 214, 0.4);
+      }
+      .badge.level-50 {
+        border-color: var(--lb-cyan);
+        color: var(--lb-cyan);
+        box-shadow: var(--lb-glow-cyan);
+      }
+      .badge.level-default {
+        border-color: var(--lb-muted);
+        color: var(--lb-muted);
+      }
+    `,
+  ];
+
+  @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('sf-lb-badge-display')
+class SfLbBadgeDisplay extends LitElement {
+  static styles = [
+    lbTokens,
+    css`
+      .container {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+      }
+      .badge {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 26px;
+        height: 26px;
+        border-radius: 6px;
+        border: 1px solid;
+        font-size: 0.875rem;
+        backdrop-filter: blur(6px);
+      }
+      .badge.common {
+        background: rgba(123, 132, 153, 0.15);
+        border-color: rgba(123, 132, 153, 0.4);
+        color: var(--lb-muted);
+      }
+      .badge.rare {
+        background: rgba(0, 245, 255, 0.12);
+        border-color: rgba(0, 245, 255, 0.4);
+        color: var(--lb-cyan);
+        box-shadow: 0 0 10px rgba(0, 245, 255, 0.2);
+      }
+      .badge.epic {
+        background: rgba(255, 43, 214, 0.12);
+        border-color: rgba(255, 43, 214, 0.4);
+        color: var(--lb-magenta);
+        box-shadow: 0 0 10px rgba(255, 43, 214, 0.2);
+      }
+      .badge.legendary {
+        background: rgba(255, 213, 74, 0.15);
+        border-color: rgba(255, 213, 74, 0.5);
+        color: var(--lb-gold);
+        box-shadow: 0 0 12px rgba(255, 213, 74, 0.3);
+      }
+      .remaining {
+        font-size: 0.7rem;
+        color: var(--lb-muted);
+        margin-left: 0.25rem;
+      }
+      .icon {
+        display: flex;
+        align-items: center;
+      }
+    `,
+  ];
+
+  @property({ type: Array }) badges: LbBadge[] = [];
+  @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('sf-lb-stat-card')
+class SfLbStatCard extends LitElement {
+  static styles = [
+    lbTokens,
+    css`
+      .card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 1rem;
+        border-radius: var(--lb-radius);
+        background: var(--lb-surface);
+        border: 1px solid var(--lb-border);
+        backdrop-filter: blur(12px);
+        transition: all 0.25s ease;
+      }
+      .card.highlight {
+        border-color: rgba(0, 245, 255, 0.45);
+        box-shadow: var(--lb-glow-cyan);
+        background: linear-gradient(
+          135deg,
+          rgba(0, 245, 255, 0.08),
+          rgba(139, 92, 246, 0.06)
+        );
+      }
+      .icon {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.5rem;
+        color: var(--lb-cyan);
+        filter: drop-shadow(0 0 8px rgba(0, 245, 255, 0.4));
+      }
+      .value {
+        font-family: var(--lb-font);
+        font-size: 1.5rem;
+        font-weight: 900;
+        color: var(--lb-foreground);
+        text-shadow: 0 0 16px rgba(240, 244, 255, 0.2);
+      }
+      .label {
+        font-size: 0.7rem;
+        color: var(--lb-muted);
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        margin-top: 0.15rem;
+      }
+    `,
+  ];
+
+  @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 Parameters<typeof getIcon>[0], 20))}</span
+            >`
+          : ''}
+        <span class="value">${this.value}</span>
+        <span class="label">${this.label}</span>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sf-lb-rank-badge': SfLbRankBadge;
+    'sf-lb-xp-progress': SfLbXpProgress;
+    'sf-lb-trend': SfLbTrend;
+    'sf-lb-streak-badge': SfLbStreakBadge;
+    'sf-lb-level-badge': SfLbLevelBadge;
+    'sf-lb-badge-display': SfLbBadgeDisplay;
+    'sf-lb-stat-card': SfLbStatCard;
+  }
+}

package/src/components/leaderboard-v2/components/sf-leaderboard.ts

@@ -0,0 +1,205 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import {
+  SF_LEADERBOARD_TAG,
+  DEFAULT_LB_TITLE,
+  DEFAULT_LB_SUBTITLE,
+} from '../constants.js';
+import {
+  LB_TAB_CHANGE,
+  LB_LOAD_MORE,
+  LB_PLAYER_SELECT,
+} from '../events.js';
+import type { LbTabChangeDetail, LbPlayerSelectDetail } from '../events.js';
+import { getIcon, type LbIconName } from '../icons.js';
+import type { LbPlayer, LbStats, LbTabId } from '../types.js';
+import { scss } from '../../../lib/lit/scss.js';
+import { lbTokens } from '../tokens.js';
+import componentStyles from '../sf-leaderboard.scss?inline';
+import renderTemplate from '../sf-leaderboard.html?lit-html';
+import './sf-leaderboard-ui.js';
+import './sf-leaderboard-player.js';
+
+@customElement(SF_LEADERBOARD_TAG)
+export class SfLeaderboard extends LitElement {
+  static styles = [lbTokens, scss(componentStyles)];
+
+  @property({ type: Array }) players: LbPlayer[] = [];
+  @property({ type: Object }) currentUser?: LbPlayer;
+  @property({ type: Object }) stats!: LbStats;
+  @property({ type: String, attribute: 'lb-title' }) lbTitle = DEFAULT_LB_TITLE;
+  @property({ type: String, attribute: 'lb-subtitle' })
+  lbSubtitle = DEFAULT_LB_SUBTITLE;
+
+  @state() private activeTab: LbTabId = 'global';
+  @state() private showPodium = true;
+
+  private readonly tabs: { id: LbTabId; label: string; icon: LbIconName }[] = [
+    { id: 'global', label: 'Global', icon: 'trophy' },
+    { id: 'weekly', label: 'Weekly', icon: 'zap' },
+    { id: 'friends', label: 'Friends', icon: 'users' },
+  ];
+
+  private _onTab(tab: LbTabId) {
+    this.activeTab = tab;
+    this.dispatchEvent(
+      new CustomEvent<LbTabChangeDetail>(LB_TAB_CHANGE, {
+        detail: { tab },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _onLoadMore() {
+    this.dispatchEvent(
+      new CustomEvent(LB_LOAD_MORE, { bubbles: true, composed: true }),
+    );
+  }
+
+  private _onPlayerClick(player: LbPlayer) {
+    this.dispatchEvent(
+      new CustomEvent<LbPlayerSelectDetail>(LB_PLAYER_SELECT, {
+        detail: { player },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  renderContent() {
+    return html`
+      <div class="shell">
+        <div class="live-badge">
+          <span class="live-dot"></span>
+          Live Arena
+        </div>
+
+        <header class="header">
+          <div class="title-row">
+            <span class="crown-icon">${unsafeHTML(getIcon('crown', 32))}</span>
+            <h1 class="title">${this.lbTitle}</h1>
+            <span class="crown-icon">${unsafeHTML(getIcon('crown', 32))}</span>
+          </div>
+          <p class="subtitle">${this.lbSubtitle}</p>
+        </header>
+
+        <div class="stats-grid">
+          <sf-lb-stat-card
+            label="Total Players"
+            value=${this.stats?.totalPlayers?.toLocaleString() ?? '—'}
+            icon="users"
+          ></sf-lb-stat-card>
+          <sf-lb-stat-card
+            label="Your Rank"
+            value=${this.stats ? `#${this.stats.yourRank}` : '—'}
+            icon="target"
+            ?highlight=${true}
+          ></sf-lb-stat-card>
+          <sf-lb-stat-card
+            label="Top Score"
+            value=${this.stats?.topScore?.toLocaleString() ?? '—'}
+            icon="trophy"
+          ></sf-lb-stat-card>
+        </div>
+
+        ${this.currentUser
+          ? html`
+              <section class="hero-card">
+                <div class="hero-header">
+                  <div class="hero-info">
+                    <div class="hero-avatar-wrap">
+                      <img
+                        class="hero-avatar"
+                        src=${this.currentUser.avatar}
+                        alt=${this.currentUser.username}
+                        crossorigin="anonymous"
+                      />
+                      <span class="hero-level">${this.currentUser.level}</span>
+                    </div>
+                    <div>
+                      <div class="hero-name">
+                        ${this.currentUser.username}
+                        <span class="you-chip">YOU</span>
+                      </div>
+                      <div class="hero-meta">
+                        Rank #${this.currentUser.rank} ·
+                        ${this.currentUser.wins} wins
+                      </div>
+                    </div>
+                  </div>
+                  <div class="hero-score-block">
+                    <div class="hero-score">
+                      ${this.currentUser.score.toLocaleString()}
+                    </div>
+                    <div class="hero-streak">
+                      <span>${unsafeHTML(getIcon('flame', 14))}</span>
+                      ${this.currentUser.streak} day streak
+                    </div>
+                  </div>
+                </div>
+                <sf-lb-xp-progress
+                  .xp=${this.currentUser.xp}
+                  .xpToNextLevel=${this.currentUser.xpToNextLevel}
+                  .level=${this.currentUser.level}
+                  size="lg"
+                ></sf-lb-xp-progress>
+              </section>
+            `
+          : ''}
+
+        <nav class="tabs">
+          ${this.tabs.map(
+            (tab) => html`
+              <button
+                class="tab ${this.activeTab === tab.id ? 'active' : ''}"
+                @click=${() => this._onTab(tab.id)}
+              >
+                <span>${unsafeHTML(getIcon(tab.icon, 16))}</span>
+                <span class="tab-label">${tab.label}</span>
+              </button>
+            `,
+          )}
+        </nav>
+
+        ${this.showPodium && this.players.length >= 3
+          ? html`<sf-lb-top-three .players=${this.players}></sf-lb-top-three>`
+          : ''}
+
+        <button
+          class="toggle-btn"
+          @click=${() => (this.showPodium = !this.showPodium)}
+        >
+          ${this.showPodium ? '▾ Hide champions podium' : '▸ Show champions podium'}
+        </button>
+
+        <div class="players-list">
+          ${this.players.map(
+            (player) => html`
+              <sf-lb-player-row
+                .player=${player}
+                .isCurrentUser=${this.currentUser?.id === player.id}
+                @click=${() => this._onPlayerClick(player)}
+              ></sf-lb-player-row>
+            `,
+          )}
+        </div>
+
+        <button class="load-more" @click=${this._onLoadMore}>
+          Load more contenders
+        </button>
+      </div>
+    `;
+  }
+
+  render() {
+    return renderTemplate(this);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sf-leaderboard': SfLeaderboard;
+  }
+}