@oddsmith/ui 0.0.0 → 1.0.0

package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.js

@@ -0,0 +1,67 @@
+import { LitElement as m, nothing as c } from "lit";
+import { property as l } from "lit/decorators.js";
+import { Component as p } from "../../../../shared/lib/lit/component.js";
+import { scss as u } from "../../../../shared/lib/lit/scss.js";
+import { OS_LEADERBOARD_CASINO_STATS as h } from "../../constants/tags.js";
+import { osLeaderboardCasinoTheme as f } from "../../theme/styles.js";
+import b from "./stats-section.html.js";
+import S from "./stats-section.scss.js";
+var L = Object.defineProperty, d = Object.getOwnPropertyDescriptor, g = (r, e, n, i) => {
+  for (var t = i > 1 ? void 0 : i ? d(e, n) : e, o = r.length - 1, a; o >= 0; o--)
+    (a = r[o]) && (t = (i ? a(e, n, t) : a(t)) || t);
+  return i && t && L(e, n, t), t;
+};
+function P(r, e = "USD") {
+  try {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: e,
+      maximumFractionDigits: 0
+    }).format(r);
+  } catch {
+    return r.toLocaleString();
+  }
+}
+let s = class extends m {
+  get participantsLabel() {
+    return this.section.totalParticipants.toLocaleString();
+  }
+  get showPrizes() {
+    return this.section.totalPrizes != null;
+  }
+  get prizesLabel() {
+    return (this.section.totalPrizes ?? 0).toLocaleString();
+  }
+  get showBiggestWin() {
+    return this.section.biggestWin != null;
+  }
+  get biggestWinLabel() {
+    return P(
+      this.section.biggestWin ?? 0,
+      this.section.biggestWinCurrency ?? "USD"
+    );
+  }
+  get participantsSegment() {
+    return !this.showPrizes && !this.showBiggestWin ? "solo" : "start";
+  }
+  get prizesSegment() {
+    return this.showBiggestWin ? "middle" : "end";
+  }
+  get biggestWinSegment() {
+    return "end";
+  }
+  render() {
+    return this.section ? b(this) : c;
+  }
+};
+s.styles = [f, u(S)];
+g([
+  l({ attribute: !1 })
+], s.prototype, "section", 2);
+s = g([
+  p({ selector: h })
+], s);
+export {
+  s as OsLeaderboardCasinoStats
+};
+//# sourceMappingURL=stats-section.js.map

package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stats-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/stats-section/stats-section.ts"],"sourcesContent":["import { LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_STATS } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport type { OsLeaderboardCasinoStatsSection } from '@os-leaderboard-casino/types/sections.js';\nimport type { StatsSectionHost, StatRailSegment } from './stats-section.host.js';\nimport './components/stat-rail/stat-rail.js';\nimport renderTemplate from './stats-section.html?lit-html';\nimport styles from './stats-section.scss?inline';\n\nfunction formatWinAmount(value: number, currency = 'USD'): string {\n  try {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency,\n      maximumFractionDigits: 0,\n    }).format(value);\n  } catch {\n    return value.toLocaleString();\n  }\n}\n\n@Component({ selector: OS_LEADERBOARD_CASINO_STATS })\nexport class OsLeaderboardCasinoStats\n  extends LitElement\n  implements StatsSectionHost\n{\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ attribute: false })\n  section!: OsLeaderboardCasinoStatsSection;\n\n  get participantsLabel(): string {\n    return this.section.totalParticipants.toLocaleString();\n  }\n\n  get showPrizes(): boolean {\n    return this.section.totalPrizes != null;\n  }\n\n  get prizesLabel(): string {\n    return (this.section.totalPrizes ?? 0).toLocaleString();\n  }\n\n  get showBiggestWin(): boolean {\n    return this.section.biggestWin != null;\n  }\n\n  get biggestWinLabel(): string {\n    return formatWinAmount(\n      this.section.biggestWin ?? 0,\n      this.section.biggestWinCurrency ?? 'USD',\n    );\n  }\n\n  get participantsSegment(): StatRailSegment {\n    if (!this.showPrizes && !this.showBiggestWin) return 'solo';\n    return 'start';\n  }\n\n  get prizesSegment(): StatRailSegment {\n    return this.showBiggestWin ? 'middle' : 'end';\n  }\n\n  get biggestWinSegment(): StatRailSegment {\n    return 'end';\n  }\n\n  render() {\n    if (!this.section) return nothing;\n    return renderTemplate(this);\n  }\n}\n"],"names":["formatWinAmount","value","currency","OsLeaderboardCasinoStats","LitElement","renderTemplate","nothing","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","Component","OS_LEADERBOARD_CASINO_STATS"],"mappings":";;;;;;;;;;;;;AAYA,SAASA,EAAgBC,GAAeC,IAAW,OAAe;AAChE,MAAI;AACF,WAAO,IAAI,KAAK,aAAa,SAAS;AAAA,MACpC,OAAO;AAAA,MACP,UAAAA;AAAA,MACA,uBAAuB;AAAA,IAAA,CACxB,EAAE,OAAOD,CAAK;AAAA,EACjB,QAAQ;AACN,WAAOA,EAAM,eAAA;AAAA,EACf;AACF;AAGO,IAAME,IAAN,cACGC,EAEV;AAAA,EAME,IAAI,oBAA4B;AAC9B,WAAO,KAAK,QAAQ,kBAAkB,eAAA;AAAA,EACxC;AAAA,EAEA,IAAI,aAAsB;AACxB,WAAO,KAAK,QAAQ,eAAe;AAAA,EACrC;AAAA,EAEA,IAAI,cAAsB;AACxB,YAAQ,KAAK,QAAQ,eAAe,GAAG,eAAA;AAAA,EACzC;AAAA,EAEA,IAAI,iBAA0B;AAC5B,WAAO,KAAK,QAAQ,cAAc;AAAA,EACpC;AAAA,EAEA,IAAI,kBAA0B;AAC5B,WAAOJ;AAAA,MACL,KAAK,QAAQ,cAAc;AAAA,MAC3B,KAAK,QAAQ,sBAAsB;AAAA,IAAA;AAAA,EAEvC;AAAA,EAEA,IAAI,sBAAuC;AACzC,WAAI,CAAC,KAAK,cAAc,CAAC,KAAK,iBAAuB,SAC9C;AAAA,EACT;AAAA,EAEA,IAAI,gBAAiC;AACnC,WAAO,KAAK,iBAAiB,WAAW;AAAA,EAC1C;AAAA,EAEA,IAAI,oBAAqC;AACvC,WAAO;AAAA,EACT;AAAA,EAEA,SAAS;AACP,WAAK,KAAK,UACHK,EAAe,IAAI,IADAC;AAAA,EAE5B;AACF;AAjDaH,EAIJ,SAAS,CAACI,GAA0BC,EAAKC,CAAM,CAAC;AAGvDC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GANnBR,EAOX,WAAA,WAAA,CAAA;AAPWA,IAANO,EAAA;AAAA,EADNE,EAAU,EAAE,UAAUC,EAAA,CAA6B;AAAA,GACvCV,CAAA;"}

package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.scss.js

@@ -0,0 +1,5 @@
+const t = ":host{display:block;width:100%}.strip{display:flex;align-items:stretch;gap:10px;width:100%}@media(max-width:560px){.strip{flex-direction:column}}";
+export {
+  t as default
+};
+//# sourceMappingURL=stats-section.scss.js.map

package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stats-section.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/os-leaderboard-casino/sections/table-section/table-section.html.js

@@ -0,0 +1,38 @@
+import { html as s } from "lit";
+function n(a) {
+  return s`<section>
+  <div class="section-header">
+    <h2 class="section-title">${a.sectionTitle}</h2>
+  </div>
+
+  <div class="card-shell">
+    <div class="card-accent" aria-hidden="true"></div>
+    <div class="card">
+      <div class="table-scroll">
+      <div class="table-head">
+        <span class="col-rank">Rank</span>
+        <span class="col-player">Player</span>
+        <span class="col-games">Games</span>
+        <span class="col-win-rate">Win rate</span>
+        <span class="col-bet">Total bet</span>
+        <span class="col-points">Points</span>
+        <span class="col-rank-change">Change</span>
+      </div>
+      <div class="empty" ?hidden=${a.hasPlayers}>${a.emptyMessage}</div>
+      ${a.renderPlayers()}
+      <div class="divider" ?hidden=${!a.showPinned}>Your position</div>
+      ${a.renderPinnedRow()}
+    </div>
+  </div>
+  </div>
+
+  <button type="button" class="cta" @click=${a.onOpenClick}>
+    ${a.ctaLabel}
+  </button>
+</section>
+`;
+}
+export {
+  n as default
+};
+//# sourceMappingURL=table-section.html.js.map

package/dist/components/os-leaderboard-casino/sections/table-section/table-section.html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/table-section/table-section.html?lit-html"],"sourcesContent":["\nimport { html } from 'lit';\n\nexport default function render(host) {\n  return html`<section>\n  <div class=\"section-header\">\n    <h2 class=\"section-title\">${host.sectionTitle}</h2>\n  </div>\n\n  <div class=\"card-shell\">\n    <div class=\"card-accent\" aria-hidden=\"true\"></div>\n    <div class=\"card\">\n      <div class=\"table-scroll\">\n      <div class=\"table-head\">\n        <span class=\"col-rank\">Rank</span>\n        <span class=\"col-player\">Player</span>\n        <span class=\"col-games\">Games</span>\n        <span class=\"col-win-rate\">Win rate</span>\n        <span class=\"col-bet\">Total bet</span>\n        <span class=\"col-points\">Points</span>\n        <span class=\"col-rank-change\">Change</span>\n      </div>\n      <div class=\"empty\" ?hidden=${host.hasPlayers}>${host.emptyMessage}</div>\n      ${host.renderPlayers()}\n      <div class=\"divider\" ?hidden=${!host.showPinned}>Your position</div>\n      ${host.renderPinnedRow()}\n    </div>\n  </div>\n  </div>\n\n  <button type=\"button\" class=\"cta\" @click=${host.onOpenClick}>\n    ${host.ctaLabel}\n  </button>\n</section>\n`;\n}\n"],"names":["render","host","html"],"mappings":";AAGe,SAASA,EAAOC,GAAM;AACnC,SAAOC;AAAA;AAAA,gCAEuBD,EAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAgBdA,EAAK,UAAU,IAAIA,EAAK,YAAY;AAAA,QAC/DA,EAAK,cAAa,CAAE;AAAA,qCACS,CAACA,EAAK,UAAU;AAAA,QAC7CA,EAAK,gBAAe,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA,6CAKeA,EAAK,WAAW;AAAA,MACvDA,EAAK,QAAQ;AAAA;AAAA;AAAA;AAInB;"}

package/dist/components/os-leaderboard-casino/sections/table-section/table-section.js

@@ -0,0 +1,182 @@
+import { LitElement as f, html as r, nothing as i } from "lit";
+import { property as d } from "lit/decorators.js";
+import { unsafeSVG as c } from "lit/directives/unsafe-svg.js";
+import v from "../../assets/icons/table.rank-up.svg.js";
+import b from "../../assets/icons/table.rank-down.svg.js";
+import g from "../../assets/icons/table.rank-neutral.svg.js";
+import { Component as k } from "../../../../shared/lib/lit/component.js";
+import { scss as y } from "../../../../shared/lib/lit/scss.js";
+import { DEFAULT_TABLE_TITLE as $, DEFAULT_CTA_LABEL_FINISHED as _, DEFAULT_CTA_LABEL as w } from "../../constants/defaults.js";
+import { OS_LEADERBOARD_CASINO_TABLE as P } from "../../constants/tags.js";
+import { osLeaderboardCasinoTheme as S } from "../../theme/styles.js";
+import { renderPlayerName as C } from "../../theme/vip-mark.js";
+import { labelText as R } from "../../types/data.js";
+import { prizeForRank as L, podiumVariantForRank as E } from "../../theme/prize-resolve.js";
+import { OS_LEADERBOARD_CASINO_OPEN as O } from "../../types/events.js";
+import z from "./table-section.html.js";
+import A from "./table-section.scss.js";
+var D = Object.defineProperty, T = Object.getOwnPropertyDescriptor, l = (e, s, t, o) => {
+  for (var n = o > 1 ? void 0 : o ? T(s, t) : s, p = e.length - 1, u; p >= 0; p--)
+    (u = e[p]) && (n = (o ? u(s, t, n) : u(n)) || n);
+  return o && n && D(s, t, n), n;
+};
+function U(e) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 0
+  }).format(e);
+}
+function B(e) {
+  return e != null ? e.toLocaleString() : "—";
+}
+function m(e) {
+  return e.replace("<svg ", '<svg viewBox="0 0 512 512" ');
+}
+const x = m(v), N = m(b), h = m(g);
+let a = class extends f {
+  constructor() {
+    super(...arguments), this.uuid = "", this.finished = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._resizeObserver = new ResizeObserver(() => this._syncStickyWidth()), this._resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._resizeObserver?.disconnect();
+  }
+  updated() {
+    this._syncStickyWidth();
+  }
+  _syncStickyWidth() {
+    const e = this.shadowRoot?.querySelector(".card"), s = this.shadowRoot?.querySelector(".col-player");
+    e && this.style.setProperty(
+      "--table-scrollport-width",
+      `${e.clientWidth}px`
+    ), s && this.style.setProperty(
+      "--sticky-player-width",
+      `${s.offsetWidth}px`
+    );
+  }
+  get sectionTitle() {
+    return $;
+  }
+  get ctaLabel() {
+    return this.section?.ctaLabel ?? (this.finished ? _ : w);
+  }
+  get visiblePlayers() {
+    return this.section?.topPlayers ?? [];
+  }
+  get pinnedCurrentUser() {
+    const e = this.section?.currentUser;
+    return !e || !("you" in e) || (this.section?.topPlayers ?? []).some((t) => t.you) ? void 0 : e;
+  }
+  get hasPlayers() {
+    return this.visiblePlayers.length > 0;
+  }
+  get emptyMessage() {
+    return "No players yet.";
+  }
+  get showPinned() {
+    return this.pinnedCurrentUser != null;
+  }
+  onOpenClick() {
+    this.dispatchEvent(
+      new CustomEvent(O, {
+        detail: { uuid: this.uuid },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  resolvePlayerPrize(e) {
+    const s = this.section?.prizes ?? [];
+    return L(s, e.rank) ?? e.prize;
+  }
+  renderRankChange(e) {
+    if (e.previousRank == null)
+      return r`<span class="chip flat"
+        >${c(h)}</span
+      >`;
+    const s = e.previousRank - e.rank;
+    return s === 0 ? r`<span class="chip flat"
+        >${c(h)}</span
+      >` : s > 0 ? r`<span class="chip up"
+        >${c(x)}${s}</span
+      >` : r`<span class="chip down"
+      >${c(N)}${Math.abs(s)}</span
+    >`;
+  }
+  avatarUrl(e) {
+    return `https://api.dicebear.com/9.x/lorelei/svg?seed=${encodeURIComponent(
+      e
+    )}`;
+  }
+  renderRow(e) {
+    const s = !e.you && e.rank <= 3 ? `podium-${e.rank}` : "", t = this.resolvePlayerPrize(e), o = e.totalBet ?? Math.round(e.points * (1.8 + e.rank * 0.04));
+    return r`
+      <div
+        class="row ${e.you ? "you" : ""} ${e.vip ? "vip" : ""} ${s}"
+      >
+        ${e.rank <= 3 && !e.you ? r`<span class="rank col-rank"
+              ><os-leaderboard-casino-medal-coin
+                variant=${E(e.rank)}
+                rank=${e.rank}
+                size=${30}
+              ></os-leaderboard-casino-medal-coin
+            ></span>` : r`<span class="rank col-rank">#${e.rank}</span>`}
+        <div class="player col-player">
+          <span class="avatar">
+            <img src=${this.avatarUrl(e.username)} alt="" loading="lazy" />
+          </span>
+          <span class="who">
+            <span class="username">
+              ${C(e.username, {
+      vip: e.vip,
+      suffix: e.you ? r`<span class="you-tag">You</span>` : i
+    })}
+            </span>
+            ${t ? r`<span class="prize-sub"
+                  ><span class="prize-label"
+                    >${R(t.label)}</span
+                  ></span
+                >` : i}
+          </span>
+        </div>
+        <span class="col-games">${B(e.gamesPlayed)}</span>
+        <span class="col-win-rate"
+          >${e.winRate != null ? `${e.winRate}%` : "—"}</span
+        >
+        <span class="col-bet">${U(o)}</span>
+        <span class="col-points"><b>${e.points.toLocaleString()}</b></span>
+        <span class="col-rank-change">${this.renderRankChange(e)}</span>
+      </div>
+    `;
+  }
+  renderPlayers() {
+    return r`${this.visiblePlayers.map((e) => this.renderRow(e))}`;
+  }
+  renderPinnedRow() {
+    const e = this.pinnedCurrentUser;
+    return e ? this.renderRow(e) : i;
+  }
+  render() {
+    return this.section ? z(this) : i;
+  }
+};
+a.styles = [S, y(A)];
+l([
+  d({ attribute: !1 })
+], a.prototype, "section", 2);
+l([
+  d({ type: String })
+], a.prototype, "uuid", 2);
+l([
+  d({ type: Boolean })
+], a.prototype, "finished", 2);
+a = l([
+  k({ selector: P })
+], a);
+export {
+  a as OsLeaderboardCasinoTable
+};
+//# sourceMappingURL=table-section.js.map

package/dist/components/os-leaderboard-casino/sections/table-section/table-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/table-section/table-section.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport rankUpSvg from '../../assets/icons/table.rank-up.svg?raw';\nimport rankDownSvg from '../../assets/icons/table.rank-down.svg?raw';\nimport rankNeutralSvg from '../../assets/icons/table.rank-neutral.svg?raw';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport {\n  DEFAULT_CTA_LABEL,\n  DEFAULT_CTA_LABEL_FINISHED,\n  DEFAULT_TABLE_TITLE,\n} from '@os-leaderboard-casino/constants/defaults.js';\nimport { OS_LEADERBOARD_CASINO_TABLE } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport { renderPlayerName } from '@os-leaderboard-casino/theme/vip-mark.js';\nimport {\n  labelText,\n  type QuizPrize,\n  type UserRank,\n} from '@os-leaderboard-casino/types/data.js';\nimport {\n  podiumVariantForRank,\n  prizeForRank,\n} from '@os-leaderboard-casino/theme/prize-resolve.js';\nimport { OS_LEADERBOARD_CASINO_OPEN } from '@os-leaderboard-casino/types/events.js';\nimport type { OsLeaderboardCasinoTableView } from '@os-leaderboard-casino/types/sections.js';\nimport type { TableSectionHost } from './table-section.host.js';\nimport '@os-leaderboard-casino/sections/prize-section/components/medal-coin/medal-coin.js';\nimport renderTemplate from './table-section.html?lit-html';\nimport styles from './table-section.scss?inline';\n\nfunction formatTotalBet(value: number): string {\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: 'USD',\n    maximumFractionDigits: 0,\n  }).format(value);\n}\n\nfunction formatGamesPlayed(value: number | undefined): string {\n  return value != null ? value.toLocaleString() : '—';\n}\n\nfunction addViewBox(svg: string): string {\n  return svg.replace('<svg ', '<svg viewBox=\"0 0 512 512\" ');\n}\n\nconst rankUpSvgVb = addViewBox(rankUpSvg);\nconst rankDownSvgVb = addViewBox(rankDownSvg);\nconst rankNeutralSvgVb = addViewBox(rankNeutralSvg);\n\n/** Top-players preview — pinned current user, golden CTA. */\n@Component({ selector: OS_LEADERBOARD_CASINO_TABLE })\nexport class OsLeaderboardCasinoTable\n  extends LitElement\n  implements TableSectionHost\n{\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  private _resizeObserver?: ResizeObserver;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this._syncStickyWidth());\n    this._resizeObserver.observe(this);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._resizeObserver?.disconnect();\n  }\n\n  protected updated() {\n    this._syncStickyWidth();\n  }\n\n  private _syncStickyWidth() {\n    const card = this.shadowRoot?.querySelector<HTMLElement>('.card');\n    const player = this.shadowRoot?.querySelector<HTMLElement>('.col-player');\n\n    if (card) {\n      this.style.setProperty(\n        '--table-scrollport-width',\n        `${card.clientWidth}px`,\n      );\n    }\n\n    if (player) {\n      this.style.setProperty(\n        '--sticky-player-width',\n        `${player.offsetWidth}px`,\n      );\n    }\n  }\n\n  @property({ attribute: false })\n  section!: OsLeaderboardCasinoTableView;\n\n  /** Campaign uuid included in the `leaderboard-open` event detail. */\n  @property({ type: String })\n  uuid = '';\n\n  @property({ type: Boolean })\n  finished = false;\n\n  get sectionTitle(): string {\n    return DEFAULT_TABLE_TITLE;\n  }\n\n  get ctaLabel(): string {\n    return (\n      this.section?.ctaLabel ??\n      (this.finished ? DEFAULT_CTA_LABEL_FINISHED : DEFAULT_CTA_LABEL)\n    );\n  }\n\n  private get visiblePlayers(): UserRank[] {\n    return this.section?.topPlayers ?? [];\n  }\n\n  private get pinnedCurrentUser(): UserRank | undefined {\n    const current = this.section?.currentUser;\n    if (!current || !('you' in current)) return undefined;\n    const players = this.section?.topPlayers ?? [];\n    return players.some((p) => p.you) ? undefined : current;\n  }\n\n  get hasPlayers(): boolean {\n    return this.visiblePlayers.length > 0;\n  }\n\n  get emptyMessage(): string {\n    return 'No players yet.';\n  }\n\n  get showPinned(): boolean {\n    return this.pinnedCurrentUser != null;\n  }\n\n  onOpenClick() {\n    this.dispatchEvent(\n      new CustomEvent(OS_LEADERBOARD_CASINO_OPEN, {\n        detail: { uuid: this.uuid },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private resolvePlayerPrize(player: UserRank): QuizPrize | null {\n    const prizes = this.section?.prizes ?? [];\n    return prizeForRank(prizes, player.rank) ?? player.prize;\n  }\n\n  private renderRankChange(player: UserRank) {\n    if (player.previousRank == null)\n      return html`<span class=\"chip flat\"\n        >${unsafeSVG(rankNeutralSvgVb)}</span\n      >`;\n    const delta = player.previousRank - player.rank;\n    if (delta === 0)\n      return html`<span class=\"chip flat\"\n        >${unsafeSVG(rankNeutralSvgVb)}</span\n      >`;\n    if (delta > 0)\n      return html`<span class=\"chip up\"\n        >${unsafeSVG(rankUpSvgVb)}${delta}</span\n      >`;\n    return html`<span class=\"chip down\"\n      >${unsafeSVG(rankDownSvgVb)}${Math.abs(delta)}</span\n    >`;\n  }\n\n  private avatarUrl(username: string): string {\n    return `https://api.dicebear.com/9.x/lorelei/svg?seed=${encodeURIComponent(\n      username,\n    )}`;\n  }\n\n  private renderRow(player: UserRank) {\n    const podiumClass =\n      !player.you && player.rank <= 3 ? `podium-${player.rank}` : '';\n    const prize = this.resolvePlayerPrize(player);\n    const totalBet =\n      player.totalBet ?? Math.round(player.points * (1.8 + player.rank * 0.04));\n    return html`\n      <div\n        class=\"row ${player.you ? 'you' : ''} ${player.vip\n          ? 'vip'\n          : ''} ${podiumClass}\"\n      >\n        ${player.rank <= 3 && !player.you\n          ? html`<span class=\"rank col-rank\"\n              ><os-leaderboard-casino-medal-coin\n                variant=${podiumVariantForRank(player.rank as 1 | 2 | 3)}\n                rank=${player.rank}\n                size=${30}\n              ></os-leaderboard-casino-medal-coin\n            ></span>`\n          : html`<span class=\"rank col-rank\">#${player.rank}</span>`}\n        <div class=\"player col-player\">\n          <span class=\"avatar\">\n            <img src=${this.avatarUrl(player.username)} alt=\"\" loading=\"lazy\" />\n          </span>\n          <span class=\"who\">\n            <span class=\"username\">\n              ${renderPlayerName(player.username, {\n                vip: player.vip,\n                suffix: player.you\n                  ? html`<span class=\"you-tag\">You</span>`\n                  : nothing,\n              })}\n            </span>\n            ${prize\n              ? html`<span class=\"prize-sub\"\n                  ><span class=\"prize-label\"\n                    >${labelText(prize.label)}</span\n                  ></span\n                >`\n              : nothing}\n          </span>\n        </div>\n        <span class=\"col-games\">${formatGamesPlayed(player.gamesPlayed)}</span>\n        <span class=\"col-win-rate\"\n          >${player.winRate != null ? `${player.winRate}%` : '—'}</span\n        >\n        <span class=\"col-bet\">${formatTotalBet(totalBet)}</span>\n        <span class=\"col-points\"><b>${player.points.toLocaleString()}</b></span>\n        <span class=\"col-rank-change\">${this.renderRankChange(player)}</span>\n      </div>\n    `;\n  }\n\n  renderPlayers() {\n    return html`${this.visiblePlayers.map((p) => this.renderRow(p))}`;\n  }\n\n  renderPinnedRow() {\n    const pinned = this.pinnedCurrentUser;\n    if (!pinned) return nothing;\n    return this.renderRow(pinned);\n  }\n\n  render() {\n    if (!this.section) return nothing;\n    return renderTemplate(this);\n  }\n}\n"],"names":["formatTotalBet","value","formatGamesPlayed","addViewBox","svg","rankUpSvgVb","rankUpSvg","rankDownSvgVb","rankDownSvg","rankNeutralSvgVb","rankNeutralSvg","OsLeaderboardCasinoTable","LitElement","card","player","DEFAULT_TABLE_TITLE","DEFAULT_CTA_LABEL_FINISHED","DEFAULT_CTA_LABEL","current","p","OS_LEADERBOARD_CASINO_OPEN","prizes","prizeForRank","html","unsafeSVG","delta","username","podiumClass","prize","totalBet","podiumVariantForRank","renderPlayerName","nothing","labelText","pinned","renderTemplate","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","Component","OS_LEADERBOARD_CASINO_TABLE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgCA,SAASA,EAAeC,GAAuB;AAC7C,SAAO,IAAI,KAAK,aAAa,SAAS;AAAA,IACpC,OAAO;AAAA,IACP,UAAU;AAAA,IACV,uBAAuB;AAAA,EAAA,CACxB,EAAE,OAAOA,CAAK;AACjB;AAEA,SAASC,EAAkBD,GAAmC;AAC5D,SAAOA,KAAS,OAAOA,EAAM,eAAA,IAAmB;AAClD;AAEA,SAASE,EAAWC,GAAqB;AACvC,SAAOA,EAAI,QAAQ,SAAS,6BAA6B;AAC3D;AAEA,MAAMC,IAAcF,EAAWG,CAAS,GAClCC,IAAgBJ,EAAWK,CAAW,GACtCC,IAAmBN,EAAWO,CAAc;AAI3C,IAAMC,IAAN,cACGC,EAEV;AAAA,EAHO,cAAA;AAAA,UAAA,GAAA,SAAA,GA+CL,KAAA,OAAO,IAGP,KAAA,WAAW;AAAA,EAAA;AAAA,EA1CX,oBAAoB;AAClB,UAAM,kBAAA,GACN,KAAK,kBAAkB,IAAI,eAAe,MAAM,KAAK,kBAAkB,GACvE,KAAK,gBAAgB,QAAQ,IAAI;AAAA,EACnC;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAA,GACN,KAAK,iBAAiB,WAAA;AAAA,EACxB;AAAA,EAEU,UAAU;AAClB,SAAK,iBAAA;AAAA,EACP;AAAA,EAEQ,mBAAmB;AACzB,UAAMC,IAAO,KAAK,YAAY,cAA2B,OAAO,GAC1DC,IAAS,KAAK,YAAY,cAA2B,aAAa;AAExE,IAAID,KACF,KAAK,MAAM;AAAA,MACT;AAAA,MACA,GAAGA,EAAK,WAAW;AAAA,IAAA,GAInBC,KACF,KAAK,MAAM;AAAA,MACT;AAAA,MACA,GAAGA,EAAO,WAAW;AAAA,IAAA;AAAA,EAG3B;AAAA,EAYA,IAAI,eAAuB;AACzB,WAAOC;AAAA,EACT;AAAA,EAEA,IAAI,WAAmB;AACrB,WACE,KAAK,SAAS,aACb,KAAK,WAAWC,IAA6BC;AAAA,EAElD;AAAA,EAEA,IAAY,iBAA6B;AACvC,WAAO,KAAK,SAAS,cAAc,CAAA;AAAA,EACrC;AAAA,EAEA,IAAY,oBAA0C;AACpD,UAAMC,IAAU,KAAK,SAAS;AAC9B,WAAI,CAACA,KAAW,EAAE,SAASA,OACX,KAAK,SAAS,cAAc,CAAA,GAC7B,KAAK,CAACC,MAAMA,EAAE,GAAG,IAFK,SAEWD;AAAA,EAClD;AAAA,EAEA,IAAI,aAAsB;AACxB,WAAO,KAAK,eAAe,SAAS;AAAA,EACtC;AAAA,EAEA,IAAI,eAAuB;AACzB,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,aAAsB;AACxB,WAAO,KAAK,qBAAqB;AAAA,EACnC;AAAA,EAEA,cAAc;AACZ,SAAK;AAAA,MACH,IAAI,YAAYE,GAA4B;AAAA,QAC1C,QAAQ,EAAE,MAAM,KAAK,KAAA;AAAA,QACrB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,mBAAmBN,GAAoC;AAC7D,UAAMO,IAAS,KAAK,SAAS,UAAU,CAAA;AACvC,WAAOC,EAAaD,GAAQP,EAAO,IAAI,KAAKA,EAAO;AAAA,EACrD;AAAA,EAEQ,iBAAiBA,GAAkB;AACzC,QAAIA,EAAO,gBAAgB;AACzB,aAAOS;AAAA,WACFC,EAAUf,CAAgB,CAAC;AAAA;AAElC,UAAMgB,IAAQX,EAAO,eAAeA,EAAO;AAC3C,WAAIW,MAAU,IACLF;AAAA,WACFC,EAAUf,CAAgB,CAAC;AAAA,WAE9BgB,IAAQ,IACHF;AAAA,WACFC,EAAUnB,CAAW,CAAC,GAAGoB,CAAK;AAAA,WAE9BF;AAAA,SACFC,EAAUjB,CAAa,CAAC,GAAG,KAAK,IAAIkB,CAAK,CAAC;AAAA;AAAA,EAEjD;AAAA,EAEQ,UAAUC,GAA0B;AAC1C,WAAO,iDAAiD;AAAA,MACtDA;AAAA,IAAA,CACD;AAAA,EACH;AAAA,EAEQ,UAAUZ,GAAkB;AAClC,UAAMa,IACJ,CAACb,EAAO,OAAOA,EAAO,QAAQ,IAAI,UAAUA,EAAO,IAAI,KAAK,IACxDc,IAAQ,KAAK,mBAAmBd,CAAM,GACtCe,IACJf,EAAO,YAAY,KAAK,MAAMA,EAAO,UAAU,MAAMA,EAAO,OAAO,KAAK;AAC1E,WAAOS;AAAA;AAAA,qBAEUT,EAAO,MAAM,QAAQ,EAAE,IAAIA,EAAO,MAC3C,QACA,EAAE,IAAIa,CAAW;AAAA;AAAA,UAEnBb,EAAO,QAAQ,KAAK,CAACA,EAAO,MAC1BS;AAAA;AAAA,0BAEcO,EAAqBhB,EAAO,IAAiB,CAAC;AAAA,uBACjDA,EAAO,IAAI;AAAA,uBACX,EAAE;AAAA;AAAA,wBAGbS,iCAAoCT,EAAO,IAAI,SAAS;AAAA;AAAA;AAAA,uBAG7C,KAAK,UAAUA,EAAO,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,gBAItCiB,EAAiBjB,EAAO,UAAU;AAAA,MAClC,KAAKA,EAAO;AAAA,MACZ,QAAQA,EAAO,MACXS,sCACAS;AAAA,IAAA,CACL,CAAC;AAAA;AAAA,cAEFJ,IACEL;AAAA;AAAA,uBAEOU,EAAUL,EAAM,KAAK,CAAC;AAAA;AAAA,qBAG7BI,CAAO;AAAA;AAAA;AAAA,kCAGW9B,EAAkBY,EAAO,WAAW,CAAC;AAAA;AAAA,aAE1DA,EAAO,WAAW,OAAO,GAAGA,EAAO,OAAO,MAAM,GAAG;AAAA;AAAA,gCAEhCd,EAAe6B,CAAQ,CAAC;AAAA,sCAClBf,EAAO,OAAO,gBAAgB;AAAA,wCAC5B,KAAK,iBAAiBA,CAAM,CAAC;AAAA;AAAA;AAAA,EAGnE;AAAA,EAEA,gBAAgB;AACd,WAAOS,IAAO,KAAK,eAAe,IAAI,CAACJ,MAAM,KAAK,UAAUA,CAAC,CAAC,CAAC;AAAA,EACjE;AAAA,EAEA,kBAAkB;AAChB,UAAMe,IAAS,KAAK;AACpB,WAAKA,IACE,KAAK,UAAUA,CAAM,IADRF;AAAA,EAEtB;AAAA,EAEA,SAAS;AACP,WAAK,KAAK,UACHG,EAAe,IAAI,IADAH;AAAA,EAE5B;AACF;AAlMarB,EAIJ,SAAS,CAACyB,GAA0BC,EAAKC,CAAM,CAAC;AAuCvDC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GA1CnB7B,EA2CX,WAAA,WAAA,CAAA;AAIA4B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9Cf7B,EA+CX,WAAA,QAAA,CAAA;AAGA4B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAjDhB7B,EAkDX,WAAA,YAAA,CAAA;AAlDWA,IAAN4B,EAAA;AAAA,EADNE,EAAU,EAAE,UAAUC,EAAA,CAA6B;AAAA,GACvC/B,CAAA;"}

package/dist/components/os-leaderboard-casino/sections/table-section/table-section.scss.js

@@ -0,0 +1,5 @@
+const a = '@charset "UTF-8";:host{display:flex;flex-direction:column;flex:1;width:100%;min-height:0}.card-shell{position:relative;flex:1;min-width:0;min-height:0;display:flex}.card{position:relative;background:radial-gradient(120% 80% at 50% -10%,rgba(157,107,255,.12),transparent 60%),linear-gradient(180deg,var(--surface-2),var(--surface)),var(--bg);border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);box-shadow:0 1px #ffffff0d inset,0 40px 80px -40px #000c;overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;flex:1;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--gold) 35%,transparent) transparent}.card::-webkit-scrollbar{height:3px}.card::-webkit-scrollbar-track{background:transparent}.card::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--gold) 35%,transparent);border-radius:99px}.card::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--gold) 60%,transparent)}.card-accent{position:absolute;top:0;left:50%;transform:translate(-50%);width:min(400px,88%);height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5;pointer-events:none;z-index:2}@media(min-width:641px){.card-accent{width:100%;max-width:none;transform:none;left:0;background:linear-gradient(90deg,transparent,var(--gold) 45%,var(--gold) 55%,transparent)}}.table-scroll{display:grid;min-width:min-content;--table-col-gap: 18px;--table-pad-l: var(--table-col-gap);grid-template-columns:52px minmax(min-content,1fr) 56px 68px 72px 60px 60px;column-gap:var(--table-col-gap)}section{display:flex;flex-direction:column;flex:1;min-height:0}.table-head,.row{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;row-gap:0;padding:12px 16px 12px var(--table-pad-l)}.col-rank{grid-column:1}.col-player{grid-column:2}.col-games{grid-column:3}.col-win-rate{grid-column:4}.col-bet{grid-column:5}.col-points{grid-column:6}.col-rank-change{grid-column:7}.table-head .col-rank,.table-head .col-player,.table-head .col-bet,.table-head .col-points,.table-head .col-win-rate,.table-head .col-games,.table-head .col-rank-change,.col-rank,.col-player,.col-bet,.col-points,.col-win-rate,.col-games,.col-rank-change{min-width:0}.table-head .col-rank,.table-head .col-player,.col-rank,.col-player{justify-self:start;text-align:left}.table-head .col-rank,.col-rank{position:sticky;left:var(--table-pad-l);z-index:3;justify-self:stretch;align-self:stretch;display:flex;align-items:center}.table-head .col-player,.col-player{position:sticky;left:calc(var(--table-pad-l) + 40px + var(--table-col-gap));z-index:3;justify-self:stretch;align-self:stretch;display:flex;align-items:center}@keyframes scroll-cols-hide{0%{opacity:1}to{opacity:0}}.table-head .col-games,.col-games,.table-head .col-win-rate,.col-win-rate,.table-head .col-bet,.col-bet,.table-head .col-points,.col-points,.table-head .col-rank-change,.col-rank-change{animation:scroll-cols-hide linear both;animation-timeline:view(inline calc(var(--table-pad-l) + 40px + var(--table-col-gap) + var(--sticky-player-width, 120px)) 0px);animation-range:exit 0% exit 100%}.table-head .col-bet,.table-head .col-points,.table-head .col-win-rate,.table-head .col-games,.col-bet,.col-points,.col-win-rate,.col-games{justify-self:stretch;align-self:stretch;display:flex;align-items:center;justify-content:flex-end;text-align:right}.table-head .col-rank-change,.col-rank-change{justify-self:stretch;align-self:stretch;display:flex;align-items:center;justify-content:center;text-align:center}.table-head{padding-top:18px;padding-bottom:14px;border-bottom:1px solid var(--hairline)}.table-head .col-rank,.table-head .col-player,.table-head .col-bet,.table-head .col-points,.table-head .col-win-rate,.table-head .col-games,.table-head .col-rank-change{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap}.row{position:relative;min-height:34px;border-bottom:1px solid var(--hairline);transition:background .25s ease;cursor:pointer}.row:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background .25s ease}.row:hover{background:linear-gradient(90deg,rgba(255,255,255,.04),transparent 70%)}.row:hover:after{background:var(--gold)}.row:last-child{border-bottom:none}.row.podium-1{background:linear-gradient(90deg,#f4cf6b33,#f4cf6b0d 70%)}.row.podium-1:after{box-shadow:none;transition:background .25s ease,box-shadow .25s ease}.row.podium-1:hover:after{background:var(--gold);box-shadow:0 0 14px 1px #f4cf6b80}.row.podium-1:hover{background:linear-gradient(90deg,#f4cf6b42,#f4cf6b12 70%)}.row.podium-2{background:linear-gradient(90deg,#cdd3df33,#cdd3df0d 70%)}.row.podium-2:after{box-shadow:none;transition:background .25s ease,box-shadow .25s ease}.row.podium-2:hover:after{background:var(--silver);box-shadow:0 0 14px 1px #cdd3df80}.row.podium-2:hover{background:linear-gradient(90deg,#cdd3df42,#cdd3df12 70%)}.row.podium-3{background:linear-gradient(90deg,#d99a6c33,#d99a6c0d 70%)}.row.podium-3:after{box-shadow:none;transition:background .25s ease,box-shadow .25s ease}.row.podium-3:hover:after{background:var(--bronze);box-shadow:0 0 14px 1px #d99a6c80}.row.podium-3:hover{background:linear-gradient(90deg,#d99a6c42,#d99a6c12 70%)}.row.you{background:linear-gradient(90deg,#9d6bff33,#9d6bff0d 70%);min-height:40px}.row.you:after{box-shadow:none;transition:background .25s ease,box-shadow .25s ease}.row.you:hover:after{background:var(--violet);box-shadow:0 0 14px 1px #9d6bff80}.row.you:hover{background:linear-gradient(90deg,#9d6bff42,#9d6bff12 70%)}.rank{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-dim)}.col-rank os-leaderboard-casino-medal-coin{--coin-text-scale: 2;margin-left:-5px}.player{display:flex;align-items:center;gap:10px;min-width:0;width:100%}.avatar{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--violet) 18%,var(--surface-solid));box-shadow:0 0 0 1px #ffffff1a inset}.avatar img{width:100%;height:100%;object-fit:cover;display:block}.who{min-width:0;display:flex;flex-direction:column;gap:3px}.username{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap}.you-tag{margin-left:6px;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:6px;background:var(--violet-soft);color:var(--violet);border:1px solid rgba(157,107,255,.5);vertical-align:1px}.prize-sub{display:flex;align-items:center;gap:6px;min-width:0}.prize-sub .prize-label{font-size:11px;font-weight:600;color:var(--violet);white-space:nowrap}.prize-sub .prize-icon--table{flex:none;display:grid;place-items:center;width:14px;height:14px;min-width:14px;line-height:0}.prize-sub .prize-icon--table svg{width:14px;height:14px}.prize-sub os-leaderboard-casino-medal-coin{flex:none;display:block;width:16px;height:16px;line-height:0;--coin-text-scale: 1.6}.col-win-rate,.col-games{font-family:var(--font-mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-dim)}.col-bet{font-family:var(--font-mono);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--gold)}.col-points{font-family:var(--font-mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-dim)}.col-points b{font-weight:700;color:var(--text)}.col-rank-change{font-variant-numeric:tabular-nums}.chip{display:inline-flex;align-items:center;gap:3px;padding:3px 7px 3px 5px;border-radius:7px;font-family:var(--font-mono);font-weight:700;font-size:12px;line-height:1}.chip svg{width:16px;height:16px;flex-shrink:0}.chip.up{color:#00b200;background:#00b2001f}.chip.down{color:#c20000;background:#c200001f}.chip.flat{color:var(--text-faint)}.empty{grid-column:1/-1;padding:24px 16px;text-align:center;font-size:13px;color:var(--text-dim)}.divider{grid-column:1/-1;position:sticky;left:0;z-index:4;width:var(--table-scrollport-width, 100%);max-width:var(--table-scrollport-width, 100%);box-sizing:border-box;padding:11px 16px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);background:#ffffff04;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}.cta{position:relative;overflow:hidden;display:block;width:100%;margin-top:16px;border:none;cursor:pointer;font-family:var(--font-display);font-size:15.5px;font-weight:800;letter-spacing:.01em;color:#1c1306;background:linear-gradient(120deg,var(--gold-strong) 0%,var(--gold) 45%,var(--gold-deep) 100%);padding:16px 22px;border-radius:15px;box-shadow:var(--shadow-gold);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.cta:after{content:"";position:absolute;top:0;left:-75%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skew(-18deg);animation:cta-sweep 3.2s ease-in-out infinite}@keyframes cta-sweep{0%,60%{left:-75%}90%,to{left:125%}}.cta:hover{transform:translateY(-2px);box-shadow:0 18px 52px -14px var(--gold-glow)}@media(max-width:640px){.table-head,.row{padding:10px 16px 10px var(--table-pad-l)}.table-head .col-rank,.table-head .col-player,.table-head .col-bet,.table-head .col-points,.table-head .col-win-rate,.table-head .col-games,.table-head .col-rank-change{font-size:10px;letter-spacing:.1em}.rank,.col-bet,.col-points,.col-win-rate,.col-games,.username{font-size:12px}.avatar{width:32px;height:32px}.medallion{width:26px;height:26px;font-size:11px}.player{gap:8px}}';
+export {
+  a as default
+};
+//# sourceMappingURL=table-section.scss.js.map

package/dist/components/os-leaderboard-casino/sections/table-section/table-section.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-section.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/os-leaderboard-casino/services/adapter.service.js

@@ -0,0 +1,49 @@
+class i {
+  toLayout(a) {
+    return this.buildLayout(a.config, a.sections);
+  }
+  applyThemeVars(a, e) {
+    const r = e.config.themeVars ?? {};
+    for (const t of Object.keys(r))
+      a.style.removeProperty(t);
+    for (const [t, l] of Object.entries(r))
+      a.style.setProperty(t, l);
+  }
+  buildLayout(a, e) {
+    const r = {
+      mainOrder: this.mainOrder(a)
+    };
+    if (this.isEnabled(a, "marquee") && e.marquee && (r.marquee = e.marquee), this.isEnabled(a, "events") && e.events && (r.eventsBanner = e.events), this.isEnabled(a, "hero") && e.hero) {
+      const { endTs: t, ...l } = e.hero;
+      r.hero = {
+        ...l,
+        ...t != null ? { endTs: String(t) } : {}
+      };
+    }
+    return this.isEnabled(a, "prize") && e.prize && (r.prize = {
+      title: e.prize.title,
+      prizePackage: e.prize.prizePackage,
+      allocationStrategy: e.prize.allocationStrategy
+    }), this.isEnabled(a, "stats") && e.stats && (r.stats = e.stats), this.isEnabled(a, "games") && e.games && (r.games = {
+      title: e.games.title,
+      games: e.games.games ?? e.games.items ?? []
+    }), this.isEnabled(a, "climb") && e.climb && (r.climb = e.climb), this.isEnabled(a, "table") && e.table?.mode === "preview" && (r.table = {
+      topPlayers: e.table.topPlayers ?? [],
+      currentUser: e.table.currentUser,
+      ctaLabel: e.table.ctaLabel ?? a.labels?.cta,
+      prizes: e.prize?.prizePackage?.prizes
+    }), this.isEnabled(a, "footer") && e.footer && (r.footer = e.footer), this.isEnabled(a, "legals") && e.legals && (r.legals = e.legals), r;
+  }
+  isEnabled(a, e) {
+    return a.enabled.includes(e);
+  }
+  mainOrder(a) {
+    return (a.mainOrder ?? ["prize", "stats", "games", "climb", "table"]).filter((r) => this.isEnabled(a, r));
+  }
+}
+const m = new i();
+export {
+  i as AdapterService,
+  m as adapterService
+};
+//# sourceMappingURL=adapter.service.js.map

package/dist/components/os-leaderboard-casino/services/adapter.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.service.js","sources":["../../../../src/components/os-leaderboard-casino/services/adapter.service.ts"],"sourcesContent":["import type { OsLeaderboardCasinoLayout } from '@os-leaderboard-casino/types/sections.js';\nimport type {\n  OsLeaderboardCasinoConfig,\n  OsLeaderboardCasinoMainSectionId,\n  OsLeaderboardCasinoSectionData,\n  OsLeaderboardCasinoSectionId,\n  OsLeaderboardCasinoState,\n} from '../types/state.js';\n\n/** Maps facade state into the glam layout shell. */\nexport class AdapterService {\n  toLayout(state: OsLeaderboardCasinoState): OsLeaderboardCasinoLayout {\n    return this.buildLayout(state.config, state.sections);\n  }\n\n  applyThemeVars(\n    host: HTMLElement,\n    state: OsLeaderboardCasinoState,\n  ): void {\n    const vars = state.config.themeVars ?? {};\n    for (const name of Object.keys(vars)) {\n      host.style.removeProperty(name);\n    }\n    for (const [name, value] of Object.entries(vars)) {\n      host.style.setProperty(name, value);\n    }\n  }\n\n  private buildLayout(\n    config: OsLeaderboardCasinoConfig,\n    sections: OsLeaderboardCasinoSectionData,\n  ): OsLeaderboardCasinoLayout {\n    const layout: OsLeaderboardCasinoLayout = {\n      mainOrder: this.mainOrder(config),\n    };\n\n    if (this.isEnabled(config, 'marquee') && sections.marquee) {\n      layout.marquee = sections.marquee;\n    }\n    if (this.isEnabled(config, 'events') && sections.events) {\n      layout.eventsBanner = sections.events;\n    }\n    if (this.isEnabled(config, 'hero') && sections.hero) {\n      const { endTs, ...hero } = sections.hero;\n      layout.hero = {\n        ...hero,\n        ...(endTs != null ? { endTs: String(endTs) } : {}),\n      };\n    }\n    if (this.isEnabled(config, 'prize') && sections.prize) {\n      layout.prize = {\n        title: sections.prize.title,\n        prizePackage: sections.prize.prizePackage,\n        allocationStrategy: sections.prize.allocationStrategy,\n      };\n    }\n    if (this.isEnabled(config, 'stats') && sections.stats) {\n      layout.stats = sections.stats;\n    }\n    if (this.isEnabled(config, 'games') && sections.games) {\n      layout.games = {\n        title: sections.games.title,\n        games: sections.games.games ?? sections.games.items ?? [],\n      };\n    }\n    if (this.isEnabled(config, 'climb') && sections.climb) {\n      layout.climb = sections.climb;\n    }\n    if (this.isEnabled(config, 'table') && sections.table?.mode === 'preview') {\n      layout.table = {\n        topPlayers: sections.table.topPlayers ?? [],\n        currentUser: sections.table.currentUser,\n        ctaLabel: sections.table.ctaLabel ?? config.labels?.cta,\n        prizes: sections.prize?.prizePackage?.prizes,\n      };\n    }\n    if (this.isEnabled(config, 'footer') && sections.footer) {\n      layout.footer = sections.footer;\n    }\n    if (this.isEnabled(config, 'legals') && sections.legals) {\n      layout.legals = sections.legals;\n    }\n\n    return layout;\n  }\n\n  private isEnabled(\n    config: OsLeaderboardCasinoConfig,\n    id: OsLeaderboardCasinoSectionId,\n  ): boolean {\n    return config.enabled.includes(id);\n  }\n\n  private mainOrder(\n    config: OsLeaderboardCasinoConfig,\n  ): OsLeaderboardCasinoMainSectionId[] {\n    const order =\n      config.mainOrder ?? ['prize', 'stats', 'games', 'climb', 'table'];\n    return order.filter((id) => this.isEnabled(config, id));\n  }\n}\n\nexport const adapterService = new AdapterService();\n"],"names":["AdapterService","state","host","vars","name","value","config","sections","layout","endTs","hero","id","adapterService"],"mappings":"AAUO,MAAMA,EAAe;AAAA,EAC1B,SAASC,GAA4D;AACnE,WAAO,KAAK,YAAYA,EAAM,QAAQA,EAAM,QAAQ;AAAA,EACtD;AAAA,EAEA,eACEC,GACAD,GACM;AACN,UAAME,IAAOF,EAAM,OAAO,aAAa,CAAA;AACvC,eAAWG,KAAQ,OAAO,KAAKD,CAAI;AACjC,MAAAD,EAAK,MAAM,eAAeE,CAAI;AAEhC,eAAW,CAACA,GAAMC,CAAK,KAAK,OAAO,QAAQF,CAAI;AAC7C,MAAAD,EAAK,MAAM,YAAYE,GAAMC,CAAK;AAAA,EAEtC;AAAA,EAEQ,YACNC,GACAC,GAC2B;AAC3B,UAAMC,IAAoC;AAAA,MACxC,WAAW,KAAK,UAAUF,CAAM;AAAA,IAAA;AASlC,QANI,KAAK,UAAUA,GAAQ,SAAS,KAAKC,EAAS,YAChDC,EAAO,UAAUD,EAAS,UAExB,KAAK,UAAUD,GAAQ,QAAQ,KAAKC,EAAS,WAC/CC,EAAO,eAAeD,EAAS,SAE7B,KAAK,UAAUD,GAAQ,MAAM,KAAKC,EAAS,MAAM;AACnD,YAAM,EAAE,OAAAE,GAAO,GAAGC,EAAA,IAASH,EAAS;AACpC,MAAAC,EAAO,OAAO;AAAA,QACZ,GAAGE;AAAA,QACH,GAAID,KAAS,OAAO,EAAE,OAAO,OAAOA,CAAK,MAAM,CAAA;AAAA,MAAC;AAAA,IAEpD;AACA,WAAI,KAAK,UAAUH,GAAQ,OAAO,KAAKC,EAAS,UAC9CC,EAAO,QAAQ;AAAA,MACb,OAAOD,EAAS,MAAM;AAAA,MACtB,cAAcA,EAAS,MAAM;AAAA,MAC7B,oBAAoBA,EAAS,MAAM;AAAA,IAAA,IAGnC,KAAK,UAAUD,GAAQ,OAAO,KAAKC,EAAS,UAC9CC,EAAO,QAAQD,EAAS,QAEtB,KAAK,UAAUD,GAAQ,OAAO,KAAKC,EAAS,UAC9CC,EAAO,QAAQ;AAAA,MACb,OAAOD,EAAS,MAAM;AAAA,MACtB,OAAOA,EAAS,MAAM,SAASA,EAAS,MAAM,SAAS,CAAA;AAAA,IAAC,IAGxD,KAAK,UAAUD,GAAQ,OAAO,KAAKC,EAAS,UAC9CC,EAAO,QAAQD,EAAS,QAEtB,KAAK,UAAUD,GAAQ,OAAO,KAAKC,EAAS,OAAO,SAAS,cAC9DC,EAAO,QAAQ;AAAA,MACb,YAAYD,EAAS,MAAM,cAAc,CAAA;AAAA,MACzC,aAAaA,EAAS,MAAM;AAAA,MAC5B,UAAUA,EAAS,MAAM,YAAYD,EAAO,QAAQ;AAAA,MACpD,QAAQC,EAAS,OAAO,cAAc;AAAA,IAAA,IAGtC,KAAK,UAAUD,GAAQ,QAAQ,KAAKC,EAAS,WAC/CC,EAAO,SAASD,EAAS,SAEvB,KAAK,UAAUD,GAAQ,QAAQ,KAAKC,EAAS,WAC/CC,EAAO,SAASD,EAAS,SAGpBC;AAAA,EACT;AAAA,EAEQ,UACNF,GACAK,GACS;AACT,WAAOL,EAAO,QAAQ,SAASK,CAAE;AAAA,EACnC;AAAA,EAEQ,UACNL,GACoC;AAGpC,YADEA,EAAO,aAAa,CAAC,SAAS,SAAS,SAAS,SAAS,OAAO,GACrD,OAAO,CAACK,MAAO,KAAK,UAAUL,GAAQK,CAAE,CAAC;AAAA,EACxD;AACF;AAEO,MAAMC,IAAiB,IAAIZ,EAAA;"}

package/dist/components/os-leaderboard-casino/services/icon.service.js

@@ -0,0 +1,192 @@
+import c from "../assets/icons/prize.casino-credits.svg.js";
+import m from "../assets/icons/prize.default.svg.js";
+import g from "../assets/icons/prize.elite-bonus.svg.js";
+import l from "../assets/icons/prize.free-spins.svg.js";
+import _ from "../assets/icons/prize.grand-jackpot.svg.js";
+import u from "../assets/icons/prize.high-roller.svg.js";
+import p from "../assets/icons/prize.mystery-bonus.svg.js";
+import f from "../assets/icons/stat.clock.svg.js";
+import v from "../assets/icons/stat.gift.svg.js";
+import d from "../assets/icons/stat.users.svg.js";
+import h from "../assets/icons/table.rank-down.svg.js";
+import b from "../assets/icons/table.rank-neutral.svg.js";
+import w from "../assets/icons/table.rank-up.svg.js";
+import y from "../assets/icons/vip.crown.svg.js";
+import I from "../assets/icons/win.bag.svg.js";
+import k from "../assets/icons/win.bolt.svg.js";
+import z from "../assets/icons/win.coin.svg.js";
+import S from "../assets/icons/win.fire.svg.js";
+import $ from "../assets/icons/win.gem.svg.js";
+import N from "../assets/icons/win.trophy.svg.js";
+import { html as o } from "lit";
+import { unsafeSVG as n } from "lit/directives/unsafe-svg.js";
+import { labelText as O } from "../types/data.js";
+import E from "../assets/images/games/cards.png.js";
+import L from "../assets/images/games/chips.png.js";
+import P from "../assets/images/games/dice.png.js";
+import j from "../assets/images/games/gates-of-olympus.png.js";
+import G from "../assets/images/games/roulette.png.js";
+import C from "../assets/images/games/slot-machine.png.js";
+const M = /* @__PURE__ */ Object.assign({
+  "../assets/icons/prize.casino-credits.svg": c,
+  "../assets/icons/prize.default.svg": m,
+  "../assets/icons/prize.elite-bonus.svg": g,
+  "../assets/icons/prize.free-spins.svg": l,
+  "../assets/icons/prize.grand-jackpot.svg": _,
+  "../assets/icons/prize.high-roller.svg": u,
+  "../assets/icons/prize.mystery-bonus.svg": p,
+  "../assets/icons/stat.clock.svg": f,
+  "../assets/icons/stat.gift.svg": v,
+  "../assets/icons/stat.users.svg": d,
+  "../assets/icons/table.rank-down.svg": h,
+  "../assets/icons/table.rank-neutral.svg": b,
+  "../assets/icons/table.rank-up.svg": w,
+  "../assets/icons/vip.crown.svg": y,
+  "../assets/icons/win.bag.svg": I,
+  "../assets/icons/win.bolt.svg": k,
+  "../assets/icons/win.coin.svg": z,
+  "../assets/icons/win.fire.svg": S,
+  "../assets/icons/win.gem.svg": $,
+  "../assets/icons/win.trophy.svg": N
+}), A = {
+  "game.cards": E,
+  "game.chips": L,
+  "game.dice": P,
+  "game.gates-of-olympus": j,
+  "game.roulette": G,
+  "game.slot-machine": C
+}, a = [
+  "game.cards",
+  "game.chips",
+  "game.dice",
+  "game.gates-of-olympus",
+  "game.roulette",
+  "game.slot-machine"
+], R = {
+  cards: "game.cards",
+  chips: "game.chips",
+  dice: "game.dice",
+  "gates-of-olympus": "game.gates-of-olympus",
+  roulette: "game.roulette",
+  "slot-machine": "game.slot-machine"
+};
+function U(r) {
+  return r.match(/\/([^/]+)\.svg$/)?.[1] ?? "";
+}
+function x(r, e) {
+  return {
+    name: r,
+    kind: "svg",
+    svg() {
+      return o`${n(e)}`;
+    },
+    render({ className: s = "" } = {}) {
+      const t = o`${n(e)}`;
+      return s ? o`<span class=${s}>${t}</span>` : t;
+    }
+  };
+}
+function D(r, e) {
+  return {
+    name: r,
+    kind: "image",
+    url: e,
+    svg() {
+      throw new Error(`[IconService] Icon "${r}" is an image, not SVG`);
+    },
+    render({ className: s = "", alt: t = "" } = {}) {
+      return o`<img
+        src=${e}
+        alt=${t}
+        class=${s}
+        loading="lazy"
+      />`;
+    }
+  };
+}
+function F(r) {
+  const e = O(r).toLowerCase();
+  return e.includes("grand jackpot") || e === "jackpot" ? "prize.grand-jackpot" : e.includes("elite bonus") ? "prize.elite-bonus" : e.includes("high roller") ? "prize.high-roller" : e.includes("free spin") ? "prize.free-spins" : e.includes("casino credit") ? "prize.casino-credits" : e.includes("mystery") ? "prize.mystery-bonus" : "prize.default";
+}
+function H(r, e) {
+  return R[r] ?? a[e % a.length];
+}
+class T {
+  constructor() {
+    this.registry = /* @__PURE__ */ new Map(), this.loadPromise = null, this.loaded = !1;
+  }
+  /** Load all bundled SVG and game image icons. Call once on app start. */
+  async load() {
+    if (!this.loaded)
+      return this.loadPromise ? this.loadPromise : (this.loadPromise = (async () => {
+        for (const [e, s] of Object.entries(M)) {
+          const t = U(e);
+          t && this.registry.set(t, x(t, s));
+        }
+        for (const [e, s] of Object.entries(A))
+          this.registry.set(e, D(e, s));
+        this.loaded = !0;
+      })(), this.loadPromise);
+  }
+  /** Pick a loaded icon by registry name, e.g. `prize.free-spins`. */
+  get(e) {
+    this.assertLoaded();
+    const s = this.registry.get(e);
+    if (!s)
+      throw new Error(`[IconService] Unknown icon "${e}"`);
+    return s;
+  }
+  has(e) {
+    return this.assertLoaded(), this.registry.has(e);
+  }
+  resolvePrizeIconName(e) {
+    return F(e);
+  }
+  resolveGameIconName(e, s) {
+    return H(e, s);
+  }
+  resolveWinIconName(e, s) {
+    const t = `win.${e}`;
+    if (this.has(t)) return t;
+    const i = [
+      "win.bag",
+      "win.coin",
+      "win.trophy",
+      "win.fire",
+      "win.gem",
+      "win.bolt"
+    ];
+    return i[s % i.length];
+  }
+  resolveStatIconName(e) {
+    const s = `stat.${e}`;
+    return this.has(s) ? s : "stat.users";
+  }
+  render(e, s) {
+    return this.get(e).render(s);
+  }
+  svg(e) {
+    return this.get(e).svg();
+  }
+  url(e) {
+    const s = this.get(e);
+    if (s.kind !== "image" || !s.url)
+      throw new Error(`[IconService] Icon "${e}" has no image URL`);
+    return s.url;
+  }
+  assertLoaded() {
+    if (!this.loaded)
+      throw new Error("[IconService] Call load() before get()");
+  }
+}
+const V = new T();
+function we(r) {
+  const e = r.startsWith("win.") ? r : `win.${r}`;
+  return V.svg(e);
+}
+export {
+  T as IconService,
+  V as iconService,
+  we as winIcon
+};
+//# sourceMappingURL=icon.service.js.map