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

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

@@ -4,231 +4,231 @@ 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' : ''
+    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'
         });
-        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' : ''
+        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'
         });
-        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);
-  }
+    }
+    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);
+    }
 }