@oddsmith/ui 0.0.0 → 1.0.1

package/src/components/leaderboard/components/player-card.ts

@@ -1,342 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { sharedStyles } from '../styles';
-import type { Player } from '../types';
-import './ui';
-import { css } from 'lit';
-
-@customElement('player-row')
-export class PlayerRow extends LitElement {
-  static styles = [
-    sharedStyles,
-    css`
-      .row {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        padding: 1rem;
-        border-radius: 0.75rem;
-        background: var(--card);
-        border: 1px solid var(--border);
-        cursor: pointer;
-        transition: all 0.2s;
-      }
-      .row:hover {
-        border-color: oklch(0.7 0.18 145 / 0.5);
-        background: oklch(0.16 0.015 260 / 0.8);
-      }
-      .row.current-user {
-        border-color: var(--primary);
-        background: oklch(0.7 0.18 145 / 0.05);
-        box-shadow: 0 0 20px oklch(0.7 0.18 145 / 0.4);
-      }
-      .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: var(--secondary);
-      }
-      .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(--foreground);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .you-badge {
-        font-size: 10px;
-        padding: 2px 6px;
-        border-radius: 4px;
-        background: var(--primary);
-        color: var(--primary-foreground);
-        font-weight: 500;
-      }
-      .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.75rem;
-        color: var(--muted-foreground);
-      }
-      .stat-value {
-        font-weight: 600;
-        color: var(--foreground);
-      }
-      .stat-value.score {
-        font-size: 1.125rem;
-        font-weight: 700;
-      }
-    `,
-  ];
-
-  @property({ type: Object }) player!: Player;
-  @property({ type: Boolean }) isCurrentUser = false;
-
-  render() {
-    return html`
-      <div class="row ${this.isCurrentUser ? 'current-user' : ''}">
-        <rank-badge .rank=${this.player.rank}></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">
-              <level-badge .level=${this.player.level} size="sm"></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>`
-                : ''}
-              <streak-badge .streak=${this.player.streak}></streak-badge>
-            </div>
-            <div class="xp-wrapper">
-              <xp-progress
-                .xp=${this.player.xp}
-                .xpToNextLevel=${this.player.xpToNextLevel}
-                .level=${this.player.level}
-                size="sm"
-                .showLabel=${false}
-              ></xp-progress>
-            </div>
-          </div>
-        </div>
-
-        <div class="badges-section">
-          <badge-display
-            .badges=${this.player.badges}
-            .max=${3}
-          ></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>
-          <trend-indicator
-            .trend=${this.player.trend}
-            .rankChange=${this.player.rankChange}
-          ></trend-indicator>
-        </div>
-      </div>
-    `;
-  }
-}
-
-@customElement('top-three')
-export class TopThree extends LitElement {
-  static styles = [
-    sharedStyles,
-    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: var(--secondary);
-      }
-      .avatar.rank-1 {
-        width: 80px;
-        height: 80px;
-        box-shadow: 0 0 0 4px var(--gold), 0 0 20px oklch(0.8 0.18 85 / 0.4);
-      }
-      .avatar.rank-2 {
-        width: 64px;
-        height: 64px;
-        box-shadow: 0 0 0 2px var(--silver);
-      }
-      .avatar.rank-3 {
-        width: 64px;
-        height: 64px;
-        box-shadow: 0 0 0 2px var(--bronze);
-      }
-      .rank-wrapper {
-        position: absolute;
-        bottom: -8px;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      .username {
-        font-weight: 600;
-        color: var(--foreground);
-        text-align: center;
-        font-size: 0.875rem;
-        margin-top: 1rem;
-      }
-      .level {
-        font-size: 0.75rem;
-        color: var(--muted-foreground);
-      }
-      .score {
-        font-weight: 700;
-        color: var(--primary);
-        font-size: 1.125rem;
-      }
-      .podium {
-        width: 96px;
-        border-radius: 0.5rem 0.5rem 0 0;
-        display: flex;
-        align-items: flex-end;
-        justify-content: center;
-        padding-bottom: 0.5rem;
-      }
-      .podium.rank-1 {
-        height: 128px;
-        background: oklch(0.8 0.18 85 / 0.2);
-        border-top: 4px solid var(--gold);
-      }
-      .podium.rank-2 {
-        height: 96px;
-        background: oklch(0.75 0.02 260 / 0.2);
-        border-top: 4px solid var(--silver);
-      }
-      .podium.rank-3 {
-        height: 80px;
-        background: oklch(0.65 0.12 55 / 0.2);
-        border-top: 4px solid var(--bronze);
-      }
-      .podium-number {
-        font-size: 1.5rem;
-        font-weight: 900;
-        color: oklch(0.6 0.02 260 / 0.4);
-      }
-    `,
-  ];
-
-  @property({ type: Array }) players: Player[] = [];
-
-  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">
-                    <rank-badge .rank=${player.rank}></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 {
-    'player-row': PlayerRow;
-    'top-three': TopThree;
-  }
-}