@everymatrix/casino-engagement-suite-container 1.35.0

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+/* CasinoEngagementSuiteContainer custom elements */
+
+import type { Components, JSX } from "../types/components";
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

package/dist/esm/casino-engagement-suite-bar_2.entry.js

@@ -0,0 +1,241 @@
+import { r as registerInstance, h, g as getElement } from './index-fef3ac09.js';
+import '@everymatrix/casino-engagement-suite-challenges-list';
+
+const casinoEngagementSuiteBarCss = "@import url(\"https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;900&display=swap\"); :host{display:block}*{box-sizing:border-box}.CasinoEngagementSuiteBar{height:100vh;background-color:var(--emw--color-background, #1E1638);color:var(--emw--color-typography, #FFF)}.CasinoEngagementSuiteBar .EngagementSuiteContainer{display:flex;align-items:center;gap:4px}.CasinoEngagementSuiteBar .EngagementSuiteContainer .Tile{background-color:var(--emw--color-primary, #251D3E);border-radius:var(--emw--border-radius-medium, 4px);display:flex;flex-direction:row;align-items:center;justify-content:center;position:relative;font-weight:var(--emw--font-weight-semibold, 600);font-size:var(--emw--font-size-x-small, 12px);font-family:\"Montserrat\", sans-serif;color:var(--emw--color-typography, #FFF)}.CasinoEngagementSuiteBar .EngagementSuiteContainer .Tile::before{content:\"\";position:absolute;inset:0;border-radius:var(--emw--border-radius-medium, 4px);padding:1px;background:linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%);-webkit-mask:linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.CasinoEngagementSuiteBar .EngagementSuiteContainer .Jackpots,.CasinoEngagementSuiteBar .EngagementSuiteContainer .Rewards{display:flex;flex-direction:column;gap:4px}.CasinoEngagementSuiteBar .EngagementSuiteContainer .Jackpot{padding:14px 8px}.CasinoEngagementSuiteBar .EngagementSuiteContainer .Jackpots .Mega{background:linear-gradient(180deg, #FFB801 15.86%, #FEF746 31.36%, #FBFFE0 36.86%, #FFFA60 47.86%, #FF9400 87.36%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:var(--emw--font-weight-bold, 800)}.CasinoEngagementSuiteBar .EngagementSuiteContainer .Reward{justify-content:space-between;padding:8px;cursor:pointer;border:none}.CasinoEngagementSuiteBar .EngagementSuiteContainer .Reward.Active::before{background:linear-gradient(143.2deg, #FF9401 -0.41%, #FFD32D 45.61%, #2D2545 82.77%)}.CasinoEngagementSuiteBar .EngagementSuiteContainer .RewardIcon{width:24px;height:24px;background-size:100%;background-position:center}.Tile.Leaderboard .RewardIcon{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/leaderboard.svg\")}.Tile.Leaderboard.Active .RewardIcon{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/leaderboard-pressed.svg\")}.Tile.Challenges .RewardIcon{background:center 100% url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/challenge.svg\")}.Tile.Challenges.Active .RewardIcon{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/challenge-pressed.svg\")}.Tile.Luckywheel .RewardIcon{background:center 100% url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel.svg\")}.Tile.Luckywheel.Active .RewardIcon{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/luckywheel-pressed.svg\")}.Tile.Freespins .RewardIcon{background:center 100% url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/freespins.svg\")}.Tile.Freespins.Active .RewardIcon{background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/freespins-pressed.svg\")}.Landscape.CasinoEngagementSuiteBar{width:152px;padding-top:16px;box-shadow:0 4px 4px 0 #00000040, 8px 0 10px 0 #0000004D}.Landscape.CasinoEngagementSuiteBar .EngagementSuiteContainer{flex-direction:column}.Landscape.CasinoEngagementSuiteBar .EngagementSuiteContainer .Tile{width:120px;height:40px}.Portrait.CasinoEngagementSuiteBar{border-radius:0 0 var(--emw--border-radius-medium, 4px) var(--emw--border-radius-medium, 4px);height:auto;padding:10px;box-shadow:0 4px 4px 0 #00000040, 8px 0 10px 0 #0000004D}.Portrait.CasinoEngagementSuiteBar .EngagementSuiteContainer{gap:8px;flex-wrap:wrap}.Portrait.CasinoEngagementSuiteBar .EngagementSuiteContainer .Jackpots,.Portrait.CasinoEngagementSuiteBar .EngagementSuiteContainer .Rewards{width:100%;flex-direction:row;gap:8px}.Portrait.CasinoEngagementSuiteBar .EngagementSuiteContainer .Tile{flex:1 1 0px;height:32px}.Portrait.CasinoEngagementSuiteBar .EngagementSuiteContainer .Jackpot{padding:10px 8px}.Portrait.CasinoEngagementSuiteBar .EngagementSuiteContainer .Reward{padding:4px 8px}";
+
+const CasinoEngagementSuiteBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Orientation of the widget
+     */
+    this.orientation = 'Landscape';
+    this.limitStylingAppends = false;
+    this.handleTileClick = (ev) => {
+      const application = ev.target.getAttribute('data-app');
+      window.postMessage({ type: `Bar${application}Click` });
+      this.activeWidget = application;
+    };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.engagementSuiteBar.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.engagementSuiteBar.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('Error ', err);
+      });
+    };
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.engagementSuiteBar) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  getChallengeTile() {
+    return this.challengePercent
+      ? (h("button", { class: `Tile Reward Challenges ${this.activeWidget === 'Challenges' ? 'Active' : ''}`, "data-app": "Challenges", onClick: this.handleTileClick }, h("div", { class: "RewardIcon" }), h("span", null, this.challengePercent)))
+      : '';
+  }
+  render() {
+    /**
+     * These constants are used only to verify the correct rendering of our widget.
+     * In future development, all of this data will be fetched from the backend.
+     */
+    const megaItem = '$ 988,900,000';
+    const majorItem = '$ 77,900,000';
+    const minorItem = '$ 3,900,000';
+    const leaderboardItem = '4 / 120';
+    const luckywheelItem = '5';
+    const freespinsItem = '17';
+    return h("div", { class: `CasinoEngagementSuiteBar ${this.orientation}`, ref: (el) => (this.engagementSuiteBar = el) }, h("div", { class: "EngagementSuiteContainer" }, h("div", { class: "Jackpots" }, h("div", { class: "Tile Jackpot" }, h("span", { class: "Mega" }, megaItem)), h("div", { class: "Tile Jackpot" }, h("span", { class: "Major" }, majorItem)), h("div", { class: "Tile Jackpot" }, h("span", { class: "Minor" }, minorItem))), h("div", { class: "Rewards" }, h("button", { class: `Tile Reward Leaderboard ${this.activeWidget === 'Leaderboard' ? 'Active' : ''}`, "data-app": "Leaderboard", onClick: this.handleTileClick }, h("div", { class: "RewardIcon" }), h("span", null, leaderboardItem)), h("button", { class: `Tile Reward Luckywheel ${this.activeWidget === 'Luckywheel' ? 'Active' : ''}`, "data-app": "Luckywheel", onClick: this.handleTileClick }, h("div", { class: "RewardIcon" }), h("span", null, luckywheelItem)), this.getChallengeTile(), h("button", { class: `Tile Reward Freespins ${this.activeWidget === 'Freespins' ? 'Active' : ''}`, "data-app": "Freespins", onClick: this.handleTileClick }, h("div", { class: "RewardIcon" }), h("span", null, freespinsItem)))));
+  }
+};
+CasinoEngagementSuiteBar.style = casinoEngagementSuiteBarCss;
+
+var ChallengeLevelProgressStatus;
+(function (ChallengeLevelProgressStatus) {
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Closed"] = 0] = "Closed";
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["InProgress"] = 1] = "InProgress";
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Fillup"] = 2] = "Fillup";
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Completed"] = 3] = "Completed";
+})(ChallengeLevelProgressStatus || (ChallengeLevelProgressStatus = {}));
+var ChallengeProgressStatus;
+(function (ChallengeProgressStatus) {
+  ChallengeProgressStatus[ChallengeProgressStatus["Started"] = 0] = "Started";
+  ChallengeProgressStatus[ChallengeProgressStatus["InProgress"] = 1] = "InProgress";
+  ChallengeProgressStatus[ChallengeProgressStatus["PendingLevelReward"] = 2] = "PendingLevelReward";
+  ChallengeProgressStatus[ChallengeProgressStatus["Completed"] = 3] = "Completed";
+  ChallengeProgressStatus[ChallengeProgressStatus["Expired"] = 4] = "Expired";
+})(ChallengeProgressStatus || (ChallengeProgressStatus = {}));
+
+function getDeviceType() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const width = screen.availWidth;
+  const height = screen.availHeight;
+  if (userAgent.includes('iphone')) {
+    return 'Mobile';
+  }
+  if (userAgent.includes('ipad')) {
+    return 'Tablet';
+  }
+  if (userAgent.includes('android')) {
+    if (height > width && width < 800) {
+      return 'Mobile';
+    }
+    if (width > height && height < 800) {
+      return 'Tablet';
+    }
+  }
+  return 'Desktop';
+}
+function getScreenOrientation() {
+  const orientation = window.screen.orientation.type;
+  return orientation.includes('portrait') ? 'Portrait' : 'Landscape';
+}
+
+const casinoEngagementSuiteContainerCss = ":host{display:inline-block;font-family:inherit}.Backdrop{padding:20px 20px 20px 172px;display:none;position:fixed;inset:0;height:100dvh;width:100vw}.Backdrop.Opened{display:block}.Backdrop .CasinoEngagementSuiteDialog{height:calc(100dvh - 40px);max-width:600px}.CasinoEngagementSuiteContainer.Portrait{width:100vw}.CasinoEngagementSuiteContainer.Portrait .Backdrop{padding:104px 0 20px}.CasinoEngagementSuiteContainer.Portrait .Backdrop .CasinoEngagementSuiteDialog{max-width:initial;padding:0 4px;margin:0 auto;height:calc(100dvh - 124px)}.CasinoEngagementSuiteContainer.Landscape.Mobile .CasinoEngagementSuiteDialog{max-width:366px}";
+
+const CasinoEngagementSuiteContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    this.orientation = 'Landscape';
+    this.device = 'Mobile';
+    this.showChallengesList = false;
+    this.limitStylingAppends = false;
+    this.handleChallengeListClose = () => {
+      this.showChallengesList = false;
+      this.activeWidget = '';
+    };
+    this.orientationChangeHandler = () => {
+      this.orientation = getScreenOrientation();
+    };
+    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);
+      });
+    };
+  }
+  handleEvent(e) {
+    const type = e.data.type;
+    switch (type) {
+      case 'ChallengeHasExpired': {
+        this.setChallengePercent();
+        break;
+      }
+      case 'BarChallengesClick': {
+        this.showChallengesList = true;
+        this.activeWidget = 'Challenges';
+        break;
+      }
+      case 'UpdateChallengeProgress': {
+        this.updateChallengeProgress(e.data.data);
+      }
+    }
+  }
+  componentDidLoad() {
+    this.orientation = getScreenOrientation();
+    this.device = getDeviceType();
+    window.screen.orientation.addEventListener('change', this.orientationChangeHandler);
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.host) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  disconnectedCallback() {
+    window.screen.orientation.removeEventListener('change', this.orientationChangeHandler);
+  }
+  /**
+   * Called to initialize widget
+   * @param config
+   */
+  async init(config) {
+    this.challenges = config.challenges;
+    this.setChallengePercent();
+  }
+  setChallengePercent() {
+    if (!this.challenges)
+      return;
+    const activeChallenge = this.challenges
+      .find(challenge => challenge.Status === ChallengeProgressStatus.InProgress);
+    if (activeChallenge) {
+      const activeLevel = activeChallenge.LevelProgresses
+        .find(progress => progress.ProgressStatus === ChallengeLevelProgressStatus.InProgress);
+      if (activeLevel) {
+        this.challengePercent = `${activeLevel.ProgressPercentage}%`;
+      }
+    }
+    else {
+      this.challengePercent = '—';
+    }
+  }
+  updateChallengeProgress(data) {
+    var _a;
+    const challenge = (_a = this.challenges) === null || _a === void 0 ? void 0 : _a.find(challenge => challenge.Id === data.ChallengeId);
+    if (challenge) {
+      challenge.LevelProgresses = data.LevelProgresses;
+      this.challenges = [...this.challenges];
+    }
+    this.setChallengePercent();
+  }
+  getChallengesWidgets() {
+    return h("div", { class: this.showChallengesList ? 'Backdrop Opened' : 'Backdrop' }, h("casino-engagement-suite-challenges-list", { device: this.device, class: "CasinoEngagementSuiteDialog", onClose: this.handleChallengeListClose, challenges: this.challenges }));
+  }
+  render() {
+    return h("div", { class: `CasinoEngagementSuiteContainer ${this.device} ${this.orientation}` }, h("casino-engagement-suite-bar", { orientation: this.orientation, "active-widget": this.activeWidget, "challenge-percent": this.challengePercent }), this.challenges && this.getChallengesWidgets());
+  }
+  get host() { return getElement(this); }
+};
+CasinoEngagementSuiteContainer.style = casinoEngagementSuiteContainerCss;
+
+export { CasinoEngagementSuiteBar as casino_engagement_suite_bar, CasinoEngagementSuiteContainer as casino_engagement_suite_container };

package/dist/esm/casino-engagement-suite-container.js

@@ -0,0 +1,17 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-fef3ac09.js';
+
+/*
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = import.meta.url;
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return bootstrapLazy([["casino-engagement-suite-bar_2",[[1,"casino-engagement-suite-container",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"orientation":[32],"device":[32],"showChallengesList":[32],"challengePercent":[32],"limitStylingAppends":[32],"activeWidget":[32],"challenges":[32],"init":[64]},[[8,"message","handleEvent"]]],[1,"casino-engagement-suite-bar",{"activeWidget":[1537,"active-widget"],"challengePercent":[1,"challenge-percent"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"orientation":[1],"limitStylingAppends":[32]}]]]], options);
+});