@everymatrix/casino-engagement-suite-luckywheel 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const casinoEngagementSuiteLuckywheel = require('./casino-engagement-suite-luckywheel-d1e393bd.js');
+require('./index-b3b5597c.js');
+
+
+
+exports.CasinoEngagementSuiteLuckywheel = casinoEngagementSuiteLuckywheel.CasinoEngagementSuiteLuckywheel;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b3b5597c.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["casino-engagement-suite-luckywheel.cjs",[[1,"casino-engagement-suite-luckywheel",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[1],"device":[1],"luckywheel":[16],"size":[1],"contentdirection":[1],"limitStylingAppends":[32],"isPartitionsCustomableReady":[32],"isSpinning":[32],"options":[32],"radius":[32],"speed":[32],"settings":[32],"svg":[32],"spinContainer":[32],"spinable":[32],"spinner":[32]},[[8,"message","handleEvent"]]]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/casino-engagement-suite-luckywheel/casino-engagement-suite-luckywheel.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.25.3",
+    "typescriptVersion": "5.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/casino-engagement-suite-luckywheel/casino-engagement-suite-luckywheel.css

@@ -0,0 +1,213 @@
+:host {
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-decoration: none;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.LotteryProgramWof {
+  background: var(--emw--color-contrast, #07072A);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 20px 0;
+}
+
+main {
+  max-width: 600px;
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  min-height: 200px;
+}
+
+svg {
+  transition: opacity 0.3s;
+}
+
+.WheelContainer {
+  text-align: center;
+}
+
+.FortuneContainer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.Center {
+  cursor: pointer;
+  transition: filter;
+  transition-duration: 1s;
+}
+.Center.disabled {
+  filter: grayscale(80%);
+}
+.Center .CenterCircle {
+  fill: #3CE4BB;
+  stroke: rgb(150, 54, 88);
+  stroke-width: 2px;
+  cursor: pointer;
+  transition: fill;
+  transition-duration: 1s;
+}
+.Center .CenterText {
+  fill: #FFFFFF;
+}
+
+.PointerPartition {
+  opacity: 0.3;
+  fill: lightgoldenrodyellow;
+  stroke: red;
+  stroke-width: 6px;
+  stroke-dasharray: 12;
+}
+
+.Current {
+  color: #FFFFFF;
+}
+
+.PartitionText {
+  color: #FFFFFF;
+  font-style: normal;
+  font-weight: 700;
+  text-anchor: end;
+  text-shadow: 0px 3px #000;
+  dominant-baseline: central;
+}
+
+.PartitionsShadow {
+  background-blend-mode: multiply;
+  mix-blend-mode: multiply;
+}
+
+.PartitionTextEntityContainer {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.PartitionTextEntity {
+  width: 100%;
+}
+
+.PartitionTextEntity.Anticlockwise {
+  text-align: end;
+}
+
+foreignObject.Bottom div {
+  background-image: url("https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-bg.svg");
+  background-size: calc(var(--radius) * 2px + var(--ratio) * 20px);
+  background-position: center;
+}
+
+foreignObject.Middle div {
+  background-image: url("https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-spin.svg"), url("https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel/luckywheel-pointer.svg");
+  background-position: center, center 5px;
+}
+
+foreignObject.Top {
+  mix-blend-mode: multiply;
+}
+
+foreignObject.Top div {
+  background-image: var(--img-theme-shadow);
+  background-position: center;
+  background-size: calc(var(--radius) * 2px);
+}
+
+foreignObject.Partition1 div {
+  background-image: var(--img-theme-partition-light);
+  background-position: center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);
+  transform: rotate(calc(var(--index) * 360deg / var(--length)));
+}
+
+foreignObject.Partition2 div {
+  background-image: var(--img-theme-partition-light);
+  background-position: center calc((var(--size) / 2 - var(--radius)) * 1px - var(--ratio) * 22px);
+  transform: rotate(calc((var(--index) + 0.5) * 360deg / var(--length)));
+}
+
+foreignObject.PointerArea {
+  mix-blend-mode: screen;
+}
+
+foreignObject.PointerArea div {
+  background-image: var(--img-theme-pointer-area);
+  background-position: center -3px;
+  background-size: 51%;
+}
+
+foreignObject.Partition1 div, foreignObject.Partition2 div {
+  transform-origin: center;
+}
+
+.PartitionsCustomable1 div, .PartitionsCustomable2 div {
+  visibility: hidden;
+}
+.PartitionsCustomable1 div.active, .PartitionsCustomable2 div.active {
+  visibility: visible;
+}
+
+foreignObject.Customable {
+  overflow: visible;
+}
+
+foreignObject.Customable div {
+  background-repeat: no-repeat;
+}
+
+.PartitionBackground div {
+  background-size: calc(var(--radius) * 2 / var(--size) * 100%) calc(var(--radius) * 2 / var(--size) * 100%);
+  background-position: center;
+}
+
+.PartitionBackground:nth-child(2n) div {
+  background: var(--emw--color-primary, #3F2E75);
+}
+
+.PartitionBackground:nth-child(2n+1) div {
+  background: var(--emw--color-secondary, #9482CE);
+}
+
+.PartitionBackground div {
+  transform-origin: center;
+}
+
+.PartitionBackgroundStroke {
+  fill: transparent;
+  stroke: var(--emw--color-background-secondary, #251D3E);
+  stroke-width: 3px;
+  stroke-dasharray: none;
+}
+
+.PointerPartitionFrame {
+  stroke: #FFDD64;
+  fill: transparent;
+  stroke-dasharray: var(--radius) calc(6.2831853072 / var(--length) * var(--radius));
+  stroke-width: 0px;
+}
+.PointerPartitionFrame.active {
+  stroke-width: 3px;
+}
+
+.WheelContainer.Mobile foreignObject.Middle div {
+  background-size: 95px, 38px;
+}
+
+.PartitionText .PartitionTextEntityContainer .PartitionTextEntity {
+  text-align: center;
+  text-transform: uppercase;
+  text-shadow: none;
+  font-size: var(--emw--font-size-small, 14px);
+  font-weight: 900;
+}

package/dist/collection/components/casino-engagement-suite-luckywheel/casino-engagement-suite-luckywheel.js

@@ -0,0 +1,367 @@
+import { __rest } from "tslib";
+import { h } from "@stencil/core";
+import { SvgCalc } from "../../utils/class.svgcalc";
+import { Lang } from "../../utils/types";
+import { getOptions, isSafari, setProps } from "../../utils/utils";
+import { Spinner } from "../../utils/class.spinner";
+export class CasinoEngagementSuiteLuckywheel {
+    constructor() {
+        /**
+         * Client custom styling via string
+         */
+        this.clientStyling = '';
+        /**
+         * Client custom styling via url
+         */
+        this.clientStylingUrl = '';
+        /**
+         * Language of the widget
+         */
+        this.language = 'en';
+        /**
+         * User's device type
+         */
+        this.device = 'Mobile';
+        /**
+         * Wheel size
+         */
+        this.size = '440';
+        /**
+         * Content Direction
+         */
+        this.contentdirection = 'anticlockwise';
+        this.limitStylingAppends = false;
+        this.isPartitionsCustomableReady = false;
+        this.isSpinning = false;
+        this.radius = 0.85 * Number(this.size) / 2;
+        this.speed = 0;
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.host.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let url = new URL(this.clientStylingUrl);
+            let cssFile = document.createElement('style');
+            fetch(url.href)
+                .then((res) => res.text())
+                .then((data) => {
+                cssFile.innerHTML = data;
+                setTimeout(() => { this.host.prepend(cssFile); }, 1);
+            })
+                .catch((err) => {
+                console.log('Error ', err);
+            });
+        };
+        this.renderImage = (node, index) => {
+            const image = this.options[index].image;
+            setProps(image, this.settings.getSvgImageProps(index));
+            node.innerHTML = null;
+            node.appendChild(image);
+        };
+        this.updateSpinable = () => {
+            if (!!this.luckywheel.current) {
+                if (Number(this.luckywheel.current.remainingTimes) > 0) {
+                    this.spinable = true;
+                    return;
+                }
+                else {
+                    window.postMessage({ type: 'ShowNoSpinLeftModal' });
+                }
+            }
+            this.spinable = false;
+        };
+        this.eventSpin = () => {
+            this.updateSpinable();
+            if (!this.spinable || this.isSpinning) {
+                return;
+            }
+            this.isSpinning = true;
+            this.spinContainer = this.svg.querySelector('g.PartitionsContainer');
+            this.spinner.launch();
+            window.postMessage({
+                type: 'SpinLuckyWheel',
+                lotteryProgramID: this.luckywheel.program.id,
+            });
+            // todo: this code below simulates the server response, 
+            // delete after implementation with GLС
+            setTimeout(() => {
+                window.postMessage({
+                    type: 'SpinLuckyWheelRes',
+                    data: {
+                        item: { result: { wheelOfFortunePartitionIndex: 1 } },
+                        success: false
+                    }
+                });
+            }, 2500);
+        };
+        this.handleSpinClick = () => {
+            if (isSafari()) {
+                return;
+            }
+            this.eventSpin();
+        };
+    }
+    handleEvent(e) {
+        const _a = e === null || e === void 0 ? void 0 : e.data, { type } = _a, rest = __rest(_a, ["type"]);
+        switch (type) {
+            case 'SpinLuckyWheelRes':
+                this.spinner.halt(this.settings.getDeg(rest.data.item.result.wheelOfFortunePartitionIndex), () => {
+                    this.isSpinning = false;
+                    this.updateSpinable();
+                    const prizeText = this.luckywheel.program.wheelOfFortune.partitions[rest.data.item.result.wheelOfFortunePartitionIndex].prizeText;
+                    window.postMessage({
+                        type: 'ShowLuckywheelRewardModal',
+                        data: {
+                            PrizeMessage: prizeText['en'] || prizeText['*'],
+                            HasError: rest.data.success,
+                        }
+                    });
+                });
+                break;
+        }
+    }
+    componentDidRender() {
+        if (!this.limitStylingAppends && this.host) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+    }
+    async componentWillLoad() {
+        this.options = await getOptions(this.luckywheel, Lang.en);
+        this.settings = new SvgCalc({
+            size: this.size,
+            radius: this.radius,
+            options: this.options,
+            themeIndex: 1,
+            contentdirection: this.contentdirection
+        });
+        this.spinner = new Spinner({
+            tick: (deg, speed) => {
+                setProps(this.spinContainer, {
+                    style: [
+                        `transform: rotate(${deg}deg)`,
+                        `height: ${this.size}px`,
+                        `width: ${this.size}px`,
+                    ].join(';'),
+                });
+                this.speed = speed * 0.5;
+            }
+        });
+    }
+    defineGeneralVariables() {
+        return {
+            '--length': `${this.options.length}`,
+            '--radius': `${this.radius}`,
+            '--ratio': `${Number(this.size) / 480}`,
+            '--size': `${this.size}`,
+        };
+    }
+    render() {
+        const sizeProps = { height: this.size, width: this.size };
+        const foreignObjectAgentProps = { 'height': `${this.size}px`, 'width': `${this.size}px` };
+        return (h("div", { key: '8d964d9a81690d2a22240cb1355abb3c7cf6f665', class: `WheelContainer ${this.device}`, style: this.defineGeneralVariables() }, h("svg", { key: '92f44f4659874e1fedaffa32813c57d1c9c04440', width: this.size, height: this.size, ref: (el) => { this.svg = el; } }, h("foreignObject", Object.assign({ key: 'f042214f1516c688035f650a92ff1437c5d06a36' }, sizeProps, { class: "Bottom Customable" }), h("div", { key: '6c80c40dfdb80159d75af8f70a75604257039c53', style: foreignObjectAgentProps })), h("g", Object.assign({ key: '46c01589f440c19727c8364d5e1bdb3a90082cac', class: "PartitionsContainer" }, this.settings.getSpinnerProps()), h("g", { key: 'fd0e9a65b7ba25db742ff12bb26e389b8d72e4c7', class: "PartitionsBackgrounds" }, this.options.map((_el, index) => {
+            return (h("foreignObject", { "clip-path": `url(#clip${index})`, class: "PartitionBackground Customable", style: { '--index': index.toString() }, width: this.size, height: this.size }, h("div", { style: foreignObjectAgentProps })));
+        })), h("g", { key: '8c116aa611b92b87b98f23aa344025953a27e90d', class: "PartitionsBackgroundStrokes" }, this.options.map((_el, index) => {
+            return (h("path", Object.assign({ class: "PartitionBackgroundStroke" }, this.settings.getPartitionDraw(index), { width: this.size, height: this.size })));
+        })), h("g", { key: '8907e6529e660e6452328aaa684995719b528ec6', class: "Partitions", style: { filter: this.speed > 0.3 ? `blur(${this.speed}px)` : '' } }, this.options.map((el, index) => {
+            return ([
+                el.image && (h("g", { class: `PartitionImage PartitionImage${index}`, ref: (el) => this.renderImage(el, index) })),
+                el.name && (h("foreignObject", Object.assign({ class: "PartitionText" }, this.settings.getSvgTextPropsAdjustedByImage(index)), h("div", { class: "PartitionTextEntityContainer" }, h("p", { class: `PartitionTextEntity${this.settings.contentdirection === 'clockwise' ? '' : ' Anticlockwise'}`, innerHTML: el.name }))))
+            ]);
+        }))), h("g", { key: '62cf4e41e77374dd8f8c1af0833a4143e5d45403', class: { 'active': this.isPartitionsCustomableReady, 'PartitionsCustomable1': true } }, this.options.map((_el, index) => {
+            return (h("foreignObject", Object.assign({ class: "Partition1 Customable", style: { '--index': index.toString() } }, sizeProps), h("div", { style: foreignObjectAgentProps })));
+        })), h("g", { key: '6b0538da5d4f52e4b543205fb64dedda084f81b2', class: { 'active': this.isPartitionsCustomableReady, 'PartitionsCustomable2': true } }, this.options.map((_el, index) => {
+            return (h("foreignObject", Object.assign({ class: "Partition2 Customable", style: { '--index': index.toString() } }, sizeProps), h("div", { style: foreignObjectAgentProps })));
+        })), h("foreignObject", Object.assign({ key: '907db579094a7a192999510ade3150fdadbb94b6', class: "Middle Customable" }, sizeProps), h("div", { key: 'fa66cb96da2f285015fb8afeea5db05313ed832c', style: foreignObjectAgentProps })), h("foreignObject", Object.assign({ key: '688c0d33ad480ea331847286335a88fd74dbbb26', class: "Top Customable" }, sizeProps), h("div", { key: '292f6ea3549322a605fc8c3c61a93addcba00890', style: foreignObjectAgentProps })), h("g", { key: '22368be98007a7fa820cee96c666c363f85cd32a', class: { 'spinning': this.isSpinning, 'Center': true }, onClick: this.handleSpinClick }, h("foreignObject", { key: 'efffd7edb9ed21d5bd93896a4bead8931d91ff1f', x: Number(this.size) / 2 - 100 / 2, y: Number(this.size) / 2 - 100 / 2, width: 100, height: 100 })), h("g", { key: '7d8b741cc21d6d07f5736336f147cef2bfdf90ca' }, this.options.map((_el, index) => {
+            return (h("clipPath", { id: `clip${index}` }, h("path", Object.assign({}, this.settings.getPartitionDraw(index)))));
+        })))));
+    }
+    static get is() { return "casino-engagement-suite-luckywheel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-engagement-suite-luckywheel.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-engagement-suite-luckywheel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language of the widget"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'en'"
+            },
+            "device": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"Mobile\" | \"Tablet\" | \"Desktop\"",
+                    "resolved": "\"Desktop\" | \"Mobile\" | \"Tablet\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User's device type"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "device",
+                "reflect": false,
+                "defaultValue": "'Mobile' as 'Mobile' | 'Tablet' | 'Desktop'"
+            },
+            "luckywheel": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LuckyWheel",
+                    "resolved": "LuckyWheel",
+                    "references": {
+                        "LuckyWheel": {
+                            "location": "import",
+                            "path": "../../models/luckywheel",
+                            "id": "../../../../packages/stencil/casino-engagement-suite-luckywheel/src/models/luckywheel.ts::LuckyWheel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active Luckywheel"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wheel size"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'440'"
+            },
+            "contentdirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "keyof typeof ContentDirection",
+                    "resolved": "\"anticlockwise\" | \"clockwise\" | \"outward\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Content Direction"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "contentdirection",
+                "reflect": false,
+                "defaultValue": "'anticlockwise'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "limitStylingAppends": {},
+            "isPartitionsCustomableReady": {},
+            "isSpinning": {},
+            "options": {},
+            "radius": {},
+            "speed": {},
+            "settings": {},
+            "svg": {},
+            "spinContainer": {},
+            "spinable": {},
+            "spinner": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "message",
+                "method": "handleEvent",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/casino-engagement-suite-luckywheel/index.js

@@ -0,0 +1 @@
+export { CasinoEngagementSuiteLuckywheel } from './casino-engagement-suite-luckywheel';

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/casino-engagement-suite-luckywheel';

package/dist/collection/models/luckywheel.js

@@ -0,0 +1,12 @@
+export var CurrentInfo;
+(function (CurrentInfo) {
+    CurrentInfo["ActiveTickets"] = "ActiveTickets";
+    CurrentInfo["ImplicitTickets"] = "ImplicitTickets";
+    CurrentInfo["RemainingTimes"] = "RemainingTimes";
+})(CurrentInfo || (CurrentInfo = {}));
+export var ContentDirection;
+(function (ContentDirection) {
+    ContentDirection[ContentDirection["clockwise"] = 1] = "clockwise";
+    ContentDirection[ContentDirection["anticlockwise"] = -1] = "anticlockwise";
+    ContentDirection[ContentDirection["outward"] = 0] = "outward";
+})(ContentDirection || (ContentDirection = {}));

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

@@ -0,0 +1,38 @@
+import { convertDegToArc, easeOut } from "./utils";
+export class Spinnable {
+    constructor() {
+        this.arcStart = 0;
+        this.spinTime = 0;
+        this.spinTimeTotal = Math.random() * 3 + 8 * 1000;
+        this.spinAngleStart = 0;
+        this.spinable = true;
+    }
+    spin(deg, fn) {
+        this.spinAngleStart = deg;
+        if (!this.spinable)
+            return;
+        this.spinable = false;
+        this.spinTimeTotal = 1000;
+        this.spinTime = 0;
+        this.spinTick(fn);
+    }
+    spinTick(fn) {
+        this.spinTime += 30;
+        if (this.spinTime >= this.spinTimeTotal) {
+            this.stop(fn);
+            return;
+        }
+        var spinAngle = this.spinAngleStart -
+            easeOut(this.spinTime, 0, this.spinAngleStart, this.spinTimeTotal);
+        this.arcStart += convertDegToArc(spinAngle);
+        this.tick();
+        this.spinTimeout = setTimeout(this.spinTick.bind(this, fn), 10);
+    }
+    stop(fn) {
+        clearTimeout(this.spinTimeout);
+        this.afterStop();
+        this.spinable = true;
+        if (fn)
+            fn();
+    }
+}