@oddsmith/ui 0.0.0

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

@@ -0,0 +1,180 @@
+:host {
+  display: block;
+}
+
+.feed-container {
+  border-radius: var(--surface-radius);
+  border: 1px solid var(--surface-border-color);
+  background: var(--surface-gradient);
+  box-shadow: var(--surface-shadow);
+  overflow: hidden;
+}
+
+.feed-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--muted);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.live-dot {
+  position: relative;
+  width: 8px;
+  height: 8px;
+  background: var(--success);
+  border-radius: 50%;
+
+  &::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;
+  }
+}
+
+.header-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.event-count {
+  font-size: 0.65rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--inset-border);
+  background: var(--inset-bg);
+  color: var(--muted-foreground);
+}
+
+.feed-body {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.activity-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background var(--transition-fast);
+  animation: slide-in 0.3s ease-out forwards;
+  opacity: 0;
+
+  &:hover {
+    background: var(--inset-hover-bg);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.activity-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.activity-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.player-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.activity-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.6rem;
+  padding: 0.15rem 0.4rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+
+  &.win {
+    background: var(--badge-success-bg);
+    border-color: var(--badge-success-border);
+    color: var(--success);
+  }
+
+  &.jackpot {
+    background: var(--medal-gold-bg);
+    border-color: var(--medal-gold-border);
+    color: var(--gold);
+  }
+
+  &.streak {
+    background: var(--badge-warning-bg);
+    border-color: var(--badge-warning-border);
+    color: var(--warning);
+  }
+
+  &.achievement {
+    background: var(--badge-accent-bg);
+    border-color: var(--badge-accent-border);
+    color: var(--primary);
+  }
+}
+
+.activity-message {
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+  margin-top: 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.activity-amount {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  color: var(--success);
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+.activity-time {
+  font-size: 0.65rem;
+  color: var(--muted-foreground);
+  white-space: nowrap;
+}

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

@@ -0,0 +1,88 @@
+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_ACTIVITY_FEED, SF_LEADERBOARD_PLAYER_AVATAR } from '../../constants/tags.js';
+import { sfLeaderboardTheme } from '../../../theme/styles.js';
+import type { Activity } from '../../types/data.js';
+import { formatCurrency, formatTime } from '../../utils/utils.js';
+import '../player-avatar/player-avatar.js';
+import type { ActivityFeedHost } from './activity-feed.host.js';
+import renderTemplate from './activity-feed.html?lit-html';
+import styles from './activity-feed.scss?inline';
+
+@Component({ selector: SF_LEADERBOARD_ACTIVITY_FEED })
+export class SfLeaderboardActivityFeed extends LitElement
+  implements ActivityFeedHost {
+  static styles = [sfLeaderboardTheme, scss(styles)];
+
+  @property({ type: Array }) activities: Activity[] = [];
+
+  private getActivityBadge(type: Activity['type']) {
+    const badges: Record<
+      Activity['type'],
+      { label: string; icon: string }
+    > = {
+      win: { label: 'WIN', icon: '💵' },
+      jackpot: { label: 'JACKPOT', icon: '⚡' },
+      streak: { label: 'STREAK', icon: '🔥' },
+      achievement: { label: 'ACHIEVEMENT', icon: '🏆' },
+    };
+    return badges[type];
+  }
+
+  private createActivityItem(activity: Activity, index: number): HTMLElement {
+    const badge = this.getActivityBadge(activity.type);
+
+    const item = document.createElement('div');
+    item.className = 'activity-item';
+    item.style.animationDelay = `${index * 100}ms`;
+
+    const avatar = document.createElement(SF_LEADERBOARD_PLAYER_AVATAR);
+    avatar.username = activity.player.username;
+    avatar.avatar = activity.player.avatar || '';
+    avatar.size = 'sm';
+
+    const content = document.createElement('div');
+    content.className = 'activity-content';
+
+    const header = document.createElement('div');
+    header.className = 'activity-header';
+    const playerName = document.createElement('span');
+    playerName.className = 'player-name';
+    playerName.textContent = activity.player.username;
+    const badgeEl = document.createElement('span');
+    badgeEl.className = `activity-badge ${activity.type}`;
+    badgeEl.textContent = `${badge.icon} ${badge.label}`;
+    header.append(playerName, badgeEl);
+
+    const message = document.createElement('p');
+    message.className = 'activity-message';
+    message.textContent = activity.message;
+    content.append(header, message);
+
+    if (activity.amount) {
+      const amount = document.createElement('p');
+      amount.className = 'activity-amount';
+      amount.textContent = `+${formatCurrency(activity.amount)}`;
+      content.append(amount);
+    }
+
+    const time = document.createElement('span');
+    time.className = 'activity-time';
+    time.textContent = formatTime(activity.timestamp);
+
+    item.append(avatar, content, time);
+    return item;
+  }
+
+  renderActivities() {
+    return this.activities.map((activity, index) =>
+      this.createActivityItem(activity, index),
+    );
+  }
+
+  render() {
+    return renderTemplate(this);
+  }
+}

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

@@ -0,0 +1,12 @@
+import type { TemplateResult } from 'lit';
+import type { Category, TimeFrame } from '../../types/data.js';
+
+export interface FiltersHost {
+  activeTimeframe: TimeFrame;
+  activeCategory: Category;
+  searchQuery: string;
+  renderTimeframeTabs(): TemplateResult;
+  renderCategoryOptions(): TemplateResult;
+  handleSearchInput(e: Event): void;
+  handleCategoryChange(e: Event): void;
+}

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

@@ -0,0 +1,22 @@
+<div class="filters">
+  <div class="search-wrapper">
+    <span class="search-icon">🔍</span>
+    <input
+      type="text"
+      class="search-input"
+      placeholder="Search players..."
+      .value="${host.searchQuery}"
+      @input="${host.handleSearchInput}"
+    />
+  </div>
+
+  <div class="timeframe-tabs">${host.renderTimeframeTabs()}</div>
+
+  <select
+    class="category-select"
+    .value="${host.activeCategory}"
+    @change="${host.handleCategoryChange}"
+  >
+    ${host.renderCategoryOptions()}
+  </select>
+</div>

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

@@ -0,0 +1,122 @@
+:host {
+  display: block;
+}
+
+.filters {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+  min-width: 0;
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+  }
+}
+
+.search-wrapper {
+  position: relative;
+  flex: 1;
+}
+
+.search-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--muted-foreground);
+  font-size: 0.875rem;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.625rem 1rem 0.625rem 2.5rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--surface-border-color);
+  background: var(--inset-bg);
+  color: var(--foreground);
+  font-size: 0.875rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s ease;
+
+  &::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  &:focus {
+    border-color: var(--primary);
+  }
+}
+
+.timeframe-tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  background: var(--inset-bg);
+  border: 1px solid var(--inset-border);
+  border-radius: var(--radius-sm);
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  flex-wrap: nowrap;
+
+  @media (min-width: 640px) {
+    width: auto;
+    overflow-x: visible;
+  }
+}
+
+.tab-btn {
+  padding: 0.375rem 0.75rem;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: var(--foreground);
+  }
+
+  &.active {
+    background: var(--accent-gradient);
+    color: var(--primary-foreground);
+    box-shadow: var(--surface-shadow);
+  }
+}
+
+.category-select {
+  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;
+  outline: none;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+
+  @media (min-width: 640px) {
+    width: auto;
+    min-width: 140px;
+  }
+
+  &:focus {
+    border-color: var(--primary);
+  }
+}

package/src/components/sf-leaderboard/shared/components/filters/filters.ts

@@ -0,0 +1,75 @@
+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 {
+  CATEGORY_OPTIONS,
+  DEFAULT_CATEGORY,
+  DEFAULT_TIMEFRAME,
+  SF_LEADERBOARD_FILTERS,
+  TIMEFRAME_OPTIONS,
+} from '../../constants/index.js';
+import {
+  SF_LEADERBOARD_CATEGORY_CHANGE,
+  SF_LEADERBOARD_SEARCH_CHANGE,
+  SF_LEADERBOARD_TIMEFRAME_CHANGE,
+} from '../../types/events.js';
+import { sfLeaderboardTheme } from '../../../theme/styles.js';
+import type { Category, TimeFrame } from '../../types/data.js';
+import type { FiltersHost } from './filters.host.js';
+import renderTemplate from './filters.html?lit-html';
+import styles from './filters.scss?inline';
+
+@Component({ selector: SF_LEADERBOARD_FILTERS })
+export class SfLeaderboardFilters extends LitElement implements FiltersHost {
+  static styles = [sfLeaderboardTheme, scss(styles)];
+
+  @property({ type: String }) activeTimeframe: TimeFrame = DEFAULT_TIMEFRAME;
+  @property({ type: String }) activeCategory: Category = DEFAULT_CATEGORY;
+  @property({ type: String }) searchQuery = '';
+
+  private emit<T>(name: string, detail: T) {
+    this.dispatchEvent(
+      new CustomEvent(name, { detail, bubbles: true, composed: true }),
+    );
+  }
+
+  handleSearchInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    this.emit(SF_LEADERBOARD_SEARCH_CHANGE, input.value);
+  }
+
+  handleTimeframeClick(value: TimeFrame) {
+    this.emit(SF_LEADERBOARD_TIMEFRAME_CHANGE, value);
+  }
+
+  handleCategoryChange(e: Event) {
+    const select = e.target as HTMLSelectElement;
+    this.emit(SF_LEADERBOARD_CATEGORY_CHANGE, select.value as Category);
+  }
+
+  renderTimeframeTabs() {
+    return TIMEFRAME_OPTIONS.map((tf) => {
+      const btn = document.createElement('button');
+      btn.className = `tab-btn ${this.activeTimeframe === tf.value ? 'active' : ''}`;
+      btn.textContent = tf.label;
+      btn.addEventListener('click', () =>
+        this.handleTimeframeClick(tf.value as TimeFrame),
+      );
+      return btn;
+    });
+  }
+
+  renderCategoryOptions() {
+    return CATEGORY_OPTIONS.map((cat) => {
+      const option = document.createElement('option');
+      option.value = cat.value;
+      option.textContent = cat.label;
+      return option;
+    });
+  }
+
+  render() {
+    return renderTemplate(this);
+  }
+}

package/src/components/sf-leaderboard/shared/components/player-avatar/player-avatar.host.ts

@@ -0,0 +1,9 @@
+export interface PlayerAvatarHost {
+  username: string;
+  avatar: string;
+  initials: string;
+  hasAvatar: boolean;
+  size: 'sm' | 'md' | 'lg' | 'xl';
+  isOnline: boolean;
+  highlight: boolean;
+}

package/src/components/sf-leaderboard/shared/components/player-avatar/player-avatar.html

@@ -0,0 +1,5 @@
+<div class="avatar ${host.size} ${host.highlight ? 'highlight' : ''}">
+  <img ?hidden="${!host.hasAvatar}" src="${host.avatar}" alt="${host.username}" />
+  <span ?hidden="${host.hasAvatar}">${host.initials}</span>
+</div>
+<span class="online-indicator" ?hidden="${!host.isOnline}"></span>

package/src/components/sf-leaderboard/shared/components/player-avatar/player-avatar.scss

@@ -0,0 +1,81 @@
+:host {
+  display: inline-block;
+  position: relative;
+}
+
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  background: var(--secondary);
+  color: var(--foreground);
+  font-weight: 700;
+  overflow: hidden;
+
+  &.sm {
+    width: 32px;
+    height: 32px;
+    font-size: 0.7rem;
+  }
+
+  &.md {
+    width: 48px;
+    height: 48px;
+    font-size: 0.875rem;
+  }
+
+  &.lg {
+    width: 64px;
+    height: 64px;
+    font-size: 1.25rem;
+  }
+
+  &.xl {
+    width: 80px;
+    height: 80px;
+    font-size: 1.5rem;
+  }
+
+  &.highlight {
+    border-color: var(--primary);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.online-indicator {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  width: 12px;
+  height: 12px;
+  background: var(--success);
+  border-radius: 50%;
+  border: 2px solid var(--surface-border-color);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: var(--success);
+    animation: pulse-ring 1.5s ease-out infinite;
+  }
+}
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}

package/src/components/sf-leaderboard/shared/components/player-avatar/player-avatar.ts

@@ -0,0 +1,34 @@
+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_PLAYER_AVATAR } from '../../constants/tags.js';
+import { sfLeaderboardTheme } from '../../../theme/styles.js';
+import { getInitials } from '../../utils/utils.js';
+import type { PlayerAvatarHost } from './player-avatar.host.js';
+import renderTemplate from './player-avatar.html?lit-html';
+import styles from './player-avatar.scss?inline';
+
+@Component({ selector: SF_LEADERBOARD_PLAYER_AVATAR })
+export class SfLeaderboardPlayerAvatar extends LitElement
+  implements PlayerAvatarHost {
+  static styles = [sfLeaderboardTheme, scss(styles)];
+
+  @property({ type: String }) username = '';
+  @property({ type: String }) avatar = '';
+  @property({ type: String }) size: 'sm' | 'md' | 'lg' | 'xl' = 'md';
+  @property({ type: Boolean }) isOnline = false;
+  @property({ type: Boolean }) highlight = false;
+
+  get hasAvatar(): boolean {
+    return Boolean(this.avatar);
+  }
+
+  get initials(): string {
+    return getInitials(this.username);
+  }
+
+  render() {
+    return renderTemplate(this);
+  }
+}

package/src/components/sf-leaderboard/shared/components/podium/map-players.ts

@@ -0,0 +1,24 @@
+import type { Player } from '../../types/data.js';
+import { formatCurrency, getInitials } from '../../utils/utils.js';
+import type { PodiumEntry } from './podium.types.js';
+
+function badgeFor(player: Player): string {
+  if (player.streak >= 5) return '🔥';
+  if (player.rank === 1) return '👑';
+  return '✌️';
+}
+
+export function mapPlayerToPodiumEntry(player: Player): PodiumEntry {
+  return {
+    rank: player.rank,
+    initials: getInitials(player.username),
+    username: player.username,
+    earnings: formatCurrency(player.totalWinnings),
+    winRate: `${player.winRate}% WR`,
+    badgeEmoji: badgeFor(player),
+  };
+}
+
+export function mapPlayersToPodiumEntries(players: Player[]): PodiumEntry[] {
+  return players.map(mapPlayerToPodiumEntry);
+}

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

@@ -0,0 +1,10 @@
+import type { PodiumEntry } from './podium.types.js';
+
+/** Host API required by `podium.html`. */
+export interface PodiumHost {
+  /** Set when `hasPodium` is true (template only renders then). */
+  readonly first: PodiumEntry;
+  readonly second: PodiumEntry;
+  readonly third: PodiumEntry;
+  readonly hasPodium: boolean;
+}