@oddsmith/ui 0.0.0 → 1.0.0

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

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

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

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

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

@@ -1,19 +0,0 @@
-/**
- * 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

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

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

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

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

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

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

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

@@ -1,16 +0,0 @@
-/**
- * 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

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