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

package/dist/collection/collection-manifest.json

@@ -0,0 +1,19 @@
+{
+  "entries": [
+    "./components/casino-extrainfo-baccarat/casino-extrainfo-baccarat.js",
+    "./components/casino-extrainfo-blackjack/casino-extrainfo-blackjack.js",
+    "./components/casino-extrainfo-roulette/casino-extrainfo-roulette.js",
+    "./components/casino-game-thumb-view/casino-game-thumb-view.js",
+    "./components/casino-game-thumbnail-betlimit/casino-game-thumbnail-betlimit.js",
+    "./components/casino-game-thumbnail-extrainfo/casino-game-thumbnail-extrainfo.js",
+    "./components/casino-game-thumbnail-overlay/casino-game-thumbnail-overlay.js",
+    "./components/casino-normal-game-thumbnail/casino-normal-game-thumbnail.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/casino-extrainfo-baccarat/casino-extrainfo-baccarat.css

@@ -0,0 +1,116 @@
+:host {
+  display: block;
+}
+
+.BaccaratBoard {
+  container-type: inline-size;
+  min-height: 30px;
+  width: 100%;
+}
+.BaccaratBoard svg {
+  background: #fff;
+  opacity: 0.99;
+  height: 100%;
+}
+
+.LiveProps.BaccaratProps div.LiveIcons {
+  margin-bottom: 0px;
+  padding: 0px;
+  width: 100%;
+}
+
+svg circle {
+  transition: stroke-dashoffset 0s ease 2s;
+}
+
+g.BoardRoundsGroup {
+  stroke-width: 1.8px;
+}
+
+@container (max-width: 300px) {
+  g.BoardRoundsGroup {
+    stroke-width: 0.9px;
+  }
+}
+svg .Round.NewRound {
+  opacity: 1;
+  -webkit-animation-name: fadeInFromNone;
+  animation-name: fadeInFromNone;
+  -webkit-animation-duration: 1.5s;
+  animation-duration: 1.5s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+@-webkit-keyframes fadeInFromNone {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+  1% {
+    display: block;
+    opacity: 0;
+  }
+  100% {
+    display: block;
+    opacity: 1;
+  }
+}
+@-moz-keyframes fadeInFromNone {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+  1% {
+    display: block;
+    opacity: 0;
+  }
+  100% {
+    display: block;
+    opacity: 1;
+  }
+}
+@-o-keyframes fadeInFromNone {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+  1% {
+    display: block;
+    opacity: 0;
+  }
+  30% {
+    display: block;
+    opacity: 1;
+  }
+  60% {
+    display: block;
+    opacity: 0;
+  }
+  100% {
+    display: block;
+    opacity: 1;
+  }
+}
+@keyframes fadeInFromNone {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+  1% {
+    display: block;
+    opacity: 0;
+  }
+  30% {
+    display: block;
+    opacity: 1;
+  }
+  60% {
+    display: block;
+    opacity: 0;
+  }
+  100% {
+    display: block;
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,240 @@
+import { Component, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import { BaccaratWinner, } from '../../models/casino-game-thumb-view';
+import { BaccaratSvg } from '../../utils/baccarat-board-svg';
+import { WINNER_COLOR } from '../../constants/game-thumbnail';
+export class CasinoExtrainfoBaccarat {
+  constructor() {
+    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 is() { return "casino-extrainfo-baccarat"; }
+  static get originalStyleUrls() { return {
+    "$": ["casino-extrainfo-baccarat.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["casino-extrainfo-baccarat.css"]
+  }; }
+  static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text language to show"
+      },
+      "attribute": "language",
+      "reflect": false
+    },
+    "showRoundBoard": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text language to show"
+      },
+      "attribute": "show-round-board",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "gameInfo": {},
+    "gameDetails": {}
+  }; }
+  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": []
+      }
+    },
+    "onGameDetailUpdated": {
+      "complexType": {
+        "signature": "(details: CasinoGameThumbnailDetails) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "details"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "CasinoGameThumbnailDetails": {
+            "location": "import",
+            "path": "../../models/casino-game-thumb-view"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Called when received update from updater",
+        "tags": [{
+            "name": "param",
+            "text": "details"
+          }]
+      }
+    },
+    "onBaccaratResultChanged": {
+      "complexType": {
+        "signature": "(result: Array<BaccaratUpdateItem>) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          },
+          "BaccaratUpdateItem": {
+            "location": "import",
+            "path": "../../models/casino-game-thumb-view"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get watchers() { return [{
+      "propName": "gameDetails",
+      "methodName": "gameDetailsHandler"
+    }]; }
+}

package/dist/collection/components/casino-extrainfo-blackjack/casino-extrainfo-blackjack.css

@@ -0,0 +1,64 @@
+: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;
+}

package/dist/collection/components/casino-extrainfo-blackjack/casino-extrainfo-blackjack.js

@@ -0,0 +1,119 @@
+import { Component, h, Host, Method, Prop, State } from '@stencil/core';
+import SeatSvg from '../../static/seat.svg';
+import { DEFAULT_BLACKJACK_TOTAL_SEATS } from '../../constants/game-thumbnail';
+import { translate } from '../../utils/locale.utils';
+export class CasinoExtrainfoBlackjack {
+  /**
+   * 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 })))))))));
+  }
+  static get is() { return "casino-extrainfo-blackjack"; }
+  static get originalStyleUrls() { return {
+    "$": ["casino-extrainfo-blackjack.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["casino-extrainfo-blackjack.css"]
+  }; }
+  static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text language to show"
+      },
+      "attribute": "language",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "gameInfo": {},
+    "gameDetails": {},
+    "seatsStatus": {},
+    "isTableFull": {}
+  }; }
+  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": []
+      }
+    },
+    "onGameDetailUpdated": {
+      "complexType": {
+        "signature": "(details: CasinoGameThumbnailDetails) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "CasinoGameThumbnailDetails": {
+            "location": "import",
+            "path": "../../models/casino-game-thumb-view"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

package/dist/collection/components/casino-extrainfo-roulette/casino-extrainfo-roulette.css

@@ -0,0 +1,40 @@
+: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;
+}