@oddsmith/ui 0.0.0 → 1.0.1

package/src/components/leaderboard/styles.ts

@@ -1,67 +0,0 @@
-import { css } from 'lit';
-
-export const sharedStyles = css`
-  :host {
-    --background: oklch(0.12 0.01 260);
-    --foreground: oklch(0.98 0 0);
-    --card: oklch(0.16 0.015 260);
-    --card-foreground: oklch(0.98 0 0);
-    --primary: oklch(0.7 0.18 145);
-    --primary-foreground: oklch(0.12 0.01 260);
-    --secondary: oklch(0.22 0.02 260);
-    --secondary-foreground: oklch(0.9 0 0);
-    --muted: oklch(0.2 0.015 260);
-    --muted-foreground: oklch(0.6 0.02 260);
-    --accent: oklch(0.75 0.2 50);
-    --accent-foreground: oklch(0.12 0.01 260);
-    --destructive: oklch(0.6 0.22 25);
-    --border: oklch(0.25 0.02 260);
-    --gold: oklch(0.8 0.18 85);
-    --silver: oklch(0.75 0.02 260);
-    --bronze: oklch(0.65 0.12 55);
-    --radius: 0.75rem;
-
-    font-family: 'Inter', system-ui, sans-serif;
-    color: var(--foreground);
-  }
-
-  * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-
-  .glow-gold {
-    box-shadow: 0 0 20px oklch(0.8 0.18 85 / 0.4);
-  }
-
-  .glow-primary {
-    box-shadow: 0 0 20px oklch(0.7 0.18 145 / 0.4);
-  }
-
-  .glow-accent {
-    box-shadow: 0 0 20px oklch(0.75 0.2 50 / 0.4);
-  }
-`;
-
-// SVG Icons as template strings
-export const icons = {
-  trophy: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>`,
-  crown: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z"/><path d="M5 21h14"/></svg>`,
-  flame: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>`,
-  star: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>`,
-  zap: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>`,
-  gem: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h12l4 6-10 13L2 9Z"/><path d="M11 3 8 9l4 13 4-13-3-6"/><path d="M2 9h20"/></svg>`,
-  users: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`,
-  target: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>`,
-  trendingUp: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>`,
-  trendingDown: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></svg>`,
-  minus: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>`,
-};
-
-export function getIcon(name: keyof typeof icons, size: number = 16): string {
-  const icon = icons[name] || '';
-  return icon
-    .replace(/width="\d+"/, `width="${size}"`)
-    .replace(/height="\d+"/, `height="${size}"`);
-}

package/src/components/leaderboard/types.ts

@@ -1,28 +0,0 @@
-export interface Player {
-  id: string;
-  rank: number;
-  username: string;
-  avatar: string;
-  level: number;
-  xp: number;
-  xpToNextLevel: number;
-  score: number;
-  wins: number;
-  streak: number;
-  badges: Badge[];
-  trend: 'up' | 'down' | 'same';
-  rankChange?: number;
-}
-
-export interface Badge {
-  id: string;
-  name: string;
-  icon: string;
-  rarity: 'common' | 'rare' | 'epic' | 'legendary';
-}
-
-export interface LeaderboardStats {
-  totalPlayers: number;
-  yourRank: number;
-  topScore: number;
-}

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

@@ -1,451 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { css } from 'lit';
-import { lbTokens } from '../tokens.js';
-import type { LbPlayer } from '../types.js';
-import './sf-leaderboard-ui.js';
-
-@customElement('sf-lb-player-row')
-class SfLbPlayerRow extends LitElement {
-  static styles = [
-    lbTokens,
-    css`
-      .row {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        padding: 1rem;
-        border-radius: var(--lb-radius);
-        background: var(--lb-surface);
-        border: 1px solid var(--lb-border);
-        backdrop-filter: blur(12px);
-        cursor: pointer;
-        transition: all 0.25s ease;
-      }
-      .row:hover {
-        border-color: rgba(0, 245, 255, 0.55);
-        background: var(--lb-surface-hover);
-        box-shadow:
-          var(--lb-glow-cyan),
-          inset 0 0 24px rgba(0, 245, 255, 0.04);
-      }
-      .row.current-user {
-        border-color: var(--lb-cyan);
-        background: linear-gradient(
-          135deg,
-          rgba(0, 245, 255, 0.08),
-          rgba(139, 92, 246, 0.06)
-        );
-        box-shadow: var(--lb-glow-cyan);
-      }
-      .avatar-section {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        flex: 1;
-        min-width: 0;
-      }
-      .avatar-wrapper {
-        position: relative;
-      }
-      .avatar {
-        width: 48px;
-        height: 48px;
-        border-radius: 50%;
-        background: rgba(12, 14, 28, 0.9);
-        border: 2px solid var(--lb-border);
-        box-shadow: 0 0 12px rgba(0, 245, 255, 0.15);
-      }
-      .level-badge {
-        position: absolute;
-        bottom: -4px;
-        right: -4px;
-      }
-      .info {
-        flex: 1;
-        min-width: 0;
-      }
-      .name-row {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-      .username {
-        font-weight: 600;
-        color: var(--lb-foreground);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .you-badge {
-        font-family: var(--lb-font);
-        font-size: 10px;
-        padding: 2px 6px;
-        border-radius: 4px;
-        background: linear-gradient(135deg, var(--lb-cyan), var(--lb-violet));
-        color: var(--lb-bg);
-        font-weight: 800;
-        letter-spacing: 0.06em;
-        box-shadow: 0 0 12px rgba(0, 245, 255, 0.4);
-      }
-      .xp-wrapper {
-        margin-top: 0.25rem;
-      }
-      .badges-section {
-        display: none;
-      }
-      @media (min-width: 768px) {
-        .badges-section {
-          display: block;
-        }
-      }
-      .stats-section {
-        display: flex;
-        align-items: center;
-        gap: 1.5rem;
-      }
-      .stat {
-        text-align: right;
-      }
-      .stat.wins {
-        display: none;
-      }
-      @media (min-width: 640px) {
-        .stat.wins {
-          display: block;
-        }
-      }
-      .stat-label {
-        font-size: 0.7rem;
-        color: var(--lb-muted);
-        letter-spacing: 0.06em;
-        text-transform: uppercase;
-      }
-      .stat-value {
-        font-weight: 600;
-        color: var(--lb-foreground);
-      }
-      .stat-value.score {
-        font-family: var(--lb-font);
-        font-size: 1.125rem;
-        font-weight: 800;
-        color: var(--lb-cyan);
-        text-shadow: 0 0 12px rgba(0, 245, 255, 0.4);
-      }
-    `,
-  ];
-
-  @property({ type: Object }) player!: LbPlayer;
-  @property({ type: Boolean }) isCurrentUser = false;
-
-  render() {
-    return html`
-      <div class="row ${this.isCurrentUser ? 'current-user' : ''}">
-        <sf-lb-rank-badge .rank=${this.player.rank}></sf-lb-rank-badge>
-
-        <div class="avatar-section">
-          <div class="avatar-wrapper">
-            <img
-              class="avatar"
-              src=${this.player.avatar}
-              alt=${this.player.username}
-              crossorigin="anonymous"
-            />
-            <div class="level-badge">
-              <sf-lb-level-badge
-                .level=${this.player.level}
-                size="sm"
-              ></sf-lb-level-badge>
-            </div>
-          </div>
-
-          <div class="info">
-            <div class="name-row">
-              <span class="username">${this.player.username}</span>
-              ${this.isCurrentUser
-                ? html`<span class="you-badge">YOU</span>`
-                : ''}
-              <sf-lb-streak-badge
-                .streak=${this.player.streak}
-              ></sf-lb-streak-badge>
-            </div>
-            <div class="xp-wrapper">
-              <sf-lb-xp-progress
-                .xp=${this.player.xp}
-                .xpToNextLevel=${this.player.xpToNextLevel}
-                .level=${this.player.level}
-                size="sm"
-                .showLabel=${false}
-              ></sf-lb-xp-progress>
-            </div>
-          </div>
-        </div>
-
-        <div class="badges-section">
-          <sf-lb-badge-display
-            .badges=${this.player.badges}
-            .max=${3}
-          ></sf-lb-badge-display>
-        </div>
-
-        <div class="stats-section">
-          <div class="stat wins">
-            <div class="stat-label">Wins</div>
-            <div class="stat-value">${this.player.wins}</div>
-          </div>
-          <div class="stat">
-            <div class="stat-label">Score</div>
-            <div class="stat-value score">
-              ${this.player.score.toLocaleString()}
-            </div>
-          </div>
-          <sf-lb-trend
-            .trend=${this.player.trend}
-            .rankChange=${this.player.rankChange}
-          ></sf-lb-trend>
-        </div>
-      </div>
-    `;
-  }
-}
-
-@customElement('sf-lb-top-three')
-class SfLbTopThree extends LitElement {
-  static styles = [
-    lbTokens,
-    css`
-      .container {
-        display: flex;
-        align-items: flex-end;
-        justify-content: center;
-        gap: 1rem;
-        margin-bottom: 2rem;
-      }
-      .player {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-      .player.rank-1 {
-        order: 2;
-      }
-      .player.rank-2 {
-        order: 1;
-      }
-      .player.rank-3 {
-        order: 3;
-      }
-      .player-info {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-bottom: 0.5rem;
-      }
-      .avatar-wrapper {
-        position: relative;
-        margin-bottom: 0.5rem;
-      }
-      .avatar {
-        border-radius: 50%;
-        background: rgba(12, 14, 28, 0.9);
-      }
-      .avatar.rank-1 {
-        width: 80px;
-        height: 80px;
-        border: 3px solid var(--lb-gold);
-        box-shadow:
-          var(--lb-glow-gold),
-          0 0 40px rgba(255, 213, 74, 0.35);
-        animation: champion-pulse 2.5s ease-in-out infinite;
-      }
-      .avatar.rank-2 {
-        width: 64px;
-        height: 64px;
-        border: 2px solid var(--lb-silver);
-        box-shadow: 0 0 20px rgba(192, 212, 232, 0.35);
-      }
-      .avatar.rank-3 {
-        width: 64px;
-        height: 64px;
-        border: 2px solid var(--lb-bronze);
-        box-shadow: 0 0 20px rgba(205, 127, 50, 0.35);
-      }
-      @keyframes champion-pulse {
-        0%,
-        100% {
-          box-shadow:
-            var(--lb-glow-gold),
-            0 0 40px rgba(255, 213, 74, 0.35);
-          transform: scale(1);
-        }
-        50% {
-          box-shadow:
-            0 0 48px rgba(255, 213, 74, 0.65),
-            0 0 64px rgba(0, 245, 255, 0.25);
-          transform: scale(1.03);
-        }
-      }
-      .rank-wrapper {
-        position: absolute;
-        bottom: -8px;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      .username {
-        font-weight: 600;
-        color: var(--lb-foreground);
-        text-align: center;
-        font-size: 0.875rem;
-        margin-top: 1rem;
-      }
-      .level {
-        font-size: 0.75rem;
-        color: var(--lb-muted);
-      }
-      .score {
-        font-family: var(--lb-font);
-        font-weight: 800;
-        color: var(--lb-cyan);
-        font-size: 1.125rem;
-        text-shadow: 0 0 14px rgba(0, 245, 255, 0.45);
-      }
-      .podium {
-        width: 96px;
-        border-radius: 8px 8px 0 0;
-        display: flex;
-        align-items: flex-end;
-        justify-content: center;
-        padding-bottom: 0.5rem;
-        position: relative;
-        overflow: hidden;
-        backdrop-filter: blur(8px);
-      }
-      .podium::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background: linear-gradient(
-          180deg,
-          rgba(255, 255, 255, 0.08) 0%,
-          transparent 40%
-        );
-        pointer-events: none;
-      }
-      .podium::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background: repeating-linear-gradient(
-          0deg,
-          transparent,
-          transparent 3px,
-          rgba(0, 245, 255, 0.04) 3px,
-          rgba(0, 245, 255, 0.04) 4px
-        );
-        pointer-events: none;
-        opacity: 0.6;
-      }
-      .podium.rank-1 {
-        height: 128px;
-        background: linear-gradient(
-          180deg,
-          rgba(255, 213, 74, 0.25) 0%,
-          rgba(255, 170, 0, 0.08) 60%,
-          rgba(0, 245, 255, 0.06) 100%
-        );
-        border-top: 3px solid var(--lb-gold);
-        box-shadow:
-          var(--lb-glow-gold),
-          inset 0 0 30px rgba(255, 213, 74, 0.15);
-        animation: holo-pillar 3s ease-in-out infinite;
-      }
-      .podium.rank-2 {
-        height: 96px;
-        background: linear-gradient(
-          180deg,
-          rgba(192, 212, 232, 0.2) 0%,
-          rgba(139, 92, 246, 0.06) 100%
-        );
-        border-top: 3px solid var(--lb-silver);
-        box-shadow: inset 0 0 20px rgba(192, 212, 232, 0.1);
-      }
-      .podium.rank-3 {
-        height: 80px;
-        background: linear-gradient(
-          180deg,
-          rgba(205, 127, 50, 0.22) 0%,
-          rgba(255, 43, 214, 0.05) 100%
-        );
-        border-top: 3px solid var(--lb-bronze);
-        box-shadow: inset 0 0 20px rgba(205, 127, 50, 0.1);
-      }
-      @keyframes holo-pillar {
-        0%,
-        100% {
-          filter: hue-rotate(0deg) brightness(1);
-        }
-        50% {
-          filter: hue-rotate(15deg) brightness(1.08);
-        }
-      }
-      .podium-number {
-        font-family: var(--lb-font);
-        font-size: 1.5rem;
-        font-weight: 900;
-        color: rgba(240, 244, 255, 0.25);
-        position: relative;
-        z-index: 1;
-      }
-      .podium.rank-1 .podium-number {
-        color: rgba(255, 213, 74, 0.45);
-        text-shadow: 0 0 20px rgba(255, 213, 74, 0.5);
-      }
-    `,
-  ];
-
-  @property({ type: Array }) players: LbPlayer[] = [];
-
-  render() {
-    const topPlayers = this.players.slice(0, 3);
-    const orderedPlayers = [topPlayers[1], topPlayers[0], topPlayers[2]].filter(
-      Boolean,
-    );
-
-    return html`
-      <div class="container">
-        ${orderedPlayers.map(
-          (player) => html`
-            <div class="player rank-${player.rank}">
-              <div class="player-info">
-                <div class="avatar-wrapper">
-                  <img
-                    class="avatar rank-${player.rank}"
-                    src=${player.avatar}
-                    alt=${player.username}
-                    crossorigin="anonymous"
-                  />
-                  <div class="rank-wrapper">
-                    <sf-lb-rank-badge .rank=${player.rank}></sf-lb-rank-badge>
-                  </div>
-                </div>
-                <span class="username">${player.username}</span>
-                <span class="level">Level ${player.level}</span>
-                <span class="score">${player.score.toLocaleString()}</span>
-              </div>
-              <div class="podium rank-${player.rank}">
-                <span class="podium-number">${player.rank}</span>
-              </div>
-            </div>
-          `,
-        )}
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sf-lb-player-row': SfLbPlayerRow;
-    'sf-lb-top-three': SfLbTopThree;
-  }
-}