@oddsmith/ui 0.0.0

package/main.css

@@ -0,0 +1,210 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, sans-serif;
+  background: #0f1117;
+  color: #e8eaed;
+  min-height: 100vh;
+}
+
+.core-dev {
+  display: flex;
+  min-height: 100vh;
+}
+
+.core-dev__sidebar {
+  width: 14rem;
+  flex-shrink: 0;
+  padding: 1rem;
+  background: #1a1d26;
+  border-right: 1px solid #2a2f3a;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.core-dev__brand strong {
+  display: block;
+  font-size: 0.95rem;
+}
+
+.core-dev__brand span {
+  font-size: 0.75rem;
+  color: #9aa0a6;
+}
+
+.core-dev__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.core-dev__nav-link {
+  display: block;
+  padding: 0.5rem 0.65rem;
+  border-radius: 6px;
+  color: #c4c7cc;
+  text-decoration: none;
+  font-size: 0.875rem;
+}
+
+.core-dev__nav-link:hover {
+  background: #252830;
+  color: #fff;
+}
+
+.core-dev__nav-link.is-active {
+  background: #2d3340;
+  color: #fff;
+}
+
+.core-dev__main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.core-dev__header {
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid #2a2f3a;
+}
+
+.core-dev__header h1 {
+  margin: 0 0 0.35rem;
+  font-size: 1.25rem;
+}
+
+.core-dev__header p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: #9aa0a6;
+}
+
+.core-dev__stage {
+  flex: 1;
+  padding: 1.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.core-dev__stage:has(> sf-leaderboard:only-child),
+.core-dev__stage:has(.sf-leaderboard-dev > sf-leaderboard) {
+  padding: 0;
+  display: block;
+}
+
+.core-dev__stage > sf-leaderboard,
+.core-dev__stage .sf-leaderboard-dev > sf-leaderboard {
+  width: 100%;
+  display: block;
+}
+
+.core-dev__stage:empty::after {
+  content: 'Select a component';
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.core-dev__error {
+  color: #f87171;
+  font-size: 0.875rem;
+}
+
+/* SF Leaderboard preset bar (dev preview) */
+.sf-leaderboard-dev {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.playground-preset-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 1.5rem;
+  padding: 0.75rem 1rem;
+  background: #1a1d26;
+  border-bottom: 1px solid #2a2f3a;
+  align-items: flex-start;
+}
+
+.playground-preset-bar__group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.playground-preset-bar__label {
+  font-size: 0.75rem;
+  color: #9aa0a6;
+}
+
+.playground-preset-bar__select {
+  font: inherit;
+  padding: 0.4rem 0.6rem;
+  border-radius: 6px;
+  border: 1px solid #3c4048;
+  background: #0f1117;
+  color: inherit;
+  min-width: 12rem;
+}
+
+.playground-preset-bar__hint {
+  margin: 0;
+  font-size: 0.75rem;
+  color: #6b7280;
+  max-width: 20rem;
+}
+
+.playground-preset-bar__meta {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.playground-preset-bar__badge {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  background: #2d3340;
+}
+
+.playground-preset-bar__badge--muted {
+  background: #252830;
+  color: #9aa0a6;
+}
+
+.playground-preset-bar__labels {
+  border: 1px solid #2a2f3a;
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  margin: 0;
+}
+
+.playground-preset-bar__labels legend {
+  font-size: 0.75rem;
+  color: #9aa0a6;
+  padding: 0 0.25rem;
+}
+
+.playground-preset-bar__labels label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  font-size: 0.75rem;
+  margin-top: 0.35rem;
+}
+
+.playground-preset-bar__labels input {
+  font: inherit;
+  padding: 0.3rem 0.5rem;
+  border-radius: 4px;
+  border: 1px solid #3c4048;
+  background: #0f1117;
+  color: inherit;
+}

package/main.ts

@@ -0,0 +1,124 @@
+/**
+ * Core dev shell — runs before any component module loads.
+ * Start: npm run dev  →  http://localhost:5173/?component=sf-leaderboard
+ */
+import {
+  COMPONENT_CATALOG,
+  getCatalogEntry,
+  navigateToComponent,
+  persistComponentId,
+  readInitialComponentId,
+  switchingRequiresReload,
+} from './previews/catalog.js';
+
+const app = document.getElementById('app');
+if (!app) {
+  throw new Error('#app not found — index.html must define the mount point before main.ts');
+}
+
+let activeId = readInitialComponentId();
+let teardown: (() => void) | undefined;
+
+const shell = document.createElement('div');
+shell.className = 'core-dev';
+
+const sidebar = document.createElement('aside');
+sidebar.className = 'core-dev__sidebar';
+
+const brand = document.createElement('div');
+brand.className = 'core-dev__brand';
+brand.innerHTML = '<strong>Oddsmith</strong><span>Core dev</span>';
+
+const nav = document.createElement('nav');
+nav.className = 'core-dev__nav';
+nav.setAttribute('aria-label', 'Components');
+
+const main = document.createElement('main');
+main.className = 'core-dev__main';
+
+const header = document.createElement('header');
+header.className = 'core-dev__header';
+
+const titleEl = document.createElement('h1');
+const descEl = document.createElement('p');
+header.append(titleEl, descEl);
+
+const stage = document.createElement('div');
+stage.className = 'core-dev__stage';
+main.append(header, stage);
+
+shell.append(sidebar, main);
+sidebar.append(brand, nav);
+app.appendChild(shell);
+
+function renderNav(): void {
+  nav.replaceChildren();
+  for (const entry of COMPONENT_CATALOG) {
+    if (entry.id === 'none') continue;
+    const link = document.createElement('a');
+    link.className = 'core-dev__nav-link';
+    link.href = `?component=${entry.id}`;
+    link.textContent = entry.title;
+    link.dataset.component = entry.id;
+    if (entry.id === activeId) link.classList.add('is-active');
+    nav.appendChild(link);
+  }
+}
+
+function updateHeader(): void {
+  const entry = getCatalogEntry(activeId);
+  titleEl.textContent = entry?.title ?? 'Preview';
+  descEl.textContent = entry?.description ?? '';
+}
+
+async function showComponent(id: string): Promise<void> {
+  teardown?.();
+  teardown = undefined;
+  stage.replaceChildren();
+
+  const entry = getCatalogEntry(id);
+  if (!entry || entry.id === 'none' || !entry.tag) {
+    updateHeader();
+    return;
+  }
+
+  try {
+    const mod = await entry.load();
+    teardown = await mod.mount(stage);
+  } catch (err) {
+    console.error(err);
+    const msg = document.createElement('p');
+    msg.className = 'core-dev__error';
+    msg.textContent = `Failed to load "${id}": ${err instanceof Error ? err.message : String(err)}`;
+    stage.appendChild(msg);
+  }
+
+  updateHeader();
+}
+
+nav.addEventListener('click', (e) => {
+  const link = (e.target as HTMLElement).closest<HTMLAnchorElement>(
+    'a[data-component]',
+  );
+  if (!link) return;
+  e.preventDefault();
+  const nextId = link.dataset.component;
+  if (!nextId || nextId === activeId) return;
+
+  if (switchingRequiresReload(activeId, nextId)) {
+    navigateToComponent(nextId);
+    return;
+  }
+
+  activeId = nextId;
+  persistComponentId(nextId);
+  const url = new URL(location.href);
+  url.searchParams.set('component', nextId);
+  history.replaceState(null, '', url);
+  renderNav();
+  void showComponent(activeId);
+});
+
+renderNav();
+updateHeader();
+void showComponent(activeId);

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@oddsmith/ui",
+  "version": "0.0.0",
+  "description": "Brandable web components",
+  "keywords": [
+    "web-components",
+    "lit-element",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github-skinforge:skinforge-io/core.git"
+  },
+  "license": "BSD-3-Clause",
+  "author": "Oddsmith",
+  "type": "module",
+  "exports": {
+    "./leaderboard": "./dist/leaderboard/main.js",
+    "./leaderboard-v2": "./dist/leaderboard-v2/index.js",
+    "./sf-leaderboard": "./dist/sf-leaderboard/index.js",
+    "./casino-leaderboard": "./dist/casino-leaderboard/component.js",
+    "./streaks": "./dist/streaks/index.js",
+    "./sf-live-feed": "./dist/sf-live-feed/index.js"
+  },
+  "main": "./dist/sf-leaderboard/index.js",
+  "directories": {
+    "doc": "docs",
+    "test": "test"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf node_modules package-lock.json",
+    "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
+    "lint:eslint": "eslint 'src/**/*.ts'",
+    "lint:lit-analyzer": "lit-analyzer",
+    "format": "prettier src/* --write",
+    "docs": "npm run docs:clean && npm run build && npm run analyze && npm run docs:bundle && npm run docs:gen && npm run docs:assets",
+    "docs:clean": "rimraf docs",
+    "docs:bundle": "vite build --config vite.docs.config.ts",
+    "docs:gen": "eleventy --config=.eleventy.cjs",
+    "docs:gen:watch": "eleventy --config=.eleventy.cjs --watch",
+    "docs:assets": "cp node_modules/prismjs/themes/prism-okaidia.css docs/",
+    "docs:serve": "npx --yes serve docs",
+    "analyze": "wca analyze \"src/**/*.ts\" --outFile custom-elements.json",
+    "dev": "vite",
+    "serve": "vite",
+    "test": "karma start karma.conf.cjs",
+    "test:watch": "karma start karma.conf.cjs --auto-watch=true --single-run=false",
+    "test:update-snapshots": "karma start karma.conf.cjs --update-snapshots",
+    "test:prune-snapshots": "karma start karma.conf.cjs --prune-snapshots"
+  },
+  "dependencies": {
+    "immer": "^11.1.8",
+    "lit": "^3.3.3",
+    "lit-element": "^2.3.1",
+    "rxjs": "~7.8.0"
+  },
+  "devDependencies": {
+    "@11ty/eleventy": "^0.10.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
+    "@open-wc/testing": "^2.5.10",
+    "@open-wc/testing-karma": "^3.3.11",
+    "@types/chai": "^4.2.11",
+    "@types/mocha": "^7.0.2",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
+    "chai": "^4.2.0",
+    "deepmerge": "^4.2.2",
+    "eslint": "^6.8.0",
+    "karma": "^4.4.1",
+    "karma-chai": "^0.1.0",
+    "karma-mocha": "^1.3.0",
+    "lit-analyzer": "^1.1.10",
+    "mocha": "^7.1.1",
+    "prettier": "^2.0.4",
+    "prismjs": "^1.30.0",
+    "rimraf": "^3.0.2",
+    "sass": "^1.97.3",
+    "typescript": "^6.0.3",
+    "vite": "^7.3.1",
+    "web-component-analyzer": "^1.0.3"
+  },
+  "module": "./dist/sf-leaderboard/index.js"
+}

package/previews/casino.ts

@@ -0,0 +1,12 @@
+import type { ComponentPreviewModule } from './types.js';
+
+export const mount: ComponentPreviewModule['mount'] = async (root) => {
+  await import('../src/components/casino-leaderboard/index.ts');
+
+  const el = document.createElement('casino-leaderboard');
+  root.appendChild(el);
+
+  return () => {
+    root.replaceChildren();
+  };
+};

package/previews/catalog.ts

@@ -0,0 +1,94 @@
+import type { ComponentCatalogEntry } from './types.js';
+
+export const COMPONENT_CATALOG: readonly ComponentCatalogEntry[] = [
+  {
+    id: 'none',
+    title: '— None —',
+    description: 'Empty preview stage.',
+    tag: null,
+    load: async () => ({
+      mount: async () => () => {},
+    }),
+  },
+  {
+    id: 'sf-leaderboard',
+    title: 'SF Leaderboard',
+    description:
+      'Config-driven leaderboard with presets, theme, and interactive demo data.',
+    tag: 'sf-leaderboard',
+    sharedTag: 'sf-leaderboard',
+    load: () => import('./sf-leaderboard.js'),
+  },
+  {
+    id: 'sf-live-feed',
+    title: 'Live Feed',
+    description: 'Activity stream with avatars and event types.',
+    tag: 'sf-live-feed',
+    load: () => import('./sf-live-feed.js'),
+  },
+  {
+    id: 'streaks',
+    title: 'Streaks',
+    description: 'Step tracker with click-to-complete interaction.',
+    tag: 'sf-streaks',
+    load: () => import('./streaks.js'),
+  },
+  {
+    id: 'leaderboard-v2',
+    title: 'Leaderboard v2 (legacy)',
+    description: 'Earlier leaderboard — same tag as SF Leaderboard; switch via reload.',
+    tag: 'sf-leaderboard',
+    sharedTag: 'sf-leaderboard',
+    load: () => import('./leaderboard-v2.js'),
+  },
+  {
+    id: 'leaderboard',
+    title: 'Leaderboard (v1)',
+    description: 'Original game leaderboard shell.',
+    tag: 'leaderboard-app',
+    load: () => import('./leaderboard-v1.js'),
+  },
+  {
+    id: 'casino',
+    title: 'Casino Leaderboard',
+    description: 'Casino-style leaderboard with tabs and prize pool.',
+    tag: 'casino-leaderboard',
+    load: () => import('./casino.js'),
+  },
+];
+
+const STORAGE_KEY = 'oddsmith-core-dev-component';
+
+export function getCatalogEntry(id: string): ComponentCatalogEntry | undefined {
+  return COMPONENT_CATALOG.find((e) => e.id === id);
+}
+
+export function readInitialComponentId(): string {
+  const fromQuery = new URLSearchParams(location.search).get('component');
+  if (fromQuery && getCatalogEntry(fromQuery)) return fromQuery;
+  const fromStorage = localStorage.getItem(STORAGE_KEY);
+  if (fromStorage && getCatalogEntry(fromStorage)) return fromStorage;
+  return 'sf-leaderboard';
+}
+
+export function persistComponentId(id: string): void {
+  localStorage.setItem(STORAGE_KEY, id);
+}
+
+export function navigateToComponent(id: string): void {
+  persistComponentId(id);
+  const url = new URL(location.href);
+  if (id === 'none') url.searchParams.delete('component');
+  else url.searchParams.set('component', id);
+  location.assign(url);
+}
+
+/** Tags that cannot coexist without reload (duplicate custom element names). */
+export function switchingRequiresReload(fromId: string, toId: string): boolean {
+  if (fromId === toId) return false;
+  const from = getCatalogEntry(fromId);
+  const to = getCatalogEntry(toId);
+  const fromTag = from?.sharedTag ?? from?.tag;
+  const toTag = to?.sharedTag ?? to?.tag;
+  return Boolean(fromTag && toTag && fromTag === toTag);
+}

package/previews/leaderboard-v1.ts

@@ -0,0 +1,12 @@
+import type { ComponentPreviewModule } from './types.js';
+
+export const mount: ComponentPreviewModule['mount'] = async (root) => {
+  await import('../src/components/leaderboard/index.ts');
+
+  const el = document.createElement('leaderboard-app');
+  root.appendChild(el);
+
+  return () => {
+    root.replaceChildren();
+  };
+};

package/previews/leaderboard-v2.ts

@@ -0,0 +1,17 @@
+import type { SfLeaderboard } from '../src/components/leaderboard-v2/components/sf-leaderboard.js';
+import { lbV2CurrentUser, lbV2Players, lbV2Stats } from './sample-data.js';
+import type { ComponentPreviewModule } from './types.js';
+
+export const mount: ComponentPreviewModule['mount'] = async (root) => {
+  await import('../src/components/leaderboard-v2/index.ts');
+
+  const el = document.createElement('sf-leaderboard') as SfLeaderboard;
+  el.players = lbV2Players;
+  el.stats = lbV2Stats;
+  el.currentUser = lbV2CurrentUser;
+  root.appendChild(el);
+
+  return () => {
+    root.replaceChildren();
+  };
+};

package/previews/sample-data.ts

@@ -0,0 +1,101 @@
+import type { LiveFeedActivity } from '../src/components/sf-live-feed/types.js';
+import type { StreaksStep } from '../src/components/streaks/types.js';
+import type {
+  LbBadge,
+  LbPlayer,
+  LbStats,
+} from '../src/components/leaderboard-v2/types.js';
+
+export const mockLiveFeedActivities: LiveFeedActivity[] = [
+  {
+    id: '1',
+    type: 'jackpot',
+    player: { username: 'CryptoKing', avatar: '' },
+    message: 'Hit the MEGA JACKPOT on Lightning Slots!',
+    amount: 125000,
+    timestamp: new Date(Date.now() - 30000),
+  },
+  {
+    id: '2',
+    type: 'win',
+    player: { username: 'AceHunter', avatar: '' },
+    message: "Won a massive pot in Texas Hold'em",
+    amount: 45000,
+    timestamp: new Date(Date.now() - 120000),
+  },
+  {
+    id: '3',
+    type: 'streak',
+    player: { username: 'LuckyDragon', avatar: '' },
+    message: 'Reached a 8-game winning streak!',
+    timestamp: new Date(Date.now() - 300000),
+  },
+];
+
+export const demoStreaksSteps: StreaksStep[] = [
+  { id: '1', label: 'G1', completed: true },
+  { id: '2', label: 'G2', completed: true },
+  { id: '3', label: 'G3', completed: true },
+  { id: '4', label: 'G4', completed: false },
+  { id: '5', label: 'G5', completed: false, isReward: true },
+];
+
+export const lbV2Badges: LbBadge[] = [
+  { id: '1', name: 'First Win', icon: 'trophy', rarity: 'common' },
+  { id: '2', name: 'Streak Master', icon: 'flame', rarity: 'rare' },
+  { id: '3', name: 'Top 10', icon: 'star', rarity: 'epic' },
+];
+
+export const lbV2Players: LbPlayer[] = [
+  {
+    id: '1',
+    rank: 1,
+    username: 'ShadowNinja',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=shadow',
+    level: 99,
+    xp: 45000,
+    xpToNextLevel: 50000,
+    score: 2847500,
+    wins: 342,
+    streak: 15,
+    badges: [lbV2Badges[2], lbV2Badges[1]],
+    trend: 'same',
+  },
+  {
+    id: '2',
+    rank: 2,
+    username: 'CyberPhoenix',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=phoenix',
+    level: 95,
+    xp: 38000,
+    xpToNextLevel: 45000,
+    score: 2654200,
+    wins: 298,
+    streak: 8,
+    badges: [lbV2Badges[1], lbV2Badges[0]],
+    trend: 'up',
+    rankChange: 2,
+  },
+];
+
+export const lbV2Stats: LbStats = {
+  totalPlayers: 12847,
+  yourRank: 156,
+  topScore: 2847500,
+};
+
+export const lbV2CurrentUser: LbPlayer = {
+  id: 'current',
+  rank: 156,
+  username: 'YourLbPlayer',
+  avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=current',
+  level: 45,
+  xp: 12500,
+  xpToNextLevel: 20000,
+  score: 456780,
+  wins: 42,
+  streak: 3,
+  badges: [lbV2Badges[0], lbV2Badges[1]],
+  trend: 'up',
+  rankChange: 12,
+};