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

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

@@ -0,0 +1,62 @@
+import { Component, Host, h, Method, Prop } from '@stencil/core';
+export class CasinoNormalGameThumbnail {
+  async onGameLoaded(gameInfo) {
+    var _a;
+    (_a = this.infoWrapperRef) === null || _a === void 0 ? void 0 : _a.onGameLoaded(gameInfo);
+  }
+  render() {
+    return (h(Host, null,
+      h("casino-game-thumbnail-extrainfo", { ref: (el) => (this.infoWrapperRef = el), language: this.language })));
+  }
+  static get is() { return "casino-normal-game-thumbnail"; }
+  static get originalStyleUrls() { return {
+    "$": ["casino-normal-game-thumbnail.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["casino-normal-game-thumbnail.css"]
+  }; }
+  static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": false
+    }
+  }; }
+  static get methods() { return {
+    "onGameLoaded": {
+      "complexType": {
+        "signature": "(gameInfo: CasinoGameThumbnailInfo) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "CasinoGameThumbnailInfo": {
+            "location": "import",
+            "path": "../../models/casino-game-thumb-view"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

package/dist/collection/constants/game-thumbnail.js

@@ -0,0 +1,85 @@
+export const GameThumbnail = {
+  GAME_CLASS_BACKGROUND_IMG: 'GameContainer',
+  GAME_CLASS_OVERLAY: '',
+  GAME_CLASS_GameInnerContainer: 'GameInnerContainer'
+};
+export const DEFAULT_BLACKJACK_TOTAL_SEATS = 7;
+export const MONEY_WHEEL_COLOR_MAP = {
+  '01': 'Yellow',
+  '02': 'Blue',
+  10: 'Green',
+  40: 'Red',
+  '05': 'Purple',
+  20: 'Orange',
+  X7: 'Gold',
+  X2: 'Gold',
+};
+export const ROULETTE_COLOR_MAP = {
+  1: 'Red',
+  3: 'Red',
+  5: 'Red',
+  7: 'Red',
+  9: 'Red',
+  12: 'Red',
+  14: 'Red',
+  16: 'Red',
+  18: 'Red',
+  19: 'Red',
+  21: 'Red',
+  23: 'Red',
+  25: 'Red',
+  27: 'Red',
+  30: 'Red',
+  32: 'Red',
+  34: 'Red',
+  36: 'Red',
+  2: 'Black',
+  4: 'Black',
+  6: 'Black',
+  8: 'Black',
+  10: 'Black',
+  11: 'Black',
+  13: 'Black',
+  15: 'Black',
+  17: 'Black',
+  20: 'Black',
+  22: 'Black',
+  24: 'Black',
+  26: 'Black',
+  28: 'Black',
+  29: 'Black',
+  31: 'Black',
+  33: 'Black',
+  35: 'Black',
+  0: 'Green',
+  '00': 'Green',
+};
+export var GAME_CATEGORY;
+(function (GAME_CATEGORY) {
+  GAME_CATEGORY["BLACKJACK"] = "blackjack";
+  GAME_CATEGORY["ROULETTE"] = "roulette";
+  GAME_CATEGORY["DOUBLEBALL_ROULETTE"] = "doubleballroulette";
+  GAME_CATEGORY["BACCARAT"] = "baccarat";
+})(GAME_CATEGORY || (GAME_CATEGORY = {}));
+export var GAME_TYPE;
+(function (GAME_TYPE) {
+  GAME_TYPE["NORMAL_CASINO"] = "casino-games";
+  GAME_TYPE["LIVE_CASINO"] = "live-casino-tables";
+  GAME_TYPE["OTHER"] = "";
+})(GAME_TYPE || (GAME_TYPE = {}));
+export const WIDGETTYPE_GAMECATEGORY = {
+  'roulette': 'roulette',
+  'doubleballroulette': 'doubleballroulette',
+  'blackjack': 'blackjack',
+  'baccarat': 'baccarat'
+};
+export const WIDGETTYPE_CLASS = {
+  'roulette': 'RoulleteProps',
+  'doubleballroulette': 'RoulleteProps',
+  'blackjack': 'BlackjackDisplay',
+  'baccarat': 'BaccaratProps'
+};
+export const WINNER_COLOR = {
+  'banker': 'red',
+  'player': 'blue'
+};

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

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

@@ -0,0 +1,12 @@
+export var CasinoGameCategory;
+(function (CasinoGameCategory) {
+  CasinoGameCategory["ROULETTE"] = "ROULETTE";
+  CasinoGameCategory["POKER"] = "POKER";
+  CasinoGameCategory["BLACKJACK"] = "BLACKJACK";
+})(CasinoGameCategory || (CasinoGameCategory = {}));
+export var BaccaratWinner;
+(function (BaccaratWinner) {
+  BaccaratWinner["PLAYER"] = "Player";
+  BaccaratWinner["WINNER"] = "Banker";
+  BaccaratWinner["TIE"] = "Tie";
+})(BaccaratWinner || (BaccaratWinner = {}));

package/dist/collection/models/currency-symbols.js

@@ -0,0 +1,173 @@
+/* eslint-disable quote-props */
+export const currenciesSymbols = {
+  'AED': 'د.إ',
+  'AFN': '؋',
+  'ALL': 'L',
+  'AMD': '֏',
+  'ANG': 'ƒ',
+  'AOA': 'Kz',
+  'ARS': '$',
+  'AUD': '$',
+  'AWG': 'ƒ',
+  'AZN': 'ман',
+  'BAM': 'KM',
+  'BBD': '$',
+  'BDT': '৳',
+  'BGN': 'лв',
+  'BHD': '.د.ب',
+  'BIF': 'FBu',
+  'BMD': '$',
+  'BND': '$',
+  'BOB': '$b',
+  'BRL': 'R$',
+  'BSD': '$',
+  'BTC': '฿',
+  'BTN': 'Nu.',
+  'BWP': 'P',
+  'BYR': 'p.',
+  'BZD': 'BZ$',
+  'CAD': '$',
+  'CDF': 'FC',
+  'CHF': 'CHF',
+  'CLP': '$',
+  'CNY': '¥',
+  'COP': '$',
+  'CRC': '₡',
+  'CUC': '$',
+  'CUP': '₱',
+  'CVE': '$',
+  'CZK': 'Kč',
+  'DJF': 'Fdj',
+  'DKK': 'kr',
+  'DOP': 'RD$',
+  'DZD': 'دج',
+  'EEK': 'kr',
+  'EGP': '£',
+  'ERN': 'Nfk',
+  'ETB': 'Br',
+  'ETH': 'Ξ',
+  'EUR': '€',
+  'FJD': '$',
+  'FKP': '£',
+  'GBP': '£',
+  'GEL': '₾',
+  'GGP': '£',
+  'GHC': '₵',
+  'GHS': 'GH₵',
+  'GIP': '£',
+  'GMD': 'D',
+  'GNF': 'FG',
+  'GTQ': 'Q',
+  'GYD': '$',
+  'HKD': '$',
+  'HNL': 'L',
+  'HRK': 'kn',
+  'HTG': 'G',
+  'HUF': 'Ft',
+  'IDR': 'Rp',
+  'ILS': '₪',
+  'IMP': '£',
+  'INR': '₹',
+  'IQD': 'ع.د',
+  'IRR': '﷼',
+  'ISK': 'kr',
+  'JEP': '£',
+  'JMD': 'J$',
+  'JOD': 'JD',
+  'JPY': '¥',
+  'KES': 'KSh',
+  'KGS': 'лв',
+  'KHR': '៛',
+  'KMF': 'CF',
+  'KPW': '₩',
+  'KRW': '₩',
+  'KWD': 'KD',
+  'KYD': '$',
+  'KZT': 'лв',
+  'LAK': '₭',
+  'LBP': '£',
+  'LKR': '₨',
+  'LRD': '$',
+  'LSL': 'M',
+  'LTC': 'Ł',
+  'LTL': 'Lt',
+  'LVL': 'Ls',
+  'LYD': 'LD',
+  'MAD': 'MAD',
+  'MDL': 'lei',
+  'MGA': 'Ar',
+  'MKD': 'ден',
+  'MMK': 'K',
+  'MNT': '₮',
+  'MOP': 'MOP$',
+  'MRO': 'UM',
+  'MUR': '₨',
+  'MVR': 'Rf',
+  'MWK': 'MK',
+  'MXN': '$',
+  'MYR': 'RM',
+  'MZN': 'MT',
+  'NAD': '$',
+  'NGN': '₦',
+  'NIO': 'C$',
+  'NOK': 'kr',
+  'NPR': '₨',
+  'NZD': '$',
+  'OMR': '﷼',
+  'PAB': 'B/.',
+  'PEN': 'S/.',
+  'PGK': 'K',
+  'PHP': '₱',
+  'PKR': '₨',
+  'PLN': 'zł',
+  'PYG': 'Gs',
+  'QAR': '﷼',
+  'RMB': '￥',
+  'RON': 'lei',
+  'RSD': 'Дин.',
+  'RUB': '₽',
+  'RWF': 'R₣',
+  'SAR': '﷼',
+  'SBD': '$',
+  'SCR': '₨',
+  'SDG': 'ج.س.',
+  'SEK': 'kr',
+  'SGD': '$',
+  'SHP': '£',
+  'SLL': 'Le',
+  'SOS': 'S',
+  'SRD': '$',
+  'SSP': '£',
+  'STD': 'Db',
+  'SVC': '$',
+  'SYP': '£',
+  'SZL': 'E',
+  'THB': '฿',
+  'TJS': 'SM',
+  'TMT': 'T',
+  'TND': 'د.ت',
+  'TOP': 'T$',
+  'TRL': '₤',
+  'TRY': '₺',
+  'TTD': 'TT$',
+  'TVD': '$',
+  'TWD': 'NT$',
+  'TZS': 'TSh',
+  'UAH': '₴',
+  'UGX': 'USh',
+  'USD': '$',
+  'UYU': '$U',
+  'UZS': 'лв',
+  'VEF': 'Bs',
+  'VND': '₫',
+  'VUV': 'VT',
+  'WST': 'WS$',
+  'XAF': 'FCFA',
+  'XBT': 'Ƀ',
+  'XCD': '$',
+  'XOF': 'CFA',
+  'XPF': '₣',
+  'YER': '﷼',
+  'ZAR': 'R',
+  'ZWD': 'Z$',
+};

package/dist/collection/static/baccarat.svg

@@ -0,0 +1,43 @@
+<svg
+  version="1.1" width="100%" height="100%"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g stroke="red" stroke-width="1" stroke-opacity="1">
+    <line x1="0" y1="0" x2="100%" y2="0"/>
+    <line x1="0" y1="20" x2="400" y2="20"/>
+    <line x1="0" y1="40" x2="400" y2="40"/>
+    <line x1="0" y1="60" x2="400" y2="60"/>
+    <line x1="0" y1="80" x2="400" y2="80"/>
+    <line x1="0" y1="100" x2="400" y2="100"/>
+    <line x1="0" y1="120" x2="400" y2="120"/>
+  </g>
+  <g stroke="red" stroke-width="1" stroke-opacity="0.8">
+    <line x1="0" y1="0" x2="0" y2="120"/>
+    <line x1="20" y1="0" x2="20" y2="120"/>
+    <line x1="40" y1="0" x2="40" y2="120"/>
+    <line x1="60" y1="0" x2="60" y2="120"/>
+    <line x1="80" y1="0" x2="80" y2="120"/>
+    <line x1="100" y1="0" x2="100" y2="120"/>
+    <line x1="120" y1="0" x2="120" y2="120"/>
+    <line x1="140" y1="0" x2="140" y2="120"/>
+    <line x1="160" y1="0" x2="160" y2="120"/>
+    <line x1="180" y1="0" x2="180" y2="120"/>
+    <line x1="200" y1="0" x2="200" y2="120"/>
+    <line x1="220" y1="0" x2="220" y2="120"/>
+    <line x1="240" y1="0" x2="240" y2="120"/>
+    <line x1="260" y1="0" x2="260" y2="120"/>
+    <line x1="280" y1="0" x2="280" y2="120"/>
+    <line x1="300" y1="0" x2="300" y2="120"/>
+    <line x1="320" y1="0" x2="320" y2="120"/>
+    <line x1="340" y1="0" x2="340" y2="120"/>
+    <line x1="360" y1="0" x2="360" y2="120"/>
+    <line x1="380" y1="0" x2="380" y2="120"/>
+    <line x1="400" y1="0" x2="400" y2="120"/>
+    <line x1="420" y1="0" x2="420" y2="120"/>
+    <line x1="440" y1="0" x2="440" y2="120"/>
+    <line x1="460" y1="0" x2="460" y2="120"/>
+    <line x1="480" y1="0" x2="480" y2="120"/>
+    <line x1="500" y1="0" x2="500" y2="120"/>
+  </g>
+
+</svg>

package/dist/collection/static/fav.svg

@@ -0,0 +1,9 @@
+<svg
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 19.481 19.481"
+  enable-background="new 0 0 19.481 19.481"
+>
+  <path
+    d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>
+</svg>

package/dist/collection/static/favorite.svg

@@ -0,0 +1,12 @@
+<svg version="1.1" class="UnfavoredIcon" part="UnfavoredIcon" xmlns="http://www.w3.org/2000/svg" x="20px" y="20px"
+     viewBox="0 0 512.001 512.001">
+  <path d="M511.266,197.256c-1.764-5.431-6.458-9.388-12.108-10.209l-158.722-23.065L269.452,20.155
+            c-2.527-5.12-7.741-8.361-13.451-8.361c-5.709,0-10.924,3.242-13.451,8.361l-70.988,143.828L12.843,187.047
+            c-5.65,0.821-10.344,4.779-12.108,10.209c-1.765,5.43-0.293,11.391,3.795,15.376l114.848,111.955L92.27,482.67
+            c-0.965,5.627,1.349,11.315,5.968,14.67c4.618,3.355,10.74,3.798,15.797,1.142L256,423.846l141.961,74.637
+            c2.195,1.154,4.591,1.723,6.979,1.723c3.11,0,6.206-0.966,8.818-2.865c4.619-3.356,6.933-9.043,5.968-14.671L392.61,324.587
+            l114.86-111.954C511.559,208.647,513.031,202.686,511.266,197.256z M366.023,308.608c-3.536,3.446-5.15,8.412-4.314,13.278
+            l23.311,135.898l-122.038-64.162c-4.37-2.297-9.591-2.297-13.961,0l-122.045,64.163l23.304-135.9
+            c0.834-4.866-0.779-9.83-4.313-13.276l-98.731-96.244l136.445-19.829c4.886-0.71,9.108-3.778,11.294-8.205L256,60.685
+            l61.023,123.645c2.186,4.427,6.408,7.496,11.294,8.206l136.447,19.828L366.023,308.608z"/>
+</svg>

package/dist/collection/static/seat.svg

@@ -0,0 +1,6 @@
+<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>

package/dist/collection/static/unfav.svg

@@ -0,0 +1,20 @@
+<svg
+  version="1.1"
+  class="UnfavoredIcon"
+  xmlns="http://www.w3.org/2000/svg"
+  x="20px"
+  y="20px"
+  viewBox="0 0 512.001 512.001"
+>
+  <path
+    d="M511.266,197.256c-1.764-5.431-6.458-9.388-12.108-10.209l-158.722-23.065L269.452,20.155
+                      c-2.527-5.12-7.741-8.361-13.451-8.361c-5.709,0-10.924,3.242-13.451,8.361l-70.988,143.828L12.843,187.047
+                      c-5.65,0.821-10.344,4.779-12.108,10.209c-1.765,5.43-0.293,11.391,3.795,15.376l114.848,111.955L92.27,482.67
+                      c-0.965,5.627,1.349,11.315,5.968,14.67c4.618,3.355,10.74,3.798,15.797,1.142L256,423.846l141.961,74.637
+                      c2.195,1.154,4.591,1.723,6.979,1.723c3.11,0,6.206-0.966,8.818-2.865c4.619-3.356,6.933-9.043,5.968-14.671L392.61,324.587
+                      l114.86-111.954C511.559,208.647,513.031,202.686,511.266,197.256z M366.023,308.608c-3.536,3.446-5.15,8.412-4.314,13.278
+                      l23.311,135.898l-122.038-64.162c-4.37-2.297-9.591-2.297-13.961,0l-122.045,64.163l23.304-135.9
+                      c0.834-4.866-0.779-9.83-4.313-13.276l-98.731-96.244l136.445-19.829c4.886-0.71,9.108-3.778,11.294-8.205L256,60.685
+                      l61.023,123.645c2.186,4.427,6.408,7.496,11.294,8.206l136.447,19.828L366.023,308.608z"
+  />
+</svg>

package/dist/collection/utils/baccarat-board-svg.js

@@ -0,0 +1,234 @@
+import { BaccaratWinner } from "../models/casino-game-thumb-view";
+const BACCARAT_ROW = 6;
+const BACCARTAT_COLUMN = 40;
+const TIE_ANGLE = 135;
+const PLAYER_ANGLE = 45;
+export 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);
+  }
+}