@everymatrix/casino-game-thumb-view 1.13.5

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,128 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    playNow: 'Start now!',
+    new: 'NEW',
+    hot: 'Hot',
+    opens: 'Opens ',
+    full: 'table full - bet behind',
+    dealer: 'Dealer',
+  },
+  'zh-hk': {
+    playNow: '現在開始！',
+    new: '新的',
+    hot: '熱的',
+    opens: '打開 ',
+    full: '滿桌 - 下注',
+    dealer: '經銷商',
+  },
+  de: {
+    playNow: 'Jetzt beginnen!',
+    new: 'NEU',
+    hot: 'Hot',
+    opens: 'Öffnet ',
+    full: 'full - bet behind',
+    dealer: 'Dealer',
+  },
+  it: {
+    playNow: 'Inizia ora!',
+    new: 'NOVITÀ',
+    hot: 'HOT',
+    opens: 'Opens ',
+    full: 'table full - bet behind',
+    dealer: 'Dealer',
+  },
+  fr: {
+    playNow: 'Commencez maintenant',
+    new: 'Nouveau',
+    hot: 'Chaud',
+    opens: 'Ouvre ',
+    full: 'Table pleine - pari derrière',
+    dealer: 'Concessionnaire',
+  },
+  es: {
+    playNow: 'Juega ahora!',
+    new: 'NUEVO',
+    hot: 'HOT',
+    opens: 'Abiertas',
+    full: 'Mesa llena - Apostar de pie',
+    dealer: 'Dealer',
+  },
+  tr: {
+    playNow: 'Şimdi oyna',
+    new: 'YENİ',
+    hot: 'SICAK',
+    opens: 'Açılır ',
+    full: 'masa dolu - bet behind',
+    dealer: 'Dealer',
+  },
+  ru: {
+    playNow: 'Играть сейчас',
+    new: 'НОВАЯ',
+    hot: 'ГОРЯЧЕЙ',
+    opens: 'Opens ',
+    full: 'table full - bet behind',
+    dealer: 'Dealer',
+  },
+  ro: {
+    playNow: 'Joaca acum',
+    new: 'NOU',
+    hot: 'POPULAR',
+    opens: 'Opens ',
+    full: 'table full - bet behind',
+    dealer: 'Dealer',
+  },
+  hr: {
+    playNow: 'Započnite sada!',
+    new: 'NOVO',
+    hot: 'Vruće',
+    opens: 'Opens ',
+    full: 'table full - bet behind',
+    dealer: 'Dealer',
+  },
+  hu: {
+    playNow: 'Játsszon most!',
+    new: 'ÚJ',
+    hot: 'Hot',
+    opens: 'Opens ',
+    full: 'table full - bet behind',
+    dealer: 'Dealer',
+  },
+  pl: {
+    playNow: 'Rozpocznij teraz!',
+    new: 'NOWOŚĆ',
+    hot: 'Hot',
+    opens: 'Opens ',
+    full: 'table full - bet behind',
+    dealer: 'Dealer',
+  },
+  pt: {
+    playNow: 'Comece agora!',
+    new: 'NOVO',
+    hot: 'Hot',
+    opens: 'Abrir ',
+    full: 'Mesa cheia - aposta atrás',
+    dealer: 'Dealer',
+  },
+  sl: {
+    playNow: 'Začnite zdaj!',
+    new: 'NOVO',
+    hot: 'Vroče',
+    opens: 'Opens ',
+    full: 'table full - bet behind',
+    dealer: 'Dealer',
+  },
+  sr: {
+    playNow: 'Započnite sada!',
+    new: 'NOVO',
+    hot: 'Vruće',
+    opens: 'Opens ',
+    full: 'table full - bet behind',
+    dealer: 'Dealer',
+  }
+};
+export const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,65 @@
+import moment from 'moment';
+export function format(first, middle, last) {
+  return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+}
+const DEFAULT_AMOUNT_SEPARATOR = ',';
+/**
+ * @name numberWithSeparators
+ * @description A method that format number with seperator
+ * @param {number} value value to format
+ * @param {String} sep separator,default ','
+ * @returns {String} formated value
+ */
+export const numberWithSeparators = (value, sep = DEFAULT_AMOUNT_SEPARATOR) => {
+  if (value !== undefined && value !== null) {
+    return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, sep);
+  }
+  return '';
+};
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+export const isMobile = (userAgent) => {
+  return !!(userAgent.toLowerCase().match(/android/i) ||
+    userAgent.toLowerCase().match(/blackberry|bb/i) ||
+    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+export const addGameTag = (tags) => {
+  if ((tags === null || tags === void 0 ? void 0 : tags.length) === 0)
+    return '';
+  let tagName;
+  let differenceOfTime = 99999999999;
+  let firstToExpire;
+  const currentDate = new Date(Date.now());
+  tags.forEach((tag, index) => {
+    const startDateOfTag = new Date(tag.schedules[0].startTime);
+    const endDateOfTag = new Date(tag.schedules[0].endTime);
+    if (moment(endDateOfTag).diff(currentDate) < differenceOfTime) {
+      differenceOfTime = moment(endDateOfTag).diff(currentDate);
+      firstToExpire = index;
+    }
+    if (moment(currentDate).isAfter(startDateOfTag) && moment(currentDate).isBefore(endDateOfTag)) {
+      tagName = tags[firstToExpire].name;
+    }
+  });
+  return tagName;
+};
+export const convertGicBaccaratUpdateItem = (oriItem) => {
+  var _a, _b;
+  return {
+    winner: oriItem.Winner,
+    color: oriItem.Color,
+    location: {
+      column: (_a = oriItem.Location) === null || _a === void 0 ? void 0 : _a.Column,
+      row: (_b = oriItem.Location) === null || _b === void 0 ? void 0 : _b.Row
+    },
+    ties: (oriItem.Ties) | 0,
+    score: oriItem.Score,
+    playerPair: oriItem.PlayerPair,
+    bankerPair: oriItem.BankerPair
+  };
+};

package/dist/components/casino-extrainfo-baccarat.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CasinoExtrainfoBaccarat extends Components.CasinoExtrainfoBaccarat, HTMLElement {}
+export const CasinoExtrainfoBaccarat: {
+  prototype: CasinoExtrainfoBaccarat;
+  new (): CasinoExtrainfoBaccarat;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/casino-extrainfo-baccarat.js

@@ -0,0 +1,400 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { W as WINNER_COLOR } from './game-thumbnail.js';
+import { d as defineCustomElement$3 } from './casino-game-thumbnail-betlimit2.js';
+import { d as defineCustomElement$2 } from './casino-game-thumbnail-extrainfo2.js';
+
+var CasinoGameCategory;
+(function (CasinoGameCategory) {
+  CasinoGameCategory["ROULETTE"] = "ROULETTE";
+  CasinoGameCategory["POKER"] = "POKER";
+  CasinoGameCategory["BLACKJACK"] = "BLACKJACK";
+})(CasinoGameCategory || (CasinoGameCategory = {}));
+var BaccaratWinner;
+(function (BaccaratWinner) {
+  BaccaratWinner["PLAYER"] = "Player";
+  BaccaratWinner["WINNER"] = "Banker";
+  BaccaratWinner["TIE"] = "Tie";
+})(BaccaratWinner || (BaccaratWinner = {}));
+
+const BACCARAT_ROW = 6;
+const BACCARTAT_COLUMN = 40;
+const TIE_ANGLE = 135;
+const PLAYER_ANGLE = 45;
+class BaccaratSvg {
+  constructor() {
+    this.svgNS = 'http://www.w3.org/2000/svg';
+    this.svgVersion = '1.1';
+    this.markGroupExtraClass = {
+      name: '',
+      strokeWidth: 1.8,
+      cellPadding: 6
+    };
+  }
+  resetSvg() {
+    this.svgGroupObj.innerHTML = '';
+  }
+  createTag(tag, attrs) {
+    let oTag = document.createElementNS(this.svgNS, tag);
+    Object.keys(attrs).forEach((attr) => {
+      oTag.setAttribute(attr, attrs[attr]);
+    });
+    return oTag;
+  }
+  ;
+  //Y1 = Y2, X1=0;
+  createHLine(lineIdx) {
+    return this.createTag('line', {
+      'x1': 0,
+      'x2': this.svgWidth,
+      'y1': lineIdx * this.cellHeight,
+      'y2': lineIdx * this.cellHeight
+    });
+  }
+  createVLine(lineIdx) {
+    return this.createTag('line', {
+      'x1': lineIdx * this.cellWidth,
+      'x2': lineIdx * this.cellWidth,
+      'y1': 0,
+      'y2': this.svgHeight
+    });
+  }
+  createBaccaratBoard(parentEle) {
+    this.parentEle = parentEle;
+    this.svgWidth = parentEle.clientWidth;
+    this.cellWidth = this.svgWidth / BACCARTAT_COLUMN;
+    this.cellHeight = this.cellWidth;
+    this.svgHeight = this.cellHeight * BACCARAT_ROW;
+    let dynamicStyles = {};
+    if (this.svgWidth < 300) {
+      dynamicStyles = {
+        name: 'Min',
+        strokeWidth: 0.8,
+        cellPadding: 2
+      };
+    }
+    else if (this.svgWidth >= 300 && this.svgWidth < 500) {
+      dynamicStyles = {
+        name: 'Mid',
+        strokeWidth: 1.5,
+        cellPadding: 3.8
+      };
+    }
+    this.markGroupExtraClass = Object.assign(Object.assign({}, this.markGroupExtraClass), dynamicStyles);
+    this.markGroupExtraClass.fontSize = this.cellWidth - this.markGroupExtraClass.cellPadding * 0.8;
+    this.markGroupExtraClass.pairDotR = this.markGroupExtraClass.strokeWidth / 2;
+    this.markGroupExtraClass.pairBackDotR = this.markGroupExtraClass.pairDotR + 0.4;
+    let svgObj = this.createTag('svg', { 'xmlns': this.svgNS, 'version': this.svgVersion, 'width': '100%' });
+    let svgGroup = this.createTag('g', {
+      'style': 'cursor: pointer',
+      'stroke': '#a1acb696',
+      'stroke-width': '0.6px',
+      'fill': 'transparent'
+    });
+    let markGroup = this.createTag('g', {
+      'style': 'cursor: pointer', 'class': `BoardRoundsGroup ${this.markGroupExtraClass.name}`,
+      'stroke-width': this.markGroupExtraClass.strokeWidth, 'fill': 'transparent'
+    });
+    for (let i = 0; i < BACCARAT_ROW + 1; i++) {
+      svgGroup.appendChild(this.createHLine(i));
+    }
+    for (let i = 0; i < BACCARTAT_COLUMN + 1; i++) {
+      svgGroup.appendChild(this.createVLine(i));
+    }
+    parentEle.setAttribute('style', `height: ${this.svgHeight}px`);
+    svgObj.appendChild(svgGroup);
+    svgObj.appendChild(markGroup);
+    parentEle.replaceChildren(svgObj);
+    this.svgGroupObj = markGroup;
+  }
+  getRadius() {
+    return (this.cellHeight - this.markGroupExtraClass.cellPadding) / 2;
+  }
+  addAnimate(objToAddAnimate) {
+    let animate = this.createTag('animate', {
+      'attributeName': 'opacity', attributeType: 'XML', 'from': '0', to: 0.8, repeatCount: '5',
+      begin: '0s', dur: '1.5s', 'calcMode': 'spline', keySplines: "0.1 0.8 0.9 0.1", fill: 'freeze'
+    });
+    objToAddAnimate.appendChild(animate);
+  }
+  markNewRound(x, y, options, markNew = false) {
+    let centre = this.getCenterPoint(x, y);
+    let svgG = this.createTag('g', {
+      'class': `Round ${markNew ? 'NewRound' : ''} ${options.winner === BaccaratWinner.TIE ? 'Tie' : ''}`,
+      'part': `Round ${markNew ? 'NewRound' : ''}`, 'opacity': markNew ? 0.1 : 1
+    });
+    //RoundWinner: TIE
+    if (options.winner === BaccaratWinner.TIE) {
+      svgG.appendChild(this.createTieSvg(x, y));
+      this.svgGroupObj.appendChild(svgG);
+      if (options.ties && options.ties > 1) {
+        let text = this.createTag('text', {
+          'x': centre.cx - 1.5,
+          'y': centre.cy + this.markGroupExtraClass.fontSize / 2 - 1.1,
+          'fill': '#12153d',
+          'class': 'TieNumber',
+          'font-size': `${this.markGroupExtraClass.fontSize}px`,
+          'font-weight': this.markGroupExtraClass.fontSize > 7 ? 'bold' : ''
+        });
+        text.innerHTML = options.ties;
+        svgG.appendChild(text);
+      }
+      this.svgGroupObj.appendChild(svgG);
+      return;
+    }
+    svgG.appendChild(this.createTag('circle', {
+      r: this.getRadius(),
+      'class': 'Round',
+      'stroke': options.color,
+      'cx': x * this.cellHeight + (this.cellHeight) / 2,
+      'cy': y * this.cellHeight + (this.cellHeight) / 2
+    }));
+    if (options.ties) {
+      svgG.appendChild(this.createTieSvg(x, y));
+      if (options.ties > 1) {
+        let text = this.createTag('text', {
+          'x': centre.cx - 1.5,
+          'y': centre.cy + this.markGroupExtraClass.fontSize / 2 - 1.1,
+          'fill': '#12153d',
+          'class': 'TieNumber',
+          'font-size': `${this.markGroupExtraClass.fontSize}px`,
+          'font-weight': this.markGroupExtraClass.fontSize > 7 ? 'bold' : ''
+        });
+        text.innerHTML = options.ties;
+        svgG.appendChild(text);
+      }
+      this.svgGroupObj.appendChild(svgG);
+    }
+    if (options.bankerPair) {
+      let dots = this.createPairDot(x, y, options.pairColor.banker, PLAYER_ANGLE + 180);
+      dots.forEach(dot => svgG.appendChild(dot));
+    }
+    if (options.playerPair) {
+      let dots = this.createPairDot(x, y, options.pairColor.player, PLAYER_ANGLE);
+      dots.forEach(dot => svgG.appendChild(dot));
+    }
+    if (options.includeAnimate) {
+      this.addAnimate(svgG);
+    }
+    this.svgGroupObj.appendChild(svgG);
+  }
+  markRound(x, y, color, includeAnimate = false) {
+    let circleSvg = this.createTag('circle', {
+      r: this.getRadius(),
+      'class': 'Round',
+      'stroke': color,
+      'cx': x * this.cellHeight + (this.cellHeight) / 2,
+      'cy': y * this.cellHeight + (this.cellHeight) / 2
+    });
+    if (includeAnimate) {
+      this.addAnimate(circleSvg);
+    }
+    this.svgGroupObj.appendChild(circleSvg);
+  }
+  getCenterPoint(x, y) {
+    return {
+      'cx': x * this.cellHeight + (this.cellHeight) / 2,
+      'cy': y * this.cellHeight + (this.cellHeight) / 2
+    };
+  }
+  createTieSvg(x, y) {
+    let centerXY = this.getCenterPoint(x, y), angle = TIE_ANGLE, r = (this.cellHeight) / 2;
+    const x1 = centerXY.cx + r * Math.cos(angle * Math.PI / 180);
+    const y1 = centerXY.cy + r * Math.sin(angle * Math.PI / 180);
+    const x2 = centerXY.cx + r * Math.cos((angle + 180) * Math.PI / 180);
+    const y2 = centerXY.cy + r * Math.sin((angle + 180) * Math.PI / 180);
+    return this.createTag('line', {
+      x1, y1, x2, y2, 'class': 'Tie',
+      'stroke': 'green', 'opacity': '0.8', 'stroke-width': '1.8px'
+    });
+  }
+  createPairDot(x, y, pairColor, angle) {
+    let centerXY = this.getCenterPoint(x, y), r = this.getRadius() + this.markGroupExtraClass.pairDotR;
+    const cx = centerXY.cx + r * Math.cos(angle * Math.PI / 180);
+    const cy = centerXY.cy + r * Math.sin(angle * Math.PI / 180);
+    return [
+      this.createTag('circle', {
+        cx, cy, r: this.markGroupExtraClass.pairBackDotR, 'class': 'DotBack',
+        'stroke': '#fff'
+      }),
+      this.createTag('circle', {
+        cx, cy, r: this.markGroupExtraClass.pairDotR, 'class': 'Dot',
+        'stroke': pairColor, 'stroke-width': '0.8px', 'fill': pairColor
+      })
+    ];
+  }
+  markTie(x, y, includeAnimate = false) {
+    let line = this.createTieSvg(x, y);
+    if (includeAnimate) {
+      this.addAnimate(line);
+    }
+    this.svgGroupObj.appendChild(line);
+  }
+  markPair(x, y, pairColor, angle) {
+    let centerXY = this.getCenterPoint(x, y), r = this.getRadius() + this.markGroupExtraClass.pairDotR;
+    const cx = centerXY.cx + r * Math.cos(angle * Math.PI / 180);
+    const cy = centerXY.cy + r * Math.sin(angle * Math.PI / 180);
+    this.svgGroupObj.appendChild(this.createTag('circle', {
+      cx, cy, r: this.markGroupExtraClass.pairBackDotR, 'class': 'DotBack',
+      'stroke': '#fff'
+    }));
+    this.svgGroupObj.appendChild(this.createTag('circle', {
+      cx, cy, r: this.markGroupExtraClass.pairDotR, 'class': 'Dot',
+      'stroke': pairColor, 'stroke-width': '0.8px', 'fill': pairColor
+    }));
+  }
+  markBankerPair(x, y, pairColor) {
+    this.markPair(x, y, pairColor, 225);
+  }
+  markPlayerPair(x, y, pairColor) {
+    this.markPair(x, y, pairColor, 45);
+  }
+}
+
+const casinoExtrainfoBaccaratCss = ":host {\n  display: block;\n}\n\n.BaccaratBoard {\n  container-type: inline-size;\n  min-height: 30px;\n  width: 100%;\n}\n.BaccaratBoard svg {\n  background: #fff;\n  opacity: 0.99;\n  height: 100%;\n}\n\n.LiveProps.BaccaratProps div.LiveIcons {\n  margin-bottom: 0px;\n  padding: 0px;\n  width: 100%;\n}\n\nsvg circle {\n  transition: stroke-dashoffset 0s ease 2s;\n}\n\ng.BoardRoundsGroup {\n  stroke-width: 1.8px;\n}\n\n@container (max-width: 300px) {\n  g.BoardRoundsGroup {\n    stroke-width: 0.9px;\n  }\n}\nsvg .Round.NewRound {\n  opacity: 1;\n  -webkit-animation-name: fadeInFromNone;\n  animation-name: fadeInFromNone;\n  -webkit-animation-duration: 1.5s;\n  animation-duration: 1.5s;\n  -webkit-animation-fill-mode: both;\n  animation-fill-mode: both;\n}\n\n@-webkit-keyframes fadeInFromNone {\n  0% {\n    display: none;\n    opacity: 0;\n  }\n  1% {\n    display: block;\n    opacity: 0;\n  }\n  100% {\n    display: block;\n    opacity: 1;\n  }\n}\n@-moz-keyframes fadeInFromNone {\n  0% {\n    display: none;\n    opacity: 0;\n  }\n  1% {\n    display: block;\n    opacity: 0;\n  }\n  100% {\n    display: block;\n    opacity: 1;\n  }\n}\n@-o-keyframes fadeInFromNone {\n  0% {\n    display: none;\n    opacity: 0;\n  }\n  1% {\n    display: block;\n    opacity: 0;\n  }\n  30% {\n    display: block;\n    opacity: 1;\n  }\n  60% {\n    display: block;\n    opacity: 0;\n  }\n  100% {\n    display: block;\n    opacity: 1;\n  }\n}\n@keyframes fadeInFromNone {\n  0% {\n    display: none;\n    opacity: 0;\n  }\n  1% {\n    display: block;\n    opacity: 0;\n  }\n  30% {\n    display: block;\n    opacity: 1;\n  }\n  60% {\n    display: block;\n    opacity: 0;\n  }\n  100% {\n    display: block;\n    opacity: 1;\n  }\n}";
+
+const CasinoExtrainfoBaccarat$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.baccaratSvg = new BaccaratSvg();
+    this.isBoardInited = false;
+    this.filledCells = [];
+  }
+  gameDetailsHandler(newVal, oldVal) {
+    if (newVal.isOpen && (!oldVal || !oldVal.isOpen)) {
+      if (this.showRoundBoard) {
+        setTimeout(() => {
+          this.initBaccaratRoundsBoard();
+        }, 100);
+      }
+    }
+  }
+  async onGameLoaded(gameInfo) {
+    var _a;
+    this.gameInfo = gameInfo;
+    this.gameDetails = this.gameInfo.details;
+    (_a = this.infoWrapperRef) === null || _a === void 0 ? void 0 : _a.onGameLoaded(this.gameInfo);
+  }
+  /**
+   * Called when received update from updater
+   * @param details
+   */
+  async onGameDetailUpdated(details) {
+    var _a;
+    this.gameInfo.details = this.gameDetails = details;
+    this.gameDetails = Object.assign({}, this.gameDetails);
+    (_a = this.infoWrapperRef) === null || _a === void 0 ? void 0 : _a.onGameDetailUpdated(details);
+    // init board when the svg board init finished
+    setTimeout(() => {
+      this.isBoardInited = true;
+    }, 200);
+  }
+  async onBaccaratResultChanged(result) {
+    if (!result || !this.baccaratRef || this.isResetingRoundBoard) {
+      return;
+    }
+    // For Tie round to mark, latestRound
+    let latestRound, resetRoundBoardCells = () => {
+      console.log('Reset Baccarat Board.');
+      this.filledCells = [];
+      this.baccaratSvg.resetSvg();
+      latestRound = null;
+    };
+    // Reset round board to avoid the reset(result==[]) update come earlier than last round,
+    // Ignore if the result.length == 0 for temporary
+    if (this.isBoardInited &&
+      (result.length == 0 ||
+        (result.length == 1 &&
+          (result[0].winner == BaccaratWinner.TIE ||
+            (result[0].location.column == 0 && result[0].location.row == 0))))) {
+      this.isResetingRoundBoard = true;
+      resetRoundBoardCells();
+      setTimeout(() => {
+        this.isResetingRoundBoard = false;
+      }, 1000);
+    }
+    result.forEach((item, i) => {
+      //Mark the Tie when Tie round is the first cell(0,0)
+      if (item.winner == BaccaratWinner.TIE) {
+        if (i == result.length - 1 &&
+          (!latestRound ||
+            (latestRound &&
+              latestRound.location.column == 0 &&
+              latestRound.location.row == 0))) {
+          let firstTieCellKey = '0-0-T';
+          if (this.filledCells.indexOf(firstTieCellKey) == -1) {
+            this.baccaratSvg.markNewRound(0, 0, Object.assign(Object.assign({}, item), { pairColor: WINNER_COLOR }), this.isBoardInited);
+            this.filledCells.push(firstTieCellKey);
+          }
+        }
+        return;
+      }
+      //cellKey to mark if a round has been marked
+      const cellKey = `${item.location.column}-${item.location.row}`;
+      const tCellKey = `${cellKey}-T`;
+      if (item.ties > 0 && this.filledCells.indexOf(tCellKey) == -1) {
+        this.baccaratSvg.markNewRound(item.location.column, item.location.row, Object.assign(Object.assign({}, item), { winner: BaccaratWinner.TIE }), this.isBoardInited);
+        this.filledCells.push(tCellKey);
+      }
+      latestRound = item;
+      //If current cell has been filled,duplicated data
+      if (this.filledCells.indexOf(cellKey) == -1) {
+        this.baccaratSvg.markNewRound(item.location.column, item.location.row, Object.assign(Object.assign({}, item), { pairColor: WINNER_COLOR }), this.isBoardInited);
+        this.filledCells.push(cellKey);
+      }
+    });
+    return;
+  }
+  initBaccaratRoundsBoard() {
+    var _a;
+    this.baccaratSvg.createBaccaratBoard(this.baccaratRef);
+    if (((_a = this.gameDetails.results) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.onBaccaratResultChanged(this.gameDetails.results);
+    }
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("casino-game-thumbnail-extrainfo", { ref: (el) => (this.infoWrapperRef = el), language: this.language }, ((_a = this.gameDetails) === null || _a === void 0 ? void 0 : _a.isOpen) && this.showRoundBoard && (h("div", { slot: "category-details", class: "LiveIcons", part: "LiveIcons" }, h("div", { id: "boardContainer", part: "BaccaratBoard", class: "BaccaratBoard", ref: (el) => (this.baccaratRef = el) }))))));
+  }
+  static get watchers() { return {
+    "gameDetails": ["gameDetailsHandler"]
+  }; }
+  static get style() { return casinoExtrainfoBaccaratCss; }
+}, [0, "casino-extrainfo-baccarat", {
+    "language": [1],
+    "showRoundBoard": [4, "show-round-board"],
+    "gameInfo": [32],
+    "gameDetails": [32],
+    "onGameLoaded": [64],
+    "onGameDetailUpdated": [64],
+    "onBaccaratResultChanged": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["casino-extrainfo-baccarat", "casino-game-thumbnail-betlimit", "casino-game-thumbnail-extrainfo"];
+  components.forEach(tagName => { switch (tagName) {
+    case "casino-extrainfo-baccarat":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CasinoExtrainfoBaccarat$1);
+      }
+      break;
+    case "casino-game-thumbnail-betlimit":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "casino-game-thumbnail-extrainfo":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CasinoExtrainfoBaccarat = CasinoExtrainfoBaccarat$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CasinoExtrainfoBaccarat, defineCustomElement };

package/dist/components/casino-extrainfo-blackjack.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CasinoExtrainfoBlackjack extends Components.CasinoExtrainfoBlackjack, HTMLElement {}
+export const CasinoExtrainfoBlackjack: {
+  prototype: CasinoExtrainfoBlackjack;
+  new (): CasinoExtrainfoBlackjack;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;