@oddsmith/ui 0.0.0

package/src/components/leaderboard/styles.ts

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

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

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