@everymatrix/casino-game-thumb-view 0.0.2-9.1

package/dist/collection/components/casino-game-thumbnail-betlimit/casino-game-thumbnail-betlimit.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/casino-game-thumbnail-betlimit/casino-game-thumbnail-betlimit.js

@@ -0,0 +1,86 @@
+import { Component, h, Prop } from '@stencil/core';
+import { numberWithSeparators } from '../../utils/utils';
+import { currenciesSymbols } from '../../models/currency-symbols';
+export class CasinoGameThumbnailBetlimit {
+  constructor() {
+    this.defaultCurrency = 'EUR';
+    this.isBetLimitAvailable = false;
+  }
+  getCurrencySymbols(currency) {
+    return currenciesSymbols[currency];
+  }
+  componentWillRender() {
+    if (this.betLimit) {
+      const limit = this.betLimit.max
+        ? this.betLimit.max
+        : this.betLimit.min || {};
+      this.isBetLimitAvailable = Object.keys(limit).length === 1;
+      this.currency = this.isBetLimitAvailable
+        ? Object.keys(limit)[0]
+        : this.defaultCurrency;
+    }
+  }
+  render() {
+    if (!this.isBetLimitAvailable) {
+      return '';
+    }
+    return (h("p", { class: "LiveLimits" },
+      h("span", { class: "BetLimitLeft" },
+        this.getCurrencySymbols(this.currency),
+        ' ',
+        numberWithSeparators(this.betLimit.min[this.currency]),
+        " -",
+        ' ',
+        numberWithSeparators(this.betLimit.max[this.currency])),
+      (this.numberOfPlayers || this.numberOfPlayers == 0) && (h("span", { class: "BetLimitRight" },
+        h("svg", { fill: "white", width: "13", height: "13", viewBox: "0 0 13 14", xmlns: "http://www.w3.org/2000/svg" },
+          h("path", { d: "M4 8.2a4.6 4.6 0 0 0 5 0c2.7.8 4 2.6 4 4.8H0c0-2.2 1.3-4 4-4.8zM6.6 8c2 0 3.8-1.7 3.8-4 0-2.1-1.7-4-3.8-4a3.9 3.9 0 0 0-3.8 4c0 2.2 1.7 4 3.8 4z" })),
+        h("span", { class: "NrOfPlayers" }, this.numberOfPlayers)))));
+  }
+  static get is() { return "casino-game-thumbnail-betlimit"; }
+  static get originalStyleUrls() { return {
+    "$": ["casino-game-thumbnail-betlimit.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["casino-game-thumbnail-betlimit.css"]
+  }; }
+  static get properties() { return {
+    "betLimit": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "BetLimit",
+        "resolved": "BetLimit",
+        "references": {
+          "BetLimit": {
+            "location": "import",
+            "path": "../../models/casino-game-thumb-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The betlimit of live game"
+      }
+    },
+    "numberOfPlayers": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Number of players"
+      },
+      "attribute": "number-of-players",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/casino-game-thumbnail-extrainfo/casino-game-thumbnail-extrainfo.css

@@ -0,0 +1,154 @@
+:host {
+  display: block;
+  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;
+  box-sizing: border-box;
+}
+
+.LiveProps {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  bottom: 8px;
+  left: -8px;
+  right: 0;
+  width: 100%;
+  padding: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.3) 80%, rgba(0, 0, 0, 0.99) 100%);
+  color: var(--emfe-w-color-white, #FFFFFF);
+  opacity: 1;
+  font-size: 14px;
+}
+
+.GameExtraInfo {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 8px;
+  left: 8px;
+  z-index: 0;
+}
+.GameExtraInfoLabel {
+  font-size: 11px;
+  padding: 3px;
+  background-color: var(--emfe-w-color-primary, #D0046C);
+  color: var(--emfe-w-color-primary-50, #FBECF4);
+  font-weight: bold;
+  text-transform: uppercase;
+  border-radius: 5px;
+}
+
+.ListGame .GameInnerContainer .GameExtraInfo {
+  z-index: 10;
+}
+.ListGame .GameInnerContainer .ClosedGame {
+  opacity: 1;
+  z-index: 10;
+  padding: 8px 10px;
+  color: var(--emfe-w-color-white, #FFFFFF);
+  font-size: 18px;
+}
+.ListGame .GameInnerContainer .ClosedGame span {
+  font-size: 18px;
+}
+.ListGame .GameInnerContainer .LiveIcons {
+  position: relative;
+  display: flex;
+  padding: 0 10px;
+  box-sizing: border-box;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: auto;
+  margin-bottom: 5px;
+}
+.ListGame .GameInnerContainer .LiveIcons:first-child {
+  margin-left: 0;
+}
+.ListGame .GameInnerContainer .LiveIcons:last-child {
+  margin-right: 0;
+}
+.ListGame .GameInnerContainer .LiveIcons.Black, .ListGame .GameInnerContainer .LiveIcons.Red, .ListGame .GameInnerContainer .LiveIcons.Green {
+  color: var(--emfe-w-color-white, #FFFFFF);
+  border: 1px solid var(--emfe-w-color-white, #FFFFFF);
+}
+.ListGame .GameInnerContainer .LiveIcons .LatestResult {
+  min-width: 12px;
+  padding: 2px;
+  margin: 0 6px 0 1px;
+  font-size: 14px;
+  text-align: center;
+}
+.ListGame .GameInnerContainer .LiveIcons .LatestResult.FirstElementAnimated {
+  animation: flip-open 2s both;
+  -webkit-animation: flip-open 2s both;
+  -webkit-backface-visibility: visible;
+  backface-visibility: visible;
+}
+.ListGame .GameInnerContainer .LiveIcons .LatestResult.First {
+  min-width: 24px;
+  padding: 4px;
+}
+.ListGame .GameInnerContainer .LiveIcons .LatestResult.First.Black, .ListGame .GameInnerContainer .LiveIcons .LatestResult.First.Red, .ListGame .GameInnerContainer .LiveIcons .LatestResult.First.Green {
+  color: var(--emfe-w-color-white, #FFFFFF);
+  border: 1px solid var(--emfe-w-color-white, #FFFFFF);
+}
+.ListGame .GameInnerContainer .LiveIcons .LatestResult.First.Black {
+  background: var(--emfe-w-color-black, #000000);
+}
+.ListGame .GameInnerContainer .LiveIcons .LatestResult.First.Red {
+  background: red;
+}
+.ListGame .GameInnerContainer .LiveIcons .LatestResult.First.Green {
+  background: #56A80A;
+}
+.ListGame .GameInnerContainer .LiveIcons .Double {
+  display: flex;
+  flex-direction: column;
+}
+.ListGame .GameInnerContainer .LiveIcons .Double .LatestResult:first-child {
+  margin-bottom: 10px;
+}
+.ListGame .GameInnerContainer .LiveIcons .Double:first-child .LatestResult {
+  margin-left: 0;
+  margin-bottom: 0;
+}
+.ListGame .GameInnerContainer .LiveIcons .Double:last-child .LatestResult {
+  margin-right: 0;
+}
+.ListGame .GameInnerContainer .LiveIcons .Black,
+.ListGame .GameInnerContainer .LiveIcons .Red,
+.ListGame .GameInnerContainer .LiveIcons .Green {
+  background-color: transparent;
+}
+.ListGame .GameInnerContainer .LiveIcons .Black {
+  color: var(--emfe-w-color-white, #FFFFFF);
+}
+.ListGame .GameInnerContainer .LiveIcons .Red {
+  color: red;
+}
+.ListGame .GameInnerContainer .LiveIcons .Green {
+  color: #56A80A;
+}
+.ListGame .GameInnerContainer .LiveLimits {
+  opacity: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 2px 10px 5px;
+  background: var(--emfe-w-color-black, #000000);
+  color: var(--emfe-w-color-white, #FFFFFF);
+  font-weight: normal;
+  font-size: 12px;
+}
+.ListGame .GameInnerContainer .LiveLimits span {
+  font-size: 12px;
+  vertical-align: top;
+}

package/dist/collection/components/casino-game-thumbnail-extrainfo/casino-game-thumbnail-extrainfo.js

@@ -0,0 +1,155 @@
+import { Component, h, State, Prop, Method } from '@stencil/core';
+import moment from 'moment';
+import { translate } from '../../utils/locale.utils';
+import { addGameTag } from '../../utils/utils';
+import { WIDGETTYPE_GAMECATEGORY, WIDGETTYPE_CLASS, } from '../../constants/game-thumbnail';
+export class CasinoGameThumbnailExtrainfo {
+  constructor() {
+    this.language = 'en';
+    this.isNewGame = false;
+  }
+  async onGameLoaded(gameInfo) {
+    var _a;
+    this.gameInfo = gameInfo;
+    this.isNewGame = this.gameInfo.isNew;
+    this.gameTag = this.gameInfo.gameTag;
+    if (!this.gameInfo.details) {
+      return;
+    }
+    this.gameDetails = this.gameInfo.details;
+    this.isDouble = !this.gameDetails
+      ? false
+      : this.gameInfo.details.category.toLowerCase() ===
+        WIDGETTYPE_GAMECATEGORY.doubleballroulette;
+    this.gameTag = !this.gameDetails
+      ? this.gameInfo.gameTag
+      : ((_a = this.gameInfo.advancedTags) === null || _a === void 0 ? void 0 : _a.length) > 0
+        ? addGameTag(this.gameInfo.advancedTags)
+        : this.gameInfo.gameTag;
+    this.betLimit = !this.gameDetails ? null : this.gameDetails.betLimit;
+    this.initTimeProperties();
+  }
+  initTimeProperties() {
+    var _a, _b, _c, _d, _e;
+    //openHours.type: valid data: Bounded, FullTime
+    if (((_b = (_a = this.gameDetails) === null || _a === void 0 ? void 0 : _a.openHours) === null || _b === void 0 ? void 0 : _b.type) === 'Bounded') {
+      this.gameStartTime = (_d = (_c = this.gameDetails) === null || _c === void 0 ? void 0 : _c.openHours) === null || _d === void 0 ? void 0 : _d.value.startTime;
+      this.gameTimeFormat =
+        (_e = this.gameDetails) === null || _e === void 0 ? void 0 : _e.openHours.value.originalTimeFormat;
+    }
+  }
+  async onGameDetailUpdated(details) {
+    this.gameInfo.details = this.gameDetails = details;
+    this.gameDetails = Object.assign({}, this.gameDetails);
+    //openHours.type: valid data: Bouned, FullTime
+    this.initTimeProperties();
+  }
+  render() {
+    var _a, _b, _c;
+    if (!this.gameInfo) {
+      return '';
+    }
+    return (h("div", { class: "GameExtraInfo", part: "GameExtraInfo" },
+      this.isNewGame && (h("span", { class: "GameExtraInfoLabel NewGameTag", part: "GameExtraInfoLabel NewGameTag" }, translate('new', this.language))),
+      this.gameTag && (h("span", { class: "GameExtraInfoLabel PopularGameTag", part: "GameExtraInfoLabel PopularGameTag" }, this.gameTag)),
+      this.gameDetails && (h("div", { class: `GameProp LiveProps ${WIDGETTYPE_CLASS[this.gameDetails.category.toLowerCase()]} ${this.isDouble ? ' Double' : ''}`, part: `GameProp LiveProps  ${WIDGETTYPE_CLASS[this.gameDetails.category.toLowerCase()]} ${this.isDouble ? ' Double' : ''}` },
+        this.gameDetails.isOpen ? (h("slot", { name: "category-details" })) : (this.gameStartTime &&
+          this.gameTimeFormat && (h("div", { class: "ClosedGame", part: "ClosedGame" },
+          translate('opens', this.language),
+          h("span", null,
+            ' ',
+            moment
+              .utc(this.gameStartTime)
+              .local()
+              .format(this.gameTimeFormat),
+            ' ')))),
+        ((_a = this.gameDetails.dealer) === null || _a === void 0 ? void 0 : _a.DealerName) && (h("p", { class: "LiveLimits" },
+          h("span", { class: "DealerName" },
+            translate('dealer', this.language),
+            ":",
+            ' ', (_b = this.gameDetails) === null || _b === void 0 ? void 0 :
+            _b.dealer.DealerName,
+            ' '))),
+        h("casino-game-thumbnail-betlimit", { betLimit: this.betLimit, numberOfPlayers: (_c = this.gameDetails) === null || _c === void 0 ? void 0 : _c.numberOfPlayers })))));
+  }
+  static get is() { return "casino-game-thumbnail-extrainfo"; }
+  static get originalStyleUrls() { return {
+    "$": ["casino-game-thumbnail-extrainfo.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["casino-game-thumbnail-extrainfo.css"]
+  }; }
+  static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'en'"
+    }
+  }; }
+  static get states() { return {
+    "betLimit": {},
+    "gameInfo": {},
+    "gameDetails": {}
+  }; }
+  static get methods() { return {
+    "onGameLoaded": {
+      "complexType": {
+        "signature": "(gameInfo: CasinoGameThumbnailInfo) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "CasinoGameThumbnailInfo": {
+            "location": "import",
+            "path": "../../models/casino-game-thumb-view"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "onGameDetailUpdated": {
+      "complexType": {
+        "signature": "(details: CasinoGameThumbnailDetails) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "CasinoGameThumbnailDetails": {
+            "location": "import",
+            "path": "../../models/casino-game-thumb-view"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

package/dist/collection/components/casino-game-thumbnail-overlay/casino-game-thumbnail-overlay.css

@@ -0,0 +1,58 @@
+:host {
+  display: block;
+}
+
+.GameInfoWrapper {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.65);
+  z-index: 15;
+}
+.GameInfoWrapper .GameInfo {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.GameInfoWrapper .GameInfoName {
+  color: white;
+  margin-bottom: 10px;
+  text-align: center;
+  font-size: 14px;
+}
+.GameInfoWrapper .GameInfoBtn {
+  appearance: none;
+  padding: 6px;
+  background: var(--emfe-w-color-primary, #D0046C);
+  color: var(--emfe-w-color-primary-50, #FBECF4);
+  font-size: 16px;
+  border: 2px solid var(--emfe-w-color-primary-600, #99034F);
+  border-radius: 5px;
+  cursor: pointer;
+  transition: border 150ms ease-in-out;
+}
+.GameInfoWrapper .GameInfoBtn:hover {
+  border: 2px solid var(--emfe-w-color-primary-100, #F1BED9);
+}
+
+.GameInfoVendor {
+  display: block;
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  color: white;
+  font-size: 12px;
+  font-weight: normal;
+}
+
+.GameInfoWrapper:hover {
+  display: block !important;
+}

package/dist/collection/components/casino-game-thumbnail-overlay/casino-game-thumbnail-overlay.js

@@ -0,0 +1,208 @@
+import { Component, h, Prop, Event } from '@stencil/core';
+import { isMobile } from '../../utils/utils';
+import { translate } from '../../utils/locale.utils';
+export class CasinoGameThumbnailOverlay {
+  constructor() {
+    /**
+     * integratedGameFrameMobile
+     */
+    this.integratedGameFrameMobile = false;
+    /**
+     * Open game a a frame,  gamepagemodalurl value should be set
+     */
+    this.integratedGameFrameDesktop = false;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    this.userAgent = window.navigator.userAgent;
+  }
+  onPlayNowClicked() {
+    this.playClicked.emit(this.gameId);
+    let modalEventData = {
+      gameId: this.gameId,
+      isMobile: isMobile(this.userAgent),
+    };
+    let isFrameMode = this.integratedGameFrameMobile || this.integratedGameFrameDesktop;
+    window.postMessage({
+      type: isFrameMode ? 'OpenGameFrame' : 'ShowGameModal',
+      eventData: isFrameMode
+        ? Object.assign(Object.assign({}, modalEventData), { gamefunmode: this.hasFunMode, source: 'GameThumbnail', identifier: 'Lobby' }) : modalEventData,
+    }, window.location.href);
+  }
+  render() {
+    return (h("div", { class: "GameInfoWrapper", part: "GameInfoWrapper" },
+      h("div", { class: "GameInfo ", part: "GameInfo " },
+        h("p", { class: "GameInfoName", part: "GameInfoName", title: this.gameName },
+          ' ',
+          this.gameName,
+          ' '),
+        h("button", { class: "GameInfoBtn", part: "GameInfoBtn", onClick: () => this.onPlayNowClicked() }, translate('playNow', this.language))),
+      h("slot", { name: "vendor-name" },
+        h("span", { class: "GameInfoVendor", part: "GameInfoVendor" }, this.gameVendor))));
+  }
+  static get is() { return "casino-game-thumbnail-overlay"; }
+  static get originalStyleUrls() { return {
+    "$": ["casino-game-thumbnail-overlay.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["casino-game-thumbnail-overlay.css"]
+  }; }
+  static get properties() { return {
+    "integratedGameFrameMobile": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "integratedGameFrameMobile"
+      },
+      "attribute": "integrated-game-frame-mobile",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "gamepageModalUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "the frame url when integratedGameFrameDesktop is true"
+      },
+      "attribute": "gamepage-modal-url",
+      "reflect": false
+    },
+    "integratedGameFrameDesktop": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Open game a a frame,  gamepagemodalurl value should be set"
+      },
+      "attribute": "integrated-game-frame-desktop",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Language"
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'en'"
+    },
+    "gameName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "game-name",
+      "reflect": false
+    },
+    "gameVendor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "game-vendor",
+      "reflect": false
+    },
+    "gameId": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "string | number",
+        "resolved": "number | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "game-id",
+      "reflect": false
+    },
+    "hasFunMode": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "has-fun-mode",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "playClicked",
+      "name": "playCasinoGame",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event when playnow button clicked"
+      },
+      "complexType": {
+        "original": "string | number",
+        "resolved": "number | string",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/casino-normal-game-thumbnail/casino-normal-game-thumbnail.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}