@oddsmith/ui 0.0.0

package/previews/sf-leaderboard.ts

@@ -0,0 +1,100 @@
+import type { SfLeaderboard } from '../src/components/sf-leaderboard/sf-leaderboard.js';
+import {
+  createLeaderboardDemo,
+  DEFAULT_SF_LEADERBOARD_PRESET_ID,
+  getSfLeaderboardPreset,
+  SF_LEADERBOARD_PRESETS,
+  type LeaderboardDemoHandle,
+} from '../../shared/sf-leaderboard/index.js';
+import type { ComponentPreviewModule } from './types.js';
+
+function readInitialPresetId(): string {
+  const fromQuery = new URLSearchParams(location.search).get('preset');
+  if (fromQuery && getSfLeaderboardPreset(fromQuery)) return fromQuery;
+  return DEFAULT_SF_LEADERBOARD_PRESET_ID;
+}
+
+function buildPresetBar(
+  presetId: string,
+  onPresetChange: (id: string) => void,
+): HTMLElement {
+  const active = getSfLeaderboardPreset(presetId);
+  const bar = document.createElement('div');
+  bar.className = 'playground-preset-bar';
+
+  const group = document.createElement('div');
+  group.className = 'playground-preset-bar__group';
+
+  const label = document.createElement('label');
+  label.className = 'playground-preset-bar__label';
+  label.htmlFor = 'sf-leaderboard-preset';
+  label.textContent = 'Preset';
+
+  const select = document.createElement('select');
+  select.id = 'sf-leaderboard-preset';
+  select.className = 'playground-preset-bar__select';
+  for (const preset of SF_LEADERBOARD_PRESETS) {
+    const opt = document.createElement('option');
+    opt.value = preset.id;
+    opt.textContent = preset.label;
+    if (preset.id === presetId) opt.selected = true;
+    select.appendChild(opt);
+  }
+  select.addEventListener('change', () => onPresetChange(select.value));
+
+  const hint = document.createElement('p');
+  hint.className = 'playground-preset-bar__hint';
+  hint.textContent = active?.description ?? '';
+
+  group.append(label, select, hint);
+
+  const meta = document.createElement('div');
+  meta.className = 'playground-preset-bar__group playground-preset-bar__meta';
+  if (active) {
+    const themeBadge = document.createElement('span');
+    themeBadge.className = 'playground-preset-bar__badge';
+    themeBadge.textContent = `Theme: ${active.themeId}`;
+    const sectionsBadge = document.createElement('span');
+    sectionsBadge.className =
+      'playground-preset-bar__badge playground-preset-bar__badge--muted';
+    sectionsBadge.textContent = `${active.config.sections.length} sections`;
+    meta.append(themeBadge, sectionsBadge);
+  }
+
+  bar.append(group, meta);
+  return bar;
+}
+
+export const mount: ComponentPreviewModule['mount'] = async (root) => {
+  await import('../src/components/sf-leaderboard/index.ts');
+
+  let presetId = readInitialPresetId();
+  let demo: LeaderboardDemoHandle | undefined;
+
+  const wrap = document.createElement('div');
+  wrap.className = 'sf-leaderboard-dev';
+
+  const setPreset = (id: string) => {
+    presetId = id;
+    demo?.setPreset(id);
+    const url = new URL(location.href);
+    url.searchParams.set('preset', id);
+    history.replaceState(null, '', url);
+    const bar = wrap.querySelector('.playground-preset-bar');
+    if (bar) bar.replaceWith(buildPresetBar(presetId, setPreset));
+  };
+
+  wrap.appendChild(buildPresetBar(presetId, setPreset));
+  const el = document.createElement('sf-leaderboard') as SfLeaderboard;
+  wrap.appendChild(el);
+  root.appendChild(wrap);
+
+  demo = createLeaderboardDemo(el);
+  demo.setPreset(presetId);
+
+  return () => {
+    demo?.unbind();
+    demo = undefined;
+    root.replaceChildren();
+  };
+};

package/previews/sf-live-feed.ts

@@ -0,0 +1,15 @@
+import type { SfLiveFeed } from '../src/components/sf-live-feed/components/sf-live-feed/sf-live-feed.js';
+import { mockLiveFeedActivities } from './sample-data.js';
+import type { ComponentPreviewModule } from './types.js';
+
+export const mount: ComponentPreviewModule['mount'] = async (root) => {
+  await import('../src/components/sf-live-feed/index.ts');
+
+  const el = document.createElement('sf-live-feed') as SfLiveFeed;
+  el.activities = mockLiveFeedActivities;
+  root.appendChild(el);
+
+  return () => {
+    root.replaceChildren();
+  };
+};

package/previews/streaks.ts

@@ -0,0 +1,40 @@
+import type { SfStreaks } from '../src/components/streaks/sf-streaks.js';
+import { STREAKS_STEP_CLICK } from '../src/components/streaks/events.js';
+import type {
+  StreaksStep,
+  StreaksStepClickDetail,
+} from '../src/components/streaks/types.js';
+import { demoStreaksSteps } from './sample-data.js';
+import type { ComponentPreviewModule } from './types.js';
+
+export const mount: ComponentPreviewModule['mount'] = async (root) => {
+  await import('../src/components/streaks/index.ts');
+
+  const el = document.createElement('sf-streaks') as SfStreaks;
+  root.appendChild(el);
+
+  let steps: StreaksStep[] = [...demoStreaksSteps];
+  el.streaksSteps = steps;
+
+  const onStepClick = (e: Event) => {
+    const clicked = (e as CustomEvent<StreaksStepClickDetail>).detail.step;
+    const clickedIndex = steps.findIndex((s) => s.id === clicked.id);
+    if (clickedIndex === -1) return;
+
+    const shouldComplete = !steps[clickedIndex].completed;
+    steps = steps.map((s, index) => {
+      if (shouldComplete) {
+        return index <= clickedIndex ? { ...s, completed: true } : s;
+      }
+      return index >= clickedIndex ? { ...s, completed: false } : s;
+    });
+    el.streaksSteps = steps;
+  };
+
+  el.addEventListener(STREAKS_STEP_CLICK, onStepClick);
+
+  return () => {
+    el.removeEventListener(STREAKS_STEP_CLICK, onStepClick);
+    root.replaceChildren();
+  };
+};

package/previews/types.ts

@@ -0,0 +1,18 @@
+/** Lazy-loaded preview module (component code imports only from here). */
+export interface ComponentPreviewModule {
+  mount: (root: HTMLElement) => Promise<() => void>;
+}
+
+export interface ComponentCatalogEntry {
+  id: string;
+  title: string;
+  description: string;
+  /** Custom element tag; null = empty stage */
+  tag: string | null;
+  /**
+   * v2 and sf-leaderboard both register `sf-leaderboard` — switching between
+   * them requires a full page reload to reset CustomElementRegistry.
+   */
+  sharedTag?: string;
+  load: () => Promise<ComponentPreviewModule>;
+}

package/src/components/README.md

@@ -0,0 +1,16 @@
+# Components
+
+Each folder is a self-contained unit under `src/components/<name>/`.
+
+Primary custom elements use matching **`.html`** + **`.scss`** files (see `sf-leaderboard`, `streaks`, `casino-leaderboard`, `leaderboard-v2`, `sf-live-feed`).
+
+| Folder | Entry | Tag |
+|--------|-------|-----|
+| `sf-leaderboard/` | `index.ts` | `<sf-leaderboard>` |
+| `sf-live-feed/` | `index.ts` | `<sf-live-feed>` |
+| `streaks/` | `index.ts` | `<sf-streaks>` |
+| `leaderboard-v2/` | `index.ts` | `<sf-leaderboard>` (legacy) |
+| `leaderboard/` | `index.ts` | `<leaderboard-app>` |
+| `casino-leaderboard/` | `index.ts` | `<casino-leaderboard>` |
+
+Shared Lit helpers: `src/lib/lit/`.

package/src/components/casino-leaderboard/casino-leaderboard.html

@@ -0,0 +1,80 @@
+<div class="leaderboard">
+        <div class="header">
+          <div class="header-left">
+            <div class="trophy-icon">🏆</div>
+            <div class="title-container">
+              <h1 class="title">Leaderboard</h1>
+              <span class="subtitle">Top Players</span>
+            </div>
+          </div>
+          <div class="prize-pool">
+            <div class="live-indicator">
+              <span class="live-dot"></span>
+              Live
+            </div>
+            <span class="prize-label">Prize Pool</span>
+            <span class="prize-amount"
+              >${this.formatMoney(this.prizePool)}</span
+            >
+          </div>
+        </div>
+
+        <div class="tabs">
+          <button
+            class="tab ${this.activeTab === 'daily' ? 'active' : ''}"
+            @click=${() => this.handleTabClick('daily')}
+          >
+            Daily
+          </button>
+          <button
+            class="tab ${this.activeTab === 'weekly' ? 'active' : ''}"
+            @click=${() => this.handleTabClick('weekly')}
+          >
+            Weekly
+          </button>
+          <button
+            class="tab ${this.activeTab === 'alltime' ? 'active' : ''}"
+            @click=${() => this.handleTabClick('alltime')}
+          >
+            All Time
+          </button>
+        </div>
+
+        <div class="table-header">
+          <span>Rank</span>
+          <span>Player</span>
+          <span>Score</span>
+          <span>Winnings</span>
+          <span>Streak</span>
+          <span>Change</span>
+        </div>
+
+        <div class="player-list">
+          ${this.renderPlayerList()}
+        </div>
+
+        <div class="footer">
+          <div class="footer-stats">
+            <div class="stat">
+              <span class="stat-label">Total Players</span>
+              <span class="stat-value"
+                >${this.formatNumber(this.totalPlayers)}</span
+              >
+            </div>
+            <div class="stat">
+              <span class="stat-label">Playing Now</span>
+              <span class="stat-value"
+                >${this.formatNumber(this.activePlayers)}</span
+              >
+            </div>
+            <div class="stat">
+              <span class="stat-label">Updated</span>
+              <span class="stat-value">Just now</span>
+            </div>
+          </div>
+          <button class="refresh-btn" @click=${this.handleRefresh}>
+            <span class="refresh-icon">↻</span>
+            Refresh
+          </button>
+        </div>
+      </div>