@everymatrix/casino-game-thumb-view 1.43.4 → 1.45.0

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

@@ -1,17 +1,17 @@
-import { r as registerInstance, h, H as Host } from './index-1e44dd9f.js';
-import { b as WINNER_COLOR } from './game-thumbnail-0a56ee03.js';
+import { r as registerInstance, h, H as Host } from './index-8c9a8030.js';
+import { b as WINNER_COLOR } from './game-thumbnail-035e97e2.js';
 
 var CasinoGameCategory;
 (function (CasinoGameCategory) {
-  CasinoGameCategory["ROULETTE"] = "ROULETTE";
-  CasinoGameCategory["POKER"] = "POKER";
-  CasinoGameCategory["BLACKJACK"] = "BLACKJACK";
+    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["PLAYER"] = "Player";
+    BaccaratWinner["WINNER"] = "Banker";
+    BaccaratWinner["TIE"] = "Tie";
 })(BaccaratWinner || (BaccaratWinner = {}));
 
 const BACCARAT_ROW = 6;
@@ -19,344 +19,349 @@ 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
-      };
+    constructor() {
+        this.svgNS = 'http://www.w3.org/2000/svg';
+        this.svgVersion = '1.1';
+        this.markGroupExtraClass = {
+            name: '',
+            strokeWidth: 1.8,
+            cellPadding: 6
+        };
     }
-    else if (this.svgWidth >= 300 && this.svgWidth < 500) {
-      dynamicStyles = {
-        name: 'Mid',
-        strokeWidth: 1.5,
-        cellPadding: 3.8
-      };
+    resetSvg() {
+        this.svgGroupObj.innerHTML = '';
     }
-    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));
+    createTag(tag, attrs) {
+        let oTag = document.createElementNS(this.svgNS, tag);
+        Object.keys(attrs).forEach((attr) => {
+            oTag.setAttribute(attr, attrs[attr]);
+        });
+        return oTag;
     }
-    for (let i = 0; i < BACCARTAT_COLUMN + 1; i++) {
-      svgGroup.appendChild(this.createVLine(i));
+    ;
+    //Y1 = Y2, X1=0;
+    createHLine(lineIdx) {
+        return this.createTag('line', {
+            'x1': 0,
+            'x2': this.svgWidth,
+            'y1': lineIdx * this.cellHeight,
+            'y2': lineIdx * this.cellHeight
+        });
     }
-    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' : ''
+    createVLine(lineIdx) {
+        return this.createTag('line', {
+            'x1': lineIdx * this.cellWidth,
+            'x2': lineIdx * this.cellWidth,
+            'y1': 0,
+            'y2': this.svgHeight
         });
-        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' : ''
+    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'
         });
-        text.innerHTML = options.ties;
-        svgG.appendChild(text);
-      }
-      this.svgGroupObj.appendChild(svgG);
+        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;
     }
-    if (options.bankerPair) {
-      let dots = this.createPairDot(x, y, options.pairColor.banker, PLAYER_ANGLE + 180);
-      dots.forEach(dot => svgG.appendChild(dot));
+    getRadius() {
+        return (this.cellHeight - this.markGroupExtraClass.cellPadding) / 2;
     }
-    if (options.playerPair) {
-      let dots = this.createPairDot(x, y, options.pairColor.player, PLAYER_ANGLE);
-      dots.forEach(dot => svgG.appendChild(dot));
+    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);
     }
-    if (options.includeAnimate) {
-      this.addAnimate(svgG);
+    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);
     }
-    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);
+    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);
     }
-    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);
+    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);
     }
-    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 CasinoExtrainfoBaccaratStyle0 = casinoExtrainfoBaccaratCss;
 
 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);
-      }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.baccaratSvg = new BaccaratSvg();
+        this.isBoardInited = false;
+        this.filledCells = [];
+        this.language = undefined;
+        this.showRoundBoard = undefined;
+        this.gameInfo = undefined;
+        this.gameDetails = undefined;
     }
-  }
-  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;
+    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);
     }
-    // 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);
+    /**
+     * 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);
     }
-    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);
-          }
+    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;
-      }
-      //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"]
-  }; }
+    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, { key: '88be397ce6762f3a57c76c84b40f48dc2ba23db7' }, h("casino-game-thumbnail-extrainfo", { key: '177c57f40ef84d7dfa0f458336e558e195aa9ac6', ref: (el) => (this.infoWrapperRef = el), language: this.language }, ((_a = this.gameDetails) === null || _a === void 0 ? void 0 : _a.isOpen) && this.showRoundBoard && (h("div", { key: '7b2db6ad68e6d9bcac9b97785b2c05b05d146836', slot: "category-details", class: "LiveIcons", part: "LiveIcons" }, h("div", { key: '004301f9c4f9bb574757e4eace077bd9fac57472', id: "boardContainer", part: "BaccaratBoard", class: "BaccaratBoard", ref: (el) => (this.baccaratRef = el) }))))));
+    }
+    static get watchers() { return {
+        "gameDetails": ["gameDetailsHandler"]
+    }; }
 };
-CasinoExtrainfoBaccarat.style = casinoExtrainfoBaccaratCss;
+CasinoExtrainfoBaccarat.style = CasinoExtrainfoBaccaratStyle0;
 
 export { CasinoExtrainfoBaccarat as casino_extrainfo_baccarat };