@everymatrix/casino-game-thumb-view 1.32.4 → 1.33.1

package/dist/esm/casino-extrainfo-baccarat.entry.js

@@ -0,0 +1,362 @@
+import { r as registerInstance, h, H as Host } from './index-1e44dd9f.js';
+import { b as WINNER_COLOR } from './game-thumbnail-0a56ee03.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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"]
+  }; }
+};
+CasinoExtrainfoBaccarat.style = casinoExtrainfoBaccaratCss;
+
+export { CasinoExtrainfoBaccarat as casino_extrainfo_baccarat };

package/dist/esm/casino-extrainfo-blackjack.entry.js

@@ -0,0 +1,54 @@
+import { r as registerInstance, h, H as Host } from './index-1e44dd9f.js';
+import { D as DEFAULT_BLACKJACK_TOTAL_SEATS } from './game-thumbnail-0a56ee03.js';
+import { t as translate } from './locale.utils-e0cf897e.js';
+
+const SeatSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14">
+  <path
+    d="M11.58 6c-1.17 0-2.13.95-2.13 2.12v.4a8.82 8.82 0 00-2.92-.4c-1.54 0-2.45.22-2.92.4v-.4A2.136 2.136 0 001.48 6a1.33 1.33 0 00-.5 2.55c.14.07.24.21.24.37l.26 1.06c0 .96.73 1.75 1.65 1.85a.65.65 0 00.28 1.23.65.65 0 00.3-1.22h5.64a.65.65 0 00.3 1.22.65.65 0 00.28-1.23c.93-.1 1.65-.9 1.65-1.85l.27-1.06c0-.16.1-.3.24-.37A1.33 1.33 0 0011.58 6z"/>
+  <path
+    d="M4.34 7.5c.55-.1 1.27-.17 2.2-.17.91 0 1.63.07 2.18.17.21-.96.9-1.74 1.8-2.1V4a3.99 3.99 0 00-7.97 0v1.4c.9.36 1.58 1.14 1.79 2.1z"/>
+</svg>
+`;
+
+const casinoExtrainfoBlackjackCss = ":host{display:block}.OpenSeat,.ClosedSeat{display:inline-block;width:16px;height:16px;margin-right:4px}.OpenSeat svg,.ClosedSeat svg{width:100%;height:100%}.OpenSeat{animation:flip-closed-seat 2s both;-webkit-animation:flip-closed-seat 2s both;-webkit-backface-visibility:visible;backface-visibility:visible}.ClosedSeat{animation:flip-open 2s both;-webkit-animation:flip-open 2s both;-webkit-backface-visibility:visible;backface-visibility:visible}.OpenSeat svg{fill:transparent;stroke:var(--emfe-w-color-white, #FFFFFF)}.ClosedSeat svg{fill:var(--emfe-w-color-white, #FFFFFF)}.FullTable{display:flex;position:relative;z-index:10;height:20px;padding:1px 4px 1px 0;align-items:center;border-radius:3px;font-size:12px;white-space:normal;text-transform:uppercase;-webkit-animation-name:silde-in-from-left;animation-name:silde-in-from-left;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.FullTable svg{width:100%;height:100%;fill:var(--emfe-w-color-white, #FFFFFF)}.FullTable.ClosedSeat{margin-right:-3px}";
+
+const CasinoExtrainfoBlackjack = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  /**
+   * Generate Jackpot live seats info
+   * @param totalSeats
+   * @param occupiedSeats
+   */
+  generateBlackJackSeats(totalSeats = DEFAULT_BLACKJACK_TOTAL_SEATS, occupiedSeats = []) {
+    let seatsStatus = [];
+    for (let i = 0; i < totalSeats; i++) {
+      seatsStatus.push({
+        seatNo: i,
+        isClosed: occupiedSeats.indexOf((i + 1).toString()) > -1,
+      });
+    }
+    this.isTableFull = totalSeats == occupiedSeats.length;
+    return seatsStatus;
+  }
+  async onGameLoaded(gameInfo) {
+    var _a, _b, _c;
+    this.gameInfo = gameInfo;
+    this.gameDetails = this.gameInfo.details;
+    this.seatsStatus = this.generateBlackJackSeats((_a = this.gameDetails) === null || _a === void 0 ? void 0 : _a.totalSeats, (_b = this.gameDetails) === null || _b === void 0 ? void 0 : _b.currentOccupiedSeats);
+    (_c = this.infoWrapperRef) === null || _c === void 0 ? void 0 : _c.onGameLoaded(gameInfo);
+  }
+  async onGameDetailUpdated(details) {
+    var _a, _b;
+    this.gameInfo.details = this.gameDetails = details;
+    this.seatsStatus = this.generateBlackJackSeats((_a = this.gameDetails) === null || _a === void 0 ? void 0 : _a.totalSeats, (_b = this.gameDetails) === null || _b === void 0 ? void 0 : _b.currentOccupiedSeats);
+    this.gameDetails = Object.assign({}, this.gameDetails);
+  }
+  render() {
+    return (h(Host, null, h("casino-game-thumbnail-extrainfo", { ref: (el) => (this.infoWrapperRef = el), language: this.language }, this.gameDetails && this.gameDetails.isOpen && (h("div", { slot: "category-details", class: "LiveIcons", part: "LiveIcons" }, this.isTableFull ? (h("span", { class: "FullTable", part: "FullTable" }, translate('full', this.language))) : (this.seatsStatus.map((seatStatus) => (h("span", { class: `${seatStatus.isClosed ? 'ClosedSeat' : 'OpenSeat'} svg-container`, id: `s${seatStatus.seatNo}`, part: `${seatStatus.isClosed ? 'ClosedSeat' : 'OpenSeat'} svg-container`, innerHTML: SeatSvg })))))))));
+  }
+};
+CasinoExtrainfoBlackjack.style = casinoExtrainfoBlackjackCss;
+
+export { CasinoExtrainfoBlackjack as casino_extrainfo_blackjack };

package/dist/esm/casino-extrainfo-roulette.entry.js

@@ -0,0 +1,41 @@
+import { r as registerInstance, h, H as Host } from './index-1e44dd9f.js';
+import { R as ROULETTE_COLOR_MAP, W as WIDGETTYPE_GAMECATEGORY } from './game-thumbnail-0a56ee03.js';
+
+const casinoExtrainfoRouletteCss = ":host{display:block;font-family:system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}.Blue{color:#4d90a7}.Red{background-color:red}.Black{background-color:var(--emfe-w-color-black, #000000)}.Green{background-color:#56A80A}.White{background-color:var(--emfe-w-color-white, #FFFFFF)}.Yellow{background-color:#eeca3d}.Gold{background-color:#866d0c}.Orange{background-color:#574708}.Purple{background-color:#330033}";
+
+const CasinoExtrainfoRoulette = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Language
+     */
+    this.language = 'en';
+  }
+  async onGameLoaded(gameInfo) {
+    var _a;
+    this.gameInfo = Object.assign({}, gameInfo);
+    this.gameDetails = this.gameInfo.details ? Object.assign({}, this.gameInfo.details) : null;
+    (_a = this.infoWrapperRef) === null || _a === void 0 ? void 0 : _a.onGameLoaded(gameInfo);
+  }
+  async onGameDetailUpdated(details) {
+    this.gameInfo.details = this.gameDetails = details;
+    this.gameInfo = Object.assign({}, this.gameInfo);
+    this.gameDetails = Object.assign({}, this.gameDetails);
+  }
+  getRouletteNumberColor(value) {
+    return ROULETTE_COLOR_MAP[value];
+  }
+  render() {
+    var _a, _b, _c, _d;
+    const isDouble = this.gameDetails ?
+      this.gameDetails.category.toLowerCase() ===
+        WIDGETTYPE_GAMECATEGORY.doubleballroulette : false;
+    let rouletteNumbers = (isDouble
+      ? (_a = this.gameDetails) === null || _a === void 0 ? void 0 : _a.currentDoubleBallRouletteNumbers
+      : (_b = this.gameDetails) === null || _b === void 0 ? void 0 : _b.currentRouletteNumbers) || [];
+    return (h(Host, null, h("casino-game-thumbnail-extrainfo", { ref: (el) => (this.infoWrapperRef = el), language: this.language }, h("div", { slot: "category-details", class: `LiveIcons ${((_c = this.gameDetails) === null || _c === void 0 ? void 0 : _c.isOpen) ? 'GameBackdrop' : ''}`, part: `LiveIcons ${((_d = this.gameDetails) === null || _d === void 0 ? void 0 : _d.isOpen) ? 'GameBackdrop' : ''}` }, rouletteNumbers.slice(0, 5).map((rNum, idx) => isDouble === true ? (h("div", { class: "Double", part: "Double" }, h("span", { id: `s${idx}0`, class: `LatestResult ${idx == 0 ? 'First' : ''} ${this.showLiveClass ? 'FirstElementAnimated' : ''} ${this.getRouletteNumberColor(rNum[0])}` }, ' ', rNum[0]), h("span", { id: `s${idx}1`, class: `LatestResult ${idx == 0 ? 'First' : ''} ${this.showLiveClass ? 'FirstElementAnimated' : ''} ${this.getRouletteNumberColor(rNum[1])}` }, ' ', rNum[1]))) : (h("span", { id: `s${idx}`, class: `LatestResult ${idx == 0 ? 'First' : ''} ${this.showLiveClass ? 'FirstElementAnimated' : ''} ${this.getRouletteNumberColor(rNum)}` }, ' ', rNum)))))));
+  }
+};
+CasinoExtrainfoRoulette.style = casinoExtrainfoRouletteCss;
+
+export { CasinoExtrainfoRoulette as casino_extrainfo_roulette };

package/dist/esm/casino-game-thumb-view.js

@@ -0,0 +1,17 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-1e44dd9f.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-game-thumbnail-betlimit_2",[[4,"casino-game-thumbnail-extrainfo",{"language":[1],"betLimit":[32],"gameInfo":[32],"gameDetails":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64]}],[0,"casino-game-thumbnail-betlimit",{"betLimit":[16],"numberOfPlayers":[2,"number-of-players"]}]]],["casino-extrainfo-baccarat",[[0,"casino-extrainfo-baccarat",{"language":[1],"showRoundBoard":[4,"show-round-board"],"gameInfo":[32],"gameDetails":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64],"onBaccaratResultChanged":[64]}]]],["casino-extrainfo-blackjack",[[0,"casino-extrainfo-blackjack",{"language":[1],"gameInfo":[32],"gameDetails":[32],"seatsStatus":[32],"isTableFull":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64]}]]],["casino-extrainfo-roulette",[[0,"casino-extrainfo-roulette",{"language":[1],"gameInfo":[32],"gameDetails":[32],"showLiveClass":[32],"onGameLoaded":[64],"onGameDetailUpdated":[64]}]]],["casino-normal-game-thumbnail",[[0,"casino-normal-game-thumbnail",{"language":[1],"onGameLoaded":[64]}]]],["casino-game-thumb-view_2",[[1,"casino-game-thumb-view",{"language":[1],"endpoint":[1],"userId":[8,"user-id"],"showGameName":[4,"show-game-name"],"session":[1],"showFavoredCategory":[4,"show-favored-category"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"integratedGameframeMobile":[4,"integrated-gameframe-mobile"],"gamepageModalurl":[1,"gamepage-modalurl"],"integratedGameframeDesktop":[4,"integrated-gameframe-desktop"],"loadDetails":[4,"load-details"],"showRoundBoard":[4,"show-round-board"],"visibilityConnect":[1,"visibility-connect"],"connectLive":[1,"connect-live"],"gameCategory":[1,"game-category"],"livelobbyEndpoint":[1,"livelobby-endpoint"],"gameId":[8,"game-id"],"gameName":[1,"game-name"],"subVendor":[1,"sub-vendor"],"gameVendor":[1,"game-vendor"],"hasFunMode":[4,"has-fun-mode"],"hasAnonymousFunMode":[4,"has-anonymous-fun-mode"],"platform":[1],"thumbnail":[1],"isFavorite":[4,"is-favorite"],"isNew":[4,"is-new"],"cellSize":[1,"cell-size"],"gameTag":[1,"game-tag"],"type":[1],"gameInfo":[32],"isTableFull":[32],"hover":[32]},[[1,"mouseenter","handleMouseOver"],[1,"mouseleave","handleMouseOver"],[4,"gameFavorited","gameFavoritedHandler"],[0,"gameDetailChange","gameDetailChangeHandler"]]],[4,"casino-game-thumbnail-overlay",{"gamepageModalurl":[1,"gamepage-modalurl"],"integratedGameframeMobile":[4,"integrated-gameframe-mobile"],"integratedGameframeDesktop":[4,"integrated-gameframe-desktop"],"language":[1],"gameName":[1,"game-name"],"gameVendor":[1,"game-vendor"],"gameId":[8,"game-id"],"hasFunMode":[4,"has-fun-mode"]}]]]], options);
+});