@oddsmith/ui 0.0.0 → 1.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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