@oddsmith/ui 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/components/os-leaderboard-casino/assets/fallback/defaults/glam-sections.json +3 -3
- package/dist/components/os-leaderboard-casino/assets/fallback/manifest.json +1 -1
- package/dist/components/os-leaderboard-casino/assets/fallback/resolved-presets.json +6 -4
- package/dist/components/os-leaderboard-casino/assets/fallback/resolved-presets.json.js +1 -1
- package/dist/components/os-leaderboard-casino/assets/fallback/themes.json +3 -4
- package/dist/components/os-leaderboard-casino/assets/fallback/themes.json.js +3 -4
- package/dist/components/os-leaderboard-casino/assets/fallback/themes.json.js.map +1 -1
- package/dist/components/os-leaderboard-casino/constants/defaults.d.ts +8 -0
- package/dist/components/os-leaderboard-casino/constants/index.d.ts +2 -0
- package/dist/components/os-leaderboard-casino/constants/tags.d.ts +22 -0
- package/dist/components/os-leaderboard-casino/constants/tags.js +6 -4
- package/dist/components/os-leaderboard-casino/constants/tags.js.map +1 -1
- package/dist/components/os-leaderboard-casino/container/os-leaderboard-casino.d.ts +35 -0
- package/dist/components/os-leaderboard-casino/container/os-leaderboard-casino.host.d.ts +13 -0
- package/dist/components/os-leaderboard-casino/container/os-leaderboard-casino.html.js +5 -3
- package/dist/components/os-leaderboard-casino/container/os-leaderboard-casino.html.js.map +1 -1
- package/dist/components/os-leaderboard-casino/container/os-leaderboard-casino.js +12 -10
- package/dist/components/os-leaderboard-casino/container/os-leaderboard-casino.js.map +1 -1
- package/dist/components/os-leaderboard-casino/container/os-leaderboard-casino.scss.js +1 -1
- package/dist/components/os-leaderboard-casino/index.d.ts +36 -0
- package/dist/components/os-leaderboard-casino/index.js +23 -23
- package/dist/components/os-leaderboard-casino/integration/assemble-assets.d.ts +21 -0
- package/dist/components/os-leaderboard-casino/integration/assets-context.d.ts +26 -0
- package/dist/components/os-leaderboard-casino/integration/assets-context.js +40 -35
- package/dist/components/os-leaderboard-casino/integration/assets-context.js.map +1 -1
- package/dist/components/os-leaderboard-casino/integration/defaults-glam.d.ts +14 -0
- package/dist/components/os-leaderboard-casino/integration/defaults-new-money.d.ts +3 -0
- package/dist/components/os-leaderboard-casino/integration/index.d.ts +5 -0
- package/dist/components/os-leaderboard-casino/integration/labels.d.ts +1 -0
- package/dist/components/os-leaderboard-casino/integration/load-assets.d.ts +9 -0
- package/dist/components/os-leaderboard-casino/integration/presets.d.ts +1 -0
- package/dist/components/os-leaderboard-casino/integration/resolve-input.d.ts +20 -0
- package/dist/components/os-leaderboard-casino/integration/resolve-input.js +31 -27
- package/dist/components/os-leaderboard-casino/integration/resolve-input.js.map +1 -1
- package/dist/components/os-leaderboard-casino/integration/themes.d.ts +1 -0
- package/dist/components/os-leaderboard-casino/sections/climb-section/climb-section.d.ts +18 -0
- package/dist/components/os-leaderboard-casino/sections/climb-section/climb-section.host.d.ts +14 -0
- package/dist/components/os-leaderboard-casino/sections/climb-section/climb-section.html.js +7 -5
- package/dist/components/os-leaderboard-casino/sections/climb-section/climb-section.html.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/climb-section/climb-section.js +33 -38
- package/dist/components/os-leaderboard-casino/sections/climb-section/climb-section.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/events-banner/components/event-icons.d.ts +5 -0
- package/dist/components/os-leaderboard-casino/sections/events-banner/components/event-icons.js +7 -5
- package/dist/components/os-leaderboard-casino/sections/events-banner/components/event-icons.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/events-banner/events-banner.d.ts +16 -0
- package/dist/components/os-leaderboard-casino/sections/events-banner/events-banner.host.d.ts +8 -0
- package/dist/components/os-leaderboard-casino/sections/events-banner/events-banner.js +26 -22
- package/dist/components/os-leaderboard-casino/sections/events-banner/events-banner.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/footer-section/footer-section.d.ts +10 -0
- package/dist/components/os-leaderboard-casino/sections/footer-section/footer-section.host.d.ts +3 -0
- package/dist/components/os-leaderboard-casino/sections/footer-section/footer-section.html.js +7 -5
- package/dist/components/os-leaderboard-casino/sections/footer-section/footer-section.html.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/footer-section/footer-section.js +11 -8
- package/dist/components/os-leaderboard-casino/sections/footer-section/footer-section.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/games-section/components/game-images.d.ts +1 -0
- package/dist/components/os-leaderboard-casino/sections/games-section/games-section.d.ts +20 -0
- package/dist/components/os-leaderboard-casino/sections/games-section/games-section.host.d.ts +7 -0
- package/dist/components/os-leaderboard-casino/sections/games-section/games-section.html.js +5 -3
- package/dist/components/os-leaderboard-casino/sections/games-section/games-section.html.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/games-section/games-section.js +15 -13
- package/dist/components/os-leaderboard-casino/sections/games-section/games-section.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/header-section/header-section.d.ts +12 -0
- package/dist/components/os-leaderboard-casino/sections/header-section/header-section.host.d.ts +8 -0
- package/dist/components/os-leaderboard-casino/sections/hero-section/hero-section.d.ts +37 -0
- package/dist/components/os-leaderboard-casino/sections/hero-section/hero-section.host.d.ts +20 -0
- package/dist/components/os-leaderboard-casino/sections/hero-section/hero-section.html.js +6 -4
- package/dist/components/os-leaderboard-casino/sections/hero-section/hero-section.html.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/hero-section/hero-section.js +6 -2
- package/dist/components/os-leaderboard-casino/sections/hero-section/hero-section.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/legals-section/legals-section.d.ts +18 -0
- package/dist/components/os-leaderboard-casino/sections/legals-section/legals-section.host.d.ts +8 -0
- package/dist/components/os-leaderboard-casino/sections/legals-section/legals-section.html.js +5 -3
- package/dist/components/os-leaderboard-casino/sections/legals-section/legals-section.html.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/legals-section/legals-section.js +10 -5
- package/dist/components/os-leaderboard-casino/sections/legals-section/legals-section.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/live-feed-section/live-feed-section.d.ts +13 -0
- package/dist/components/os-leaderboard-casino/sections/live-feed-section/live-feed-section.host.d.ts +8 -0
- package/dist/components/os-leaderboard-casino/sections/marquee-section/components/win-icons.d.ts +3 -0
- package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-item.d.ts +14 -0
- package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-section.d.ts +42 -0
- package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-section.host.d.ts +8 -0
- package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-section.html.js +5 -3
- package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-section.html.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-section.js +26 -23
- package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-section.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-variants.d.ts +6 -0
- package/dist/components/os-leaderboard-casino/sections/prize-section/components/medal-coin/medal-coin.d.ts +16 -0
- package/dist/components/os-leaderboard-casino/sections/prize-section/components/medal-coin/medal-coin.js +73 -0
- package/dist/components/os-leaderboard-casino/sections/prize-section/components/medal-coin/medal-coin.js.map +1 -0
- package/dist/components/os-leaderboard-casino/sections/prize-section/components/medal-coin/medal-coin.scss.js +5 -0
- package/dist/components/os-leaderboard-casino/sections/prize-section/components/medal-coin/medal-coin.scss.js.map +1 -0
- package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.d.ts +23 -0
- package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.host.d.ts +11 -0
- package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.html.js +5 -3
- package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.html.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.js +18 -15
- package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/stats-section/components/stat-band/stat-band.d.ts +17 -0
- package/dist/components/os-leaderboard-casino/sections/stats-section/components/stat-card/stat-card.d.ts +15 -0
- package/dist/components/os-leaderboard-casino/sections/stats-section/components/stat-chip/stat-chip.d.ts +17 -0
- package/dist/components/os-leaderboard-casino/sections/stats-section/components/stat-gauge/stat-gauge.d.ts +14 -0
- package/dist/components/os-leaderboard-casino/sections/stats-section/components/stat-icons.d.ts +5 -0
- package/dist/components/os-leaderboard-casino/sections/stats-section/components/stat-icons.js +11 -0
- package/dist/components/os-leaderboard-casino/sections/stats-section/components/stat-icons.js.map +1 -0
- package/dist/components/os-leaderboard-casino/sections/stats-section/components/stat-meter/stat-meter.d.ts +17 -0
- package/dist/components/os-leaderboard-casino/sections/stats-section/components/stat-rail/stat-rail.d.ts +17 -0
- package/dist/components/os-leaderboard-casino/sections/stats-section/components/stat-rail/stat-rail.js +63 -0
- package/dist/components/os-leaderboard-casino/sections/stats-section/components/stat-rail/stat-rail.js.map +1 -0
- package/dist/components/os-leaderboard-casino/sections/stats-section/components/stat-rail/stat-rail.scss.js +5 -0
- package/dist/components/os-leaderboard-casino/sections/stats-section/components/stat-rail/stat-rail.scss.js.map +1 -0
- package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.d.ts +16 -0
- package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.host.d.ts +13 -0
- package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.html.js +5 -3
- package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.html.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.js +20 -16
- package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/table-section/table-section.d.ts +31 -0
- package/dist/components/os-leaderboard-casino/sections/table-section/table-section.host.d.ts +15 -0
- package/dist/components/os-leaderboard-casino/sections/table-section/table-section.html.js +5 -3
- package/dist/components/os-leaderboard-casino/sections/table-section/table-section.html.js.map +1 -1
- package/dist/components/os-leaderboard-casino/sections/table-section/table-section.js +17 -14
- package/dist/components/os-leaderboard-casino/sections/table-section/table-section.js.map +1 -1
- package/dist/components/os-leaderboard-casino/services/adapter.service.d.ts +11 -0
- package/dist/components/os-leaderboard-casino/services/icon.service.d.ts +28 -0
- package/dist/components/os-leaderboard-casino/services/icon.service.js +10 -8
- package/dist/components/os-leaderboard-casino/services/icon.service.js.map +1 -1
- package/dist/components/os-leaderboard-casino/services/index.d.ts +2 -0
- package/dist/components/os-leaderboard-casino/theme/background.d.ts +4 -0
- package/dist/components/os-leaderboard-casino/theme/background.js +22 -0
- package/dist/components/os-leaderboard-casino/theme/background.js.map +1 -0
- package/dist/components/os-leaderboard-casino/theme/index.d.ts +3 -0
- package/dist/components/os-leaderboard-casino/theme/prize-icons.d.ts +1 -0
- package/dist/components/os-leaderboard-casino/theme/prize-resolve.d.ts +5 -0
- package/dist/components/os-leaderboard-casino/theme/styles.d.ts +9 -0
- package/dist/components/os-leaderboard-casino/theme/styles.js +3 -3
- package/dist/components/os-leaderboard-casino/theme/styles.js.map +1 -1
- package/dist/components/os-leaderboard-casino/theme/vip-icons.d.ts +2 -0
- package/dist/components/os-leaderboard-casino/theme/vip-mark.d.ts +7 -0
- package/dist/components/os-leaderboard-casino/theme/vip-mark.js +11 -9
- package/dist/components/os-leaderboard-casino/theme/vip-mark.js.map +1 -1
- package/dist/components/os-leaderboard-casino/types/assets.d.ts +42 -0
- package/dist/components/os-leaderboard-casino/types/data.d.ts +106 -0
- package/dist/components/os-leaderboard-casino/types/events.d.ts +18 -0
- package/dist/components/os-leaderboard-casino/types/icons.d.ts +18 -0
- package/dist/components/os-leaderboard-casino/types/input.d.ts +79 -0
- package/dist/components/os-leaderboard-casino/types/ledger.d.ts +67 -0
- package/dist/components/os-leaderboard-casino/types/sections.d.ts +200 -0
- package/dist/components/os-leaderboard-casino/types/state.d.ts +69 -0
- package/dist/shared/lib/lit/component.d.ts +5 -0
- package/dist/shared/lib/lit/safe-custom-element.d.ts +5 -0
- package/dist/shared/lib/lit/scss.d.ts +3 -0
- package/dist/shared/lib/lit/scss.js +4 -4
- package/dist/shared/lib/lit/template.d.ts +3 -0
- package/dist/shared/vendor/lit-element-lit-element.js +45 -0
- package/dist/shared/vendor/lit-element-lit-element.js.map +1 -0
- package/dist/shared/vendor/lit-html-directive-helpers.js +32 -0
- package/dist/shared/vendor/lit-html-directive-helpers.js.map +1 -0
- package/dist/shared/vendor/lit-html-directive.js +23 -0
- package/dist/shared/vendor/lit-html-directive.js.map +1 -0
- package/dist/shared/vendor/lit-html-keyed.js +18 -0
- package/dist/shared/vendor/lit-html-keyed.js.map +1 -0
- package/dist/shared/vendor/lit-html-lit-html.js +234 -0
- package/dist/shared/vendor/lit-html-lit-html.js.map +1 -0
- package/dist/shared/vendor/lit-html-repeat.js +57 -0
- package/dist/shared/vendor/lit-html-repeat.js.map +1 -0
- package/dist/shared/vendor/lit-html-unsafe-html.js +21 -0
- package/dist/shared/vendor/lit-html-unsafe-html.js.map +1 -0
- package/dist/shared/vendor/lit-html-unsafe-svg.js +10 -0
- package/dist/shared/vendor/lit-html-unsafe-svg.js.map +1 -0
- package/dist/shared/vendor/lit-reactive-element-base.js +5 -0
- package/dist/shared/vendor/lit-reactive-element-base.js.map +1 -0
- package/dist/shared/vendor/lit-reactive-element-css-tag.js +46 -0
- package/dist/shared/vendor/lit-reactive-element-css-tag.js.map +1 -0
- package/dist/shared/vendor/lit-reactive-element-property.js +33 -0
- package/dist/shared/vendor/lit-reactive-element-property.js.map +1 -0
- package/dist/shared/vendor/lit-reactive-element-query.js +13 -0
- package/dist/shared/vendor/lit-reactive-element-query.js.map +1 -0
- package/dist/shared/vendor/lit-reactive-element-reactive-element.js +226 -0
- package/dist/shared/vendor/lit-reactive-element-reactive-element.js.map +1 -0
- package/dist/shared/vendor/lit-reactive-element-state.js +8 -0
- package/dist/shared/vendor/lit-reactive-element-state.js.map +1 -0
- package/package.json +5 -2
- package/dist/index.d.ts +0 -734
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
import "../../../../shared/vendor/lit-reactive-element-reactive-element.js";
|
|
2
|
+
import { nothing as u, html as p } from "../../../../shared/vendor/lit-html-lit-html.js";
|
|
3
|
+
import { LitElement as f } from "../../../../shared/vendor/lit-element-lit-element.js";
|
|
4
|
+
import { property as d } from "../../../../shared/vendor/lit-reactive-element-property.js";
|
|
5
|
+
import { state as c } from "../../../../shared/vendor/lit-reactive-element-state.js";
|
|
3
6
|
import { Component as b } from "../../../../shared/lib/lit/component.js";
|
|
4
7
|
import { scss as y } from "../../../../shared/lib/lit/scss.js";
|
|
5
8
|
import { OS_LEADERBOARD_CASINO_HERO as w } from "../../constants/tags.js";
|
|
6
9
|
import { osLeaderboardCasinoTheme as D } from "../../theme/styles.js";
|
|
10
|
+
import "../../../../shared/vendor/lit-html-unsafe-svg.js";
|
|
7
11
|
import g from "./hero-section.html.js";
|
|
8
12
|
import T from "./hero-section.scss.js";
|
|
9
13
|
var v = Object.defineProperty, A = Object.getOwnPropertyDescriptor, l = (t, e, s, i) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/hero-section/hero-section.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_HERO } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport type { LeaderboardStatus } from '@os-leaderboard-casino/types/data.js';\nimport type { OsLeaderboardCasinoHeroSection } from '@os-leaderboard-casino/types/sections.js';\nimport type { HeroSectionHost } from './hero-section.host.js';\nimport renderTemplate from './hero-section.html?lit-html';\nimport styles from './hero-section.scss?inline';\n\ninterface CountdownParts {\n expired: boolean;\n days: number;\n hours: number;\n minutes: number;\n seconds: number;\n}\n\nfunction countdownTo(endTs: string, now = Date.now()): CountdownParts {\n const remaining = Math.floor((new Date(endTs).getTime() - now) / 1000);\n if (!Number.isFinite(remaining) || remaining <= 0) {\n return { expired: true, days: 0, hours: 0, minutes: 0, seconds: 0 };\n }\n return {\n expired: false,\n days: Math.floor(remaining / 86400),\n hours: Math.floor((remaining % 86400) / 3600),\n minutes: Math.floor((remaining % 3600) / 60),\n seconds: remaining % 60,\n };\n}\n\nconst STATUS_LABELS: Record<LeaderboardStatus, string> = {\n upcoming: 'Upcoming',\n active: 'Live',\n completed: 'Finished',\n cancelled: 'Cancelled',\n};\n\n/** Glam hero — golden ring, shimmer title, prize-pool headline, glowing countdown. */\n@Component({ selector: OS_LEADERBOARD_CASINO_HERO })\nexport class OsLeaderboardCasinoHero\n extends LitElement\n implements HeroSectionHost\n{\n static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n @property({ attribute: false })\n section!: OsLeaderboardCasinoHeroSection;\n\n @state()\n private now = Date.now();\n\n /** Animated odometer value shown for `prizePoolValue`. */\n @state()\n private poolDisplay: number | null = null;\n\n @state()\n poolBump = false;\n\n private timer?: ReturnType<typeof setInterval>;\n private poolRaf?: number;\n private bumpTimer?: ReturnType<typeof setTimeout>;\n\n get showBanner(): boolean {\n return Boolean(this.section?.bannerAsset?.url);\n }\n\n get bannerUrl(): string {\n return this.section?.bannerAsset?.url ?? '';\n }\n\n get bannerAlt(): string {\n return this.section?.bannerAsset?.label || '';\n }\n\n get showStatus(): boolean {\n return Boolean(this.section?.status);\n }\n\n get status(): LeaderboardStatus | undefined {\n return this.section?.status;\n }\n\n get statusLabel(): string {\n const status = this.section?.status;\n return status ? STATUS_LABELS[status] : '';\n }\n\n get showActiveDot(): boolean {\n return this.section?.status === 'active';\n }\n\n get showDescription(): boolean {\n return Boolean(this.section?.description);\n }\n\n get showPool(): boolean {\n return this.poolDisplay != null || Boolean(this.section?.prizePool);\n }\n\n get poolValueLabel(): string {\n if (this.poolDisplay != null) return this.formatPool(this.poolDisplay);\n return this.section?.prizePool ?? '';\n }\n\n get poolLabel(): string {\n return this.section?.prizePoolLabel ?? 'Total prize pool';\n }\n\n get showRising(): boolean {\n return this.poolDisplay != null;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.timer = setInterval(() => {\n this.now = Date.now();\n }, 1000);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this.timer) clearInterval(this.timer);\n if (this.poolRaf) cancelAnimationFrame(this.poolRaf);\n if (this.bumpTimer) clearTimeout(this.bumpTimer);\n }\n\n willUpdate(changed: Map<string, unknown>) {\n if (!changed.has('section')) return;\n const target = this.section?.prizePoolValue;\n if (target == null) {\n this.poolDisplay = null;\n return;\n }\n if (this.poolDisplay == null) {\n this.poolDisplay = target;\n return;\n }\n if (target !== this.poolDisplay) this.animatePool(target);\n }\n\n /** Rolling count-up from the current display value to `target`. */\n private animatePool(target: number) {\n if (this.poolRaf) cancelAnimationFrame(this.poolRaf);\n const from = this.poolDisplay ?? target;\n const duration = 1100;\n const start = performance.now();\n const tick = (t: number) => {\n const p = Math.min(1, (t - start) / duration);\n const eased = 1 - Math.pow(1 - p, 3);\n this.poolDisplay = Math.round(from + (target - from) * eased);\n if (p < 1) this.poolRaf = requestAnimationFrame(tick);\n };\n this.poolRaf = requestAnimationFrame(tick);\n\n if (target > from) {\n this.poolBump = true;\n if (this.bumpTimer) clearTimeout(this.bumpTimer);\n this.bumpTimer = setTimeout(() => {\n this.poolBump = false;\n }, 650);\n }\n }\n\n private formatPool(value: number): string {\n try {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: this.section?.prizePoolCurrency ?? 'USD',\n maximumFractionDigits: 0,\n }).format(value);\n } catch {\n return value.toLocaleString();\n }\n }\n\n private get isFinished(): boolean {\n const status = this.section?.status;\n if (status === 'completed' || status === 'cancelled') return true;\n if (!this.section?.endTs) return false;\n return countdownTo(this.section.endTs, this.now).expired;\n }\n\n renderCountdown() {\n const endTs = this.section?.endTs;\n if (!endTs) return nothing;\n\n if (this.isFinished) {\n return html`<span class=\"ended\">🏁 Contest finished</span>`;\n }\n\n const c = countdownTo(endTs, this.now);\n const cell = (v: number, label: string) =>\n html`<div class=\"cell\">\n <b>${String(v).padStart(2, '0')}</b><span>${label}</span>\n </div>`;\n\n return html`\n <div class=\"countdown\">\n <span class=\"label\">Ends in</span>\n ${cell(c.days, 'days')}<span class=\"sep\">:</span>\n ${cell(c.hours, 'hours')}<span class=\"sep\">:</span>\n ${cell(c.minutes, 'min')}<span class=\"sep\">:</span>\n ${cell(c.seconds, 'sec')}\n </div>\n `;\n }\n\n render() {\n if (!this.section) return nothing;\n return renderTemplate(this);\n }\n}\n"],"names":["countdownTo","endTs","now","remaining","STATUS_LABELS","OsLeaderboardCasinoHero","LitElement","status","changed","target","from","duration","start","tick","t","p","eased","value","nothing","html","c","cell","v","label","renderTemplate","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","state","Component","OS_LEADERBOARD_CASINO_HERO"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"hero-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/hero-section/hero-section.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_HERO } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport type { LeaderboardStatus } from '@os-leaderboard-casino/types/data.js';\nimport type { OsLeaderboardCasinoHeroSection } from '@os-leaderboard-casino/types/sections.js';\nimport type { HeroSectionHost } from './hero-section.host.js';\nimport renderTemplate from './hero-section.html?lit-html';\nimport styles from './hero-section.scss?inline';\n\ninterface CountdownParts {\n expired: boolean;\n days: number;\n hours: number;\n minutes: number;\n seconds: number;\n}\n\nfunction countdownTo(endTs: string, now = Date.now()): CountdownParts {\n const remaining = Math.floor((new Date(endTs).getTime() - now) / 1000);\n if (!Number.isFinite(remaining) || remaining <= 0) {\n return { expired: true, days: 0, hours: 0, minutes: 0, seconds: 0 };\n }\n return {\n expired: false,\n days: Math.floor(remaining / 86400),\n hours: Math.floor((remaining % 86400) / 3600),\n minutes: Math.floor((remaining % 3600) / 60),\n seconds: remaining % 60,\n };\n}\n\nconst STATUS_LABELS: Record<LeaderboardStatus, string> = {\n upcoming: 'Upcoming',\n active: 'Live',\n completed: 'Finished',\n cancelled: 'Cancelled',\n};\n\n/** Glam hero — golden ring, shimmer title, prize-pool headline, glowing countdown. */\n@Component({ selector: OS_LEADERBOARD_CASINO_HERO })\nexport class OsLeaderboardCasinoHero\n extends LitElement\n implements HeroSectionHost\n{\n static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n @property({ attribute: false })\n section!: OsLeaderboardCasinoHeroSection;\n\n @state()\n private now = Date.now();\n\n /** Animated odometer value shown for `prizePoolValue`. */\n @state()\n private poolDisplay: number | null = null;\n\n @state()\n poolBump = false;\n\n private timer?: ReturnType<typeof setInterval>;\n private poolRaf?: number;\n private bumpTimer?: ReturnType<typeof setTimeout>;\n\n get showBanner(): boolean {\n return Boolean(this.section?.bannerAsset?.url);\n }\n\n get bannerUrl(): string {\n return this.section?.bannerAsset?.url ?? '';\n }\n\n get bannerAlt(): string {\n return this.section?.bannerAsset?.label || '';\n }\n\n get showStatus(): boolean {\n return Boolean(this.section?.status);\n }\n\n get status(): LeaderboardStatus | undefined {\n return this.section?.status;\n }\n\n get statusLabel(): string {\n const status = this.section?.status;\n return status ? STATUS_LABELS[status] : '';\n }\n\n get showActiveDot(): boolean {\n return this.section?.status === 'active';\n }\n\n get showDescription(): boolean {\n return Boolean(this.section?.description);\n }\n\n get showPool(): boolean {\n return this.poolDisplay != null || Boolean(this.section?.prizePool);\n }\n\n get poolValueLabel(): string {\n if (this.poolDisplay != null) return this.formatPool(this.poolDisplay);\n return this.section?.prizePool ?? '';\n }\n\n get poolLabel(): string {\n return this.section?.prizePoolLabel ?? 'Total prize pool';\n }\n\n get showRising(): boolean {\n return this.poolDisplay != null;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.timer = setInterval(() => {\n this.now = Date.now();\n }, 1000);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this.timer) clearInterval(this.timer);\n if (this.poolRaf) cancelAnimationFrame(this.poolRaf);\n if (this.bumpTimer) clearTimeout(this.bumpTimer);\n }\n\n willUpdate(changed: Map<string, unknown>) {\n if (!changed.has('section')) return;\n const target = this.section?.prizePoolValue;\n if (target == null) {\n this.poolDisplay = null;\n return;\n }\n if (this.poolDisplay == null) {\n this.poolDisplay = target;\n return;\n }\n if (target !== this.poolDisplay) this.animatePool(target);\n }\n\n /** Rolling count-up from the current display value to `target`. */\n private animatePool(target: number) {\n if (this.poolRaf) cancelAnimationFrame(this.poolRaf);\n const from = this.poolDisplay ?? target;\n const duration = 1100;\n const start = performance.now();\n const tick = (t: number) => {\n const p = Math.min(1, (t - start) / duration);\n const eased = 1 - Math.pow(1 - p, 3);\n this.poolDisplay = Math.round(from + (target - from) * eased);\n if (p < 1) this.poolRaf = requestAnimationFrame(tick);\n };\n this.poolRaf = requestAnimationFrame(tick);\n\n if (target > from) {\n this.poolBump = true;\n if (this.bumpTimer) clearTimeout(this.bumpTimer);\n this.bumpTimer = setTimeout(() => {\n this.poolBump = false;\n }, 650);\n }\n }\n\n private formatPool(value: number): string {\n try {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: this.section?.prizePoolCurrency ?? 'USD',\n maximumFractionDigits: 0,\n }).format(value);\n } catch {\n return value.toLocaleString();\n }\n }\n\n private get isFinished(): boolean {\n const status = this.section?.status;\n if (status === 'completed' || status === 'cancelled') return true;\n if (!this.section?.endTs) return false;\n return countdownTo(this.section.endTs, this.now).expired;\n }\n\n renderCountdown() {\n const endTs = this.section?.endTs;\n if (!endTs) return nothing;\n\n if (this.isFinished) {\n return html`<span class=\"ended\">🏁 Contest finished</span>`;\n }\n\n const c = countdownTo(endTs, this.now);\n const cell = (v: number, label: string) =>\n html`<div class=\"cell\">\n <b>${String(v).padStart(2, '0')}</b><span>${label}</span>\n </div>`;\n\n return html`\n <div class=\"countdown\">\n <span class=\"label\">Ends in</span>\n ${cell(c.days, 'days')}<span class=\"sep\">:</span>\n ${cell(c.hours, 'hours')}<span class=\"sep\">:</span>\n ${cell(c.minutes, 'min')}<span class=\"sep\">:</span>\n ${cell(c.seconds, 'sec')}\n </div>\n `;\n }\n\n render() {\n if (!this.section) return nothing;\n return renderTemplate(this);\n }\n}\n"],"names":["countdownTo","endTs","now","remaining","STATUS_LABELS","OsLeaderboardCasinoHero","LitElement","status","changed","target","from","duration","start","tick","t","p","eased","value","nothing","html","c","cell","v","label","renderTemplate","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","state","Component","OS_LEADERBOARD_CASINO_HERO"],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { LitElement, nothing } from 'lit';
|
|
2
|
+
import { OsLeaderboardCasinoLegalsSection } from '../../types/sections.js';
|
|
3
|
+
import { LegalsSectionHost } from './legals-section.host.js';
|
|
4
|
+
export declare class OsLeaderboardCasinoLegals extends LitElement implements LegalsSectionHost {
|
|
5
|
+
static styles: import('lit').CSSResult[];
|
|
6
|
+
section: OsLeaderboardCasinoLegalsSection;
|
|
7
|
+
private _activeLink;
|
|
8
|
+
private _dialog;
|
|
9
|
+
get dialogTitle(): string;
|
|
10
|
+
get dialogContent(): string;
|
|
11
|
+
renderDialogContent(): (string | import('lit').TemplateResult<1>)[];
|
|
12
|
+
protected updated(changedProps: Map<string, unknown>): void;
|
|
13
|
+
readonly onDialogClose: () => void;
|
|
14
|
+
readonly onDialogClick: (e: MouseEvent) => void;
|
|
15
|
+
private _onLinkClick;
|
|
16
|
+
renderLinks(): import('lit').TemplateResult<1>;
|
|
17
|
+
render(): import('lit').TemplateResult | typeof nothing;
|
|
18
|
+
}
|
package/dist/components/os-leaderboard-casino/sections/legals-section/legals-section.html.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import "../../../../shared/vendor/lit-reactive-element-reactive-element.js";
|
|
2
|
+
import { html as i } from "../../../../shared/vendor/lit-html-lit-html.js";
|
|
3
|
+
import "../../../../shared/vendor/lit-element-lit-element.js";
|
|
4
|
+
function d(l) {
|
|
3
5
|
return i`<div class="legals">
|
|
4
6
|
<nav class="legals__links">
|
|
5
7
|
${l.renderLinks()}
|
|
@@ -28,6 +30,6 @@ function e(l) {
|
|
|
28
30
|
`;
|
|
29
31
|
}
|
|
30
32
|
export {
|
|
31
|
-
|
|
33
|
+
d as default
|
|
32
34
|
};
|
|
33
35
|
//# sourceMappingURL=legals-section.html.js.map
|
package/dist/components/os-leaderboard-casino/sections/legals-section/legals-section.html.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"legals-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/legals-section/legals-section.html?lit-html"],"sourcesContent":["\nimport { html } from 'lit';\n\nexport default function render(host) {\n return html`<div class=\"legals\">\n <nav class=\"legals__links\">\n ${host.renderLinks()}\n </nav>\n <dialog @click=${host.onDialogClick}>\n <div class=\"dialog-panel\">\n <div class=\"dialog-header\">\n <span class=\"dialog-title\">${host.dialogTitle}</span>\n <button\n class=\"dialog-close\"\n type=\"button\"\n aria-label=\"Close\"\n @click=${host.onDialogClose}\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M2 2l10 10M12 2L2 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n </div>\n <div class=\"dialog-body\">\n <p>${host.renderDialogContent()}</p>\n </div>\n </div>\n </dialog>\n</div>\n`;\n}\n"],"names":["render","host","html"],"mappings":"
|
|
1
|
+
{"version":3,"file":"legals-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/legals-section/legals-section.html?lit-html"],"sourcesContent":["\nimport { html } from 'lit';\n\nexport default function render(host) {\n return html`<div class=\"legals\">\n <nav class=\"legals__links\">\n ${host.renderLinks()}\n </nav>\n <dialog @click=${host.onDialogClick}>\n <div class=\"dialog-panel\">\n <div class=\"dialog-header\">\n <span class=\"dialog-title\">${host.dialogTitle}</span>\n <button\n class=\"dialog-close\"\n type=\"button\"\n aria-label=\"Close\"\n @click=${host.onDialogClose}\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M2 2l10 10M12 2L2 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n </div>\n <div class=\"dialog-body\">\n <p>${host.renderDialogContent()}</p>\n </div>\n </div>\n </dialog>\n</div>\n`;\n}\n"],"names":["render","host","html"],"mappings":";;;AAGe,SAASA,EAAOC,GAAM;AACnC,SAAOC;AAAAA;AAAAA,MAEHD,EAAK,YAAW,CAAE;AAAA;AAAA,mBAELA,EAAK,aAAa;AAAA;AAAA;AAAA,qCAGAA,EAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKlCA,EAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQxBA,EAAK,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvC;"}
|
|
@@ -1,9 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
import "../../../../shared/vendor/lit-reactive-element-reactive-element.js";
|
|
2
|
+
import { html as p, nothing as m } from "../../../../shared/vendor/lit-html-lit-html.js";
|
|
3
|
+
import { LitElement as c } from "../../../../shared/vendor/lit-element-lit-element.js";
|
|
4
|
+
import { property as d } from "../../../../shared/vendor/lit-reactive-element-property.js";
|
|
5
|
+
import { state as h } from "../../../../shared/vendor/lit-reactive-element-state.js";
|
|
6
|
+
import { query as g } from "../../../../shared/vendor/lit-reactive-element-query.js";
|
|
3
7
|
import { Component as u } from "../../../../shared/lib/lit/component.js";
|
|
4
8
|
import { scss as f } from "../../../../shared/lib/lit/scss.js";
|
|
5
9
|
import { OS_LEADERBOARD_CASINO_LEGALS as _ } from "../../constants/tags.js";
|
|
6
10
|
import { osLeaderboardCasinoTheme as b } from "../../theme/styles.js";
|
|
11
|
+
import "../../../../shared/vendor/lit-html-unsafe-svg.js";
|
|
7
12
|
import L from "./legals-section.html.js";
|
|
8
13
|
import v from "./legals-section.scss.js";
|
|
9
14
|
var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, a = (e, t, r, n) => {
|
|
@@ -51,15 +56,15 @@ let o = class extends c {
|
|
|
51
56
|
)}`;
|
|
52
57
|
}
|
|
53
58
|
render() {
|
|
54
|
-
return this.section?.links?.length ? L(this) :
|
|
59
|
+
return this.section?.links?.length ? L(this) : m;
|
|
55
60
|
}
|
|
56
61
|
};
|
|
57
62
|
o.styles = [b, f(v)];
|
|
58
63
|
a([
|
|
59
|
-
|
|
64
|
+
d({ attribute: !1 })
|
|
60
65
|
], o.prototype, "section", 2);
|
|
61
66
|
a([
|
|
62
|
-
|
|
67
|
+
h()
|
|
63
68
|
], o.prototype, "_activeLink", 2);
|
|
64
69
|
a([
|
|
65
70
|
g("dialog")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"legals-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/legals-section/legals-section.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_LEGALS } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport type {\n OsLeaderboardCasinoLegalLink,\n OsLeaderboardCasinoLegalsSection,\n} from '@os-leaderboard-casino/types/sections.js';\nimport type { LegalsSectionHost } from './legals-section.host.js';\nimport renderTemplate from './legals-section.html?lit-html';\nimport styles from './legals-section.scss?inline';\n\nconst DEFAULT_DIALOG_CONTENT =\n 'This promotion is open to all registered players aged 18 or over. Participation is subject to the standard Terms & Conditions applicable to all promotions. Prize winnings are credited as bonus funds and are subject to a 20× wagering requirement before withdrawal. The leaderboard is updated in real time and rankings are final at the time the campaign ends. The operator reserves the right to amend or cancel this promotion at any time without prior notice. Responsible gambling tools are available in your account settings at all times.';\n\n@Component({ selector: OS_LEADERBOARD_CASINO_LEGALS })\nexport class OsLeaderboardCasinoLegals\n extends LitElement\n implements LegalsSectionHost\n{\n static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n @property({ attribute: false })\n section!: OsLeaderboardCasinoLegalsSection;\n\n @state()\n private _activeLink: OsLeaderboardCasinoLegalLink | null = null;\n\n @query('dialog')\n private _dialog!: HTMLDialogElement;\n\n get dialogTitle(): string {\n return this._activeLink?.label ?? '';\n }\n\n get dialogContent(): string {\n return this._activeLink?.content ?? DEFAULT_DIALOG_CONTENT;\n }\n\n renderDialogContent() {\n return this.dialogContent.split(/<br\\s*\\/?>/).flatMap((part, i, arr) =>\n i < arr.length - 1 ? [part, html`<br />`] : [part],\n );\n }\n\n protected updated(changedProps: Map<string, unknown>): void {\n super.updated(changedProps);\n if (changedProps.has('_activeLink')) {\n const dialog = this._dialog;\n if (!dialog) return;\n if (this._activeLink && !dialog.open) {\n dialog.showModal();\n } else if (!this._activeLink && dialog.open) {\n dialog.close();\n }\n }\n }\n\n readonly onDialogClose = () => {\n this._activeLink = null;\n };\n\n readonly onDialogClick = (e: MouseEvent) => {\n if (e.target === this._dialog) {\n this._activeLink = null;\n }\n };\n\n private _onLinkClick(link: OsLeaderboardCasinoLegalLink): void {\n if (link.type === 'external') {\n window.open(link.href ?? 'https://www.google.com', '_blank', 'noopener,noreferrer');\n } else {\n this._activeLink = link;\n }\n }\n\n renderLinks() {\n return html`${this.section.links.map(\n (link) =>\n html`<button\n class=\"legal-link\"\n type=\"button\"\n @click=${() => this._onLinkClick(link)}\n >${link.label}</button>`,\n )}`;\n }\n\n render() {\n if (!this.section?.links?.length) return nothing;\n return renderTemplate(this);\n }\n}\n"],"names":["DEFAULT_DIALOG_CONTENT","OsLeaderboardCasinoLegals","LitElement","part","i","arr","html","changedProps","dialog","link","renderTemplate","nothing","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","state","query","Component","OS_LEADERBOARD_CASINO_LEGALS"],"mappings":"
|
|
1
|
+
{"version":3,"file":"legals-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/legals-section/legals-section.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_LEGALS } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport type {\n OsLeaderboardCasinoLegalLink,\n OsLeaderboardCasinoLegalsSection,\n} from '@os-leaderboard-casino/types/sections.js';\nimport type { LegalsSectionHost } from './legals-section.host.js';\nimport renderTemplate from './legals-section.html?lit-html';\nimport styles from './legals-section.scss?inline';\n\nconst DEFAULT_DIALOG_CONTENT =\n 'This promotion is open to all registered players aged 18 or over. Participation is subject to the standard Terms & Conditions applicable to all promotions. Prize winnings are credited as bonus funds and are subject to a 20× wagering requirement before withdrawal. The leaderboard is updated in real time and rankings are final at the time the campaign ends. The operator reserves the right to amend or cancel this promotion at any time without prior notice. Responsible gambling tools are available in your account settings at all times.';\n\n@Component({ selector: OS_LEADERBOARD_CASINO_LEGALS })\nexport class OsLeaderboardCasinoLegals\n extends LitElement\n implements LegalsSectionHost\n{\n static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n @property({ attribute: false })\n section!: OsLeaderboardCasinoLegalsSection;\n\n @state()\n private _activeLink: OsLeaderboardCasinoLegalLink | null = null;\n\n @query('dialog')\n private _dialog!: HTMLDialogElement;\n\n get dialogTitle(): string {\n return this._activeLink?.label ?? '';\n }\n\n get dialogContent(): string {\n return this._activeLink?.content ?? DEFAULT_DIALOG_CONTENT;\n }\n\n renderDialogContent() {\n return this.dialogContent.split(/<br\\s*\\/?>/).flatMap((part, i, arr) =>\n i < arr.length - 1 ? [part, html`<br />`] : [part],\n );\n }\n\n protected updated(changedProps: Map<string, unknown>): void {\n super.updated(changedProps);\n if (changedProps.has('_activeLink')) {\n const dialog = this._dialog;\n if (!dialog) return;\n if (this._activeLink && !dialog.open) {\n dialog.showModal();\n } else if (!this._activeLink && dialog.open) {\n dialog.close();\n }\n }\n }\n\n readonly onDialogClose = () => {\n this._activeLink = null;\n };\n\n readonly onDialogClick = (e: MouseEvent) => {\n if (e.target === this._dialog) {\n this._activeLink = null;\n }\n };\n\n private _onLinkClick(link: OsLeaderboardCasinoLegalLink): void {\n if (link.type === 'external') {\n window.open(link.href ?? 'https://www.google.com', '_blank', 'noopener,noreferrer');\n } else {\n this._activeLink = link;\n }\n }\n\n renderLinks() {\n return html`${this.section.links.map(\n (link) =>\n html`<button\n class=\"legal-link\"\n type=\"button\"\n @click=${() => this._onLinkClick(link)}\n >${link.label}</button>`,\n )}`;\n }\n\n render() {\n if (!this.section?.links?.length) return nothing;\n return renderTemplate(this);\n }\n}\n"],"names":["DEFAULT_DIALOG_CONTENT","OsLeaderboardCasinoLegals","LitElement","part","i","arr","html","changedProps","dialog","link","renderTemplate","nothing","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","state","query","Component","OS_LEADERBOARD_CASINO_LEGALS"],"mappings":";;;;;;;;;;;;;;;;;;AAcA,MAAMA,IACJ;AAGK,IAAMC,IAAN,cACGC,EAEV;AAAA,EAHO,cAAA;AAAA,UAAA,GAAA,SAAA,GAUL,KAAQ,cAAmD,MAgC3D,KAAS,gBAAgB,MAAM;AAC7B,WAAK,cAAc;AAAA,IACrB,GAEA,KAAS,gBAAgB,CAAC,MAAkB;AAC1C,MAAI,EAAE,WAAW,KAAK,YACpB,KAAK,cAAc;AAAA,IAEvB;AAAA,EAAA;AAAA,EAnCA,IAAI,cAAsB;AACxB,WAAO,KAAK,aAAa,SAAS;AAAA,EACpC;AAAA,EAEA,IAAI,gBAAwB;AAC1B,WAAO,KAAK,aAAa,WAAWF;AAAA,EACtC;AAAA,EAEA,sBAAsB;AACpB,WAAO,KAAK,cAAc,MAAM,YAAY,EAAE;AAAA,MAAQ,CAACG,GAAMC,GAAGC,MAC9DD,IAAIC,EAAI,SAAS,IAAI,CAACF,GAAMG,SAAY,IAAI,CAACH,CAAI;AAAA,IAAA;AAAA,EAErD;AAAA,EAEU,QAAQI,GAA0C;AAE1D,QADA,MAAM,QAAQA,CAAY,GACtBA,EAAa,IAAI,aAAa,GAAG;AACnC,YAAMC,IAAS,KAAK;AACpB,UAAI,CAACA,EAAQ;AACb,MAAI,KAAK,eAAe,CAACA,EAAO,OAC9BA,EAAO,UAAA,IACE,CAAC,KAAK,eAAeA,EAAO,QACrCA,EAAO,MAAA;AAAA,IAEX;AAAA,EACF;AAAA,EAYQ,aAAaC,GAA0C;AAC7D,IAAIA,EAAK,SAAS,aAChB,OAAO,KAAKA,EAAK,QAAQ,0BAA0B,UAAU,qBAAqB,IAElF,KAAK,cAAcA;AAAA,EAEvB;AAAA,EAEA,cAAc;AACZ,WAAOH,IAAO,KAAK,QAAQ,MAAM;AAAA,MAC/B,CAACG,MACCH;AAAAA;AAAAA;AAAAA,mBAGW,MAAM,KAAK,aAAaG,CAAI,CAAC;AAAA,WACrCA,EAAK,KAAK;AAAA,IAAA,CAChB;AAAA,EACH;AAAA,EAEA,SAAS;AACP,WAAK,KAAK,SAAS,OAAO,SACnBC,EAAe,IAAI,IADeC;AAAAA,EAE3C;AACF;AA3EaV,EAIJ,SAAS,CAACW,GAA0BC,EAAKC,CAAM,CAAC;AAGvDC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GANnBf,EAOX,WAAA,WAAA,CAAA;AAGQc,EAAA;AAAA,EADPE,EAAA;AAAM,GATIhB,EAUH,WAAA,eAAA,CAAA;AAGAc,EAAA;AAAA,EADPG,EAAM,QAAQ;AAAA,GAZJjB,EAaH,WAAA,WAAA,CAAA;AAbGA,IAANc,EAAA;AAAA,EADNI,EAAU,EAAE,UAAUC,EAAA,CAA8B;AAAA,GACxCnB,CAAA;"}
|
package/dist/components/os-leaderboard-casino/sections/live-feed-section/live-feed-section.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { LitElement, nothing } from 'lit';
|
|
2
|
+
import { OsLeaderboardCasinoLiveFeedSection } from '../../types/sections.js';
|
|
3
|
+
import { LiveFeedSectionHost } from './live-feed-section.host.js';
|
|
4
|
+
/** Glassy live activity rail with entrance animations. */
|
|
5
|
+
export declare class OsLeaderboardCasinoLiveFeed extends LitElement implements LiveFeedSectionHost {
|
|
6
|
+
static styles: import('lit').CSSResult[];
|
|
7
|
+
section: OsLeaderboardCasinoLiveFeedSection;
|
|
8
|
+
get feedTitle(): string;
|
|
9
|
+
get hasItems(): boolean;
|
|
10
|
+
private formatAmount;
|
|
11
|
+
renderEntries(): import('lit').TemplateResult<1>;
|
|
12
|
+
render(): import('lit').TemplateResult | typeof nothing;
|
|
13
|
+
}
|
package/dist/components/os-leaderboard-casino/sections/live-feed-section/live-feed-section.host.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
import { OsLeaderboardCasinoLiveFeedSection } from '../../types/sections.js';
|
|
3
|
+
export interface LiveFeedSectionHost {
|
|
4
|
+
section: OsLeaderboardCasinoLiveFeedSection;
|
|
5
|
+
feedTitle: string;
|
|
6
|
+
hasItems: boolean;
|
|
7
|
+
renderEntries(): TemplateResult;
|
|
8
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { OsLeaderboardCasinoMarqueeItem } from '../../types/sections.js';
|
|
2
|
+
import { WinIconName } from './components/win-icons.js';
|
|
3
|
+
export interface ParsedMarqueeWin {
|
|
4
|
+
user: string;
|
|
5
|
+
game: string;
|
|
6
|
+
gameId?: string;
|
|
7
|
+
big: boolean;
|
|
8
|
+
icon: WinIconName;
|
|
9
|
+
amount: number | null;
|
|
10
|
+
currency: string;
|
|
11
|
+
vip: boolean;
|
|
12
|
+
}
|
|
13
|
+
export declare function parseMarqueeItem(item: OsLeaderboardCasinoMarqueeItem, index: number): ParsedMarqueeWin;
|
|
14
|
+
export declare function formatWinAmount(amount: number | null, currency: string): string;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { LitElement, nothing, TemplateResult } from 'lit';
|
|
2
|
+
import { OsLeaderboardCasinoMarqueeSection } from '../../types/sections.js';
|
|
3
|
+
import { MarqueeVariant } from './marquee-variants.js';
|
|
4
|
+
import { MarqueeSectionHost } from './marquee-section.host.js';
|
|
5
|
+
/** Infinitely-scrolling winners ticker — v0 variant ports + classic fallback. */
|
|
6
|
+
export declare class OsLeaderboardCasinoMarquee extends LitElement implements MarqueeSectionHost {
|
|
7
|
+
static styles: import('lit').CSSResult[];
|
|
8
|
+
section: OsLeaderboardCasinoMarqueeSection;
|
|
9
|
+
variant: MarqueeVariant;
|
|
10
|
+
private hudIndex;
|
|
11
|
+
private feedRows;
|
|
12
|
+
private hudTimer?;
|
|
13
|
+
private feedTimer?;
|
|
14
|
+
private feedCursor;
|
|
15
|
+
private feedKey;
|
|
16
|
+
get speedSec(): number;
|
|
17
|
+
connectedCallback(): void;
|
|
18
|
+
updated(changed: Map<string, unknown>): void;
|
|
19
|
+
disconnectedCallback(): void;
|
|
20
|
+
private syncVariantAttribute;
|
|
21
|
+
private parsedWins;
|
|
22
|
+
private startVariantTimers;
|
|
23
|
+
private stopVariantTimers;
|
|
24
|
+
private pushFeedRow;
|
|
25
|
+
private formatAmount;
|
|
26
|
+
private renderSeparator;
|
|
27
|
+
private renderItemIcon;
|
|
28
|
+
/** Uses shared VIP badge styles from theme (v0 outline tag). */
|
|
29
|
+
private renderMarqueeUser;
|
|
30
|
+
private renderClassicItem;
|
|
31
|
+
private renderClassicGroup;
|
|
32
|
+
renderTrack(): TemplateResult;
|
|
33
|
+
renderHudLabel(): TemplateResult | typeof nothing;
|
|
34
|
+
private renderTickerWin;
|
|
35
|
+
private renderTicker;
|
|
36
|
+
private renderHudStreamGroup;
|
|
37
|
+
private renderHud;
|
|
38
|
+
private renderBeltGroup;
|
|
39
|
+
private renderBelt;
|
|
40
|
+
private renderFeed;
|
|
41
|
+
render(): TemplateResult | typeof nothing;
|
|
42
|
+
}
|
package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-section.host.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
import { OsLeaderboardCasinoMarqueeSection } from '../../types/sections.js';
|
|
3
|
+
export interface MarqueeSectionHost {
|
|
4
|
+
section: OsLeaderboardCasinoMarqueeSection;
|
|
5
|
+
speedSec: number;
|
|
6
|
+
renderHudLabel(): TemplateResult | typeof import('lit').nothing;
|
|
7
|
+
renderTrack(): TemplateResult;
|
|
8
|
+
}
|
package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-section.html.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import "../../../../shared/vendor/lit-reactive-element-reactive-element.js";
|
|
2
|
+
import { html as r } from "../../../../shared/vendor/lit-html-lit-html.js";
|
|
3
|
+
import "../../../../shared/vendor/lit-element-lit-element.js";
|
|
4
|
+
function n(e) {
|
|
3
5
|
return r`<div
|
|
4
6
|
class="marquee"
|
|
5
7
|
style="--speed: ${e.speedSec}s"
|
|
@@ -12,6 +14,6 @@ function d(e) {
|
|
|
12
14
|
`;
|
|
13
15
|
}
|
|
14
16
|
export {
|
|
15
|
-
|
|
17
|
+
n as default
|
|
16
18
|
};
|
|
17
19
|
//# sourceMappingURL=marquee-section.html.js.map
|
package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-section.html.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"marquee-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/marquee-section/marquee-section.html?lit-html"],"sourcesContent":["\nimport { html } from 'lit';\n\nexport default function render(host) {\n return html`<div\n class=\"marquee\"\n style=\"--speed: ${host.speedSec}s\"\n role=\"region\"\n aria-label=\"Recent winners\"\n>\n ${host.renderHudLabel()}\n <div class=\"track\">${host.renderTrack()}</div>\n</div>\n`;\n}\n"],"names":["render","host","html"],"mappings":"
|
|
1
|
+
{"version":3,"file":"marquee-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/marquee-section/marquee-section.html?lit-html"],"sourcesContent":["\nimport { html } from 'lit';\n\nexport default function render(host) {\n return html`<div\n class=\"marquee\"\n style=\"--speed: ${host.speedSec}s\"\n role=\"region\"\n aria-label=\"Recent winners\"\n>\n ${host.renderHudLabel()}\n <div class=\"track\">${host.renderTrack()}</div>\n</div>\n`;\n}\n"],"names":["render","host","html"],"mappings":";;;AAGe,SAASA,EAAOC,GAAM;AACnC,SAAOC;AAAAA;AAAAA,oBAEWD,EAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,IAI7BA,EAAK,eAAc,CAAE;AAAA,uBACFA,EAAK,aAAa;AAAA;AAAA;AAGzC;"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
1
|
+
import "../../../../shared/vendor/lit-reactive-element-reactive-element.js";
|
|
2
|
+
import { html as t, nothing as i } from "../../../../shared/vendor/lit-html-lit-html.js";
|
|
3
|
+
import { LitElement as f } from "../../../../shared/vendor/lit-element-lit-element.js";
|
|
4
|
+
import { keyed as $ } from "../../../../shared/vendor/lit-html-keyed.js";
|
|
5
|
+
import { repeat as g } from "../../../../shared/vendor/lit-html-repeat.js";
|
|
6
|
+
import { property as h } from "../../../../shared/vendor/lit-reactive-element-property.js";
|
|
7
|
+
import { state as v } from "../../../../shared/vendor/lit-reactive-element-state.js";
|
|
5
8
|
import { Component as I } from "../../../../shared/lib/lit/component.js";
|
|
6
9
|
import { scss as b } from "../../../../shared/lib/lit/scss.js";
|
|
7
10
|
import { OS_LEADERBOARD_CASINO_MARQUEE as y } from "../../constants/tags.js";
|
|
@@ -9,8 +12,8 @@ import { osLeaderboardCasinoTheme as T } from "../../theme/styles.js";
|
|
|
9
12
|
import { renderPlayerName as C } from "../../theme/vip-mark.js";
|
|
10
13
|
import { iconService as u } from "../../services/icon.service.js";
|
|
11
14
|
import { winIcon as R } from "./components/win-icons.js";
|
|
12
|
-
import { parseMarqueeItem as m, formatWinAmount as
|
|
13
|
-
import { ACTIVE_MARQUEE_VARIANT as
|
|
15
|
+
import { parseMarqueeItem as m, formatWinAmount as p } from "./marquee-item.js";
|
|
16
|
+
import { ACTIVE_MARQUEE_VARIANT as A, isMarqueeVariant as q } from "./marquee-variants.js";
|
|
14
17
|
import S from "./marquee-section.html.js";
|
|
15
18
|
import x from "./marquee-section.scss.js";
|
|
16
19
|
var M = Object.defineProperty, V = Object.getOwnPropertyDescriptor, c = (e, s, r, a) => {
|
|
@@ -18,9 +21,9 @@ var M = Object.defineProperty, V = Object.getOwnPropertyDescriptor, c = (e, s, r
|
|
|
18
21
|
(l = e[d]) && (n = (a ? l(s, r, n) : l(n)) || n);
|
|
19
22
|
return a && n && M(s, r, n), n;
|
|
20
23
|
};
|
|
21
|
-
let
|
|
24
|
+
let o = class extends f {
|
|
22
25
|
constructor() {
|
|
23
|
-
super(...arguments), this.variant =
|
|
26
|
+
super(...arguments), this.variant = A, this.hudIndex = 0, this.feedRows = [], this.feedCursor = 0, this.feedKey = 0;
|
|
24
27
|
}
|
|
25
28
|
get speedSec() {
|
|
26
29
|
return this.section?.speedSec ?? 30;
|
|
@@ -35,7 +38,7 @@ let p = class extends f {
|
|
|
35
38
|
this.stopVariantTimers(), super.disconnectedCallback();
|
|
36
39
|
}
|
|
37
40
|
syncVariantAttribute() {
|
|
38
|
-
const e =
|
|
41
|
+
const e = q(this.variant) ? this.variant : "classic";
|
|
39
42
|
this.dataset.variant = e;
|
|
40
43
|
}
|
|
41
44
|
parsedWins() {
|
|
@@ -65,7 +68,7 @@ let p = class extends f {
|
|
|
65
68
|
this.feedRows = e ? [a, ...this.feedRows].slice(0, 4) : [a, ...this.feedRows];
|
|
66
69
|
}
|
|
67
70
|
formatAmount(e) {
|
|
68
|
-
return
|
|
71
|
+
return p(e.amount ?? null, e.currency ?? "USD");
|
|
69
72
|
}
|
|
70
73
|
renderSeparator() {
|
|
71
74
|
return t`<span class="sep" aria-hidden="true">·</span>`;
|
|
@@ -119,7 +122,7 @@ let p = class extends f {
|
|
|
119
122
|
return i;
|
|
120
123
|
}
|
|
121
124
|
renderTickerWin(e) {
|
|
122
|
-
const s =
|
|
125
|
+
const s = p(e.amount, e.currency);
|
|
123
126
|
return t`
|
|
124
127
|
<span class="win ${e.big ? "big" : ""}">
|
|
125
128
|
<span class="chip">${this.renderItemIcon(e)}</span>
|
|
@@ -158,7 +161,7 @@ let p = class extends f {
|
|
|
158
161
|
${e.map(
|
|
159
162
|
(s) => t`
|
|
160
163
|
<span class="win ${s.vip ? "vip" : ""}">
|
|
161
|
-
${this.renderItemIcon(s)}${this.renderMarqueeUser(s.user, s.vip)}<span class="amt">${
|
|
164
|
+
${this.renderItemIcon(s)}${this.renderMarqueeUser(s.user, s.vip)}<span class="amt">${p(s.amount, s.currency)}</span
|
|
162
165
|
><span class="sep-inline">/</span><span class="game">${s.game}</span>
|
|
163
166
|
</span>
|
|
164
167
|
`
|
|
@@ -183,7 +186,7 @@ let p = class extends f {
|
|
|
183
186
|
this.hudIndex,
|
|
184
187
|
t`<span class="info">
|
|
185
188
|
<span class="who">${this.renderMarqueeUser(s.user, s.vip)}</span>
|
|
186
|
-
<span class="val">${
|
|
189
|
+
<span class="val">${p(s.amount, s.currency)}</span>
|
|
187
190
|
</span>`
|
|
188
191
|
)}
|
|
189
192
|
</div>
|
|
@@ -201,7 +204,7 @@ let p = class extends f {
|
|
|
201
204
|
<span class="chip">${this.renderItemIcon(s)}</span>
|
|
202
205
|
${this.renderMarqueeUser(s.user, s.vip)}
|
|
203
206
|
<span class="game">${s.game}</span>
|
|
204
|
-
<span class="amt">+${
|
|
207
|
+
<span class="amt">+${p(s.amount, s.currency)}</span>
|
|
205
208
|
</span>
|
|
206
209
|
`
|
|
207
210
|
)}
|
|
@@ -240,7 +243,7 @@ let p = class extends f {
|
|
|
240
243
|
<span class="game-line">on ${e.game}</span>
|
|
241
244
|
</span>
|
|
242
245
|
<span class="amt"
|
|
243
|
-
>+${
|
|
246
|
+
>+${p(e.amount, e.currency)}</span
|
|
244
247
|
>
|
|
245
248
|
</div>
|
|
246
249
|
`
|
|
@@ -265,23 +268,23 @@ let p = class extends f {
|
|
|
265
268
|
}
|
|
266
269
|
}
|
|
267
270
|
};
|
|
268
|
-
|
|
271
|
+
o.styles = [T, b(x)];
|
|
269
272
|
c([
|
|
270
273
|
h({ attribute: !1 })
|
|
271
|
-
],
|
|
274
|
+
], o.prototype, "section", 2);
|
|
272
275
|
c([
|
|
273
276
|
h({ attribute: "variant" })
|
|
274
|
-
],
|
|
277
|
+
], o.prototype, "variant", 2);
|
|
275
278
|
c([
|
|
276
279
|
v()
|
|
277
|
-
],
|
|
280
|
+
], o.prototype, "hudIndex", 2);
|
|
278
281
|
c([
|
|
279
282
|
v()
|
|
280
|
-
],
|
|
281
|
-
|
|
283
|
+
], o.prototype, "feedRows", 2);
|
|
284
|
+
o = c([
|
|
282
285
|
I({ selector: y })
|
|
283
|
-
],
|
|
286
|
+
], o);
|
|
284
287
|
export {
|
|
285
|
-
|
|
288
|
+
o as OsLeaderboardCasinoMarquee
|
|
286
289
|
};
|
|
287
290
|
//# sourceMappingURL=marquee-section.js.map
|
package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-section.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"marquee-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/marquee-section/marquee-section.ts"],"sourcesContent":["import { LitElement, html, nothing, type TemplateResult } from 'lit';\nimport { keyed } from 'lit/directives/keyed.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { property, state } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_MARQUEE } 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 type {\n OsLeaderboardCasinoMarqueeItem,\n OsLeaderboardCasinoMarqueeSection,\n} from '@os-leaderboard-casino/types/sections.js';\nimport { iconService } from '@os-leaderboard-casino/services/icon.service.js';\nimport { winIcon } from './components/win-icons.js';\nimport {\n formatWinAmount,\n parseMarqueeItem,\n type ParsedMarqueeWin,\n} from './marquee-item.js';\nimport {\n ACTIVE_MARQUEE_VARIANT,\n isMarqueeVariant,\n type MarqueeVariant,\n} from './marquee-variants.js';\nimport type { MarqueeSectionHost } from './marquee-section.host.js';\nimport renderTemplate from './marquee-section.html?lit-html';\nimport styles from './marquee-section.scss?inline';\n\ninterface FeedRow extends ParsedMarqueeWin {\n key: number;\n}\n\n/** Infinitely-scrolling winners ticker — v0 variant ports + classic fallback. */\n@Component({ selector: OS_LEADERBOARD_CASINO_MARQUEE })\nexport class OsLeaderboardCasinoMarquee\n extends LitElement\n implements MarqueeSectionHost\n{\n static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n @property({ attribute: false })\n section!: OsLeaderboardCasinoMarqueeSection;\n\n @property({ attribute: 'variant' })\n variant: MarqueeVariant = ACTIVE_MARQUEE_VARIANT;\n\n @state()\n private hudIndex = 0;\n\n @state()\n private feedRows: FeedRow[] = [];\n\n private hudTimer?: ReturnType<typeof setInterval>;\n private feedTimer?: ReturnType<typeof setInterval>;\n private feedCursor = 0;\n private feedKey = 0;\n\n get speedSec(): number {\n return this.section?.speedSec ?? 30;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.syncVariantAttribute();\n this.startVariantTimers();\n }\n\n updated(changed: Map<string, unknown>): void {\n if (changed.has('variant') || changed.has('section')) {\n this.syncVariantAttribute();\n this.stopVariantTimers();\n this.startVariantTimers();\n }\n }\n\n disconnectedCallback(): void {\n this.stopVariantTimers();\n super.disconnectedCallback();\n }\n\n private syncVariantAttribute(): void {\n const next = isMarqueeVariant(this.variant) ? this.variant : 'classic';\n this.dataset.variant = next;\n }\n\n private parsedWins(): ParsedMarqueeWin[] {\n return (this.section?.items ?? []).map((item, index) =>\n parseMarqueeItem(item, index),\n );\n }\n\n private startVariantTimers(): void {\n if (this.variant === 'hud') {\n this.hudIndex = 0;\n this.hudTimer = setInterval(() => {\n const count = this.section?.items?.length ?? 0;\n if (count > 1) this.hudIndex = (this.hudIndex + 1) % count;\n }, 3000);\n }\n\n if (this.variant === 'feed') {\n this.feedRows = [];\n this.feedCursor = 0;\n this.feedKey = 0;\n for (let i = 0; i < 4; i += 1) this.pushFeedRow(false);\n this.feedTimer = setInterval(() => this.pushFeedRow(true), 2600);\n }\n }\n\n private stopVariantTimers(): void {\n if (this.hudTimer) clearInterval(this.hudTimer);\n if (this.feedTimer) clearInterval(this.feedTimer);\n this.hudTimer = undefined;\n this.feedTimer = undefined;\n }\n\n private pushFeedRow(trim: boolean): void {\n const wins = this.parsedWins();\n if (!wins.length) return;\n const win = wins[this.feedCursor % wins.length];\n this.feedCursor += 1;\n const row: FeedRow = { ...win, key: this.feedKey++ };\n this.feedRows = trim\n ? [row, ...this.feedRows].slice(0, 4)\n : [row, ...this.feedRows];\n }\n\n private formatAmount(item: OsLeaderboardCasinoMarqueeItem): string {\n return formatWinAmount(item.amount ?? null, item.currency ?? 'USD');\n }\n\n private renderSeparator() {\n return html`<span class=\"sep\" aria-hidden=\"true\">·</span>`;\n }\n\n private renderItemIcon(win: ParsedMarqueeWin) {\n if (win.gameId) {\n const iconName = iconService.resolveGameIconName(win.gameId, 0);\n const url = iconService.get(iconName).url!;\n return html`<img src=${url} alt=${win.game} />`;\n }\n return winIcon(win.icon);\n }\n\n /** Uses shared VIP badge styles from theme (v0 outline tag). */\n private renderMarqueeUser(user: string, vip?: boolean) {\n return renderPlayerName(user, { vip });\n }\n\n private renderClassicItem(item: OsLeaderboardCasinoMarqueeItem, index: number) {\n const win = parseMarqueeItem(item, index);\n const amount = this.formatAmount(item);\n return html`\n <span class=\"item\">\n <span class=\"icon\">${this.renderItemIcon(win)}</span>\n <span class=\"txt\">\n ${this.renderMarqueeUser(win.user, win.vip)}\n <span class=\"verb\">won</span>\n ${item.amount != null\n ? html`<span class=\"amt\">${amount}</span>`\n : nothing}\n ${win.game\n ? html`\n <span class=\"tail\">\n <span class=\"on\">on</span>\n <span class=\"game\">${win.game}</span>\n </span>\n `\n : nothing}\n </span>\n </span>\n `;\n }\n\n private renderClassicGroup(items: OsLeaderboardCasinoMarqueeItem[]) {\n return html`\n <span class=\"group\" aria-hidden=\"true\">\n ${items.map(\n (item, index) => html`\n ${this.renderClassicItem(item, index)}${this.renderSeparator()}\n `,\n )}\n </span>\n `;\n }\n\n renderTrack(): TemplateResult {\n const items = this.section?.items ?? [];\n return html`${this.renderClassicGroup(items)}${this.renderClassicGroup(items)}`;\n }\n\n renderHudLabel(): TemplateResult | typeof nothing {\n return nothing;\n }\n\n private renderTickerWin(win: ParsedMarqueeWin) {\n const amount = formatWinAmount(win.amount, win.currency);\n return html`\n <span class=\"win ${win.big ? 'big' : ''}\">\n <span class=\"chip\">${this.renderItemIcon(win)}</span>\n <span class=\"txt\">\n ${this.renderMarqueeUser(win.user, win.vip)}\n <span class=\"verb\">won</span>\n ${amount ? html`<span class=\"amt\">${amount}</span>` : nothing}\n ${win.game\n ? html`\n <span class=\"tail\">\n <span class=\"on\">on</span>\n <span class=\"game\">${win.game}</span>\n </span>\n `\n : nothing}\n </span>\n </span>\n ${this.renderSeparator()}\n `;\n }\n\n private renderTicker() {\n const wins = this.parsedWins();\n const group = html`<div class=\"group\">\n ${wins.map((win) => this.renderTickerWin(win))}\n </div>`;\n return html`\n <div\n class=\"marquee\"\n style=\"--speed: ${this.speedSec}s\"\n role=\"region\"\n aria-label=\"Recent winners\"\n >\n <div class=\"track\">${group}${group}</div>\n </div>\n `;\n }\n\n private renderHudStreamGroup(wins: ParsedMarqueeWin[]) {\n return html`<div class=\"group\">\n ${wins.map(\n (win) => html`\n <span class=\"win ${win.vip ? 'vip' : ''}\">\n ${this.renderItemIcon(win)}${this.renderMarqueeUser(win.user, win.vip)}<span class=\"amt\">${formatWinAmount(win.amount, win.currency)}</span\n ><span class=\"sep-inline\">/</span><span class=\"game\">${win.game}</span>\n </span>\n `,\n )}\n </div>`;\n }\n\n private renderHud() {\n const wins = this.parsedWins();\n if (!wins.length) return nothing;\n const hero = wins[this.hudIndex] ?? wins[0];\n const group = this.renderHudStreamGroup(wins);\n\n return html`\n <div\n class=\"marquee\"\n style=\"--speed: ${this.speedSec}s\"\n role=\"region\"\n aria-label=\"Recent winners\"\n >\n <div class=\"hero\">\n <span class=\"badge\">Latest win</span>\n <span class=\"chip\">${this.renderItemIcon(hero)}</span>\n ${keyed(\n this.hudIndex,\n html`<span class=\"info\">\n <span class=\"who\">${this.renderMarqueeUser(hero.user, hero.vip)}</span>\n <span class=\"val\">${formatWinAmount(hero.amount, hero.currency)}</span>\n </span>`,\n )}\n </div>\n <div class=\"stream\">\n <div class=\"track\">${group}${group}</div>\n </div>\n </div>\n `;\n }\n\n private renderBeltGroup(wins: ParsedMarqueeWin[]) {\n return html`<div class=\"group\">\n ${wins.map(\n (win) => html`\n <span class=\"pill ${win.big ? 'big' : ''} ${win.vip ? 'vip' : ''}\">\n <span class=\"chip\">${this.renderItemIcon(win)}</span>\n ${this.renderMarqueeUser(win.user, win.vip)}\n <span class=\"game\">${win.game}</span>\n <span class=\"amt\">+${formatWinAmount(win.amount, win.currency)}</span>\n </span>\n `,\n )}\n </div>`;\n }\n\n private renderBelt() {\n const wins = this.parsedWins();\n const top = wins;\n const bottom = [...wins].reverse();\n const topGroup = this.renderBeltGroup(top);\n const bottomGroup = this.renderBeltGroup(bottom);\n\n return html`\n <div\n class=\"marquee\"\n style=\"--speed: ${this.speedSec}s\"\n role=\"region\"\n aria-label=\"Recent winners\"\n >\n <div class=\"lane lane-a\">${topGroup}${topGroup}</div>\n <div class=\"lane lane-b\">${bottomGroup}${bottomGroup}</div>\n </div>\n `;\n }\n\n private renderFeed() {\n return html`\n <div class=\"marquee feed-panel\" role=\"region\" aria-label=\"Recent winners\">\n <div class=\"head\">\n <span class=\"live\"><i></i> Live wins</span>\n <small>updating in real time</small>\n </div>\n <div class=\"list\">\n ${repeat(\n this.feedRows,\n (row) => row.key,\n (row) => html`\n <div class=\"row ${row.big ? 'big' : ''} ${row.vip ? 'vip' : ''}\">\n <span class=\"chip\">${this.renderItemIcon(row)}</span>\n <span class=\"meta\">\n ${this.renderMarqueeUser(row.user, row.vip)}\n <span class=\"game-line\">on ${row.game}</span>\n </span>\n <span class=\"amt\"\n >+${formatWinAmount(row.amount, row.currency)}</span\n >\n </div>\n `,\n )}\n </div>\n </div>\n `;\n }\n\n render() {\n const items = this.section?.items ?? [];\n if (!items.length) return nothing;\n\n switch (this.variant) {\n case 'ticker':\n return this.renderTicker();\n case 'hud':\n return this.renderHud();\n case 'belt':\n return this.renderBelt();\n case 'feed':\n return this.renderFeed();\n default:\n return renderTemplate(this);\n }\n }\n}\n"],"names":["OsLeaderboardCasinoMarquee","LitElement","ACTIVE_MARQUEE_VARIANT","changed","next","isMarqueeVariant","item","index","parseMarqueeItem","count","i","trim","wins","win","row","formatWinAmount","html","iconName","iconService","url","winIcon","user","vip","renderPlayerName","amount","nothing","items","group","hero","keyed","top","bottom","topGroup","bottomGroup","repeat","renderTemplate","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","state","Component","OS_LEADERBOARD_CASINO_MARQUEE"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmCO,IAAMA,IAAN,cACGC,EAEV;AAAA,EAHO,cAAA;AAAA,UAAA,GAAA,SAAA,GAUL,KAAA,UAA0BC,GAG1B,KAAQ,WAAW,GAGnB,KAAQ,WAAsB,CAAA,GAI9B,KAAQ,aAAa,GACrB,KAAQ,UAAU;AAAA,EAAA;AAAA,EAElB,IAAI,WAAmB;AACrB,WAAO,KAAK,SAAS,YAAY;AAAA,EACnC;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA,GACN,KAAK,qBAAA,GACL,KAAK,mBAAA;AAAA,EACP;AAAA,EAEA,QAAQC,GAAqC;AAC3C,KAAIA,EAAQ,IAAI,SAAS,KAAKA,EAAQ,IAAI,SAAS,OACjD,KAAK,qBAAA,GACL,KAAK,kBAAA,GACL,KAAK,mBAAA;AAAA,EAET;AAAA,EAEA,uBAA6B;AAC3B,SAAK,kBAAA,GACL,MAAM,qBAAA;AAAA,EACR;AAAA,EAEQ,uBAA6B;AACnC,UAAMC,IAAOC,EAAiB,KAAK,OAAO,IAAI,KAAK,UAAU;AAC7D,SAAK,QAAQ,UAAUD;AAAA,EACzB;AAAA,EAEQ,aAAiC;AACvC,YAAQ,KAAK,SAAS,SAAS,CAAA,GAAI;AAAA,MAAI,CAACE,GAAMC,MAC5CC,EAAiBF,GAAMC,CAAK;AAAA,IAAA;AAAA,EAEhC;AAAA,EAEQ,qBAA2B;AASjC,QARI,KAAK,YAAY,UACnB,KAAK,WAAW,GAChB,KAAK,WAAW,YAAY,MAAM;AAChC,YAAME,IAAQ,KAAK,SAAS,OAAO,UAAU;AAC7C,MAAIA,IAAQ,MAAG,KAAK,YAAY,KAAK,WAAW,KAAKA;AAAA,IACvD,GAAG,GAAI,IAGL,KAAK,YAAY,QAAQ;AAC3B,WAAK,WAAW,CAAA,GAChB,KAAK,aAAa,GAClB,KAAK,UAAU;AACf,eAASC,IAAI,GAAGA,IAAI,GAAGA,KAAK,EAAG,MAAK,YAAY,EAAK;AACrD,WAAK,YAAY,YAAY,MAAM,KAAK,YAAY,EAAI,GAAG,IAAI;AAAA,IACjE;AAAA,EACF;AAAA,EAEQ,oBAA0B;AAChC,IAAI,KAAK,YAAU,cAAc,KAAK,QAAQ,GAC1C,KAAK,aAAW,cAAc,KAAK,SAAS,GAChD,KAAK,WAAW,QAChB,KAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,YAAYC,GAAqB;AACvC,UAAMC,IAAO,KAAK,WAAA;AAClB,QAAI,CAACA,EAAK,OAAQ;AAClB,UAAMC,IAAMD,EAAK,KAAK,aAAaA,EAAK,MAAM;AAC9C,SAAK,cAAc;AACnB,UAAME,IAAe,EAAE,GAAGD,GAAK,KAAK,KAAK,UAAA;AACzC,SAAK,WAAWF,IACZ,CAACG,GAAK,GAAG,KAAK,QAAQ,EAAE,MAAM,GAAG,CAAC,IAClC,CAACA,GAAK,GAAG,KAAK,QAAQ;AAAA,EAC5B;AAAA,EAEQ,aAAaR,GAA8C;AACjE,WAAOS,EAAgBT,EAAK,UAAU,MAAMA,EAAK,YAAY,KAAK;AAAA,EACpE;AAAA,EAEQ,kBAAkB;AACxB,WAAOU;AAAA,EACT;AAAA,EAEQ,eAAeH,GAAuB;AAC5C,QAAIA,EAAI,QAAQ;AACd,YAAMI,IAAWC,EAAY,oBAAoBL,EAAI,QAAQ,CAAC,GACxDM,IAAMD,EAAY,IAAID,CAAQ,EAAE;AACtC,aAAOD,aAAgBG,CAAG,QAAQN,EAAI,IAAI;AAAA,IAC5C;AACA,WAAOO,EAAQP,EAAI,IAAI;AAAA,EACzB;AAAA;AAAA,EAGQ,kBAAkBQ,GAAcC,GAAe;AACrD,WAAOC,EAAiBF,GAAM,EAAE,KAAAC,GAAK;AAAA,EACvC;AAAA,EAEQ,kBAAkBhB,GAAsCC,GAAe;AAC7E,UAAMM,IAAML,EAAiBF,GAAMC,CAAK,GAClCiB,IAAS,KAAK,aAAalB,CAAI;AACrC,WAAOU;AAAA;AAAA,6BAEkB,KAAK,eAAeH,CAAG,CAAC;AAAA;AAAA,YAEzC,KAAK,kBAAkBA,EAAI,MAAMA,EAAI,GAAG,CAAC;AAAA;AAAA,YAEzCP,EAAK,UAAU,OACbU,sBAAyBQ,CAAM,YAC/BC,CAAO;AAAA,YACTZ,EAAI,OACFG;AAAA;AAAA;AAAA,uCAGyBH,EAAI,IAAI;AAAA;AAAA,kBAGjCY,CAAO;AAAA;AAAA;AAAA;AAAA,EAInB;AAAA,EAEQ,mBAAmBC,GAAyC;AAClE,WAAOV;AAAA;AAAA,UAEDU,EAAM;AAAA,MACN,CAACpB,GAAMC,MAAUS;AAAA,cACb,KAAK,kBAAkBV,GAAMC,CAAK,CAAC,GAAG,KAAK,iBAAiB;AAAA;AAAA,IAAA,CAEjE;AAAA;AAAA;AAAA,EAGP;AAAA,EAEA,cAA8B;AAC5B,UAAMmB,IAAQ,KAAK,SAAS,SAAS,CAAA;AACrC,WAAOV,IAAO,KAAK,mBAAmBU,CAAK,CAAC,GAAG,KAAK,mBAAmBA,CAAK,CAAC;AAAA,EAC/E;AAAA,EAEA,iBAAkD;AAChD,WAAOD;AAAA,EACT;AAAA,EAEQ,gBAAgBZ,GAAuB;AAC7C,UAAMW,IAAST,EAAgBF,EAAI,QAAQA,EAAI,QAAQ;AACvD,WAAOG;AAAA,yBACcH,EAAI,MAAM,QAAQ,EAAE;AAAA,6BAChB,KAAK,eAAeA,CAAG,CAAC;AAAA;AAAA,YAEzC,KAAK,kBAAkBA,EAAI,MAAMA,EAAI,GAAG,CAAC;AAAA;AAAA,YAEzCW,IAASR,sBAAyBQ,CAAM,YAAYC,CAAO;AAAA,YAC3DZ,EAAI,OACFG;AAAA;AAAA;AAAA,uCAGyBH,EAAI,IAAI;AAAA;AAAA,kBAGjCY,CAAO;AAAA;AAAA;AAAA,QAGb,KAAK,iBAAiB;AAAA;AAAA,EAE5B;AAAA,EAEQ,eAAe;AACrB,UAAMb,IAAO,KAAK,WAAA,GACZe,IAAQX;AAAA,QACVJ,EAAK,IAAI,CAACC,MAAQ,KAAK,gBAAgBA,CAAG,CAAC,CAAC;AAAA;AAEhD,WAAOG;AAAA;AAAA;AAAA,0BAGe,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,6BAIVW,CAAK,GAAGA,CAAK;AAAA;AAAA;AAAA,EAGxC;AAAA,EAEQ,qBAAqBf,GAA0B;AACrD,WAAOI;AAAA,QACHJ,EAAK;AAAA,MACL,CAACC,MAAQG;AAAA,6BACYH,EAAI,MAAM,QAAQ,EAAE;AAAA,cACnC,KAAK,eAAeA,CAAG,CAAC,GAAG,KAAK,kBAAkBA,EAAI,MAAMA,EAAI,GAAG,CAAC,qBAAqBE,EAAgBF,EAAI,QAAQA,EAAI,QAAQ,CAAC;AAAA,mEAC7EA,EAAI,IAAI;AAAA;AAAA;AAAA,IAAA,CAGpE;AAAA;AAAA,EAEL;AAAA,EAEQ,YAAY;AAClB,UAAMD,IAAO,KAAK,WAAA;AAClB,QAAI,CAACA,EAAK,OAAQ,QAAOa;AACzB,UAAMG,IAAOhB,EAAK,KAAK,QAAQ,KAAKA,EAAK,CAAC,GACpCe,IAAQ,KAAK,qBAAqBf,CAAI;AAE5C,WAAOI;AAAA;AAAA;AAAA,0BAGe,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAMR,KAAK,eAAeY,CAAI,CAAC;AAAA,YAC5CC;AAAA,MACA,KAAK;AAAA,MACLb;AAAA,kCACsB,KAAK,kBAAkBY,EAAK,MAAMA,EAAK,GAAG,CAAC;AAAA,kCAC3Cb,EAAgBa,EAAK,QAAQA,EAAK,QAAQ,CAAC;AAAA;AAAA,IAAA,CAElE;AAAA;AAAA;AAAA,+BAGoBD,CAAK,GAAGA,CAAK;AAAA;AAAA;AAAA;AAAA,EAI1C;AAAA,EAEQ,gBAAgBf,GAA0B;AAChD,WAAOI;AAAA,QACHJ,EAAK;AAAA,MACL,CAACC,MAAQG;AAAA,8BACaH,EAAI,MAAM,QAAQ,EAAE,IAAIA,EAAI,MAAM,QAAQ,EAAE;AAAA,iCACzC,KAAK,eAAeA,CAAG,CAAC;AAAA,cAC3C,KAAK,kBAAkBA,EAAI,MAAMA,EAAI,GAAG,CAAC;AAAA,iCACtBA,EAAI,IAAI;AAAA,iCACRE,EAAgBF,EAAI,QAAQA,EAAI,QAAQ,CAAC;AAAA;AAAA;AAAA,IAAA,CAGnE;AAAA;AAAA,EAEL;AAAA,EAEQ,aAAa;AACnB,UAAMD,IAAO,KAAK,WAAA,GACZkB,IAAMlB,GACNmB,IAAS,CAAC,GAAGnB,CAAI,EAAE,QAAA,GACnBoB,IAAW,KAAK,gBAAgBF,CAAG,GACnCG,IAAc,KAAK,gBAAgBF,CAAM;AAE/C,WAAOf;AAAA;AAAA;AAAA,0BAGe,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,mCAIJgB,CAAQ,GAAGA,CAAQ;AAAA,mCACnBC,CAAW,GAAGA,CAAW;AAAA;AAAA;AAAA,EAG1D;AAAA,EAEQ,aAAa;AACnB,WAAOjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOCkB;AAAA,MACA,KAAK;AAAA,MACL,CAACpB,MAAQA,EAAI;AAAA,MACb,CAACA,MAAQE;AAAA,gCACWF,EAAI,MAAM,QAAQ,EAAE,IAAIA,EAAI,MAAM,QAAQ,EAAE;AAAA,qCACvC,KAAK,eAAeA,CAAG,CAAC;AAAA;AAAA,oBAEzC,KAAK,kBAAkBA,EAAI,MAAMA,EAAI,GAAG,CAAC;AAAA,+CACdA,EAAI,IAAI;AAAA;AAAA;AAAA,sBAGjCC,EAAgBD,EAAI,QAAQA,EAAI,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,IAAA,CAIpD;AAAA;AAAA;AAAA;AAAA,EAIT;AAAA,EAEA,SAAS;AAEP,QAAI,EADU,KAAK,SAAS,SAAS,CAAA,GAC1B,OAAQ,QAAOW;AAE1B,YAAQ,KAAK,SAAA;AAAA,MACX,KAAK;AACH,eAAO,KAAK,aAAA;AAAA,MACd,KAAK;AACH,eAAO,KAAK,UAAA;AAAA,MACd,KAAK;AACH,eAAO,KAAK,WAAA;AAAA,MACd,KAAK;AACH,eAAO,KAAK,WAAA;AAAA,MACd;AACE,eAAOU,EAAe,IAAI;AAAA,IAAA;AAAA,EAEhC;AACF;AAtUanC,EAIJ,SAAS,CAACoC,GAA0BC,EAAKC,CAAM,CAAC;AAGvDC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GANnBxC,EAOX,WAAA,WAAA,CAAA;AAGAuC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,UAAA,CAAW;AAAA,GATvBxC,EAUX,WAAA,WAAA,CAAA;AAGQuC,EAAA;AAAA,EADPE,EAAA;AAAM,GAZIzC,EAaH,WAAA,YAAA,CAAA;AAGAuC,EAAA;AAAA,EADPE,EAAA;AAAM,GAfIzC,EAgBH,WAAA,YAAA,CAAA;AAhBGA,IAANuC,EAAA;AAAA,EADNG,EAAU,EAAE,UAAUC,EAAA,CAA+B;AAAA,GACzC3C,CAAA;"}
|
|
1
|
+
{"version":3,"file":"marquee-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/marquee-section/marquee-section.ts"],"sourcesContent":["import { LitElement, html, nothing, type TemplateResult } from 'lit';\nimport { keyed } from 'lit/directives/keyed.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { property, state } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_MARQUEE } 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 type {\n OsLeaderboardCasinoMarqueeItem,\n OsLeaderboardCasinoMarqueeSection,\n} from '@os-leaderboard-casino/types/sections.js';\nimport { iconService } from '@os-leaderboard-casino/services/icon.service.js';\nimport { winIcon } from './components/win-icons.js';\nimport {\n formatWinAmount,\n parseMarqueeItem,\n type ParsedMarqueeWin,\n} from './marquee-item.js';\nimport {\n ACTIVE_MARQUEE_VARIANT,\n isMarqueeVariant,\n type MarqueeVariant,\n} from './marquee-variants.js';\nimport type { MarqueeSectionHost } from './marquee-section.host.js';\nimport renderTemplate from './marquee-section.html?lit-html';\nimport styles from './marquee-section.scss?inline';\n\ninterface FeedRow extends ParsedMarqueeWin {\n key: number;\n}\n\n/** Infinitely-scrolling winners ticker — v0 variant ports + classic fallback. */\n@Component({ selector: OS_LEADERBOARD_CASINO_MARQUEE })\nexport class OsLeaderboardCasinoMarquee\n extends LitElement\n implements MarqueeSectionHost\n{\n static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n @property({ attribute: false })\n section!: OsLeaderboardCasinoMarqueeSection;\n\n @property({ attribute: 'variant' })\n variant: MarqueeVariant = ACTIVE_MARQUEE_VARIANT;\n\n @state()\n private hudIndex = 0;\n\n @state()\n private feedRows: FeedRow[] = [];\n\n private hudTimer?: ReturnType<typeof setInterval>;\n private feedTimer?: ReturnType<typeof setInterval>;\n private feedCursor = 0;\n private feedKey = 0;\n\n get speedSec(): number {\n return this.section?.speedSec ?? 30;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.syncVariantAttribute();\n this.startVariantTimers();\n }\n\n updated(changed: Map<string, unknown>): void {\n if (changed.has('variant') || changed.has('section')) {\n this.syncVariantAttribute();\n this.stopVariantTimers();\n this.startVariantTimers();\n }\n }\n\n disconnectedCallback(): void {\n this.stopVariantTimers();\n super.disconnectedCallback();\n }\n\n private syncVariantAttribute(): void {\n const next = isMarqueeVariant(this.variant) ? this.variant : 'classic';\n this.dataset.variant = next;\n }\n\n private parsedWins(): ParsedMarqueeWin[] {\n return (this.section?.items ?? []).map((item, index) =>\n parseMarqueeItem(item, index),\n );\n }\n\n private startVariantTimers(): void {\n if (this.variant === 'hud') {\n this.hudIndex = 0;\n this.hudTimer = setInterval(() => {\n const count = this.section?.items?.length ?? 0;\n if (count > 1) this.hudIndex = (this.hudIndex + 1) % count;\n }, 3000);\n }\n\n if (this.variant === 'feed') {\n this.feedRows = [];\n this.feedCursor = 0;\n this.feedKey = 0;\n for (let i = 0; i < 4; i += 1) this.pushFeedRow(false);\n this.feedTimer = setInterval(() => this.pushFeedRow(true), 2600);\n }\n }\n\n private stopVariantTimers(): void {\n if (this.hudTimer) clearInterval(this.hudTimer);\n if (this.feedTimer) clearInterval(this.feedTimer);\n this.hudTimer = undefined;\n this.feedTimer = undefined;\n }\n\n private pushFeedRow(trim: boolean): void {\n const wins = this.parsedWins();\n if (!wins.length) return;\n const win = wins[this.feedCursor % wins.length];\n this.feedCursor += 1;\n const row: FeedRow = { ...win, key: this.feedKey++ };\n this.feedRows = trim\n ? [row, ...this.feedRows].slice(0, 4)\n : [row, ...this.feedRows];\n }\n\n private formatAmount(item: OsLeaderboardCasinoMarqueeItem): string {\n return formatWinAmount(item.amount ?? null, item.currency ?? 'USD');\n }\n\n private renderSeparator() {\n return html`<span class=\"sep\" aria-hidden=\"true\">·</span>`;\n }\n\n private renderItemIcon(win: ParsedMarqueeWin) {\n if (win.gameId) {\n const iconName = iconService.resolveGameIconName(win.gameId, 0);\n const url = iconService.get(iconName).url!;\n return html`<img src=${url} alt=${win.game} />`;\n }\n return winIcon(win.icon);\n }\n\n /** Uses shared VIP badge styles from theme (v0 outline tag). */\n private renderMarqueeUser(user: string, vip?: boolean) {\n return renderPlayerName(user, { vip });\n }\n\n private renderClassicItem(item: OsLeaderboardCasinoMarqueeItem, index: number) {\n const win = parseMarqueeItem(item, index);\n const amount = this.formatAmount(item);\n return html`\n <span class=\"item\">\n <span class=\"icon\">${this.renderItemIcon(win)}</span>\n <span class=\"txt\">\n ${this.renderMarqueeUser(win.user, win.vip)}\n <span class=\"verb\">won</span>\n ${item.amount != null\n ? html`<span class=\"amt\">${amount}</span>`\n : nothing}\n ${win.game\n ? html`\n <span class=\"tail\">\n <span class=\"on\">on</span>\n <span class=\"game\">${win.game}</span>\n </span>\n `\n : nothing}\n </span>\n </span>\n `;\n }\n\n private renderClassicGroup(items: OsLeaderboardCasinoMarqueeItem[]) {\n return html`\n <span class=\"group\" aria-hidden=\"true\">\n ${items.map(\n (item, index) => html`\n ${this.renderClassicItem(item, index)}${this.renderSeparator()}\n `,\n )}\n </span>\n `;\n }\n\n renderTrack(): TemplateResult {\n const items = this.section?.items ?? [];\n return html`${this.renderClassicGroup(items)}${this.renderClassicGroup(items)}`;\n }\n\n renderHudLabel(): TemplateResult | typeof nothing {\n return nothing;\n }\n\n private renderTickerWin(win: ParsedMarqueeWin) {\n const amount = formatWinAmount(win.amount, win.currency);\n return html`\n <span class=\"win ${win.big ? 'big' : ''}\">\n <span class=\"chip\">${this.renderItemIcon(win)}</span>\n <span class=\"txt\">\n ${this.renderMarqueeUser(win.user, win.vip)}\n <span class=\"verb\">won</span>\n ${amount ? html`<span class=\"amt\">${amount}</span>` : nothing}\n ${win.game\n ? html`\n <span class=\"tail\">\n <span class=\"on\">on</span>\n <span class=\"game\">${win.game}</span>\n </span>\n `\n : nothing}\n </span>\n </span>\n ${this.renderSeparator()}\n `;\n }\n\n private renderTicker() {\n const wins = this.parsedWins();\n const group = html`<div class=\"group\">\n ${wins.map((win) => this.renderTickerWin(win))}\n </div>`;\n return html`\n <div\n class=\"marquee\"\n style=\"--speed: ${this.speedSec}s\"\n role=\"region\"\n aria-label=\"Recent winners\"\n >\n <div class=\"track\">${group}${group}</div>\n </div>\n `;\n }\n\n private renderHudStreamGroup(wins: ParsedMarqueeWin[]) {\n return html`<div class=\"group\">\n ${wins.map(\n (win) => html`\n <span class=\"win ${win.vip ? 'vip' : ''}\">\n ${this.renderItemIcon(win)}${this.renderMarqueeUser(win.user, win.vip)}<span class=\"amt\">${formatWinAmount(win.amount, win.currency)}</span\n ><span class=\"sep-inline\">/</span><span class=\"game\">${win.game}</span>\n </span>\n `,\n )}\n </div>`;\n }\n\n private renderHud() {\n const wins = this.parsedWins();\n if (!wins.length) return nothing;\n const hero = wins[this.hudIndex] ?? wins[0];\n const group = this.renderHudStreamGroup(wins);\n\n return html`\n <div\n class=\"marquee\"\n style=\"--speed: ${this.speedSec}s\"\n role=\"region\"\n aria-label=\"Recent winners\"\n >\n <div class=\"hero\">\n <span class=\"badge\">Latest win</span>\n <span class=\"chip\">${this.renderItemIcon(hero)}</span>\n ${keyed(\n this.hudIndex,\n html`<span class=\"info\">\n <span class=\"who\">${this.renderMarqueeUser(hero.user, hero.vip)}</span>\n <span class=\"val\">${formatWinAmount(hero.amount, hero.currency)}</span>\n </span>`,\n )}\n </div>\n <div class=\"stream\">\n <div class=\"track\">${group}${group}</div>\n </div>\n </div>\n `;\n }\n\n private renderBeltGroup(wins: ParsedMarqueeWin[]) {\n return html`<div class=\"group\">\n ${wins.map(\n (win) => html`\n <span class=\"pill ${win.big ? 'big' : ''} ${win.vip ? 'vip' : ''}\">\n <span class=\"chip\">${this.renderItemIcon(win)}</span>\n ${this.renderMarqueeUser(win.user, win.vip)}\n <span class=\"game\">${win.game}</span>\n <span class=\"amt\">+${formatWinAmount(win.amount, win.currency)}</span>\n </span>\n `,\n )}\n </div>`;\n }\n\n private renderBelt() {\n const wins = this.parsedWins();\n const top = wins;\n const bottom = [...wins].reverse();\n const topGroup = this.renderBeltGroup(top);\n const bottomGroup = this.renderBeltGroup(bottom);\n\n return html`\n <div\n class=\"marquee\"\n style=\"--speed: ${this.speedSec}s\"\n role=\"region\"\n aria-label=\"Recent winners\"\n >\n <div class=\"lane lane-a\">${topGroup}${topGroup}</div>\n <div class=\"lane lane-b\">${bottomGroup}${bottomGroup}</div>\n </div>\n `;\n }\n\n private renderFeed() {\n return html`\n <div class=\"marquee feed-panel\" role=\"region\" aria-label=\"Recent winners\">\n <div class=\"head\">\n <span class=\"live\"><i></i> Live wins</span>\n <small>updating in real time</small>\n </div>\n <div class=\"list\">\n ${repeat(\n this.feedRows,\n (row) => row.key,\n (row) => html`\n <div class=\"row ${row.big ? 'big' : ''} ${row.vip ? 'vip' : ''}\">\n <span class=\"chip\">${this.renderItemIcon(row)}</span>\n <span class=\"meta\">\n ${this.renderMarqueeUser(row.user, row.vip)}\n <span class=\"game-line\">on ${row.game}</span>\n </span>\n <span class=\"amt\"\n >+${formatWinAmount(row.amount, row.currency)}</span\n >\n </div>\n `,\n )}\n </div>\n </div>\n `;\n }\n\n render() {\n const items = this.section?.items ?? [];\n if (!items.length) return nothing;\n\n switch (this.variant) {\n case 'ticker':\n return this.renderTicker();\n case 'hud':\n return this.renderHud();\n case 'belt':\n return this.renderBelt();\n case 'feed':\n return this.renderFeed();\n default:\n return renderTemplate(this);\n }\n }\n}\n"],"names":["OsLeaderboardCasinoMarquee","LitElement","ACTIVE_MARQUEE_VARIANT","changed","next","isMarqueeVariant","item","index","parseMarqueeItem","count","i","trim","wins","win","row","formatWinAmount","html","iconName","iconService","url","winIcon","user","vip","renderPlayerName","amount","nothing","items","group","hero","keyed","top","bottom","topGroup","bottomGroup","repeat","renderTemplate","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","state","Component","OS_LEADERBOARD_CASINO_MARQUEE"],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/** Visual treatments for the winners ticker (v0 + legacy). */
|
|
2
|
+
export declare const MARQUEE_VARIANTS: readonly ["classic", "ticker", "feed", "hud", "belt"];
|
|
3
|
+
export type MarqueeVariant = (typeof MARQUEE_VARIANTS)[number];
|
|
4
|
+
/** Active variant — v0 seamless ticker from `v0-components/marquee-section`. */
|
|
5
|
+
export declare const ACTIVE_MARQUEE_VARIANT: MarqueeVariant;
|
|
6
|
+
export declare function isMarqueeVariant(value: string): value is MarqueeVariant;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export type MedalCoinVariant = 'gold' | 'silver' | 'bronze';
|
|
3
|
+
/** Layered rank coin for podium slots — themed via glam CSS tokens. */
|
|
4
|
+
export declare class OsLeaderboardCasinoMedalCoin extends LitElement {
|
|
5
|
+
static styles: import('lit').CSSResult[];
|
|
6
|
+
variant: MedalCoinVariant;
|
|
7
|
+
rank: number;
|
|
8
|
+
/** Optional label override (defaults to rank number). */
|
|
9
|
+
label?: string;
|
|
10
|
+
/** Pixel diameter — also sets `--coin-size` on the host. */
|
|
11
|
+
size: number;
|
|
12
|
+
protected willUpdate(): void;
|
|
13
|
+
private get displayLabel();
|
|
14
|
+
private get medalAriaLabel();
|
|
15
|
+
render(): import('lit').TemplateResult<1>;
|
|
16
|
+
}
|