@everymatrix/casino-engagement-suite-luckywheel 0.0.1

package/dist/collection/utils/class.spinner.js

@@ -0,0 +1,120 @@
+import { Easing, SpinStep } from "./types";
+import { easing, easingGrad, easingGradX, params } from "./utils";
+export class Spinner {
+    constructor(inits) {
+        this.deg = 0;
+        this.degTarget = undefined;
+        this.step = undefined;
+        this.easingType = Easing.cubic;
+        this.param = params[2];
+        this.halt = (deg, cb = () => { }) => {
+            this.shouldHalt = () => {
+                this.step = SpinStep.halt;
+                this.cb = () => {
+                    cb();
+                    this.setDeg(deg, 0);
+                };
+                this.degTarget = deg + 360 * this.param.haltTurns;
+                this.continueRepeat();
+            };
+        };
+        this.continueRepeat = () => setTimeout(() => this.ticker(), 30);
+        this.ticker = () => {
+            const linkSpeed = this.param.loopSpeed;
+            const easingDuration = (deg) => 33 * easingGrad[this.easingType] * deg / this.param.loopSpeed;
+            const animations = {
+                launch: () => {
+                    const degTar = 360 * this.param.launchTurns - this.deg;
+                    const t = easingDuration(degTar);
+                    this.animateF(t, this.deg, degTar, easing.in[this.easingType], easingGradX.in[this.easingType]);
+                },
+                halt: () => {
+                    const t = easingDuration(this.degTarget);
+                    this.animateF(t, 0, this.degTarget, easing.out[this.easingType], easingGradX.out[this.easingType]);
+                },
+                loop: () => {
+                    this.setDeg((this.deg + linkSpeed) % 360, easingGrad[this.easingType]);
+                    this.continueRepeat();
+                }
+            };
+            const stepSwitcher = {
+                [SpinStep.launch]: () => {
+                    this.cb = () => {
+                        this.step = SpinStep.loop;
+                        this.setDeg(linkSpeed, easingGrad[this.easingType]);
+                        this.continueRepeat();
+                    };
+                    animations.launch();
+                },
+                [SpinStep.loop]: () => {
+                    if (this.shouldHalt && this.deg === 0) {
+                        this.shouldHalt();
+                    }
+                    else {
+                        animations.loop();
+                    }
+                },
+                [SpinStep.halt]: () => {
+                    if (this.deg === 360 - linkSpeed) {
+                        animations.halt();
+                    }
+                    else {
+                        animations.loop();
+                    }
+                }
+            };
+            stepSwitcher[this.step]();
+        };
+        this.setDeg = (deg, speed) => {
+            this.deg = deg;
+            this.tick(deg, speed);
+        };
+        this.animateF = (duration, startAngle, target, easing, _easingGrad) => {
+            let start = null;
+            const step = () => {
+                let timestamp = new Date().getTime();
+                if (!start) {
+                    start = timestamp;
+                }
+                const progress = timestamp - start;
+                const translation = target * easing(progress / duration) + startAngle;
+                const speedCur = Math.abs(_easingGrad(progress / duration));
+                this.setDeg(translation, speedCur);
+                if (progress < duration) {
+                    setTimeout(() => step(), 30);
+                }
+                else {
+                    this.cb();
+                }
+            };
+            step();
+        };
+        this.animate = (duration, startAngle, target, easing, _easingGrad) => {
+            let animationId = null;
+            window.cancelAnimationFrame(animationId);
+            let start = null;
+            const step = (timestamp) => {
+                if (!start) {
+                    start = timestamp;
+                }
+                const progress = timestamp - start;
+                const translation = target * easing(progress / duration) + startAngle;
+                const speedCur = Math.abs(_easingGrad(progress / duration));
+                this.setDeg(translation, speedCur);
+                if (progress < duration) {
+                    animationId = window.requestAnimationFrame(step);
+                }
+                else {
+                    this.cb();
+                }
+            };
+            animationId = window.requestAnimationFrame(step);
+        };
+        this.tick = inits.tick;
+    }
+    launch() {
+        this.shouldHalt = undefined;
+        this.step = SpinStep.launch;
+        this.ticker();
+    }
+}

package/dist/collection/utils/class.svgcalc.js

@@ -0,0 +1,175 @@
+import { ArrowMode, ContentDirection } from "./types.js";
+import { getPointOnCircle, pointPlus, getSymmetricalPointFromScalar, getPointWithNext } from "./utils.js";
+export const mapObjectValueToTuple = (object) => Object.keys(object).map(key => object[key]);
+var RotateDirection;
+(function (RotateDirection) {
+    RotateDirection[RotateDirection["clockwise"] = 1] = "clockwise";
+    RotateDirection[RotateDirection["anticlockwise"] = -1] = "anticlockwise";
+})(RotateDirection || (RotateDirection = {}));
+export class SvgCalc {
+    constructor({ size, radius, options, themeIndex, contentdirection }) {
+        this.arrowmode = ArrowMode.DownFromTop;
+        this.convertDegToArc = (deg) => deg * Math.PI / 180;
+        this.convertArcToDeg = (arc) => arc * 180 / Math.PI % 360;
+        this.getArcDelta = (n) => 2 * Math.PI / n;
+        this.findDeg = (index, n) => {
+            const degDelta = this.convertArcToDeg(this.getArcDelta(n));
+            return (index) * degDelta;
+        };
+        this.angleTransform = (arrowmode) => {
+            switch (arrowmode) {
+                case ArrowMode.DownFromTop:
+                case ArrowMode.UpFromCenter:
+                    return -Math.PI / 2;
+                case ArrowMode.DownFromCenter:
+                case ArrowMode.UpFromBottom:
+                    return Math.PI / 2;
+            }
+        };
+        this.contentdirection = contentdirection || 'anticlockwise';
+        // size
+        this.center = size / 2;
+        this.ratio = size / 375;
+        // options
+        this.options = options;
+        this.length = options.length;
+        // theme
+        this.themeIndex = themeIndex;
+        //
+        this.radius = radius;
+    }
+    get sizeImage() {
+        const getSize = (length) => this.ratio * 48 * 5 / length;
+        if (this.length <= 3)
+            return getSize(4);
+        switch (this.length) {
+            case 8:
+            case 7: return this.ratio * 24;
+            case 6: return this.ratio * 36;
+            case 5: return this.ratio * 48;
+            case 4: return this.ratio * 56;
+            default: return getSize(this.length);
+        }
+    }
+    getSizeImageByPartition(index) {
+        if (this.options[index].name) {
+            return this.sizeImage / 2;
+        }
+        else {
+            return this.sizeImage;
+        }
+    }
+    getSvgImageProps(index, partitionDivisor = 1.25) {
+        const sizeImage = this.getSizeImageByPartition(index);
+        let baseRadius;
+        if (this.options[index].name) {
+            baseRadius = this.radius - sizeImage / 2 - 3 * this.ratio;
+        }
+        else {
+            baseRadius = (this.radius - sizeImage / 2) / Number(partitionDivisor) - 3 * this.ratio;
+        }
+        return Object.assign(Object.assign({}, this.getPropsForPartitionInfo(index, this.getOffsetImage(sizeImage), baseRadius, ContentDirection.outward)), { width: sizeImage, height: sizeImage });
+    }
+    getSvgTextProps(index) {
+        const sizeImage = this.getSizeImageByPartition(index);
+        let baseRadius;
+        if (this.options[index].image) {
+            baseRadius = this.radius - sizeImage - 6 * this.ratio;
+        }
+        else {
+            baseRadius = this.radius - 6 * this.ratio;
+        }
+        return Object.assign({}, this.getPropsForPartitionInfo(index, this.offsetText, baseRadius));
+    }
+    getSvgTextPropsAdjustedByImage(index) {
+        const props = this.getSvgTextProps(index);
+        const size = this.options[index].image ? 80 : 100;
+        const objectSize = {
+            width: size,
+            height: size
+        };
+        return Object.assign(Object.assign(Object.assign({}, props), objectSize), { x: this.contentdirection === 'clockwise' ? props.x : props.x - objectSize.width, y: props.y - objectSize.height / 2 });
+    }
+    get offsetText() {
+        return {
+            center: 0,
+            position: {
+                x: 0,
+                y: 0
+            },
+            transform: {
+                x: 0,
+                y: 0
+            }
+        };
+    }
+    getOffsetImage(sizeImage) {
+        return {
+            center: 0,
+            position: {
+                x: -1 * sizeImage / 2,
+                y: -1 * sizeImage / 2
+            },
+            transform: {
+                x: 0,
+                y: 0
+            }
+        };
+    }
+    get direction() {
+        return RotateDirection.clockwise;
+    }
+    getAngleSelf(index, contentDirection) {
+        const baseAngle = 360 * index / this.length * this.direction;
+        const fixerAngle = 90 * (contentDirection !== undefined ? contentDirection : ContentDirection[this.contentdirection]);
+        const resultAngle = baseAngle + fixerAngle;
+        return resultAngle;
+    }
+    getPartitionPositions(index, baseRadius, offset) {
+        const angle = this.angleTransform(this.arrowmode) +
+            this.direction * index * 2 * Math.PI / this.length;
+        const point = getPointOnCircle(baseRadius || this.radius - 9 * this.ratio, angle, this.center + offset.center);
+        const transformOrigin = pointPlus(point, offset.transform);
+        const pointResult = pointPlus(point, offset.position);
+        return {
+            transformOrigin,
+            point: pointResult
+        };
+    }
+    getPropsForPartitionInfo(index, offset, baseRadius, contentDirection) {
+        const { point, transformOrigin } = this.getPartitionPositions(index, baseRadius, offset);
+        const getTransformOriginString = (vector) => Object.keys(vector).map(axis => `${vector[axis]}px`).join(' ');
+        return Object.assign(Object.assign({}, point), { style: {
+                'font-size': `${13 * this.ratio}px`,
+                'transform': `rotate(${this.getAngleSelf(index, contentDirection)}deg)`,
+                'transform-origin': `${getTransformOriginString(transformOrigin)}`
+            } });
+    }
+    getPartitionDraw(index) {
+        const rPoint = getSymmetricalPointFromScalar(this.center);
+        const rRingInnerPoint = getSymmetricalPointFromScalar(this.radius);
+        const { point, pointNext } = getPointWithNext(index, this.length, this.radius, this.center);
+        const ds = [
+            'M', ...mapObjectValueToTuple(rPoint),
+            'L', ...mapObjectValueToTuple(point),
+            'A',
+            ...mapObjectValueToTuple(rRingInnerPoint),
+            '0 0 1',
+            ...mapObjectValueToTuple(pointNext),
+            'Z'
+        ];
+        return {
+            d: ds.join(' ')
+        };
+    }
+    getDeg(index) {
+        const i = index || this.length - 1;
+        return this.findDeg(length - i, length);
+    }
+    getSpinnerProps() {
+        const centerPoint = getSymmetricalPointFromScalar(this.center);
+        return {
+            'transform-origin': `${centerPoint.x} ${centerPoint.y}`
+        };
+    }
+}

package/dist/collection/utils/types.js

@@ -0,0 +1,42 @@
+export var PointerMode;
+(function (PointerMode) {
+    PointerMode["Arrow"] = "Arrow";
+    PointerMode["Partition"] = "Partition";
+})(PointerMode || (PointerMode = {}));
+export var ArrowMode;
+(function (ArrowMode) {
+    ArrowMode["DownFromTop"] = "DownFromTop";
+    ArrowMode["UpFromCenter"] = "UpFromCenter";
+    ArrowMode["DownFromCenter"] = "DownFromCenter";
+    ArrowMode["UpFromBottom"] = "UpFromBottom";
+})(ArrowMode || (ArrowMode = {}));
+export var Lang;
+(function (Lang) {
+    Lang["en"] = "en";
+    Lang["fr"] = "fr";
+    Lang["de"] = "de";
+    Lang["tr"] = "tr";
+})(Lang || (Lang = {}));
+export var ContentDirection;
+(function (ContentDirection) {
+    ContentDirection[ContentDirection["clockwise"] = 1] = "clockwise";
+    ContentDirection[ContentDirection["anticlockwise"] = -1] = "anticlockwise";
+    ContentDirection[ContentDirection["outward"] = 0] = "outward";
+})(ContentDirection || (ContentDirection = {}));
+export var SpinStep;
+(function (SpinStep) {
+    SpinStep["launch"] = "launch";
+    SpinStep["loop"] = "loop";
+    SpinStep["halt"] = "halt";
+})(SpinStep || (SpinStep = {}));
+export var Easing;
+(function (Easing) {
+    Easing["quad"] = "quad";
+    Easing["cubic"] = "cubic";
+    Easing["quart"] = "quart";
+    Easing["quint"] = "quint";
+    // 
+    Easing["expo"] = "expo";
+    Easing["sine"] = "sine";
+    Easing["circ"] = "circ";
+})(Easing || (Easing = {}));

package/dist/collection/utils/utils.js

@@ -0,0 +1,204 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+export const isSafari = () => {
+    var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    return isSafari;
+};
+const cvtCaseFromCamelToKebab = (text) => text
+    .split(/(?=[A-Z])/)
+    .map(s => s.toLocaleLowerCase())
+    .join('-');
+export const setProps = (element, props) => {
+    Object.keys(props).map(_key => {
+        element.setAttribute(cvtCaseFromCamelToKebab(_key), props[_key]);
+    });
+};
+export const imageLoaderSvg = (src) => {
+    return new Promise((resolve, _reject) => {
+        let img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+        img.onload = () => resolve(img);
+        img.onerror = () => resolve(img); //reject
+        img.href.baseVal = src;
+    });
+};
+export const getSymmetricalPointFromScalar = (length) => ({
+    x: length,
+    y: length
+});
+export const getPointOnCircle = (radius, angle, center) => {
+    const centerPoint = getSymmetricalPointFromScalar(center);
+    return {
+        x: centerPoint.x + radius * Math.cos(angle),
+        y: centerPoint.y + radius * Math.sin(angle)
+    };
+};
+export const getPoint = (num, length, r, rCenter) => {
+    const arc = 360 / length;
+    const psai = Math.PI / 180 * (-90 + arc * (num - 1 / 2));
+    const rCenterPoint = getSymmetricalPointFromScalar(rCenter);
+    const rPoint = getSymmetricalPointFromScalar(r);
+    return {
+        x: rCenterPoint.x + rPoint.x * Math.cos(psai),
+        y: rCenterPoint.y + rPoint.y * Math.sin(psai)
+    };
+};
+export const getPointWithNext = (num, length, r1, r2) => {
+    const getPointx = (num) => getPoint(num, length, r1, r2);
+    return {
+        point: getPointx(num),
+        pointNext: getPointx(num + 1)
+    };
+};
+export const getTrianglePointsY = (height, isPointUp, yBase) => {
+    return {
+        y1: yBase,
+        y2: isPointUp ? yBase - height : yBase + height,
+        y3: yBase
+    };
+};
+export const getTwoPointsOfLineGradient = (radius, index, length, angle) => ({
+    x1: radius,
+    y1: radius,
+    x2: radius * (1 + Math.cos(2 * Math.PI / length * index + angle)),
+    y2: radius * (1 + Math.sin(2 * Math.PI / length * index + angle)),
+});
+export const pointPlus = (point1, point2) => ({
+    x: point1.x + point2.x,
+    y: point1.y + point2.y
+});
+const optionCompliment = {
+    image: '',
+    name: 'Thank you',
+    prizeText: '',
+    prizeImage: ''
+};
+const getSumProbability = (partitions) => {
+    let probabilityAll = 0;
+    partitions.map(partition => {
+        probabilityAll += Number(partition.probability);
+    });
+    return probabilityAll;
+};
+const getOptionsFromPartitions = (partitions, lang) => {
+    const options = partitions.map(_partition => {
+        const option = {};
+        Object.keys(_partition).map((_key) => {
+            if (typeof _partition[_key] === 'object' &&
+                _partition[_key].hasOwnProperty('*')) {
+                const targetKey = _key === 'image1' ? 'image' : _key;
+                option[targetKey] = _partition[_key][lang] || _partition[_key]['*'];
+            }
+        });
+        return option;
+    });
+    if (getSumProbability(partitions) < 1) {
+        options.push(optionCompliment);
+    }
+    return options;
+};
+const preloadImage = async (src) => {
+    if (!src)
+        return {};
+    return {
+        image: await imageLoaderSvg(src)
+    };
+};
+export const getOptions = async (bonus, lang) => {
+    const { partitions } = bonus.program.wheelOfFortune;
+    let options = getOptionsFromPartitions(partitions, lang);
+    if (isSafari()) {
+        options = options.map(option => {
+            if (option.image) {
+                const img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+                img.href.baseVal = option.image;
+                return Object.assign(Object.assign({}, option), { image: img });
+            }
+            else {
+                return option;
+            }
+        });
+    }
+    else {
+        options = await Promise.all(options.map(async (o) => (Object.assign(Object.assign({}, o), (await preloadImage(o.image))))));
+    }
+    return options;
+};
+export const convertDegToArc = (deg) => deg * Math.PI / 180;
+export const easeOut = (time, b, angleStart, timeTotal) => {
+    var ts = (time /= timeTotal) * time;
+    var tc = ts * time;
+    const res = b + angleStart * (tc + -3 * ts + 3 * time);
+    return res;
+};
+export const easing = {
+    in: {
+        quad: (x) => Math.pow(x, 2),
+        cubic: (x) => Math.pow(x, 3),
+        quart: (x) => Math.pow(x, 4),
+        quint: (x) => Math.pow(x, 5),
+        //
+        sine: (x) => 1 - Math.cos((x * Math.PI) / 2),
+        expo: (x) => x === 0 ? 0 : Math.pow(2, 10 * x - 10),
+        circ: (x) => 1 - Math.sqrt(1 - Math.pow(x, 2)),
+    },
+    out: {
+        quad: (x) => 1 - Math.pow(1 - x, 2),
+        cubic: (x) => 1 - Math.pow(1 - x, 3),
+        quart: (x) => 1 - Math.pow(1 - x, 4),
+        quint: (x) => 1 - Math.pow(1 - x, 5),
+        //
+        sine: (x) => Math.sin((x * Math.PI) / 2),
+        expo: (x) => x === 1 ? 1 : 1 - Math.pow(2, -10 * x),
+        circ: (x) => Math.sqrt(1 - Math.pow(x - 1, 2)),
+    }
+};
+export const easingGrad = {
+    quad: 2,
+    cubic: 3,
+    quart: 4,
+    quint: 5,
+    sine: Math.PI / 2,
+    expo: Math.LN2,
+    circ: Infinity,
+};
+export const easingGradX = {
+    in: {
+        quad: (x) => 2 * x,
+        cubic: (x) => 3 * x ** 2,
+        quart: (x) => 4 * x ** 3,
+        quint: (x) => 5 * x ** 4,
+        sine: (x) => Math.PI / 2 * Math.sin(Math.PI / 2 * x),
+        expo: (x) => Math.LN2 * 10 * 2 ** (10 * x - 10),
+        circ: (x) => -1 / 2 * (1 - x ** 2) ** (-1 / 2),
+    },
+    out: {
+        cubic: (x) => 3 * x ** 2 - 6 * x + 3,
+    }
+};
+export const params = [
+    // basic
+    {
+        launchTurns: 5,
+        launchSpeed: 0.2,
+        loopSpeed: 15,
+        haltTurns: 2,
+        haltSpeed: 0.16,
+    },
+    // faster
+    {
+        launchTurns: 2,
+        launchSpeed: 0.5,
+        loopSpeed: 20,
+        haltTurns: 2,
+        haltSpeed: 0.22,
+    },
+    // faster with more turns
+    {
+        launchTurns: 6,
+        launchSpeed: 1.38,
+        loopSpeed: 45,
+        haltTurns: 6,
+        haltSpeed: 0.50,
+    },
+];

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };