@oddsmith/ui 0.0.0

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

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

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

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

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

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

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