@oddsmith/ui 0.0.0 → 1.0.1

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

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

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