@oddsmith/ui 0.0.0 → 1.0.0

package/src/components/leaderboard/components/ui.ts

@@ -1,452 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { getIcon, sharedStyles } from '../styles';
-import { css } from 'lit';
-import { Badge } from '../types';
-
-@customElement('rank-badge')
-export class RankBadge extends LitElement {
-  static styles = [
-    sharedStyles,
-    css`
-      .badge {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 0.25rem;
-        border-radius: 0.5rem;
-        font-weight: 700;
-        font-size: 0.875rem;
-        min-width: 48px;
-        height: 32px;
-        padding: 0 0.5rem;
-      }
-      .badge.rank-1 {
-        background: var(--gold);
-        color: var(--background);
-        box-shadow: 0 0 20px oklch(0.8 0.18 85 / 0.4);
-      }
-      .badge.rank-2 {
-        background: var(--silver);
-        color: var(--background);
-      }
-      .badge.rank-3 {
-        background: var(--bronze);
-        color: var(--background);
-      }
-      .badge.rank-default {
-        background: var(--secondary);
-        color: var(--secondary-foreground);
-      }
-      .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('xp-progress')
-export class XPProgress extends LitElement {
-  static styles = [
-    sharedStyles,
-    css`
-      .container {
-        width: 100%;
-      }
-      .label-row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 0.25rem;
-      }
-      .label {
-        font-size: 0.75rem;
-        color: var(--muted-foreground);
-      }
-      .track {
-        width: 100%;
-        background: var(--secondary);
-        border-radius: 9999px;
-        overflow: hidden;
-      }
-      .track.sm {
-        height: 6px;
-      }
-      .track.md {
-        height: 8px;
-      }
-      .track.lg {
-        height: 12px;
-      }
-      .fill {
-        height: 100%;
-        background: var(--primary);
-        border-radius: 9999px;
-        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('trend-indicator')
-export class TrendIndicator extends LitElement {
-  static styles = [
-    sharedStyles,
-    css`
-      .container {
-        display: flex;
-        align-items: center;
-        gap: 2px;
-      }
-      .up {
-        color: var(--primary);
-      }
-      .down {
-        color: var(--destructive);
-      }
-      .same {
-        color: var(--muted-foreground);
-      }
-      .change {
-        font-size: 0.75rem;
-        font-weight: 500;
-      }
-      .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('streak-badge')
-export class StreakBadge extends LitElement {
-  static styles = [
-    sharedStyles,
-    css`
-      .badge {
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-        padding: 0.25rem 0.5rem;
-        border-radius: 9999px;
-        background: oklch(0.75 0.2 50 / 0.2);
-        color: var(--accent);
-        font-size: 0.75rem;
-        font-weight: 500;
-      }
-      .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('level-badge')
-export class LevelBadge extends LitElement {
-  static styles = [
-    sharedStyles,
-    css`
-      .badge {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 9999px;
-        border-width: 2px;
-        border-style: solid;
-        background: var(--background);
-        font-weight: 700;
-      }
-      .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(--gold);
-        color: var(--gold);
-        box-shadow: 0 0 20px oklch(0.8 0.18 85 / 0.4);
-      }
-      .badge.level-70 {
-        border-color: var(--accent);
-        color: var(--accent);
-        box-shadow: 0 0 20px oklch(0.75 0.2 50 / 0.4);
-      }
-      .badge.level-50 {
-        border-color: var(--primary);
-        color: var(--primary);
-        box-shadow: 0 0 20px oklch(0.7 0.18 145 / 0.4);
-      }
-      .badge.level-default {
-        border-color: var(--muted-foreground);
-        color: var(--muted-foreground);
-      }
-    `,
-  ];
-
-  @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('badge-display')
-export class BadgeDisplay extends LitElement {
-  static styles = [
-    sharedStyles,
-    css`
-      .container {
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-      }
-      .badge {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 24px;
-        height: 24px;
-        border-radius: 0.375rem;
-        border: 1px solid;
-        font-size: 0.875rem;
-      }
-      .badge.common {
-        background: oklch(0.6 0.02 260 / 0.2);
-        border-color: oklch(0.6 0.02 260 / 0.4);
-      }
-      .badge.rare {
-        background: oklch(0.7 0.18 145 / 0.2);
-        border-color: oklch(0.7 0.18 145 / 0.4);
-      }
-      .badge.epic {
-        background: oklch(0.75 0.2 50 / 0.2);
-        border-color: oklch(0.75 0.2 50 / 0.4);
-      }
-      .badge.legendary {
-        background: oklch(0.8 0.18 85 / 0.2);
-        border-color: oklch(0.8 0.18 85 / 0.4);
-      }
-      .remaining {
-        font-size: 0.75rem;
-        color: var(--muted-foreground);
-        margin-left: 0.25rem;
-      }
-      .icon {
-        display: flex;
-        align-items: center;
-      }
-    `,
-  ];
-
-  @property({ type: Array }) badges: Badge[] = [];
-  @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('stat-card')
-export class StatCard extends LitElement {
-  static styles = [
-    sharedStyles,
-    css`
-      .card {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: 1rem;
-        border-radius: 0.75rem;
-        background: var(--card);
-        border: 1px solid var(--border);
-      }
-      .card.highlight {
-        border-color: var(--primary);
-        box-shadow: 0 0 20px oklch(0.7 0.18 145 / 0.4);
-      }
-      .icon {
-        display: flex;
-        align-items: center;
-        margin-bottom: 0.5rem;
-        color: var(--muted-foreground);
-      }
-      .value {
-        font-size: 1.5rem;
-        font-weight: 700;
-        color: var(--foreground);
-      }
-      .label {
-        font-size: 0.75rem;
-        color: var(--muted-foreground);
-      }
-    `,
-  ];
-
-  @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 any, 20))}</span
-            >`
-          : ''}
-        <span class="value">${this.value}</span>
-        <span class="label">${this.label}</span>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'rank-badge': RankBadge;
-    'xp-progress': XPProgress;
-    'trend-indicator': TrendIndicator;
-    'streak-badge': StreakBadge;
-    'level-badge': LevelBadge;
-    'badge-display': BadgeDisplay;
-    'stat-card': StatCard;
-  }
-}

package/src/components/leaderboard/data.ts

@@ -1,152 +0,0 @@
-import { Player, Badge, LeaderboardStats } from './types';
-
-export const badges: Badge[] = [
-  { id: '1', name: 'First Win', icon: 'trophy', rarity: 'common' },
-  { id: '2', name: 'Streak Master', icon: 'flame', rarity: 'rare' },
-  { id: '3', name: 'Top 10', icon: 'star', rarity: 'epic' },
-  { id: '4', name: 'Legend', icon: 'crown', rarity: 'legendary' },
-  { id: '5', name: 'Speed Demon', icon: 'zap', rarity: 'rare' },
-  { id: '6', name: 'Perfectionist', icon: 'gem', rarity: 'epic' },
-];
-
-export const players: Player[] = [
-  {
-    id: '1',
-    rank: 1,
-    username: 'ShadowNinja',
-    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=shadow',
-    level: 99,
-    xp: 45000,
-    xpToNextLevel: 50000,
-    score: 2847500,
-    wins: 342,
-    streak: 15,
-    badges: [badges[3], badges[2], badges[5]],
-    trend: 'same',
-  },
-  {
-    id: '2',
-    rank: 2,
-    username: 'CyberPhoenix',
-    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=phoenix',
-    level: 95,
-    xp: 38000,
-    xpToNextLevel: 45000,
-    score: 2654200,
-    wins: 298,
-    streak: 8,
-    badges: [badges[2], badges[1], badges[4]],
-    trend: 'up',
-    rankChange: 2,
-  },
-  {
-    id: '3',
-    rank: 3,
-    username: 'NeonBlade',
-    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=blade',
-    level: 92,
-    xp: 41000,
-    xpToNextLevel: 44000,
-    score: 2501800,
-    wins: 276,
-    streak: 5,
-    badges: [badges[2], badges[0], badges[1]],
-    trend: 'down',
-    rankChange: 1,
-  },
-  {
-    id: '4',
-    rank: 4,
-    username: 'StormWatcher',
-    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=storm',
-    level: 88,
-    xp: 22000,
-    xpToNextLevel: 42000,
-    score: 2234500,
-    wins: 245,
-    streak: 12,
-    badges: [badges[1], badges[4]],
-    trend: 'up',
-    rankChange: 3,
-  },
-  {
-    id: '5',
-    rank: 5,
-    username: 'VoidRunner',
-    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=void',
-    level: 85,
-    xp: 35000,
-    xpToNextLevel: 40000,
-    score: 2087300,
-    wins: 218,
-    streak: 3,
-    badges: [badges[0], badges[5]],
-    trend: 'same',
-  },
-  {
-    id: '6',
-    rank: 6,
-    username: 'PixelHunter',
-    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=pixel',
-    level: 82,
-    xp: 18000,
-    xpToNextLevel: 38000,
-    score: 1956700,
-    wins: 195,
-    streak: 7,
-    badges: [badges[1], badges[0]],
-    trend: 'up',
-    rankChange: 1,
-  },
-  {
-    id: '7',
-    rank: 7,
-    username: 'GhostCoder',
-    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ghost',
-    level: 79,
-    xp: 28000,
-    xpToNextLevel: 36000,
-    score: 1823400,
-    wins: 178,
-    streak: 2,
-    badges: [badges[4], badges[0]],
-    trend: 'down',
-    rankChange: 2,
-  },
-  {
-    id: '8',
-    rank: 8,
-    username: 'ThunderFist',
-    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=thunder',
-    level: 76,
-    xp: 12000,
-    xpToNextLevel: 34000,
-    score: 1678900,
-    wins: 156,
-    streak: 4,
-    badges: [badges[0]],
-    trend: 'same',
-  },
-];
-
-export const stats: LeaderboardStats = {
-  totalPlayers: 12847,
-  yourRank: 156,
-  topScore: 2847500,
-};
-
-export const currentUser: Player = {
-  id: 'current',
-  rank: 156,
-  username: 'YourPlayer',
-  avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=current',
-  level: 45,
-  xp: 12500,
-  xpToNextLevel: 20000,
-  score: 456780,
-  wins: 42,
-  streak: 3,
-  badges: [badges[0], badges[1]],
-  trend: 'up',
-  rankChange: 12,
-};

package/src/components/leaderboard/index.ts

@@ -1,2 +0,0 @@
-export { LeaderboardApp } from './main.js';
-import './main.js';

package/src/components/leaderboard/main.ts

@@ -1,42 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { players, stats, currentUser } from './data';
-import './components/leaderboard';
-import { sharedStyles } from './styles';
-import { css } from 'lit';
-
-@customElement('leaderboard-app')
-export class LeaderboardApp extends LitElement {
-  static styles = [
-    sharedStyles,
-    css`
-      :host {
-        display: block;
-        min-height: 100vh;
-        background: var(--background);
-        padding: 2rem 1rem;
-      }
-      @media (min-width: 768px) {
-        :host {
-          padding: 3rem 2rem;
-        }
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <game-leaderboard
-        .players=${players}
-        .currentUser=${currentUser}
-        .stats=${stats}
-      ></game-leaderboard>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'leaderboard-app': LeaderboardApp;
-  }
-}