@oddsmith/ui 0.0.0 → 1.0.1

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

@@ -1,121 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,6 +0,0 @@
-<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

@@ -1,44 +0,0 @@
-@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

@@ -1,41 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,19 +0,0 @@
-<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

@@ -1,37 +0,0 @@
-@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

@@ -1,108 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,160 +0,0 @@
-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

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

@@ -1,10 +0,0 @@
-<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>