@oddsmith/ui 0.0.0

package/src/components/sf-leaderboard/index.ts

@@ -0,0 +1,77 @@
+/**
+ * Sf Leaderboard — public API.
+ * Import: `import '@skinforge/sf-leaderboard'`
+ */
+export type {
+  Player,
+  Activity,
+  TimeFrame,
+  Category,
+} from './shared/types/data.js';
+export type {
+  SfLeaderboardLayout,
+  SfLeaderboardHeaderSection,
+  SfLeaderboardStatsSection,
+  SfLeaderboardStatItem,
+  SfLeaderboardRankingSection,
+  SfLeaderboardPodiumSection,
+  SfLeaderboardPlayerStatsSection,
+  SfLeaderboardTableSection,
+  SfLeaderboardTableFiltersSection,
+} from './shared/types/sections.js';
+/** @deprecated Use `SfLeaderboardStatItem` */
+export type { SfLeaderboardOverviewStat } from './shared/constants/stats-overview.js';
+export type {
+  SfLeaderboardState,
+  SfLeaderboardConfig,
+  SfLeaderboardLabels,
+  SfLeaderboardSectionData,
+  SfLeaderboardSectionId,
+  SfLeaderboardSectionEntry,
+  SfLeaderboardSectionPayloadMap,
+  SfLeaderboardSectionPatch,
+  /** @deprecated Use `SfLeaderboardState` */
+  SfLeaderboardData,
+} from './services/index.js';
+export {
+  EMPTY_SF_LEADERBOARD_STATE,
+  applySectionPatch,
+  getSectionData,
+  hasSection,
+  patchSectionData,
+  sectionEntry,
+  updateSections,
+} from './services/index.js';
+export * from './shared/constants/index.js';
+export * from './shared/types/events.js';
+export { sfLeaderboardDataService } from './services/index.js';
+export { Component, type ComponentOptions } from '../../lib/lit/component.js';
+export { SfLeaderboard } from './sf-leaderboard.js';
+export { SfLeaderboardHeaderBlock } from './sections/header-section/header-section.js';
+export { SfLeaderboardStatsBlock } from './sections/stats-section/stats-section.js';
+export { SfLeaderboardRankingBlock } from './sections/ranking-section/ranking-section.js';
+export { SfLeaderboardTableBlock } from './sections/table-section/table-section.js';
+export { SfLeaderboardFooterBlock } from './sections/footer-section/footer-section.js';
+export { SfLeaderboardPlayerStatsCard } from './shared/components/player-stats-card/player-stats-card.js';
+export { SfLeaderboardStatCard } from './shared/components/stat-card/stat-card.js';
+export { SfLeaderboardPodium } from './shared/components/podium/podium.js';
+
+export type {
+  SfLeaderboardTheme,
+  SfLeaderboardPlacementTheme,
+  SfLeaderboardTableColumnTheme,
+  TableColumnId,
+} from './theme/index.js';
+export {
+  sfLeaderboardTheme,
+  loadThemeFromJson,
+  parseThemeJson,
+  injectTheme,
+  clearTheme,
+  getThemeLabel,
+  mergeSfLeaderboardTheme,
+  themeToCssVars,
+  DEFAULT_SF_LEADERBOARD_THEME,
+} from './theme/index.js';
+
+import './sf-leaderboard.js';

package/src/components/sf-leaderboard/sections/footer-section/footer-section.host.ts

@@ -0,0 +1,3 @@
+export interface FooterSectionHost {
+  text: string;
+}

package/src/components/sf-leaderboard/sections/footer-section/footer-section.html

@@ -0,0 +1,3 @@
+<footer class="page-footer">
+  <p>${host.text}</p>
+</footer>

package/src/components/sf-leaderboard/sections/footer-section/footer-section.scss

@@ -0,0 +1,18 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.page-footer {
+  border-top: 1px solid var(--border);
+  margin-top: clamp(1.5rem, 4vw, 3rem);
+  padding-top: 1rem;
+  width: 100%;
+
+  p {
+    margin: 0;
+    text-align: center;
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
+  }
+}

package/src/components/sf-leaderboard/sections/footer-section/footer-section.ts

@@ -0,0 +1,22 @@
+import { LitElement, nothing } 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_FOOTER_SECTION } from '../../shared/constants/tags.js';
+import { sfLeaderboardTheme } from '../../theme/styles.js';
+import type { FooterSectionHost } from './footer-section.host.js';
+import renderTemplate from './footer-section.html?lit-html';
+import styles from './footer-section.scss?inline';
+
+@Component({ selector: SF_LEADERBOARD_FOOTER_SECTION })
+export class SfLeaderboardFooterBlock extends LitElement implements FooterSectionHost {
+  static styles = [sfLeaderboardTheme, scss(styles)];
+
+  @property({ type: String })
+  text = '';
+
+  render() {
+    if (!this.text) return nothing;
+    return renderTemplate(this);
+  }
+}

package/src/components/sf-leaderboard/sections/header-section/header-section.host.ts

@@ -0,0 +1,14 @@
+import type { SfLeaderboardRefreshDetail } from '../../shared/types/events.js';
+import type { SfLeaderboardHeaderSection } from '../../shared/types/sections.js';
+
+export interface HeaderSectionHost {
+  section: SfLeaderboardHeaderSection;
+  refreshContext?: SfLeaderboardRefreshDetail;
+  showIcon: boolean;
+  showSubtitle: boolean;
+  showLive: boolean;
+  showBack: boolean;
+  backLabel: string;
+  isRefreshing: boolean;
+  onBackClick(): void;
+}

package/src/components/sf-leaderboard/sections/header-section/header-section.html

@@ -0,0 +1,27 @@
+<header class="header">
+  <div class="header-content">
+    <div class="logo-section">
+      <div class="logo-icon" ?hidden="${!host.showIcon}">${host.section.icon}</div>
+      <div class="logo-text">
+        <h1>${host.section.title}</h1>
+        <p ?hidden="${!host.showSubtitle}">${host.section.subtitle}</p>
+      </div>
+    </div>
+
+    <div class="header-actions">
+      <div class="live-badge" ?hidden="${!host.showLive}">
+        <span class="live-dot"></span>
+        Live
+      </div>
+      <button
+        type="button"
+        class="back-btn ${host.isRefreshing ? 'refreshing' : ''}"
+        ?hidden="${!host.showBack}"
+        @click="${host.onBackClick}"
+      >
+        <span class="icon" aria-hidden="true">←</span>
+        ${host.backLabel}
+      </button>
+    </div>
+  </div>
+</header>

package/src/components/sf-leaderboard/sections/header-section/header-section.scss

@@ -0,0 +1,189 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  backdrop-filter: blur(16px);
+  background: color-mix(in srgb, var(--background) 82%, transparent);
+  padding: 12px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.header-content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo-section {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.logo-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius);
+  background: var(--accent-soft);
+  border: 1px solid var(--surface-border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  box-shadow: var(--surface-shadow-hover);
+}
+
+.logo-text h1 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: var(--accent-text-glow);
+}
+
+.logo-text p {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.live-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(var(--success-rgb), 0.35);
+  background: rgba(var(--success-rgb), 0.08);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--success);
+}
+
+.live-dot {
+  position: relative;
+  width: 8px;
+  height: 8px;
+  background: var(--success);
+  border-radius: 50%;
+}
+
+.live-dot::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: var(--success);
+  animation: ping 1.5s ease-out infinite;
+}
+
+@keyframes ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+.back-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--surface-border-color);
+  background: var(--surface-gradient);
+  color: var(--foreground);
+  font-size: 0.875rem;
+  font-family: inherit;
+  cursor: pointer;
+  box-shadow: var(--surface-shadow);
+  transition: border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.back-btn:hover {
+  border-color: var(--surface-border-hover);
+  box-shadow: var(--surface-shadow-hover);
+}
+
+.back-btn .icon {
+  transition: transform 0.3s ease;
+}
+
+.back-btn.refreshing .icon {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 639px) {
+  .header-content {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .logo-section {
+    flex: 1 1 100%;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .logo-icon {
+    width: clamp(32px, 9vw, 40px);
+    height: clamp(32px, 9vw, 40px);
+    font-size: clamp(1rem, 4vw, 1.25rem);
+  }
+
+  .logo-text {
+    text-align: center;
+  }
+
+  .logo-text h1 {
+    text-align: center;
+    font-size: clamp(1rem, 4.5vw, 1.25rem);
+  }
+
+  .logo-text p {
+    display: none;
+  }
+
+  .header-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .back-btn {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8125rem;
+  }
+}
+
+@media (max-width: 380px) {
+  .live-badge {
+    font-size: 0.6875rem;
+    padding: 0.3rem 0.6rem;
+  }
+}

package/src/components/sf-leaderboard/sections/header-section/header-section.ts

@@ -0,0 +1,70 @@
+import { LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../../../../lib/lit/component.js';
+import { scss } from '../../../../../lib/lit/scss.js';
+import {
+  DEFAULT_CATEGORY,
+  DEFAULT_TIMEFRAME,
+  SF_LEADERBOARD_HEADER_SECTION,
+} from '../../shared/constants/index.js';
+import { sfLeaderboardTheme } from '../../theme/styles.js';
+import { SF_LEADERBOARD_REFRESH } from '../../shared/types/events.js';
+import type { SfLeaderboardRefreshDetail } from '../../shared/types/events.js';
+import type { SfLeaderboardHeaderSection as HeaderSectionData } from '../../shared/types/sections.js';
+import type { HeaderSectionHost } from './header-section.host.js';
+import renderTemplate from './header-section.html?lit-html';
+import styles from './header-section.scss?inline';
+
+@Component({ selector: SF_LEADERBOARD_HEADER_SECTION })
+export class SfLeaderboardHeaderBlock extends LitElement implements HeaderSectionHost {
+  static styles = [sfLeaderboardTheme, scss(styles)];
+
+  @property({ attribute: false })
+  section!: HeaderSectionData;
+
+  @property({ attribute: false })
+  refreshContext?: SfLeaderboardRefreshDetail;
+
+  get showIcon(): boolean {
+    return Boolean(this.section?.icon);
+  }
+
+  get showSubtitle(): boolean {
+    return Boolean(this.section?.subtitle);
+  }
+
+  get showLive(): boolean {
+    return Boolean(this.section?.showLive);
+  }
+
+  get showBack(): boolean {
+    return this.section?.backButton != null;
+  }
+
+  get backLabel(): string {
+    return this.section?.backButton?.label ?? 'Back';
+  }
+
+  get isRefreshing(): boolean {
+    return this.section?.isRefreshing ?? false;
+  }
+
+  onBackClick() {
+    const ctx = this.refreshContext;
+    this.dispatchEvent(
+      new CustomEvent(SF_LEADERBOARD_REFRESH, {
+        detail: {
+          timeframe: ctx?.timeframe ?? DEFAULT_TIMEFRAME,
+          category: ctx?.category ?? DEFAULT_CATEGORY,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render() {
+    if (!this.section) return nothing;
+    return renderTemplate(this);
+  }
+}

package/src/components/sf-leaderboard/sections/ranking-section/ranking-section.host.ts

@@ -0,0 +1,22 @@
+import type { Player } from '../../shared/types/data.js';
+import type { SfLeaderboardRankingSection } from '../../shared/types/sections.js';
+
+export interface RankingSectionHost {
+  ranking: SfLeaderboardRankingSection;
+  hasPair: boolean;
+  hasPodium: boolean;
+  hasPlayerStats: boolean;
+  podiumTitle: string;
+  podiumBadge: string;
+  showPodiumBadge: boolean;
+  podiumPlayers: Player[];
+  playerStatsTitle: string;
+  playerStatsRank: number;
+  playerStatsPercentile: number;
+  playerStatsUsername: string;
+  playerStatsEarnings: string;
+  playerStatsWinRate: number;
+  playerStatsGamesPlayed: number;
+  playerStatsWinStreak: number;
+  playerStatsLevel: number;
+}

package/src/components/sf-leaderboard/sections/ranking-section/ranking-section.html

@@ -0,0 +1,38 @@
+<section class="section ranking-section">
+  <div class="ranking-grid ${host.hasPair ? 'has-pair' : 'single'}">
+    <div
+      class="ranking-column ranking-column--podium"
+      ?hidden="${!host.hasPodium}"
+    >
+      <div class="section-header">
+        <h2 class="section-title">${host.podiumTitle}</h2>
+        <span class="elite-badge" ?hidden="${!host.showPodiumBadge}"
+          >${host.podiumBadge}</span
+        >
+      </div>
+      <div class="podium-slot">
+        <sf-leaderboard-podium
+          .players="${host.podiumPlayers}"
+        ></sf-leaderboard-podium>
+      </div>
+    </div>
+    <div
+      class="ranking-column ranking-column--player-stats"
+      ?hidden="${!host.hasPlayerStats}"
+    >
+      <div class="section-header">
+        <h2 class="section-title">${host.playerStatsTitle}</h2>
+      </div>
+      <sf-leaderboard-player-stats-card
+        rank="${host.playerStatsRank}"
+        percentile="${host.playerStatsPercentile}"
+        username="${host.playerStatsUsername}"
+        earnings="${host.playerStatsEarnings}"
+        winRate="${host.playerStatsWinRate}"
+        gamesPlayed="${host.playerStatsGamesPlayed}"
+        winStreak="${host.playerStatsWinStreak}"
+        level="${host.playerStatsLevel}"
+      ></sf-leaderboard-player-stats-card>
+    </div>
+  </div>
+</section>

package/src/components/sf-leaderboard/sections/ranking-section/ranking-section.scss

@@ -0,0 +1,99 @@
+@use '../../shared/styles/section';
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.ranking-section {
+  --ranking-podium-min-h: clamp(300px, min(36vh, 36dvh), 420px);
+  --ranking-player-stats-min-h: clamp(300px, min(36vh, 36dvh), 420px);
+}
+
+.ranking-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: clamp(0.75rem, 2vw, 1rem);
+  width: 100%;
+  align-items: stretch;
+}
+
+.ranking-grid.has-pair {
+  @media (min-width: 1080px) {
+    grid-template-columns: minmax(0, 1.38fr) minmax(0, 0.82fr);
+    min-height: var(--ranking-podium-min-h);
+  }
+}
+
+.ranking-column {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ranking-column--player-stats {
+  min-height: var(--ranking-player-stats-min-h);
+
+  sf-leaderboard-player-stats-card {
+    flex: 1 1 auto;
+    width: 100%;
+    min-height: 0;
+  }
+}
+
+.podium-slot {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: var(--ranking-podium-min-h);
+  overflow: hidden;
+}
+
+.podium-slot > sf-leaderboard-podium {
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+}
+
+@media (max-width: 1079px) {
+  .ranking-section {
+    --ranking-podium-min-h: clamp(280px, min(38vh, 38dvh), 400px);
+    --ranking-player-stats-min-h: clamp(280px, min(34vh, 34dvh), 360px);
+  }
+}
+
+@media (min-width: 677px) and (max-width: 1079px) {
+  .ranking-section {
+    --ranking-player-stats-min-h: clamp(360px, min(42vh, 42dvh), 440px);
+  }
+}
+
+@media (max-width: 676px) {
+  .ranking-column--player-stats {
+    min-height: 0;
+    height: auto;
+  }
+}
+
+@media (min-width: 1280px) {
+  .ranking-section {
+    --ranking-podium-min-h: clamp(340px, min(38vh, 38dvh), 460px);
+    --ranking-player-stats-min-h: clamp(340px, min(38vh, 38dvh), 460px);
+  }
+}
+
+@media (max-width: 639px) {
+  .ranking-section {
+    --ranking-podium-min-h: clamp(280px, min(44dvh, 46vh), 360px);
+    --ranking-player-stats-min-h: clamp(240px, min(34dvh, 36vh), 288px);
+  }
+}
+
+@media (max-width: 380px) {
+  .ranking-section {
+    --ranking-podium-min-h: clamp(268px, 48dvh, 340px);
+    --ranking-player-stats-min-h: clamp(248px, 44dvh, 300px);
+  }
+}