@everymatrix/casino-challenges-overlay 0.22.12 → 0.22.13

package/dist/collection/utils/progress-animation-helpers.js

@@ -0,0 +1,168 @@
+// ---------- Configs ----------
+// The floating gain is more precise than the progress label, so tiny gains (+0.0001%) still show
+export const GAIN_MAX_DECIMAL_PLACES = 4;
+export const PROGRESS_DECIMAL_PLACES = 1;
+// Count-up of the number, border and dot: longer for bigger gains, within these limits
+export const COUNT_UP_MIN_MS = 500;
+export const COUNT_UP_MS_PER_POINT = 20;
+export const COUNT_UP_MAX_MS = 2500;
+export const COMPLETED_ICON_VISIBLE_MS = 1700;
+// Centre of the coin drawn inside bg-icon.svg
+export const COIN_CENTER = { x: 7.6, y: 18.7 };
+export const COIN_DROP_STAGGER_MS = 140;
+export const COIN_DROP_COUNT = 5;
+// Room for two back-to-back drops; further rapid updates skip their coins
+export const MAX_COINS_IN_FLIGHT = COIN_DROP_COUNT * 2;
+export const CONFETTI_COUNT = 26;
+export const CONFETTI_COLORS = ['#ff9400', '#fef746', '#ffe24a', '#24aa4d', '#a4d3b4', '#ffffff', '#1df98b'];
+const COIN_SPIN_TURNS = 4;
+export const EFFECTS = {
+    jelly: {
+        timing: { duration: 700, easing: 'ease-out' },
+        keyframes: [
+            { transform: 'scale(1, 1)' },
+            { transform: 'scale(1.16, 0.84)', offset: 0.18 },
+            { transform: 'scale(0.9, 1.12)', offset: 0.4 },
+            { transform: 'scale(1.05, 0.96)', offset: 0.62 },
+            { transform: 'scale(0.98, 1.02)', offset: 0.8 },
+            { transform: 'scale(1, 1)' }
+        ]
+    },
+    floatingGain: {
+        timing: { duration: 2000, easing: 'ease-out' },
+        keyframes: [
+            { transform: 'translate(-50%, 4px) scale(0.5)', opacity: 0 },
+            { transform: 'translate(-50%, -6px) scale(1.15)', opacity: 1, offset: 0.25 },
+            { transform: 'translate(-50%, -12px) scale(1)', opacity: 1, offset: 0.6 },
+            { transform: 'translate(-50%, -22px) scale(0.95)', opacity: 0 }
+        ]
+    },
+    coinDrop: {
+        // Accelerates like a falling object; `backwards` keeps the coin hidden at its first keyframe during its delay
+        timing: { duration: 520, easing: 'cubic-bezier(0.55, 0, 0.85, 0.45)', fill: 'backwards' },
+        // A mini coin appears above the pill coin, flips while falling and shrinks into it
+        keyframes: [
+            { transform: `translate(${COIN_CENTER.x}px, -18px) rotateY(0deg)`, opacity: 0 },
+            { transform: `translate(${COIN_CENTER.x}px, -12px) rotateY(180deg)`, opacity: 1, offset: 0.25 },
+            { transform: `translate(${COIN_CENTER.x}px, 8px) rotateY(540deg) scale(0.9)`, opacity: 1, offset: 0.85 },
+            { transform: `translate(${COIN_CENTER.x}px, 12px) rotateY(600deg) scale(0.4)`, opacity: 0 }
+        ]
+    },
+    coinWobble: {
+        timing: { duration: 480, easing: 'ease-out' },
+        keyframes: [
+            { transform: 'rotate(0deg) scale(1)', filter: 'brightness(1)' },
+            { transform: 'rotate(-16deg) scale(1.15, 0.88)', filter: 'brightness(1.4)', offset: 0.25 },
+            { transform: 'rotate(10deg) scale(0.95, 1.06)', filter: 'brightness(1.15)', offset: 0.55 },
+            { transform: 'rotate(-4deg) scale(1.02)', filter: 'brightness(1)', offset: 0.8 },
+            { transform: 'rotate(0deg) scale(1)', filter: 'brightness(1)' }
+        ]
+    },
+    coinSpin: {
+        // Fast start, long slow-down, like a coin flicked by a thumb
+        timing: { duration: 1100, easing: 'cubic-bezier(0.2, 0.7, 0.2, 1)' },
+        // perspective() makes the turn look 3D; without it the coin only gets thinner and wider
+        keyframes: [
+            { transform: 'perspective(80px) rotateY(0deg)' },
+            { transform: `perspective(80px) rotateY(${COIN_SPIN_TURNS * 360}deg)` }
+        ]
+    },
+    goldGlow: {
+        timing: { duration: 1700 },
+        keyframes: [
+            { filter: 'drop-shadow(0 0 0 rgba(255, 210, 60, 0))' },
+            { filter: 'drop-shadow(0 0 7px rgba(255, 210, 60, 0.95))', offset: 0.3 },
+            { filter: 'drop-shadow(0 0 3px rgba(255, 210, 60, 0.6))', offset: 0.7 },
+            { filter: 'drop-shadow(0 0 0 rgba(255, 210, 60, 0))' }
+        ]
+    },
+    confetti: {
+        // `backwards` keeps the piece hidden at the burst centre while it waits for its delay
+        timing: { easing: 'cubic-bezier(0.2, 0.6, 0.4, 1)', fill: 'backwards' }
+    }
+};
+// ---------- Utils ----------
+export function randomBetween(min, max) {
+    return min + Math.random() * (max - min);
+}
+export function canAnimate(element) {
+    return typeof (element === null || element === void 0 ? void 0 : element.animate) === 'function';
+}
+export function prefersReducedMotion() {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-reduced-motion: reduce)')) === null || _b === void 0 ? void 0 : _b.matches) !== null && _c !== void 0 ? _c : false;
+}
+/**
+ * Cancels the effects running on `element` and its descendants: the one named `name`, or all of them.
+ * Effects are started with their name as the animation id; CSS animations have no id, so they are kept.
+ */
+export function cancelEffects(element, name) {
+    if (typeof (element === null || element === void 0 ? void 0 : element.getAnimations) !== 'function')
+        return;
+    element.getAnimations({ subtree: true }).forEach((animation) => {
+        if (name ? animation.id === name : animation.id)
+            animation.cancel();
+    });
+}
+export function getCountUpDuration(startProgress, targetProgress) {
+    return Math.min(COUNT_UP_MAX_MS, COUNT_UP_MIN_MS + (targetProgress - startProgress) * COUNT_UP_MS_PER_POINT);
+}
+/** Fast start, gentle landing; `timeFraction` goes from 0 to 1 */
+export function easeOutCubic(timeFraction) {
+    return 1 - Math.pow(1 - timeFraction, 3);
+}
+export function formatProgress(progress) {
+    if (progress === 0 || progress === 100)
+        return progress.toString();
+    const factor = 10 ** PROGRESS_DECIMAL_PLACES;
+    // Floored so the label never runs ahead of the fill (99.96 -> 99.9, not 100.0); the epsilon
+    // absorbs float error such as 0.29 * 100 = 28.999999999999996
+    return (Math.floor(progress * factor + 1e-9) / factor).toFixed(PROGRESS_DECIMAL_PLACES);
+}
+// Gain label such as "+5%", "+0.3%" or "+0.0001%", or '' when the gain rounds to 0. Trailing zeros are dropped (0.2500 -> 0.25).
+export function formatProgressGain(previousProgress, newProgress) {
+    const factor = 10 ** GAIN_MAX_DECIMAL_PLACES;
+    // Rounded to the label precision, so float error (20.3 - 20.1 = 0.1999...) doesn't leak in
+    const roundedGain = Math.round((newProgress - previousProgress) * factor) / factor;
+    if (roundedGain <= 0)
+        return '';
+    return `+${roundedGain}%`;
+}
+/**
+ * A random confetti piece bursting from `center`: it shoots out to the top of its arc (35% of the time),
+ * then falls and fades, like it has weight
+ */
+export function createConfettiPiece(index, center) {
+    // Mostly upwards: straight up (-90deg) spread by about ±120deg
+    const angle = -Math.PI / 2 + randomBetween(-0.5, 0.5) * Math.PI * 1.35;
+    const speed = randomBetween(18, 40);
+    const travelX = Math.cos(angle) * speed;
+    const travelY = Math.sin(angle) * speed;
+    const fallDistance = randomBetween(34, 50);
+    const rotation = randomBetween(-400, 400);
+    const width = randomBetween(2, 3.4);
+    const height = randomBetween(3, 5);
+    return {
+        style: {
+            width: `${width}px`,
+            height: `${height}px`,
+            // Centres the piece on the point the keyframes translate it to
+            margin: `${-height / 2}px 0 0 ${-width / 2}px`,
+            background: CONFETTI_COLORS[index % CONFETTI_COLORS.length],
+            borderRadius: index % 3 === 0 ? '50%' : ''
+        },
+        keyframes: [
+            { transform: `translate(${center.x}px, ${center.y}px) rotate(0deg)`, opacity: 1 },
+            {
+                transform: `translate(${center.x + travelX}px, ${center.y + travelY}px) rotate(${rotation / 2}deg)`,
+                opacity: 1,
+                offset: 0.35
+            },
+            {
+                transform: `translate(${center.x + travelX * 1.3}px, ${center.y + travelY + fallDistance}px) rotate(${rotation}deg)`,
+                opacity: 0
+            }
+        ],
+        timing: { duration: randomBetween(1200, 1700), delay: randomBetween(0, 120) }
+    };
+}

package/dist/collection/utils/progress-animation.js

@@ -0,0 +1,173 @@
+import { canAnimate, cancelEffects, COIN_DROP_COUNT, COIN_DROP_STAGGER_MS, COMPLETED_ICON_VISIBLE_MS, CONFETTI_COUNT, createConfettiPiece, easeOutCubic, EFFECTS, formatProgressGain, getCountUpDuration, MAX_COINS_IN_FLIGHT, prefersReducedMotion } from "./progress-animation-helpers";
+export class ProgressAnimation {
+    constructor(host) {
+        this.host = host;
+    }
+    attach(elements) {
+        this.elements = elements;
+    }
+    /** Counts up to `targetProgress` with the gain effects */
+    animateProgress(previousTarget, targetProgress) {
+        this.playProgressGain(previousTarget, targetProgress);
+        this.countUp(targetProgress);
+    }
+    /** Shows `targetProgress` at once and stops the count-up and all effects */
+    jumpToProgress(targetProgress) {
+        this.stopAll();
+        this.host.setDisplayedProgress(targetProgress);
+    }
+    /**
+     * Called when a level is completed: counts up to 100, then checkmark, coin spin, gold glow and confetti.
+     * `onFinished` runs when the checkmark hides; it is dropped if stopAll() or another call cuts the animation.
+     * With reduced motion 100 and the checkmark are shown at once, so the player still sees the level is done.
+     */
+    playLevelComplete(previousTarget, onFinished) {
+        // Already showing 100 when a completion follows another one; the previous target is the next level's then
+        const startProgress = Math.max(previousTarget, this.host.getDisplayedProgress());
+        this.stopAll();
+        if (prefersReducedMotion()) {
+            this.host.setDisplayedProgress(100);
+            this.showCompletedIcon(onFinished);
+            return;
+        }
+        if (startProgress < 100)
+            this.playProgressGain(startProgress, 100);
+        this.countUp(100, () => {
+            var _a;
+            this.showCompletedIcon(onFinished);
+            this.spinCoin();
+            this.play((_a = this.elements) === null || _a === void 0 ? void 0 : _a.capsule, 'goldGlow');
+            this.burstConfetti();
+        });
+    }
+    /** Stops the count-up where it is and cancels all effects */
+    stopAll() {
+        var _a, _b;
+        this.stopCountUp();
+        clearTimeout(this.completedIconTimeoutId);
+        this.host.setCompletedIconVisible(false);
+        // The capsule's subtree includes the coin; cancelled particles remove themselves
+        cancelEffects((_a = this.elements) === null || _a === void 0 ? void 0 : _a.capsule);
+        cancelEffects((_b = this.elements) === null || _b === void 0 ? void 0 : _b.effectsLayer);
+    }
+    playProgressGain(previousProgress, newProgress) {
+        var _a, _b;
+        // Restarted instead of stacked when updates arrive back to back
+        cancelEffects((_a = this.elements) === null || _a === void 0 ? void 0 : _a.capsule, 'jelly');
+        this.play((_b = this.elements) === null || _b === void 0 ? void 0 : _b.capsule, 'jelly');
+        this.showFloatingGain(formatProgressGain(previousProgress, newProgress));
+        this.dropCoins(COIN_DROP_COUNT);
+    }
+    countUp(targetProgress, onFinished) {
+        this.stopCountUp();
+        const startProgress = this.host.getDisplayedProgress();
+        if (startProgress === targetProgress) {
+            onFinished === null || onFinished === void 0 ? void 0 : onFinished();
+            return;
+        }
+        const duration = getCountUpDuration(startProgress, targetProgress);
+        let startTime;
+        const step = (timestamp) => {
+            startTime !== null && startTime !== void 0 ? startTime : (startTime = timestamp);
+            const timeFraction = Math.min((timestamp - startTime) / duration, 1);
+            if (timeFraction < 1) {
+                this.host.setDisplayedProgress(startProgress + (targetProgress - startProgress) * easeOutCubic(timeFraction));
+                this.countUpFrameId = requestAnimationFrame(step);
+                return;
+            }
+            // The last frame lands exactly on the target
+            this.host.setDisplayedProgress(targetProgress);
+            this.countUpFrameId = undefined;
+            onFinished === null || onFinished === void 0 ? void 0 : onFinished();
+        };
+        this.countUpFrameId = requestAnimationFrame(step);
+    }
+    stopCountUp() {
+        if (this.countUpFrameId !== undefined)
+            cancelAnimationFrame(this.countUpFrameId);
+        this.countUpFrameId = undefined;
+    }
+    showFloatingGain(label) {
+        const elements = this.getParticleElements();
+        if (!label || !elements)
+            return;
+        const { particle } = this.spawnParticle(elements.effectsLayer, 'floating-gain', 'floatingGain');
+        particle.style.left = `${elements.capsule.offsetWidth / 2}px`;
+        particle.textContent = label;
+    }
+    dropCoins(count) {
+        const elements = this.getParticleElements();
+        if (!elements)
+            return;
+        // Rapid updates would otherwise pile up coins; extra ones are skipped, not queued
+        const coinsInFlight = elements.effectsLayer.getElementsByClassName('mini-coin').length;
+        const coinsToDrop = Math.min(count, MAX_COINS_IN_FLIGHT - coinsInFlight);
+        for (let coinIndex = 0; coinIndex < coinsToDrop; coinIndex++) {
+            const { animation } = this.spawnParticle(elements.effectsLayer, 'mini-coin', 'coinDrop', {
+                timing: { delay: coinIndex * COIN_DROP_STAGGER_MS }
+            });
+            // Only a coin that actually lands makes the pill coin wobble; a cancelled one doesn't
+            animation.addEventListener('finish', () => {
+                cancelEffects(elements.coin, 'coinWobble');
+                this.play(elements.coin, 'coinWobble');
+            });
+        }
+    }
+    showCompletedIcon(onHidden) {
+        this.host.setCompletedIconVisible(true);
+        this.completedIconTimeoutId = setTimeout(() => {
+            this.host.setCompletedIconVisible(false);
+            onHidden();
+        }, COMPLETED_ICON_VISIBLE_MS);
+    }
+    spinCoin() {
+        var _a, _b, _c;
+        cancelEffects((_a = this.elements) === null || _a === void 0 ? void 0 : _a.effectsLayer, 'coinDrop');
+        cancelEffects((_b = this.elements) === null || _b === void 0 ? void 0 : _b.coin, 'coinWobble');
+        this.play((_c = this.elements) === null || _c === void 0 ? void 0 : _c.coin, 'coinSpin');
+    }
+    burstConfetti() {
+        const elements = this.getParticleElements();
+        if (!elements)
+            return;
+        const { offsetWidth, offsetHeight } = elements.capsule;
+        const burstCenter = { x: offsetWidth / 2, y: offsetHeight / 2 };
+        for (let pieceIndex = 0; pieceIndex < CONFETTI_COUNT; pieceIndex++) {
+            const piece = createConfettiPiece(pieceIndex, burstCenter);
+            const { particle } = this.spawnParticle(elements.effectsLayer, 'confetti', 'confetti', piece);
+            Object.assign(particle.style, piece.style);
+        }
+    }
+    /** Starts an effect if `element` is rendered and can animate */
+    play(element, name) {
+        if (canAnimate(element))
+            this.startEffect(element, name);
+    }
+    /**
+     * Starts an effect with its name as the animation id, so cancelEffects() can find it.
+     * `keyframes` and `timing` are for particles, whose keyframes are generated per particle.
+     */
+    startEffect(element, name, { keyframes, timing } = {}) {
+        var _a;
+        return element.animate((_a = keyframes !== null && keyframes !== void 0 ? keyframes : EFFECTS[name].keyframes) !== null && _a !== void 0 ? _a : null, Object.assign(Object.assign(Object.assign({}, EFFECTS[name].timing), timing), { id: name }));
+    }
+    /**
+     * The elements particles need, or undefined when particles should be skipped: in a hidden tab updates keep
+     * arriving while animations don't advance, so particles would pile up and all play on return
+     */
+    getParticleElements() {
+        const elements = this.elements;
+        if (!elements || document.hidden || !canAnimate(elements.effectsLayer))
+            return undefined;
+        return elements;
+    }
+    /** Appends a particle to the effects layer and plays `name` on it; the particle removes itself when done */
+    spawnParticle(effectsLayer, className, name, animationOptions) {
+        const particle = document.createElement('span');
+        particle.className = className;
+        effectsLayer.appendChild(particle);
+        const animation = this.startEffect(particle, name, animationOptions);
+        animation.onfinish = animation.oncancel = () => particle.remove();
+        return { particle, animation };
+    }
+}

package/dist/esm/casino-challenge-details-events_23.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-b4a452f5.js';
-import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling } from './casino-challenges-overlay-9406646f.js';
-export { C as casino_challenges_overlay } from './casino-challenges-overlay-9406646f.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-58f943ea.js';
+import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling } from './casino-challenges-overlay-fc86db96.js';
+export { C as casino_challenges_overlay } from './casino-challenges-overlay-fc86db96.js';
 
 const DEFAULT_LANGUAGE$3 = 'en';
 const TRANSLATIONS$3 = {