@oddsmith/ui 0.0.0 → 1.0.1

package/src/components/sf-leaderboard/shared/components/podium/podium.html

@@ -1,53 +0,0 @@
-<div class="card">
-  <div class="ambient-glow glow-gold"></div>
-  <div class="card-content">
-    <div class="podium-container">
-      <div class="player-column second">
-        <div class="avatar-wrapper">
-          <div class="avatar-ring silver"></div>
-          <div class="avatar silver">${host.second.initials}</div>
-          <span class="badge-emoji">${host.second.badgeEmoji}</span>
-        </div>
-        <div class="player-name">${host.second.username}</div>
-        <div class="player-earnings silver">${host.second.earnings}</div>
-        <div class="player-winrate">${host.second.winRate}</div>
-        <div class="podium-block second">
-          <span class="podium-number silver">2</span>
-        </div>
-      </div>
-
-      <div class="player-column first">
-        <div class="sparkles">
-          <span class="sparkle">✦</span>
-          <span class="sparkle">✦</span>
-          <span class="sparkle">✦</span>
-        </div>
-        <div class="avatar-wrapper">
-          <div class="avatar-ring gold"></div>
-          <div class="avatar gold">${host.first.initials}</div>
-          <span class="badge-emoji fire">${host.first.badgeEmoji}</span>
-        </div>
-        <div class="player-name">${host.first.username}</div>
-        <div class="player-earnings gold">${host.first.earnings}</div>
-        <div class="player-winrate">${host.first.winRate}</div>
-        <div class="podium-block first">
-          <span class="podium-number gold">1</span>
-        </div>
-      </div>
-
-      <div class="player-column third">
-        <div class="avatar-wrapper">
-          <div class="avatar-ring bronze"></div>
-          <div class="avatar bronze">${host.third.initials}</div>
-          <span class="badge-emoji">${host.third.badgeEmoji}</span>
-        </div>
-        <div class="player-name">${host.third.username}</div>
-        <div class="player-earnings bronze">${host.third.earnings}</div>
-        <div class="player-winrate">${host.third.winRate}</div>
-        <div class="podium-block third">
-          <span class="podium-number bronze">3</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

package/src/components/sf-leaderboard/shared/components/podium/podium.scss

@@ -1,580 +0,0 @@
-@use '../../../theme/scss/colors' as color;
-
-:host {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-}
-
-.card {
-  padding: var(--surface-padding) clamp(14px, 2vw, 24px) var(--surface-padding);
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  height: 100%;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.card::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: conic-gradient(
-    from 0deg,
-    transparent,
-    rgba(var(--primary-rgb), 0.04),
-    transparent,
-    rgba(var(--gold-rgb), 0.04),
-    transparent
-  );
-  animation: rotate 12s linear infinite;
-}
-
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.card-content {
-  position: relative;
-  z-index: 1;
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  padding-top: clamp(28px, 12%, 52px);
-}
-
-.podium-container {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-  gap: clamp(6px, 1.5vw, 14px);
-}
-
-.player-column {
-  flex: 1;
-  max-width: clamp(88px, 14vw, 160px);
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  min-height: 0;
-}
-
-.player-column.first {
-  order: 2;
-  max-width: clamp(96px, 16vw, 180px);
-}
-
-.player-column.second {
-  order: 1;
-}
-
-.player-column.third {
-  order: 3;
-}
-
-.avatar-wrapper,
-.player-name,
-.player-earnings,
-.player-winrate,
-.sparkles {
-  flex-shrink: 0;
-}
-
-.sparkles {
-  position: relative;
-  height: clamp(14px, 3vh, 22px);
-  width: clamp(40px, 8vw, 56px);
-  margin-bottom: clamp(2px, 0.5vh, 4px);
-  flex-shrink: 0;
-}
-
-.sparkle {
-  position: absolute;
-  font-size: clamp(10px, 1.8vw, 14px);
-  animation: sparkle 1.5s ease-in-out infinite;
-}
-
-.sparkle:nth-child(1) {
-  left: 10px;
-  top: 5px;
-  animation-delay: 0s;
-}
-
-.sparkle:nth-child(2) {
-  left: 25px;
-  top: 0;
-  animation-delay: 0.3s;
-}
-
-.sparkle:nth-child(3) {
-  left: 40px;
-  top: 8px;
-  animation-delay: 0.6s;
-}
-
-@keyframes sparkle {
-  0%,
-  100% {
-    opacity: 1;
-    transform: scale(1) rotate(0deg);
-  }
-  50% {
-    opacity: 0.4;
-    transform: scale(1.3) rotate(180deg);
-  }
-}
-
-.avatar-wrapper {
-  position: relative;
-  margin-bottom: clamp(4px, 0.8vh, 8px);
-}
-
-.avatar {
-  width: clamp(40px, 7vw, 56px);
-  height: clamp(40px, 7vw, 56px);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: clamp(14px, 2.5vw, 18px);
-  font-weight: 700;
-  position: relative;
-  z-index: 2;
-  transition: transform 0.3s ease;
-}
-
-.player-column.first .avatar {
-  width: clamp(44px, 8vw, 64px);
-  height: clamp(44px, 8vw, 64px);
-  font-size: clamp(15px, 2.8vw, 22px);
-}
-
-.avatar:hover {
-  transform: scale(1.08);
-}
-
-.avatar.gold {
-  background: var(--medal-gold-gradient);
-  color: var(--medal-avatar-fg);
-  box-shadow: 0 0 30px var(--medal-gold-glow);
-}
-
-.avatar.silver {
-  background: var(--medal-silver-gradient);
-  color: var(--medal-avatar-fg);
-  box-shadow: 0 0 20px var(--medal-silver-glow);
-}
-
-.avatar.bronze {
-  background: var(--medal-bronze-gradient);
-  color: var(--medal-avatar-fg);
-  box-shadow: 0 0 20px var(--medal-bronze-glow);
-}
-
-.avatar-ring {
-  position: absolute;
-  inset: -5px;
-  border-radius: 50%;
-  border: 2px solid;
-  animation: ring-pulse 2.5s ease-in-out infinite;
-}
-
-.avatar-ring.gold {
-  border-color: var(--medal-gold-border);
-}
-
-.avatar-ring.silver {
-  border-color: var(--medal-silver-border);
-}
-
-.avatar-ring.bronze {
-  border-color: var(--medal-bronze-border);
-}
-
-@keyframes ring-pulse {
-  0%,
-  100% {
-    transform: scale(1);
-    opacity: 0.6;
-  }
-  50% {
-    transform: scale(1.15);
-    opacity: 0.2;
-  }
-}
-
-.badge-emoji {
-  position: absolute;
-  bottom: -3px;
-  right: -3px;
-  font-size: clamp(12px, 2vw, 16px);
-  z-index: 3;
-  animation: badge-bounce 2s ease-in-out infinite;
-}
-
-.badge-emoji.fire {
-  animation: fire-pulse 0.6s ease-in-out infinite alternate;
-}
-
-@keyframes badge-bounce {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-3px);
-  }
-}
-
-@keyframes fire-pulse {
-  from {
-    transform: scale(1);
-  }
-  to {
-    transform: scale(1.2);
-  }
-}
-
-.player-name {
-  font-size: clamp(10px, 1.6vw, 13px);
-  font-weight: 700;
-  color: var(--foreground);
-  margin-bottom: 2px;
-  text-align: center;
-  line-height: 1.2;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.player-earnings {
-  font-size: clamp(11px, 1.8vw, 15px);
-  font-weight: 700;
-  margin-bottom: 2px;
-  text-align: center;
-  line-height: 1.2;
-}
-
-.player-earnings.gold {
-  color: var(--gold);
-  text-shadow: 0 0 15px rgba(var(--gold-rgb), 0.5);
-}
-
-.player-earnings.silver {
-  color: var(--silver);
-}
-
-.player-earnings.bronze {
-  color: var(--bronze);
-}
-
-.player-winrate {
-  font-size: clamp(9px, 1.4vw, 11px);
-  color: var(--muted-foreground);
-  margin-bottom: clamp(4px, 0.8vh, 8px);
-  text-align: center;
-  line-height: 1.2;
-}
-
-.podium-block {
-  flex: 0 0 auto;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 12px 12px 0 0;
-  position: relative;
-  overflow: hidden;
-  transition: transform 0.3s ease;
-}
-
-/* % of column height: 1st tallest, then 2nd, then 3rd (aligned at baseline) */
-.podium-block.first {
-  height: 50%;
-  min-height: clamp(80px, 12vh, 190px);
-}
-
-.podium-block.second {
-  height: 36%;
-  min-height: clamp(58px, 9vh, 140px);
-}
-
-.podium-block.third {
-  height: 26%;
-  min-height: clamp(42px, 7vh, 105px);
-}
-
-.podium-block:hover {
-  transform: translateY(-3px);
-}
-
-.podium-block::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  opacity: 0.1;
-  background: linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0.2) 0%,
-    transparent 100%
-  );
-}
-
-.podium-block.first {
-  background: #{color.place-first-podium-slot()};
-  border: 2px solid color-mix(in srgb, #{color.place-first-podium-slot()} 55%, transparent);
-  border-bottom: none;
-  box-shadow: 0 0 32px color-mix(in srgb, #{color.place-first-podium-slot()} 15%, transparent);
-}
-
-.podium-block.second {
-  background: #{color.place-second-podium-slot()};
-  border: 2px solid color-mix(in srgb, #{color.place-second-podium-slot()} 45%, transparent);
-  border-bottom: none;
-  box-shadow: 0 0 24px color-mix(in srgb, #{color.place-second-podium-slot()} 12%, transparent);
-}
-
-.podium-block.third {
-  background: #{color.place-third-podium-slot()};
-  border: 2px solid color-mix(in srgb, #{color.place-third-podium-slot()} 45%, transparent);
-  border-bottom: none;
-  box-shadow: 0 0 24px color-mix(in srgb, #{color.place-third-podium-slot()} 12%, transparent);
-}
-
-.podium-number {
-  font-size: clamp(28px, 6vw, 48px);
-  font-weight: 800;
-  opacity: 0.4;
-  letter-spacing: -2px;
-  line-height: 1;
-}
-
-.player-column.first .podium-number {
-  font-size: clamp(32px, 7vw, 56px);
-}
-
-.podium-number.gold {
-  color: #{color.place-first-podium-number()};
-}
-
-.podium-number.silver {
-  color: #{color.place-second-podium-number()};
-}
-
-.podium-number.bronze {
-  color: #{color.place-third-podium-number()};
-}
-
-.ambient-glow {
-  position: absolute;
-  width: clamp(120px, 40%, 200px);
-  height: clamp(120px, 40%, 200px);
-  border-radius: 50%;
-  filter: blur(60px);
-  opacity: 0.15;
-  pointer-events: none;
-  z-index: 0;
-}
-
-.glow-gold {
-  background: var(--gold);
-  top: 8%;
-  left: 50%;
-  transform: translateX(-50%);
-  animation: glow-pulse 4s ease-in-out infinite;
-}
-
-@keyframes glow-pulse {
-  0%,
-  100% {
-    opacity: 0.15;
-  }
-  50% {
-    opacity: 0.25;
-  }
-}
-
-@media (min-width: 1024px) {
-  .card-content {
-    padding-top: clamp(32px, 14%, 56px);
-  }
-
-  .podium-block.first {
-    height: 54%;
-    min-height: clamp(92px, 13vh, 210px);
-  }
-
-  .podium-block.second {
-    height: 38%;
-    min-height: clamp(66px, 10vh, 155px);
-  }
-
-  .podium-block.third {
-    height: 28%;
-    min-height: clamp(48px, 8vh, 118px);
-  }
-
-  .podium-number {
-    font-size: clamp(36px, 5vw, 52px);
-  }
-
-  .player-column.first .podium-number {
-    font-size: clamp(42px, 6vw, 64px);
-  }
-}
-
-@media (min-width: 1280px) {
-  .podium-container {
-    gap: clamp(10px, 1.5vw, 20px);
-  }
-
-  .player-column {
-    max-width: clamp(100px, 12vw, 180px);
-  }
-
-  .player-column.first {
-    max-width: clamp(110px, 14vw, 200px);
-  }
-
-  .podium-block.first {
-    height: 56%;
-    min-height: clamp(100px, 14vh, 230px);
-  }
-
-  .podium-block.second {
-    height: 40%;
-    min-height: clamp(72px, 11vh, 168px);
-  }
-
-  .podium-block.third {
-    height: 30%;
-    min-height: clamp(52px, 8vh, 128px);
-  }
-
-  .podium-number {
-    font-size: clamp(40px, 4.5vw, 60px);
-  }
-
-  .player-column.first .podium-number {
-    font-size: clamp(48px, 5.5vw, 72px);
-  }
-}
-
-@media (max-width: 1023px) {
-  .podium-block.first {
-    min-height: clamp(64px, 10vh, 120px);
-  }
-
-  .podium-block.second {
-    min-height: clamp(48px, 8vh, 95px);
-  }
-
-  .podium-block.third {
-    min-height: clamp(36px, 6vh, 75px);
-  }
-
-  .player-column {
-    max-width: clamp(72px, 22vw, 120px);
-  }
-
-  .player-column.first {
-    max-width: clamp(80px, 24vw, 140px);
-  }
-}
-
-@media (max-width: 639px) {
-  .card {
-    border-radius: 18px;
-    padding: clamp(8px, 2vw, 12px) clamp(10px, 3vw, 16px);
-  }
-
-  .card-content {
-    padding-top: clamp(18px, 8%, 32px);
-  }
-
-  .podium-container {
-    gap: clamp(4px, 1.5vw, 8px);
-  }
-
-  .player-column {
-    max-width: clamp(64px, 28vw, 100px);
-  }
-
-  .player-column.first {
-    max-width: clamp(72px, 30vw, 110px);
-  }
-
-  .podium-block.first {
-    height: 48%;
-    min-height: clamp(56px, 12dvh, 100px);
-  }
-
-  .podium-block.second {
-    height: 34%;
-    min-height: clamp(42px, 9dvh, 80px);
-  }
-
-  .podium-block.third {
-    height: 24%;
-    min-height: clamp(32px, 7dvh, 65px);
-  }
-
-  .podium-number {
-    font-size: clamp(22px, 6vw, 36px);
-  }
-
-  .player-column.first .podium-number {
-    font-size: clamp(26px, 7vw, 42px);
-  }
-
-  .avatar {
-    width: clamp(34px, 9vw, 44px);
-    height: clamp(34px, 9vw, 44px);
-    font-size: clamp(12px, 3vw, 14px);
-  }
-
-  .player-column.first .avatar {
-    width: clamp(38px, 10vw, 48px);
-    height: clamp(38px, 10vw, 48px);
-  }
-
-  .player-name {
-    font-size: clamp(9px, 2.4vw, 11px);
-  }
-
-  .player-earnings {
-    font-size: clamp(10px, 2.6vw, 12px);
-  }
-}
-
-@media (max-width: 380px) {
-  .player-column {
-    max-width: 30vw;
-  }
-
-  .player-column.first {
-    max-width: 34vw;
-  }
-
-  .sparkle:nth-child(2) {
-    left: 18px;
-  }
-
-  .sparkle:nth-child(3) {
-    left: 30px;
-  }
-}

package/src/components/sf-leaderboard/shared/components/podium/podium.ts

@@ -1,49 +0,0 @@
-import { LitElement, nothing } 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_PODIUM } from '../../constants/tags.js';
-import { sfLeaderboardTheme } from '../../../theme/styles.js';
-import type { Player } from '../../types/data.js';
-import { mapPlayersToPodiumEntries } from './map-players.js';
-import type { PodiumEntry } from './podium.types.js';
-import type { PodiumHost } from './podium.host.js';
-import renderTemplate from './podium.html?lit-html';
-import styles from './podium.scss?inline';
-
-@Component({ selector: SF_LEADERBOARD_PODIUM })
-export class SfLeaderboardPodium extends LitElement implements PodiumHost {
-  static styles = [sfLeaderboardTheme, scss(styles)];
-
-  @property({ type: Array }) players: Player[] = [];
-
-  private entryByRank(rank: number): PodiumEntry | undefined {
-    return mapPlayersToPodiumEntries(this.players).find((p) => p.rank === rank);
-  }
-
-  get first(): PodiumEntry {
-    return this.entryByRank(1)!;
-  }
-
-  get second(): PodiumEntry {
-    return this.entryByRank(2)!;
-  }
-
-  get third(): PodiumEntry {
-    return this.entryByRank(3)!;
-  }
-
-  get hasPodium(): boolean {
-    return (
-      this.players.length >= 3 &&
-      this.entryByRank(1) !== undefined &&
-      this.entryByRank(2) !== undefined &&
-      this.entryByRank(3) !== undefined
-    );
-  }
-
-  render() {
-    if (!this.hasPodium) return nothing;
-    return renderTemplate(this);
-  }
-}

package/src/components/sf-leaderboard/shared/components/podium/podium.types.ts

@@ -1,9 +0,0 @@
-/** View model for one podium column (mapped from leaderboard `Player`). */
-export interface PodiumEntry {
-  rank: number;
-  initials: string;
-  username: string;
-  earnings: string;
-  winRate: string;
-  badgeEmoji: string;
-}

package/src/components/sf-leaderboard/shared/components/rank-badge/rank-badge.host.ts

@@ -1,11 +0,0 @@
-export interface RankBadgeHost {
-  size: 'sm' | 'md' | 'lg';
-  rank: number;
-  rankClass: string;
-  isTop3: boolean;
-  rankIcon: string;
-  hasTrend: boolean;
-  trendClass: string;
-  trendIcon: string;
-  trendDiff: string;
-}

package/src/components/sf-leaderboard/shared/components/rank-badge/rank-badge.html

@@ -1,9 +0,0 @@
-<div class="badge ${host.size} ${host.rankClass}">
-  <span class="icon" ?hidden="${!host.isTop3}">${host.rankIcon}</span>
-  <span class="rank-number" ?hidden="${!host.isTop3}">${host.rank}</span>
-  <span ?hidden="${host.isTop3}">#${host.rank}</span>
-</div>
-<div class="trend ${host.trendClass}" ?hidden="${!host.hasTrend}">
-  <span class="trend-icon">${host.trendIcon}</span>
-  <span>${host.trendDiff}</span>
-</div>