@oddsmith/ui 0.0.0

package/src/components/sf-live-feed/components/sf-live-feed/sf-live-feed.scss

@@ -0,0 +1,177 @@
+:host {
+  display: block;
+}
+
+.feed-container {
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--card);
+  overflow: hidden;
+}
+
+.feed-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border);
+  background: rgba(26, 31, 46, 0.5);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.live-dot {
+  position: relative;
+  width: 8px;
+  height: 8px;
+  background: #00d26a;
+  border-radius: 50%;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: #00d26a;
+    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: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  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 rgba(42, 47, 66, 0.5);
+  transition: background 0.2s ease;
+  animation: slide-in 0.3s ease-out forwards;
+  opacity: 0;
+
+  &:hover {
+    background: rgba(26, 31, 46, 0.3);
+  }
+
+  &: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: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid;
+  font-weight: 600;
+  text-transform: uppercase;
+
+  &.win {
+    background: rgba(0, 210, 106, 0.2);
+    border-color: rgba(0, 210, 106, 0.3);
+    color: #00d26a;
+  }
+
+  &.jackpot {
+    background: rgba(255, 215, 0, 0.2);
+    border-color: rgba(255, 215, 0, 0.3);
+    color: var(--gold);
+  }
+
+  &.streak {
+    background: rgba(255, 165, 2, 0.2);
+    border-color: rgba(255, 165, 2, 0.3);
+    color: #ffa502;
+  }
+
+  &.achievement {
+    background: rgba(0, 212, 255, 0.2);
+    border-color: rgba(0, 212, 255, 0.3);
+    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: #00d26a;
+  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-live-feed/components/sf-live-feed/sf-live-feed.ts

@@ -0,0 +1,65 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { DEFAULT_LIVE_FEED_TITLE, SF_LIVE_FEED_TAG } from '../../constants.js';
+import { sfLiveFeedTheme } from '../../styles/theme.js';
+import type { LiveFeedActivity } from '../../types.js';
+import { formatCurrency, formatTime } from '../../utils.js';
+import '../avatar/avatar.js';
+import type { SfLiveFeedHost } from './sf-live-feed.host.js';
+import renderTemplate from './sf-live-feed.html?lit-html';
+import styles from './sf-live-feed.scss?inline';
+import { scss } from '../../../../lib/lit/scss.js';
+
+@customElement(SF_LIVE_FEED_TAG)
+export class SfLiveFeed extends LitElement implements SfLiveFeedHost {
+  static styles = [sfLiveFeedTheme, scss(styles)];
+
+  @property({ type: Array }) activities: LiveFeedActivity[] = [];
+  @property({ type: String, attribute: 'feed-title' })
+  feedTitle = DEFAULT_LIVE_FEED_TITLE;
+
+  private getActivityBadge(type: LiveFeedActivity['type']) {
+    const badges = {
+      win: { label: 'WIN', icon: '💵' },
+      jackpot: { label: 'JACKPOT', icon: '⚡' },
+      streak: { label: 'STREAK', icon: '🔥' },
+      achievement: { label: 'ACHIEVEMENT', icon: '🏆' },
+    };
+    return badges[type];
+  }
+
+  renderActivityAmount(amount?: number) {
+    return amount
+      ? html`<p class="activity-amount">+${formatCurrency(amount)}</p>`
+      : html``;
+  }
+
+  renderActivities() {
+    return html`${this.activities.map((activity, index) => {
+      const badge = this.getActivityBadge(activity.type);
+      return html`
+        <div class="activity-item" style="animation-delay: ${index * 100}ms">
+          <sf-live-feed-avatar
+            username="${activity.player.username}"
+            avatar="${activity.player.avatar || ''}"
+          ></sf-live-feed-avatar>
+          <div class="activity-content">
+            <div class="activity-header">
+              <span class="player-name">${activity.player.username}</span>
+              <span class="activity-badge ${activity.type}">
+                ${badge.icon} ${badge.label}
+              </span>
+            </div>
+            <p class="activity-message">${activity.message}</p>
+            ${this.renderActivityAmount(activity.amount)}
+          </div>
+          <span class="activity-time">${formatTime(activity.timestamp)}</span>
+        </div>
+      `;
+    })}`;
+  }
+
+  render() {
+    return renderTemplate(this);
+  }
+}

package/src/components/sf-live-feed/constants.ts

@@ -0,0 +1,4 @@
+export const SF_LIVE_FEED_TAG = 'sf-live-feed';
+export const SF_LIVE_FEED_AVATAR_TAG = 'sf-live-feed-avatar';
+
+export const DEFAULT_LIVE_FEED_TITLE = 'Live Activity';

package/src/components/sf-live-feed/demo/sample-data.ts

@@ -0,0 +1,34 @@
+import type { LiveFeedActivity } from '../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),
+  },
+  {
+    id: '4',
+    type: 'achievement',
+    player: { username: 'MoonShot', avatar: '' },
+    message: "Unlocked 'Rising Star' achievement",
+    timestamp: new Date(Date.now() - 600000),
+  },
+];

package/src/components/sf-live-feed/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Live feed — public API.
+ * Import: `import '@skinforge/sf-live-feed'`
+ */
+export type {
+  LiveFeedActivity,
+  LiveFeedActivityType,
+  LiveFeedPlayerRef,
+} from './types.js';
+export {
+  SF_LIVE_FEED_TAG,
+  SF_LIVE_FEED_AVATAR_TAG,
+  DEFAULT_LIVE_FEED_TITLE,
+} from './constants.js';
+export { formatCurrency, formatTime, getInitials } from './utils.js';
+export { SfLiveFeed } from './components/sf-live-feed/sf-live-feed.js';
+export { SfLiveFeedAvatar } from './components/avatar/avatar.js';
+
+import './components/sf-live-feed/sf-live-feed.js';

package/src/components/sf-live-feed/styles/theme.scss

@@ -0,0 +1,19 @@
+:host {
+  --background: #0a0c14;
+  --foreground: #f0f0f5;
+  --card: #12151f;
+  --primary: #00d4ff;
+  --muted-foreground: #808090;
+  --border: #2a2f42;
+  --gold: #ffd700;
+  --radius: 12px;
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+
+  font-family: var(--font-sans);
+  color: var(--foreground);
+}
+
+* {
+  box-sizing: border-box;
+}

package/src/components/sf-live-feed/styles/theme.ts

@@ -0,0 +1,5 @@
+import type { CSSResult } from 'lit';
+import themeStyles from './theme.scss?inline';
+import { scss } from '../../../lib/lit/scss.js';
+
+export const sfLiveFeedTheme: CSSResult = scss(themeStyles);

package/src/components/sf-live-feed/types.ts

@@ -0,0 +1,19 @@
+export type LiveFeedActivityType =
+  | 'win'
+  | 'jackpot'
+  | 'streak'
+  | 'achievement';
+
+export interface LiveFeedPlayerRef {
+  username: string;
+  avatar?: string;
+}
+
+export interface LiveFeedActivity {
+  id: string;
+  type: LiveFeedActivityType;
+  player: LiveFeedPlayerRef;
+  message: string;
+  amount?: number;
+  timestamp: Date;
+}

package/src/components/sf-live-feed/utils.ts

@@ -0,0 +1,17 @@
+export function formatCurrency(amount: number): string {
+  if (amount >= 1_000_000) return `$${(amount / 1_000_000).toFixed(2)}M`;
+  if (amount >= 1_000) return `$${(amount / 1_000).toFixed(1)}K`;
+  return `$${amount.toFixed(2)}`;
+}
+
+export function formatTime(date: Date): string {
+  const now = new Date();
+  const diff = Math.floor((now.getTime() - date.getTime()) / 1000);
+  if (diff < 60) return `${diff}s ago`;
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  return `${Math.floor(diff / 3600)}h ago`;
+}
+
+export function getInitials(name: string): string {
+  return name.slice(0, 2).toUpperCase();
+}

package/src/components/streaks/constants.ts

@@ -0,0 +1,17 @@
+import type { StreaksStep } from './types.js';
+
+/** Custom element tag registered by this feature. */
+export const SF_STREAKS_TAG = 'sf-streaks';
+
+export const DEFAULT_STREAKS_TITLE = 'Win up to $50,000!';
+
+export const DEFAULT_STREAKS_SUBTITLE =
+  'Complete 5 tasks to unlock the Wheel and spin for rewards!';
+
+export const DEFAULT_STREAKS_STEPS: StreaksStep[] = [
+  { id: '1', label: 'G1', completed: true },
+  { id: '2', label: 'G2', completed: true },
+  { id: '3', label: 'G3', completed: true },
+  { id: '4', label: 'G4', completed: true },
+  { id: '5', label: 'G5', completed: false, isReward: true },
+];

package/src/components/streaks/demo/sample-steps.ts

@@ -0,0 +1,10 @@
+import type { StreaksStep } from '../types.js';
+
+/** Demo-only seed data for local dev / playground. */
+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 },
+];

package/src/components/streaks/events.ts

@@ -0,0 +1,8 @@
+import type { StreaksStep } from './types.js';
+
+/** Fired when a step box is clicked. Toggle completion in the host app. */
+export const STREAKS_STEP_CLICK = 'step-click';
+
+export interface StreaksStepClickDetail {
+  step: StreaksStep;
+}

package/src/components/streaks/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Streaks feature — public API.
+ * Import this entry in apps: `import '@skinforge/streaks'`
+ */
+export type { StreaksStep } from './types.js';
+export {
+  SF_STREAKS_TAG,
+  DEFAULT_STREAKS_TITLE,
+  DEFAULT_STREAKS_SUBTITLE,
+  DEFAULT_STREAKS_STEPS,
+} from './constants.js';
+export { STREAKS_STEP_CLICK } from './events.js';
+export type { StreaksStepClickDetail } from './events.js';
+export { SfStreaks } from './sf-streaks.js';
+
+import './sf-streaks.js';

package/src/components/streaks/sf-streaks.html

@@ -0,0 +1,26 @@
+<div class="container">
+  <div class="header">
+    <div class="title-section">
+      <h2 class="title">${this._streaksTitle}</h2>
+      <p class="subtitle">${this._streaksSubtitle}</p>
+    </div>
+    <div class="wheel-container">
+      <div class="wheel-ring"></div>
+      ${this._renderWheel()}
+    </div>
+  </div>
+
+  <div class="steps-container">
+    ${this._renderSteps()}
+  </div>
+
+  <div class="progress-bar">
+    <div class="progress-track">
+      <div class="progress-fill" style="width: ${this._animatedProgress}%"></div>
+    </div>
+    <div class="progress-text">
+      <span>${this.completedCount} of ${this._streaksSteps.length} completed</span>
+      <span class="progress-percentage">${Math.round(this.progress)}%</span>
+    </div>
+  </div>
+</div>