@oddsmith/ui 0.0.0

package/src/components/sf-leaderboard/shared/components/rank-badge/rank-badge.scss

@@ -0,0 +1,98 @@
+@use '../../../theme/scss/colors' as color;
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--inset-radius);
+  border: 2px solid;
+  font-family: var(--font-mono);
+  font-weight: 700;
+  transition: all 0.3s ease;
+
+  &.sm {
+    width: 32px;
+    height: 32px;
+    font-size: 0.75rem;
+  }
+
+  &.md {
+    width: 48px;
+    height: 48px;
+    font-size: 1rem;
+  }
+
+  &.lg {
+    width: 64px;
+    height: 64px;
+    font-size: 1.25rem;
+  }
+
+  &.rank-1 {
+    background: color-mix(in srgb, #{color.place-first-icon()} 22%, transparent);
+    border-color: #{color.place-first-icon()};
+    color: #{color.place-first-icon()};
+    box-shadow: 0 0 20px color-mix(in srgb, #{color.place-first-icon()} 35%, transparent);
+  }
+
+  &.rank-2 {
+    background: color-mix(in srgb, #{color.place-second-icon()} 18%, transparent);
+    border-color: #{color.place-second-icon()};
+    color: #{color.place-second-icon()};
+    box-shadow: 0 0 20px color-mix(in srgb, #{color.place-second-icon()} 30%, transparent);
+  }
+
+  &.rank-3 {
+    background: color-mix(in srgb, #{color.place-third-icon()} 18%, transparent);
+    border-color: #{color.place-third-icon()};
+    color: #{color.place-third-icon()};
+    box-shadow: 0 0 20px color-mix(in srgb, #{color.place-third-icon()} 30%, transparent);
+  }
+
+  &.rank-other {
+    background: #{color.base(2)};
+    border-color: #{color.base(2)};
+    color: #{color.surface(muted)};
+  }
+}
+
+.icon {
+  font-size: 1em;
+  line-height: 1;
+}
+
+.rank-number {
+  font-size: 0.65em;
+  margin-top: 2px;
+}
+
+.trend {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 0.75rem;
+  font-weight: 500;
+
+  &.up {
+    color: #{color.semantic(success)};
+  }
+
+  &.down {
+    color: #{color.semantic(error)};
+  }
+
+  &.same {
+    color: #{color.surface(muted)};
+  }
+}
+
+.trend-icon {
+  font-size: 0.75rem;
+}

package/src/components/sf-leaderboard/shared/components/rank-badge/rank-badge.ts

@@ -0,0 +1,63 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../../../../../lib/lit/component.js';
+import { scss } from '../../../../../../lib/lit/scss.js';
+import { SF_LEADERBOARD_RANK_BADGE } from '../../constants/tags.js';
+import { sfLeaderboardTheme } from '../../../theme/styles.js';
+import type { RankBadgeHost } from './rank-badge.host.js';
+import renderTemplate from './rank-badge.html?lit-html';
+import styles from './rank-badge.scss?inline';
+
+@Component({ selector: SF_LEADERBOARD_RANK_BADGE })
+export class SfLeaderboardRankBadge extends LitElement
+  implements RankBadgeHost {
+  static styles = [sfLeaderboardTheme, scss(styles)];
+
+  @property({ type: Number }) rank = 1;
+  @property({ type: Number }) previousRank?: number;
+  @property({ type: String }) size: 'sm' | 'md' | 'lg' = 'md';
+  @property({ type: Boolean }) showTrend = true;
+
+  get rankClass(): string {
+    return this.rank <= 3 ? `rank-${this.rank}` : 'rank-other';
+  }
+
+  get isTop3(): boolean {
+    return this.rank <= 3;
+  }
+
+  get rankIcon(): string {
+    if (this.rank === 1) return '👑';
+    if (this.rank === 2) return '🥈';
+    if (this.rank === 3) return '🥉';
+    return '';
+  }
+
+  get hasTrend(): boolean {
+    return this.getTrend() != null;
+  }
+
+  get trendClass(): string {
+    return this.getTrend()?.class ?? '';
+  }
+
+  get trendIcon(): string {
+    return this.getTrend()?.icon ?? '';
+  }
+
+  get trendDiff(): string {
+    return this.getTrend()?.diff ?? '';
+  }
+
+  private getTrend() {
+    if (!this.previousRank || !this.showTrend) return null;
+    const diff = this.previousRank - this.rank;
+    if (diff > 0) return { icon: '↑', class: 'up', diff: `+${diff}` };
+    if (diff < 0) return { icon: '↓', class: 'down', diff: `${diff}` };
+    return { icon: '–', class: 'same', diff: '0' };
+  }
+
+  render() {
+    return renderTemplate(this);
+  }
+}

package/src/components/sf-leaderboard/shared/components/stat-card/stat-card.host.ts

@@ -0,0 +1,9 @@
+export interface StatCardHost {
+  label: string;
+  value: string;
+  icon: string;
+  hasTrend: boolean;
+  trendClass: string;
+  trendPrefix: string;
+  trendValue?: number;
+}

package/src/components/sf-leaderboard/shared/components/stat-card/stat-card.html

@@ -0,0 +1,15 @@
+<div class="card">
+  <div class="glow"></div>
+  <div class="content">
+    <div class="header">
+      <span class="label">${host.label}</span>
+      <div class="icon-wrapper">${host.icon}</div>
+    </div>
+    <div class="body">
+      <p class="value">${host.value}</p>
+      <p class="trend ${host.trendClass}" ?hidden="${!host.hasTrend}">
+        ${host.trendPrefix}${host.trendValue}% from last week
+      </p>
+    </div>
+  </div>
+</div>

package/src/components/sf-leaderboard/shared/components/stat-card/stat-card.scss

@@ -0,0 +1,210 @@
+:host {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.card {
+  padding: clamp(0.75rem, 2.5vw, 1rem);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.glow {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 96px;
+  height: 96px;
+  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
+  transform: translate(50%, -50%);
+  pointer-events: none;
+}
+
+.content {
+  position: relative;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.label {
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
+
+.icon-wrapper {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--inset-radius);
+  background: var(--accent-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+}
+
+.body {
+  margin-top: 0.5rem;
+}
+
+.value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  font-family: var(--font-mono);
+}
+
+.trend {
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-top: 0.25rem;
+
+  &.positive {
+    color: var(--success);
+  }
+
+  &.negative {
+    color: var(--destructive);
+  }
+}
+
+/* Narrow viewports: smaller tiles, fluid shrink (grid stays 2×2 on parent) */
+@media (max-width: 639px) {
+  :host {
+    display: flex;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .card {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    min-height: 100%;
+    align-items: center;
+    justify-content: center;
+    padding: clamp(0.45rem, 2.8vw, 0.65rem);
+  }
+
+  .glow {
+    width: clamp(40px, 22vw, 64px);
+    height: clamp(40px, 22vw, 64px);
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    gap: clamp(0.2rem, 1.2vw, 0.35rem);
+  }
+
+  .header {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    text-align: center;
+  }
+
+  .label {
+    font-size: clamp(0.6rem, 2.6vw, 0.7rem);
+    line-height: 1.2;
+  }
+
+  .icon-wrapper {
+    width: clamp(22px, 7.5vw, 28px);
+    height: clamp(22px, 7.5vw, 28px);
+    font-size: clamp(0.7rem, 3.2vw, 0.85rem);
+    flex-shrink: 0;
+  }
+
+  .body {
+    margin-top: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    gap: 0.1rem;
+  }
+
+  .value {
+    margin: 0;
+    font-size: clamp(0.9rem, 5.5vw, 1.15rem);
+    line-height: 1.15;
+    word-break: break-word;
+  }
+
+  .trend {
+    font-size: clamp(0.58rem, 2.4vw, 0.65rem);
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+/* ≤576px: readable tiles — do not shrink further than 577–639 layout */
+@media (max-width: 576px) {
+  .card {
+    padding: clamp(0.65rem, 3.2vw, 0.85rem);
+    min-height: clamp(5.5rem, 26vw, 6.75rem);
+  }
+
+  .glow {
+    width: clamp(48px, 20vw, 72px);
+    height: clamp(48px, 20vw, 72px);
+  }
+
+  .content {
+    gap: clamp(0.35rem, 2vw, 0.5rem);
+  }
+
+  .header {
+    gap: clamp(0.3rem, 1.6vw, 0.4rem);
+  }
+
+  .icon-wrapper {
+    order: -1;
+    width: clamp(30px, 8.5vw, 36px);
+    height: clamp(30px, 8.5vw, 36px);
+    font-size: clamp(0.95rem, 4vw, 1.1rem);
+  }
+
+  .label {
+    order: 0;
+    font-size: clamp(0.65rem, 2.8vw, 0.75rem);
+    line-height: 1.25;
+    letter-spacing: 0.02em;
+    max-width: 100%;
+  }
+
+  .body {
+    gap: clamp(0.15rem, 1.2vw, 0.25rem);
+  }
+
+  .value {
+    font-size: clamp(1rem, 5.2vw, 1.2rem);
+    line-height: 1.2;
+  }
+
+  .trend {
+    font-size: clamp(0.625rem, 2.6vw, 0.7rem);
+    line-height: 1.3;
+  }
+}
+
+@media (max-width: 380px) {
+  .card {
+    padding: clamp(0.55rem, 2.8vw, 0.7rem);
+    min-height: 5rem;
+  }
+
+  .value {
+    font-size: clamp(0.9rem, 4.8vw, 1.05rem);
+  }
+}

package/src/components/sf-leaderboard/shared/components/stat-card/stat-card.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../../../../../lib/lit/component.js';
+import { scss } from '../../../../../../lib/lit/scss.js';
+import { SF_LEADERBOARD_STAT_CARD } from '../../constants/tags.js';
+import { sfLeaderboardTheme } from '../../../theme/styles.js';
+import type { StatCardHost } from './stat-card.host.js';
+import renderTemplate from './stat-card.html?lit-html';
+import styles from './stat-card.scss?inline';
+
+@Component({ selector: SF_LEADERBOARD_STAT_CARD })
+export class SfLeaderboardStatCard extends LitElement implements StatCardHost {
+  static styles = [sfLeaderboardTheme, scss(styles)];
+
+  @property({ type: String }) label = '';
+  @property({ type: String }) value = '';
+  @property({ type: String }) icon = '';
+  @property({ type: Number }) trendValue?: number;
+  @property({ type: Boolean }) trendPositive = true;
+
+  get hasTrend(): boolean {
+    return this.trendValue !== undefined;
+  }
+
+  get trendClass(): string {
+    return this.trendPositive ? 'positive' : 'negative';
+  }
+
+  get trendPrefix(): string {
+    return this.trendPositive ? '+' : '';
+  }
+
+  render() {
+    return renderTemplate(this);
+  }
+}

package/src/components/sf-leaderboard/shared/components/table/table.host.ts

@@ -0,0 +1,5 @@
+import type { TemplateResult } from 'lit';
+
+export interface TableHost {
+  renderRows(): TemplateResult;
+}

package/src/components/sf-leaderboard/shared/components/table/table.html

@@ -0,0 +1,11 @@
+<div class="table-container">
+  <div class="table-header">
+    <div class="col-rank">Rank</div>
+    <div class="col-player">Player</div>
+    <div class="col-games text-center hide-mobile">Games</div>
+    <div class="col-win-rate text-center hide-mobile">Win Rate</div>
+    <div class="col-streak text-center hide-mobile">Streak</div>
+    <div class="col-winnings text-right">Winnings</div>
+  </div>
+  <div class="table-body">${host.renderRows()}</div>
+</div>

package/src/components/sf-leaderboard/shared/components/table/table.scss

@@ -0,0 +1,212 @@
+@use '../../../theme/scss/colors' as color;
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+@mixin col-theme($name) {
+  .col-#{$name} {
+    color: var(--table-col-#{$name}-color, inherit);
+    font-size: var(--table-col-#{$name}-font-size, inherit);
+  }
+}
+
+@include col-theme('rank');
+@include col-theme('player');
+@include col-theme('games');
+@include col-theme('win-rate');
+@include col-theme('streak');
+@include col-theme('winnings');
+
+.table-container {
+  width: 100%;
+  max-width: 100%;
+  border-radius: var(--surface-radius);
+  border: 1px solid var(--surface-border-color);
+  background: var(--surface-gradient);
+  box-shadow: var(--surface-shadow);
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+.table-header {
+  display: grid;
+  grid-template-columns: 80px 1fr 100px 100px 100px 120px;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  background: var(--muted);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted-foreground);
+
+  @media (max-width: 768px) {
+    grid-template-columns: 52px minmax(120px, 1fr) minmax(72px, 88px);
+    gap: 0.5rem;
+    padding: 0.625rem 0.75rem;
+    font-size: 0.625rem;
+
+    .hide-mobile {
+      display: none;
+    }
+  }
+
+  @media (max-width: 380px) {
+    grid-template-columns: 44px minmax(100px, 1fr) 72px;
+    padding: 0.5rem;
+  }
+}
+
+.table-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.table-row {
+  display: grid;
+  grid-template-columns: 80px 1fr 100px 100px 100px 120px;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  align-items: center;
+  border-bottom: 1px solid var(--border-subtle);
+  cursor: pointer;
+  transition: background 0.2s ease;
+  animation: fade-in 0.3s ease-out forwards;
+  opacity: 0;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 52px minmax(120px, 1fr) minmax(72px, 88px);
+    gap: 0.5rem;
+    padding: 0.625rem 0.75rem;
+
+    .hide-mobile {
+      display: none;
+    }
+  }
+
+  @media (max-width: 380px) {
+    grid-template-columns: 44px minmax(100px, 1fr) 72px;
+    padding: 0.5rem;
+  }
+
+  &:hover {
+    background: var(--inset-hover-bg);
+
+    .chevron {
+      opacity: 1;
+    }
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.top-3 {
+    background: var(--accent-soft);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.player-cell {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.player-details {
+  min-width: 0;
+}
+
+.player-name {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.highlight {
+    color: var(--primary);
+  }
+}
+
+.player-level {
+  display: inline-block;
+  font-size: 0.6rem;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  color: var(--muted-foreground);
+  margin-top: 2px;
+}
+
+.stat-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+
+  .icon {
+    font-size: 0.875rem;
+    opacity: 0.5;
+  }
+
+  &.win-rate {
+    .icon {
+      color: var(--success);
+    }
+
+    &.high {
+      color: var(--success);
+    }
+  }
+
+  &.streak {
+    color: var(--gold);
+  }
+}
+
+.winnings-cell {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.winnings {
+  font-family: var(--font-mono);
+  font-weight: 700;
+
+  &.highlight {
+    color: var(--primary);
+  }
+}
+
+.chevron {
+  color: var(--muted-foreground);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}