@oddsmith/ui 0.0.0

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

@@ -0,0 +1,121 @@
+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_RANKING_SECTION } from '../../shared/constants/tags.js';
+import { sfLeaderboardTheme } from '../../theme/styles.js';
+import type { Player } from '../../shared/types/data.js';
+import type { SfLeaderboardRankingSection as RankingSectionData } from '../../shared/types/sections.js';
+import { formatCurrency } from '../../shared/utils/utils.js';
+import '../../shared/components/podium/podium.js';
+import '../../shared/components/player-stats-card/player-stats-card.js';
+import type { RankingSectionHost } from './ranking-section.host.js';
+import renderTemplate from './ranking-section.html?lit-html';
+import styles from './ranking-section.scss?inline';
+
+@Component({ selector: SF_LEADERBOARD_RANKING_SECTION })
+export class SfLeaderboardRankingBlock
+  extends LitElement
+  implements RankingSectionHost
+{
+  static styles = [sfLeaderboardTheme, scss(styles)];
+
+  @property({ attribute: false })
+  ranking!: RankingSectionData;
+
+  @property({ attribute: false })
+  lookupPlayers: Player[] = [];
+
+  get hasPair(): boolean {
+    return this.ranking?.podium != null && this.ranking?.playerStats != null;
+  }
+
+  get hasPodium(): boolean {
+    return this.ranking?.podium != null;
+  }
+
+  get hasPlayerStats(): boolean {
+    return this.ranking?.playerStats != null;
+  }
+
+  get podiumTitle(): string {
+    return this.ranking?.podium?.title ?? 'Top Champions';
+  }
+
+  get podiumBadge(): string {
+    return this.ranking?.podium?.badge ?? '';
+  }
+
+  get showPodiumBadge(): boolean {
+    return Boolean(this.ranking?.podium?.badge);
+  }
+
+  get podiumPlayers(): Player[] {
+    return this.ranking?.podium?.players ?? [];
+  }
+
+  get playerStatsTitle(): string {
+    return this.ranking?.playerStats?.title ?? 'Your Position';
+  }
+
+  private get resolvedPlayerStats() {
+    const block = this.ranking?.playerStats;
+    const players = this.lookupPlayers ?? [];
+    const player = block
+      ? players.find((p) => p.rank === block.rank)
+      : undefined;
+    const percentileMatch = block?.message?.match(/(\d+)\s*%/);
+
+    return {
+      block,
+      player,
+      percentile:
+        block?.percentile ?? (percentileMatch ? Number(percentileMatch[1]) : 5),
+    };
+  }
+
+  get playerStatsRank(): number {
+    return this.resolvedPlayerStats.block?.rank ?? 0;
+  }
+
+  get playerStatsPercentile(): number {
+    return this.resolvedPlayerStats.percentile;
+  }
+
+  get playerStatsUsername(): string {
+    const { block, player } = this.resolvedPlayerStats;
+    return block?.username ?? player?.username ?? 'You';
+  }
+
+  get playerStatsEarnings(): string {
+    const { block, player } = this.resolvedPlayerStats;
+    return (
+      block?.earnings ?? (player ? formatCurrency(player.totalWinnings) : '$0')
+    );
+  }
+
+  get playerStatsWinRate(): number {
+    const { block, player } = this.resolvedPlayerStats;
+    return block?.winRate ?? player?.winRate ?? 0;
+  }
+
+  get playerStatsGamesPlayed(): number {
+    const { block, player } = this.resolvedPlayerStats;
+    return block?.gamesPlayed ?? player?.gamesPlayed ?? 0;
+  }
+
+  get playerStatsWinStreak(): number {
+    const { block, player } = this.resolvedPlayerStats;
+    return block?.winStreak ?? player?.streak ?? 0;
+  }
+
+  get playerStatsLevel(): number {
+    const { block, player } = this.resolvedPlayerStats;
+    return block?.level ?? player?.level ?? 0;
+  }
+
+  render() {
+    if (!this.ranking?.podium && !this.ranking?.playerStats) return nothing;
+    return renderTemplate(this);
+  }
+}

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

@@ -0,0 +1,8 @@
+import type { TemplateResult } from 'lit';
+import type { SfLeaderboardStatsSection } from '../../shared/types/sections.js';
+
+export interface StatsSectionHost {
+  section: SfLeaderboardStatsSection;
+  hasTitle: boolean;
+  renderStatCards(): TemplateResult;
+}

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

@@ -0,0 +1,6 @@
+<section class="section stats-section">
+  <div class="section-header" ?hidden="${!host.hasTitle}">
+    <h2 class="section-title">${host.section.title}</h2>
+  </div>
+  <div class="stats-grid">${host.renderStatCards()}</div>
+</section>

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

@@ -0,0 +1,44 @@
+@use '../../shared/styles/section';
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.stats-section .stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: clamp(0.625rem, 2vw, 1rem);
+  width: 100%;
+  min-width: 0;
+  align-items: stretch;
+}
+
+@media (min-width: 640px) and (max-width: 1079px) {
+  .stats-section .stats-grid {
+    gap: 0.875rem;
+    grid-auto-rows: 1fr;
+  }
+}
+
+@media (min-width: 1080px) {
+  .stats-section .stats-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-auto-rows: auto;
+    gap: 1rem;
+  }
+}
+
+@media (max-width: 639px) {
+  .stats-section .stats-grid {
+    gap: clamp(0.35rem, 2.5vw, 0.5rem);
+    grid-auto-rows: 1fr;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 576px) {
+  .stats-section .stats-grid {
+    gap: clamp(0.5rem, 2.8vw, 0.75rem);
+  }
+}

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

@@ -0,0 +1,41 @@
+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_STATS_SECTION } from '../../shared/constants/tags.js';
+import { sfLeaderboardTheme } from '../../theme/styles.js';
+import type { SfLeaderboardStatsSection as StatsSectionData } from '../../shared/types/sections.js';
+import { SF_LEADERBOARD_STAT_CARD } from '../../shared/constants/tags.js';
+import '../../shared/components/stat-card/stat-card.js';
+import type { StatsSectionHost } from './stats-section.host.js';
+import renderTemplate from './stats-section.html?lit-html';
+import styles from './stats-section.scss?inline';
+
+@Component({ selector: SF_LEADERBOARD_STATS_SECTION })
+export class SfLeaderboardStatsBlock extends LitElement implements StatsSectionHost {
+  static styles = [sfLeaderboardTheme, scss(styles)];
+
+  @property({ attribute: false })
+  section!: StatsSectionData;
+
+  get hasTitle(): boolean {
+    return Boolean(this.section?.title);
+  }
+
+  renderStatCards() {
+    return this.section.items.map((stat) => {
+      const card = document.createElement(SF_LEADERBOARD_STAT_CARD);
+      card.label = stat.label;
+      card.value = stat.value;
+      card.icon = stat.icon;
+      if (stat.trendValue !== undefined) card.trendValue = stat.trendValue;
+      card.trendPositive = stat.trendPositive ?? true;
+      return card;
+    });
+  }
+
+  render() {
+    if (!this.section?.items?.length) return nothing;
+    return renderTemplate(this);
+  }
+}

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

@@ -0,0 +1,17 @@
+import type { Category, TimeFrame } from '../../shared/types/data.js';
+import type { SfLeaderboardTableSection } from '../../shared/types/sections.js';
+
+export interface TableSectionHost {
+  section: SfLeaderboardTableSection;
+  hasHeader: boolean;
+  hasTitle: boolean;
+  hasSubtitle: boolean;
+  hasFilters: boolean;
+  timeframe: TimeFrame;
+  category: Category;
+  searchQuery: string;
+  onTimeframeChange(e: CustomEvent<TimeFrame>): void;
+  onCategoryChange(e: CustomEvent<Category>): void;
+  onSearchChange(e: CustomEvent<string>): void;
+  onPlayerSelect(e: CustomEvent<import('../../shared/types/data.js').Player>): void;
+}

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

@@ -0,0 +1,19 @@
+<section class="section table-section">
+  <div class="table-section-header" ?hidden="${!host.hasHeader}">
+    <h2 class="section-title" ?hidden="${!host.hasTitle}">${host.section.title}</h2>
+    <span class="table-subtitle" ?hidden="${!host.hasSubtitle}">${host.section.subtitle}</span>
+  </div>
+  <sf-leaderboard-filters
+    ?hidden="${!host.hasFilters}"
+    activeTimeframe="${host.timeframe}"
+    activeCategory="${host.category}"
+    searchQuery="${host.searchQuery}"
+    @timeframe-change="${host.onTimeframeChange}"
+    @category-change="${host.onCategoryChange}"
+    @search-change="${host.onSearchChange}"
+  ></sf-leaderboard-filters>
+  <sf-leaderboard-table
+    .players="${host.section.players}"
+    @player-select="${host.onPlayerSelect}"
+  ></sf-leaderboard-table>
+</section>

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

@@ -0,0 +1,37 @@
+@use '../../shared/styles/section';
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.table-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.table-section-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.table-subtitle {
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
+
+.table-section sf-leaderboard-table {
+  width: 100%;
+}
+
+@media (max-width: 639px) {
+  .table-section-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

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

@@ -0,0 +1,108 @@
+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_TABLE_SECTION,
+} from '../../shared/constants/index.js';
+import { sfLeaderboardTheme } from '../../theme/styles.js';
+import type { Category, Player, TimeFrame } from '../../shared/types/data.js';
+import {
+  SF_LEADERBOARD_CATEGORY_CHANGE,
+  SF_LEADERBOARD_PLAYER_SELECT,
+  SF_LEADERBOARD_SEARCH_CHANGE,
+  SF_LEADERBOARD_TIMEFRAME_CHANGE,
+} from '../../shared/types/events.js';
+import type { SfLeaderboardTableSection as TableSectionData } from '../../shared/types/sections.js';
+import '../../shared/components/filters/filters.js';
+import '../../shared/components/table/table.js';
+import type { TableSectionHost } from './table-section.host.js';
+import renderTemplate from './table-section.html?lit-html';
+import styles from './table-section.scss?inline';
+
+@Component({ selector: SF_LEADERBOARD_TABLE_SECTION })
+export class SfLeaderboardTableBlock extends LitElement implements TableSectionHost {
+  static styles = [sfLeaderboardTheme, scss(styles)];
+
+  @property({ attribute: false })
+  section!: TableSectionData;
+
+  get hasHeader(): boolean {
+    return Boolean(this.section?.title || this.section?.subtitle);
+  }
+
+  get hasTitle(): boolean {
+    return Boolean(this.section?.title);
+  }
+
+  get hasSubtitle(): boolean {
+    return Boolean(this.section?.subtitle);
+  }
+
+  get hasFilters(): boolean {
+    return Boolean(this.section?.filters);
+  }
+
+  get timeframe(): TimeFrame {
+    return this.section.filters?.timeframe ?? DEFAULT_TIMEFRAME;
+  }
+
+  get category(): Category {
+    return this.section.filters?.category ?? DEFAULT_CATEGORY;
+  }
+
+  get searchQuery(): string {
+    return this.section.filters?.searchQuery ?? '';
+  }
+
+  onTimeframeChange(e: CustomEvent<TimeFrame>) {
+    e.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent(SF_LEADERBOARD_TIMEFRAME_CHANGE, {
+        detail: e.detail,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  onCategoryChange(e: CustomEvent<Category>) {
+    e.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent(SF_LEADERBOARD_CATEGORY_CHANGE, {
+        detail: e.detail,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  onSearchChange(e: CustomEvent<string>) {
+    e.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent(SF_LEADERBOARD_SEARCH_CHANGE, {
+        detail: e.detail,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  onPlayerSelect(e: CustomEvent<Player>) {
+    e.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent(SF_LEADERBOARD_PLAYER_SELECT, {
+        detail: e.detail,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render() {
+    if (!this.section) return nothing;
+    return renderTemplate(this);
+  }
+}

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

@@ -0,0 +1,22 @@
+export { sfLeaderboardDataService } from './sf-leaderboard-data.service.js';
+export type {
+  SfLeaderboardState,
+  SfLeaderboardConfig,
+  SfLeaderboardLabels,
+  SfLeaderboardSectionData,
+  SfLeaderboardSectionId,
+  SfLeaderboardSectionEntry,
+  SfLeaderboardSectionPayloadMap,
+  SfLeaderboardSectionPatch,
+  SfLeaderboardData,
+} from './sf-leaderboard.state.js';
+export {
+  EMPTY_SF_LEADERBOARD_STATE,
+  applySectionPatch,
+  getSectionData,
+  getSectionId,
+  hasSection,
+  patchSectionData,
+  sectionEntry,
+  updateSections,
+} from './sf-leaderboard.state.js';

package/src/components/sf-leaderboard/services/sf-leaderboard-data.service.ts

@@ -0,0 +1,54 @@
+import { BehaviorSubject, type Observable } from 'rxjs';
+import {
+  applySectionPatch,
+  EMPTY_SF_LEADERBOARD_STATE,
+  type SfLeaderboardSectionPatch,
+  type SfLeaderboardState,
+  updateSections,
+} from './sf-leaderboard.state.js';
+
+/** Holds the leaderboard model as one observable object. */
+class SfLeaderboardDataService {
+  private readonly stateSubject = new BehaviorSubject<SfLeaderboardState>(
+    EMPTY_SF_LEADERBOARD_STATE,
+  );
+
+  readonly state$: Observable<SfLeaderboardState> =
+    this.stateSubject.asObservable();
+
+  /** @deprecated Prefer `state$` */
+  readonly data$ = this.state$;
+
+  get snapshot(): SfLeaderboardState {
+    return this.stateSubject.getValue();
+  }
+
+  setState(state: SfLeaderboardState): void {
+    this.stateSubject.next(state);
+  }
+
+  /** Flat partial patch — `{ table: { filters: { searchQuery: 'x' } } }` */
+  patchState(patch: SfLeaderboardSectionPatch): void {
+    this.setState(applySectionPatch(this.snapshot, patch));
+  }
+
+  updateState(
+    updater: (current: SfLeaderboardState) => SfLeaderboardState,
+  ): void {
+    this.setState(updater(this.snapshot));
+  }
+
+  /** Immer recipe for config/sections when patch objects are not enough. */
+  updateSections(
+    recipe: Parameters<typeof updateSections>[1],
+  ): void {
+    this.setState(updateSections(this.snapshot, recipe));
+  }
+
+  /** @deprecated Use `setState` */
+  setData(state: SfLeaderboardState): void {
+    this.setState(state);
+  }
+}
+
+export const sfLeaderboardDataService = new SfLeaderboardDataService();

package/src/components/sf-leaderboard/services/sf-leaderboard.state.ts

@@ -0,0 +1,160 @@
+import { produce, type Draft } from 'immer';
+import type { SfLeaderboardTheme } from '../theme/index.js';
+import type {
+  SfLeaderboardFooterSection,
+  SfLeaderboardHeaderSection,
+  SfLeaderboardRankingSection,
+  SfLeaderboardStatsSection,
+  SfLeaderboardTableSection,
+} from '../shared/types/sections.js';
+
+export type SfLeaderboardSectionId =
+  | 'header'
+  | 'stats'
+  | 'ranking'
+  | 'table'
+  | 'footer';
+
+export type SfLeaderboardSectionPayloadMap = {
+  header: SfLeaderboardHeaderSection;
+  stats: SfLeaderboardStatsSection;
+  ranking: SfLeaderboardRankingSection;
+  table: SfLeaderboardTableSection;
+  footer: SfLeaderboardFooterSection;
+};
+
+/** One layout slot: section id + its render payload. Order in `config.sections` = render order. */
+export type SfLeaderboardSectionEntry = {
+  [K in SfLeaderboardSectionId]: {
+    [P in K]: { data: SfLeaderboardSectionPayloadMap[K] };
+  };
+}[SfLeaderboardSectionId];
+
+/** Shared copy not owned by a single section payload. */
+export interface SfLeaderboardLabels {
+  back?: string;
+  live?: string;
+}
+
+/** Layout, theme, labels, and all section payloads in one place. */
+export interface SfLeaderboardConfig {
+  sections: readonly SfLeaderboardSectionEntry[];
+  labels?: SfLeaderboardLabels;
+  theme?: SfLeaderboardTheme;
+}
+
+export interface SfLeaderboardState {
+  config: SfLeaderboardConfig;
+}
+
+export const EMPTY_SF_LEADERBOARD_STATE: SfLeaderboardState = {
+  config: { sections: [] },
+};
+
+/** @deprecated Use `SfLeaderboardState` */
+export type SfLeaderboardData = SfLeaderboardState;
+
+/** Flat partial map — patch by section id, same ergonomics as the old `data` object. */
+export type SfLeaderboardSectionPatch = {
+  [K in SfLeaderboardSectionId]?: Partial<SfLeaderboardSectionPayloadMap[K]>;
+};
+
+/** @deprecated Use `SfLeaderboardSectionPatch` */
+export type SfLeaderboardSectionData = {
+  [K in SfLeaderboardSectionId]?: SfLeaderboardSectionPayloadMap[K];
+};
+
+export function getSectionId(
+  entry: SfLeaderboardSectionEntry,
+): SfLeaderboardSectionId {
+  if ('header' in entry) return 'header';
+  if ('stats' in entry) return 'stats';
+  if ('ranking' in entry) return 'ranking';
+  if ('table' in entry) return 'table';
+  return 'footer';
+}
+
+export function hasSection(
+  state: SfLeaderboardState,
+  id: SfLeaderboardSectionId,
+): boolean {
+  return state.config.sections.some((entry) => id in entry);
+}
+
+export function getSectionData<T extends SfLeaderboardSectionId>(
+  state: SfLeaderboardState,
+  id: T,
+): SfLeaderboardSectionPayloadMap[T] | undefined {
+  const entry = state.config.sections.find((section) => id in section);
+  if (!entry) return undefined;
+  return (entry as Record<T, { data: SfLeaderboardSectionPayloadMap[T] }>)[id]
+    .data;
+}
+
+export function sectionEntry<T extends SfLeaderboardSectionId>(
+  id: T,
+  data: SfLeaderboardSectionPayloadMap[T],
+): SfLeaderboardSectionEntry {
+  return { [id]: { data } } as unknown as SfLeaderboardSectionEntry;
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+/** Deep-merge a partial patch into a draft target (immer-safe — mutates draft). */
+function mergePartial(target: Record<string, unknown>, patch: object): void {
+  for (const [key, value] of Object.entries(patch)) {
+    if (value === undefined) continue;
+
+    const current = target[key];
+    if (isPlainObject(value) && isPlainObject(current)) {
+      mergePartial(current, value);
+      continue;
+    }
+
+    target[key] = value;
+  }
+}
+
+/**
+ * Apply a flat section patch onto live state (immer).
+ *
+ * @example
+ * applySectionPatch(state, { table: { filters: { searchQuery: 'neo' } } })
+ * applySectionPatch(state, { header: { isRefreshing: true } })
+ */
+export function applySectionPatch(
+  state: SfLeaderboardState,
+  patch: SfLeaderboardSectionPatch,
+): SfLeaderboardState {
+  return produce(state, (draft) => {
+    for (const entry of draft.config.sections) {
+      const id = getSectionId(entry as SfLeaderboardSectionEntry);
+      const sectionPatch = patch[id];
+      if (!sectionPatch) continue;
+
+      const slot = entry as Record<
+        SfLeaderboardSectionId,
+        { data: SfLeaderboardSectionPayloadMap[SfLeaderboardSectionId] }
+      >;
+      mergePartial(
+        slot[id].data as unknown as Record<string, unknown>,
+        sectionPatch as object,
+      );
+    }
+  });
+}
+
+/** Immer recipe when a patch object is not enough. */
+export function updateSections(
+  state: SfLeaderboardState,
+  recipe: (draft: Draft<SfLeaderboardConfig>) => void,
+): SfLeaderboardState {
+  return produce(state, (draft) => {
+    recipe(draft.config);
+  });
+}
+
+/** @deprecated Use `applySectionPatch` */
+export const patchSectionData = applySectionPatch;

package/src/components/sf-leaderboard/shared/components/activity-feed/activity-feed.host.ts

@@ -0,0 +1,7 @@
+import type { TemplateResult } from 'lit';
+import type { Activity } from '../../types/data.js';
+
+export interface ActivityFeedHost {
+  activities: Activity[];
+  renderActivities(): TemplateResult;
+}

package/src/components/sf-leaderboard/shared/components/activity-feed/activity-feed.html

@@ -0,0 +1,10 @@
+<div class="feed-container">
+  <div class="feed-header">
+    <div class="header-left">
+      <div class="live-dot"></div>
+      <span class="header-title">Live Activity</span>
+    </div>
+    <span class="event-count">${host.activities.length} events</span>
+  </div>
+  <div class="feed-body">${host.renderActivities()}</div>
+</div>