@oddsmith/ui 0.0.0

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

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