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

package/dist/collection/components/casino-game-thumb-view/casino-game-thumb-view.js

@@ -0,0 +1,1057 @@
+import { Component, h, Prop, State, Event, Watch, Listen, } from '@stencil/core';
+import { isMobile, convertGicBaccaratUpdateItem } from '../../utils/utils';
+import { WIDGETTYPE_GAMECATEGORY, GAME_CATEGORY, GAME_TYPE, } from '../../constants/game-thumbnail';
+import { EventSourcePolyfill } from 'event-source-polyfill';
+import Fav from '../../static/fav.svg';
+import UnFavSvg from '../../static/unfav.svg';
+export class CasinoGameThumbView {
+  constructor() {
+    /**
+     * Widget Setting, Game language
+     */
+    this.language = 'en';
+    /**
+     * Widget Setting, Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Widget Setting, Client custom styling via url content
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Widget Setting, show game in a frame when user clicked 'start'
+     */
+    this.integratedGameFrameMobile = false;
+    /**
+     * Widget Setting, show game in a frame when user clicked 'start', Open game aframe,
+     * gamepageModalUrl value should be set
+     */
+    this.integratedGameFrameDesktop = false;
+    /**
+     * Widget Setting, Load game details when set it as true, default value: false
+     * When loadDetails is true and type=='live-casino-tables',
+     * Load gameDetails by endpoint/vendor/gameId if livelobbyEndpoint is null
+     */
+    this.loadDetails = false;
+    /**
+     * Widget Setting, showRoundBoard, default value: false
+     */
+    this.showRoundBoard = false;
+    /**
+     * Game Property, default ''
+     */
+    this.gameCategory = '';
+    /**
+     * Game Property, Game lunch platform
+     */
+    this.platform = 'PC';
+    this.thumbnailLoaded = false;
+    this.containerClassWhenDetailChange = '';
+    this.isUserLoggedIn = false;
+    this.limitStylingAppends = false;
+    //customize style setting
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    //customize style setting
+    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.stylingContainer.prepend(cssFile);
+        }, 1);
+      })
+        .catch((err) => {
+        console.error('error ', err);
+      });
+    };
+    this.getGameCategoryType = () => {
+      if (this.isLiveCasino && this.gameCategory) {
+        return `casino-extrainfo-${this.getWidgetTypeByGameCategory(this.gameCategory).toLowerCase()}`;
+      }
+      return `casino-normal-game-thumbnail`;
+    };
+    this.getGameContainerClass = () => {
+      let gameContainerClass = `GameContainer `;
+      if (this.gameInfo) {
+        if (this.gameInfo && this.gameInfo.details) {
+          gameContainerClass += ' ListGame ';
+          if (this.gameInfo.details.isOpen &&
+            this.gameInfo.details.currentRouletteNumbers) {
+            gameContainerClass += ' GameBackdrop ';
+          }
+        }
+      }
+      return gameContainerClass;
+    };
+  }
+  onSessionChanged() {
+    this.isUserLoggedIn = !!(this.session && this.userId);
+  }
+  onTableFullChanged(newVal, oldVal) {
+    if (oldVal == undefined) {
+      return;
+    }
+    this.containerClassWhenDetailChange =
+      newVal && !oldVal ? 'PulsatingRedShadow' : 'PulsatingGreenShadow';
+  }
+  handleMouseOver(event) {
+    this.hover = event.type === 'mouseenter';
+  }
+  gameFavoritedHandler(event) {
+    let eventDetail = event.detail;
+    this.gameInfo.isFavorite = eventDetail[this.gameId];
+    this.gameInfo = Object.assign({}, this.gameInfo);
+  }
+  connectLiveHandler() {
+    this.toggleConnect();
+  }
+  visibilityConnectHandler() {
+    this.toggleVisibilityConnect();
+  }
+  gameDetailChangeHandler(e) {
+    var _a, _b;
+    let message = JSON.parse(e.data);
+    if (message.needReconnect && this.liveLobbyConnection) {
+      this.liveLobbyConnection.close();
+      this.connectGameToLiveLobby();
+      return;
+    }
+    if (!(message && message.InternalTableId == this.gameId)) {
+      return;
+    }
+    let MessageType = message.MessageType;
+    switch (MessageType) {
+      case 'TableOpened':
+      case 'TableClosed':
+        this.gameInfo.details.isOpen = message.Open;
+        break;
+      case 'PlayersUpdated':
+        this.gameInfo.details.numberOfPlayers = message.Players;
+        break;
+      case 'RouletteResultsUpdated':
+        this.gameInfo.details.currentRouletteNumbers = message.Results;
+        break;
+      case 'DoubleBallRouletteResultsUpdated':
+        this.gameInfo.details.currentDoubleBallRouletteNumbers =
+          message.Results;
+        break;
+      case 'SeatsUpdated':
+        this.gameInfo.details.currentOccupiedSeats = message.Seats;
+        break;
+      case 'DealerChanged':
+        this.gameInfo.details.dealer = message.Dealer;
+        break;
+      case 'BaccaratResultsUpdated':
+        if (this.showRoundBoard) {
+          const Results = message.Results;
+          this.gameInfo.details.results = [];
+          Results.forEach((item) => {
+            this.gameInfo.details.results.push(convertGicBaccaratUpdateItem(item));
+          });
+          (_a = this.extraInfoRef) === null || _a === void 0 ? void 0 : _a.onBaccaratResultChanged(this.gameInfo.details.results);
+        }
+        break;
+    }
+    this.resetLiveProperties();
+    (_b = this.extraInfoRef) === null || _b === void 0 ? void 0 : _b.onGameDetailUpdated(this.gameInfo.details);
+    window.postMessage({ messageType: MessageType, value: e.data });
+  }
+  messageHandler(e) {
+    if (e.data.type === `AddFavoriteThumbnail_${this.gameId}` &&
+      !this.showFavoredCategory) {
+      this.gameInfo.isFavorite = true;
+    }
+    if (e.data.type === `RemoveFavoriteThumbnail_${this.gameId}` &&
+      !this.showFavoredCategory) {
+      this.gameInfo.isFavorite = false;
+    }
+    if (e.data.type === 'UserSessionID') {
+      this.isUserLoggedIn = true;
+      this.session = e.data.session;
+      this.userId = e.data.userID;
+    }
+  }
+  resetLiveProperties() {
+    var _a, _b;
+    const details = this.gameInfo.details;
+    if (this.isBlackJack(this.gameCategory.toLowerCase())) {
+      this.isTableFull =
+        details.totalSeats == ((_a = details.currentOccupiedSeats) === null || _a === void 0 ? void 0 : _a.length);
+    }
+    else if (this.isBaccarat(this.gameCategory.toLowerCase()) &&
+      ((_b = details.baccaratResults) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+      this.gameInfo.details.results = [];
+      details.baccaratResults.forEach((item) => {
+        this.gameInfo.details.results.push(convertGicBaccaratUpdateItem(item));
+      });
+      delete details.baccaratResults;
+    }
+  }
+  isBlackJack(gameCategory) {
+    return gameCategory.toLowerCase() === GAME_CATEGORY.BLACKJACK;
+  }
+  isBaccarat(gameCategory) {
+    return gameCategory.toLowerCase() === GAME_CATEGORY.BACCARAT;
+  }
+  /**
+   * Calculate component properties by game info,
+   * eg: isLiveCasino, gameInfo, isTableFull
+   */
+  initCtrlProperties() {
+    var _a;
+    if (this.isLiveCasino && ((_a = this.gameInfo) === null || _a === void 0 ? void 0 : _a.details)) {
+      this.resetLiveProperties();
+    }
+    this.gameInfo = Object.assign({}, this.gameInfo);
+    this.triggerExtraInfoLoad();
+  }
+  /**
+   * Parse game info by game info api response
+   * @param data
+   */
+  parseGameResponse(data) {
+    if (data.length == 1) {
+      this.gameInfo = data[0];
+      if (this.isLiveCasino) {
+        if (!this.gameInfo.details) {
+          this.loadGameDetailInfo();
+        }
+        else {
+          this.parseGameDetailsResponse();
+        }
+      }
+      else {
+        this.initCtrlProperties();
+      }
+    }
+  }
+  /**
+   * Parse game detail info, set it to game info
+   */
+  parseGameDetailsResponse() {
+    this.initCtrlProperties();
+  }
+  connectGameToLiveLobby() {
+    if (EventSource && !this.liveLobbyConnection) {
+      const updateUrl = `${this.endpoint}/encoder/lobby/updates/${this.gameInfo.vendor.name}/${this.gameInfo.id}`;
+      this.liveLobbyConnection = new EventSourcePolyfill(updateUrl);
+      this.liveLobbyConnection.addEventListener('message', (evt) => {
+        this.gameDetailChangeHandler(evt);
+      });
+    }
+  }
+  disconnectGameFromLiveLobby() {
+    if (this.liveLobbyConnection) {
+      this.liveLobbyConnection.removeEventListener('message');
+      this.liveLobbyConnection.close();
+      this.liveLobbyConnection = undefined;
+    }
+  }
+  toggleConnect() {
+    if (!this.isLiveCasino) {
+      return;
+    }
+    if (this.connectLive === 'disconnect') {
+      this.disconnectGameFromLiveLobby();
+    }
+    else if (this.connectLive === 'connect') {
+      this.connectGameToLiveLobby();
+    }
+  }
+  toggleVisibilityConnect() {
+    if (!this.isLiveCasino) {
+      return;
+    }
+    if (this.visibilityConnect === 'disconnect') {
+      this.disconnectGameFromLiveLobby();
+    }
+    else if (this.visibilityConnect === 'connect' &&
+      this.connectLive === 'connect') {
+      this.connectGameToLiveLobby();
+    }
+  }
+  /**
+   * Get game base info from game api(casino/games/{id})
+   * @private
+   */
+  loadGameById() {
+    let url = `${this.endpoint}/casino/games/${this.gameId}?expand=vendor&platform=${this.platform}&language=${this.language}`;
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => this.parseGameResponse(data))
+      .catch((err) => {
+      console.error(err);
+    });
+  }
+  /*
+   * Load game info when widget property 'livelobbyEndpoint' set
+   * @private
+   */
+  loadGameInfoByLobbyEndpoint() {
+    let url = new URL(`${this.livelobbyEndpoint.split('?')[0]}`);
+    url.searchParams.append('expand', 'vendor');
+    url.searchParams.append('platform', this.platform);
+    url.searchParams.append('language', this.language);
+    fetch(url.toString())
+      .then((res) => res.json())
+      .then((data) => this.parseGameResponse(data))
+      .catch((error) => console.error(error));
+  }
+  /*
+   * load game info when widget property 'livelobbyEndpoint' setted
+   * @private
+   */
+  loadGameDetailInfo() {
+    let url = new URL(`${this.endpoint}/lobby/tables/${this.gameId}`);
+    url.searchParams.append('platform', this.platform);
+    url.searchParams.append('language', this.language);
+    fetch(url.toString())
+      .then((res) => res.json())
+      .then((data) => {
+      if (!(data === null || data === void 0 ? void 0 : data.category)) {
+        return;
+      }
+      this.gameInfo.details = data;
+      this.parseGameDetailsResponse();
+    })
+      .catch((err) => {
+      console.error(err);
+      setTimeout(() => this.loadGameDetailInfo(), 1000);
+    });
+  }
+  /**
+   * Toggle game favorite property
+   * @param gameId
+   * @private
+   */
+  toggleFavoriteGame(gameId) {
+    let triggerFactor = 'thumbnail';
+    if (this.gameInfo.isFavorite) {
+      window.postMessage({ type: 'SetUnfavoredGame', gameId, triggerFactor }, window.location.href);
+    }
+    else {
+      window.postMessage({ type: 'SetFavoredGame', gameId, triggerFactor }, window.location.href);
+    }
+    this.toggleFavoriteCasinoGameEvent.emit(gameId);
+  }
+  /**
+   * Generate gameInfo obj by props
+   * @private
+   */
+  generateGameInfoByProps() {
+    return {
+      id: this.gameId,
+      name: this.gameName,
+      subVendor: this.subVendor,
+      hasFunMode: this.hasFunMode,
+      hasAnonymousFunMode: this.hasAnonymousFunMode,
+      thumbnail: this.thumbnail,
+      cellSize: this.cellSize,
+      gameTag: this.gameTag,
+      vendor: { href: '', name: this.gameVendor },
+      isFavorite: this.isFavorite,
+      isNew: this.isNew,
+      type: this.type,
+      liveCasinoCategory: this.gameCategory || '',
+    };
+  }
+  triggerExtraInfoLoad() {
+    var _a;
+    (_a = this.extraInfoRef) === null || _a === void 0 ? void 0 : _a.onGameLoaded(this.gameInfo);
+    window.postMessage({
+      type: 'casinoGameLoaded',
+      gameInfo: this.gameInfo,
+    });
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area 500)
+    if (this.gameInfo && this.extraInfoRef) {
+      this.triggerExtraInfoLoad();
+    }
+  }
+  componentDidLoad() {
+    var _a;
+    //Init this.extraInfoRef, prepare for data loader, this.gameInfo did not inited might
+    this.extraInfoRef = (_a = this.extraInfoSlotRef) === null || _a === void 0 ? void 0 : _a.querySelector(this.getGameCategoryType());
+    window.addEventListener('message', this.messageHandler);
+  }
+  componentWillLoad() {
+    this.isLiveCasino = this.type == GAME_TYPE.LIVE_CASINO;
+    this.extraInfoWidget = this.getGameCategoryType();
+    this.isUserLoggedIn = !!(this.session && this.userId);
+    if (this.isLiveCasino && this.livelobbyEndpoint) {
+      this.loadGameInfoByLobbyEndpoint();
+      return;
+    }
+    //generate gameInfo obj by props
+    if (this.thumbnail) {
+      this.gameInfo = this.generateGameInfoByProps();
+      // loadLiveDetails if game is live casino
+      if (this.isLiveCasino &&
+        this.endpoint &&
+        this.loadDetails &&
+        this.gameId) {
+        this.loadGameDetailInfo();
+      }
+      return;
+    }
+    //fetch data from api if no game properties set except gameId
+    if (this.gameId && this.endpoint) {
+      this.loadGameById();
+    }
+  }
+  disconnectedCallback() {
+    if (this.liveLobbyConnection) {
+      this.liveLobbyConnection.removeEventListener('message', this.gameDetailChangeHandler);
+    }
+    window.removeEventListener('message', this.messageHandler);
+  }
+  // end custom styling area
+  getWidgetTypeByGameCategory(gameCategory) {
+    return WIDGETTYPE_GAMECATEGORY[gameCategory.toLowerCase()];
+  }
+  getGameOverlayProps() {
+    var _a, _b;
+    return {
+      gameName: this.gameInfo.name,
+      gameId: this.gameInfo.gameId,
+      gameVendor: this.gameVendor || ((_b = (_a = this.gameInfo) === null || _a === void 0 ? void 0 : _a.vendor) === null || _b === void 0 ? void 0 : _b.name),
+      hasFunMode: this.gameInfo.hasFunMode,
+      language: this.language,
+      integratedGameFrameMobile: this.integratedGameFrameMobile,
+      integratedGameFrameDesktop: this.integratedGameFrameDesktop,
+      gamepageModalUrl: this.gamepageModalUrl,
+    };
+  }
+  render() {
+    var _a, _b;
+    if (!this.gameInfo) {
+      return (h("div", { class: "GameInnerContainer", part: "GameInnerContainer", slot: "Game-Inner" },
+        h("img", { src: this.thumbnail, alt: "", loading: "lazy", part: "GameContainer", class: "GameContainer", onLoad: () => (this.thumbnailLoaded = true) })));
+    }
+    const gameOverlayProps = this.getGameOverlayProps();
+    const gameThumbnail = ((_a = this.gameInfo) === null || _a === void 0 ? void 0 : _a.thumbnail) || ((_b = this.gameInfo) === null || _b === void 0 ? void 0 : _b.defaultThumbnail);
+    const gameContainerClass = this.getGameContainerClass();
+    const gameThumbnailClass = `GameBg ${this.cellSize ? 'GameBg-' + this.cellSize : ''}
+    ${this.hover ? ' GameContainerHovered' : ''} ${this.thumbnailLoaded ? ' Loaded' : ''}`;
+    return (h("div", { class: `${gameContainerClass}  ${this.containerClassWhenDetailChange}`, part: `${gameContainerClass}  ${this.containerClassWhenDetailChange}`, ref: (el) => (this.stylingContainer = el), "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrl },
+      h("div", { class: `GameInnerContainer ${this.hover ? 'Hovered' : ''}`, part: `GameInnerContainer ${this.hover ? 'Hovered' : ''}` },
+        h("img", { src: gameThumbnail, alt: "Game Thumbnail ", loading: "lazy", part: gameThumbnailClass, class: gameThumbnailClass, onLoad: () => (this.thumbnailLoaded = true) }),
+        this.isUserLoggedIn && (h("div", { class: `FavIconContainer ${this.gameInfo.isFavorite ? 'Favorited' : ''}`, part: `FavIconContainer ${this.gameInfo.isFavorite ? 'Favorited' : ''}`, onClick: () => this.toggleFavoriteGame(this.gameId) }, this.gameInfo.isFavorite ? (h("slot", { name: "fav-icon" },
+          h("span", { class: "FavoredIcon", part: "FavoredIcon", innerHTML: Fav }))) : (h("slot", { name: "UnFavIcon" }, !isMobile(window.navigator.userAgent) && (h("span", { class: "UnfavoredIcon", part: "UnfavoredIcon", innerHTML: UnFavSvg })))))),
+        h("slot", { name: "game-overlay" },
+          h("casino-game-thumbnail-overlay", Object.assign({ language: this.language }, gameOverlayProps))),
+        h("slot", { name: "extra-info", ref: (el) => (this.extraInfoSlotRef = el) },
+          h(this.extraInfoWidget, { language: this.language, "show-round-board": this.showRoundBoard })),
+        h("slot", { name: "game-property-slot" })),
+      this.showGameName && (h("slot", { name: "game-name" },
+        h("p", { class: "GameNameBelow", part: "GameNameBelow", title: gameOverlayProps.gameName }, gameOverlayProps.gameName)))));
+  }
+  static get is() { return "casino-game-thumb-view"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["casino-game-thumb-view.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["casino-game-thumb-view.css"]
+  }; }
+  static get assetsDirs() { return ["static"]; }
+  static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Setting, Game language"
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'en'"
+    },
+    "endpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Setting, Api endpoint for loading game details"
+      },
+      "attribute": "endpoint",
+      "reflect": false
+    },
+    "userId": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "string | number",
+        "resolved": "number | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Setting, User id"
+      },
+      "attribute": "user-id",
+      "reflect": false
+    },
+    "showGameName": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Setting, Show game name if set it as true"
+      },
+      "attribute": "show-game-name",
+      "reflect": false
+    },
+    "session": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Setting, User session"
+      },
+      "attribute": "session",
+      "reflect": false
+    },
+    "showFavoredCategory": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Setting, game showed in favorited category"
+      },
+      "attribute": "show-favored-category",
+      "reflect": false
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Setting, Client custom styling via string"
+      },
+      "attribute": "client-styling",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "clientStylingUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Setting, Client custom styling via url content"
+      },
+      "attribute": "client-styling-url",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "integratedGameFrameMobile": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Setting, show game in a frame when user clicked 'start'"
+      },
+      "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": "Widget Setting, show game in a frame when user clicked 'start'\nthe 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": "Widget Setting, show game in a frame when user clicked 'start', Open game aframe,\ngamepageModalUrl value should be set"
+      },
+      "attribute": "integrated-game-frame-desktop",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "loadDetails": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Setting, Load game details when set it as true, default value: false\nWhen loadDetails is true and type=='live-casino-tables',\nLoad gameDetails by endpoint/vendor/gameId if livelobbyEndpoint is null"
+      },
+      "attribute": "load-details",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showRoundBoard": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Setting, showRoundBoard, default value: false"
+      },
+      "attribute": "show-round-board",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "visibilityConnect": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Setting\nValid value: 'disconnect'/'connect'\nFlag to start a updater when a live game show in visible area\nwhen visibilityConnect='connect' && connectLive = 'connect'"
+      },
+      "attribute": "visibility-connect",
+      "reflect": false
+    },
+    "connectLive": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Setting, flag to start a updater when a live game show in visible area\nValid value: 'disconnect'/'connect'\nFlag to start a updater when a live game show in visible area\nwhen 'connectLive'= 'connect'"
+      },
+      "attribute": "connect-live",
+      "reflect": false
+    },
+    "gameCategory": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Game Property, default ''"
+      },
+      "attribute": "game-category",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "livelobbyEndpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Setting, Live lobby endpoint, use to start a game\nLoad game info by this url if type=='live-casino-tables'"
+      },
+      "attribute": "livelobby-endpoint",
+      "reflect": false
+    },
+    "gameId": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "number | string",
+        "resolved": "number | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Game Property, GameId"
+      },
+      "attribute": "game-id",
+      "reflect": false
+    },
+    "gameName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Game Property, Game Name"
+      },
+      "attribute": "game-name",
+      "reflect": false
+    },
+    "subVendor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Game Property, Game SubVendor"
+      },
+      "attribute": "sub-vendor",
+      "reflect": false
+    },
+    "gameVendor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Game Property, Game vendor"
+      },
+      "attribute": "game-vendor",
+      "reflect": false
+    },
+    "hasFunMode": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Game Property, Game funMode"
+      },
+      "attribute": "has-fun-mode",
+      "reflect": false
+    },
+    "hasAnonymousFunMode": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Game Property, hasAnonymousFunMode"
+      },
+      "attribute": "has-anonymous-fun-mode",
+      "reflect": false
+    },
+    "platform": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Game Property, Game lunch platform"
+      },
+      "attribute": "platform",
+      "reflect": false,
+      "defaultValue": "'PC'"
+    },
+    "thumbnail": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Game Property, Game thumbnail"
+      },
+      "attribute": "thumbnail",
+      "reflect": false
+    },
+    "isFavorite": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Game Property, is Game Favorited"
+      },
+      "attribute": "is-favorite",
+      "reflect": false
+    },
+    "isNew": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Game Property, is Game new"
+      },
+      "attribute": "is-new",
+      "reflect": false
+    },
+    "cellSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Game Property, Customize game cell size"
+      },
+      "attribute": "cell-size",
+      "reflect": false
+    },
+    "gameTag": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Game Property, gameTag"
+      },
+      "attribute": "game-tag",
+      "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Game Property, type, isLiveCasino when type == 'live-casino-tables'"
+      },
+      "attribute": "type",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "gameInfo": {},
+    "isTableFull": {},
+    "hover": {}
+  }; }
+  static get events() { return [{
+      "method": "toggleFavoriteCasinoGameEvent",
+      "name": "toggleCasinoGameFavorite",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "number | string",
+        "resolved": "number | string",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "session",
+      "methodName": "onSessionChanged"
+    }, {
+      "propName": "userId",
+      "methodName": "onSessionChanged"
+    }, {
+      "propName": "isTableFull",
+      "methodName": "onTableFullChanged"
+    }, {
+      "propName": "connectLive",
+      "methodName": "connectLiveHandler"
+    }, {
+      "propName": "visibilityConnect",
+      "methodName": "visibilityConnectHandler"
+    }]; }
+  static get listeners() { return [{
+      "name": "mouseenter",
+      "method": "handleMouseOver",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mouseleave",
+      "method": "handleMouseOver",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "gameFavorited",
+      "method": "gameFavoritedHandler",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "gameDetailChange",
+      "method": "gameDetailChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}