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

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

@@ -0,0 +1,123 @@
+import { Component, h, Host, Prop, State, Method } from '@stencil/core';
+import { ROULETTE_COLOR_MAP, WIDGETTYPE_GAMECATEGORY, } from '../../constants/game-thumbnail';
+export class CasinoExtrainfoRoulette {
+  constructor() {
+    /**
+     * 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)))))));
+  }
+  static get is() { return "casino-extrainfo-roulette"; }
+  static get originalStyleUrls() { return {
+    "$": ["casino-extrainfo-roulette.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["casino-extrainfo-roulette.css"]
+  }; }
+  static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Language"
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'en'"
+    }
+  }; }
+  static get states() { return {
+    "gameInfo": {},
+    "gameDetails": {},
+    "showLiveClass": {}
+  }; }
+  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-game-thumb-view/casino-game-thumb-view.css

@@ -0,0 +1,361 @@
+:host {
+  display: block;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.GameContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.GameInnerContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 5px;
+}
+.GameInnerContainer .GameBg {
+  width: 100%;
+  height: 100%;
+  object-fit: unset;
+  transition: all 150ms ease-in-out;
+}
+.GameInnerContainer .GameBg.GameBg-1x2, .GameInnerContainer .GameBg.GameBg-2x1, .GameInnerContainer .GameBg.GameBg-2x2 {
+  object-fit: cover;
+}
+.GameInnerContainer:hover {
+  cursor: pointer;
+}
+.GameInnerContainer:hover .GameInfoWrapper {
+  display: block;
+}
+.GameInnerContainer:hover .GameBg {
+  filter: blur(5px) grayscale(1);
+}
+
+.ListGame.GameBackdrop .GameInnerContainer::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(0deg, black 15%, rgba(0, 0, 0, 0) 100%);
+}
+
+.ListGame .GameInnerContainer {
+  z-index: 0;
+}
+.ListGame .GameInnerContainer .GameBg {
+  z-index: 5;
+}
+.ListGame .GameInnerContainer::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.ListGame .GameInnerContainer.GameInnerContainerUnavailable::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.9);
+}
+.ListGame .GameInnerContainer .ListGame:hover .OpenSeat,
+.ListGame .GameInnerContainer .ListGame:hover .ClosedSeat,
+.ListGame .GameInnerContainer .ListGame:hover .LiveLimits,
+.ListGame .GameInnerContainer .ListGame:hover .LatestResult,
+.ListGame .GameInnerContainer .ListGame:hover .FullTable,
+.ListGame .GameInnerContainer .ListGame:active .OpenSeat,
+.ListGame .GameInnerContainer .ListGame:active .ClosedSeat,
+.ListGame .GameInnerContainer .ListGame:active .LiveLimits,
+.ListGame .GameInnerContainer .ListGame:active .LatestResult,
+.ListGame .GameInnerContainer .ListGame:active .FullTable {
+  opacity: 0.2;
+}
+.ListGame .GameInnerContainer .ListGame.GameContainerDimmed:before {
+  display: block;
+  content: " ";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 5;
+  background: rgba(0, 0, 0, 0.4);
+  color: var(--emfe-w-color-white, #FFFFFF);
+  fill: var(--emfe-w-color-white, #FFFFFF);
+  opacity: 1;
+  border-radius: 4px;
+}
+.ListGame .GameInnerContainer .ListGame.GameContainerFullyDimmed:before {
+  display: block;
+  content: " ";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 5;
+  background: rgba(0, 0, 0, 0.8);
+  color: var(--emfe-w-color-white, #FFFFFF);
+  fill: var(--emfe-w-color-white, #FFFFFF);
+  opacity: 1;
+  border-radius: 4px;
+}
+.ListGame .GameInnerContainer .ListGame:hover .LiveProps,
+.ListGame .GameInnerContainer .ListGameLink:hover .LiveProps {
+  opacity: 0;
+}
+@keyframes red-pulse {
+  0% {
+    box-shadow: 0 0 2px 0 rgba(255, 0, 0, 0.75);
+  }
+  15% {
+    box-shadow: 0 0 10px 2px rgba(255, 0, 0, 0.75);
+  }
+  30% {
+    box-shadow: 0 0 2px 0 rgba(255, 0, 0, 0.75);
+  }
+  50% {
+    box-shadow: 0 0 10px 2px rgba(255, 0, 0, 0.75);
+  }
+  65% {
+    box-shadow: 0 0 2px 0 rgba(255, 0, 0, 0.75);
+  }
+  80% {
+    box-shadow: 0 0 10px 2px rgba(255, 0, 0, 0.75);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.75);
+  }
+}
+@keyframes green-pulse {
+  0% {
+    box-shadow: 0 0 2px 0 rgba(86, 168, 10, 0.75);
+  }
+  15% {
+    box-shadow: 0 0 10px 2px rgba(86, 168, 10, 0.75);
+  }
+  30% {
+    box-shadow: 0 0 2px 0 rgba(86, 168, 10, 0.75);
+  }
+  50% {
+    box-shadow: 0 0 10px 2px rgba(86, 168, 10, 0.75);
+  }
+  65% {
+    box-shadow: 0 0 2px 0 rgba(86, 168, 10, 0.75);
+  }
+  80% {
+    box-shadow: 0 0 10px 2px rgba(86, 168, 10, 0.75);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(86, 168, 10, 0.75);
+  }
+}
+@keyframes flip-open {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    -webkit-transition-timing-function: ease-in;
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    -webkit-transition-timing-function: ease-in;
+    transition-timing-function: ease-in;
+  }
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    opacity: 1;
+  }
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+  100% {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+.ListGame .GameInnerContainer .silde-in-from-left {
+  -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;
+}
+@-webkit-keyframes silde-in-from-left {
+  0% {
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+    visibility: visible;
+  }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+@keyframes silde-in-from-left {
+  0% {
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+    visibility: visible;
+  }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+@keyframes flip-closed-seat {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    -webkit-transition-timing-function: ease-in;
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    -webkit-transition-timing-function: ease-in;
+    transition-timing-function: ease-in;
+  }
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    opacity: 1;
+  }
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+  100% {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+.ListGame .GameInnerContainer .ListGame.PulsatingGreenShadow {
+  animation: green-pulse 2s linear;
+}
+.ListGame .GameInnerContainer .ListGame.PulsatingRedShadow {
+  animation: red-pulse 2s linear;
+}
+.ListGame .GameInnerContainer .Blue {
+  color: #4d90a7;
+}
+.ListGame .GameInnerContainer .Red {
+  background-color: red;
+}
+.ListGame .GameInnerContainer .Black {
+  background-color: var(--emfe-w-color-black, #000000);
+}
+.ListGame .GameInnerContainer .Green {
+  background-color: #56A80A;
+}
+.ListGame .GameInnerContainer .White {
+  background-color: var(--emfe-w-color-white, #FFFFFF);
+}
+.ListGame .GameInnerContainer .Yellow {
+  background-color: #eeca3d;
+}
+.ListGame .GameInnerContainer .Gold {
+  background-color: #866d0c;
+}
+.ListGame .GameInnerContainer .Orange {
+  background-color: #574708;
+}
+.ListGame .GameInnerContainer .Purple {
+  background-color: #330033;
+}
+.ListGame .GameInnerContainer .Tie {
+  background-color: var(--emfe-w-color-white, #FFFFFF);
+  background-image: linear-gradient(135deg, var(--emfe-w-color-white, #FFFFFF) 25%, transparent 25%, transparent 50%, #212121 50%, var(--emfe-w-color-white, #FFFFFF) 75%, transparent 75%, var(--emfe-w-color-white, #FFFFFF));
+}
+.ListGame .GameInnerContainer .PlayersDisplay {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 2px 10px;
+  background: linear-gradient(to bottom, rgba(33, 33, 33, 0.9) 0%, rgba(33, 33, 33, 0.1) 100%);
+  color: var(--emfe-w-color-white, #FFFFFF);
+}
+.ListGame .GameInnerContainer .PlayersDisplay .PlayersIcon {
+  width: 14px;
+  height: 14px;
+  margin-right: 4px;
+}
+.ListGame .GameInnerContainer .PlayersDisplay .PlayersIcon svg {
+  fill: var(--emfe-w-color-white, #FFFFFF);
+  width: 100%;
+  height: 100%;
+}
+.ListGame .GameInnerContainer .ClosedGame {
+  opacity: 1;
+  z-index: 10;
+  padding: 8px 10px;
+  color: var(--emfe-w-color-white, #FFFFFF);
+  font-size: 18px;
+}
+.ListGame .GameInnerContainer .ClosedGame span {
+  font-size: 18px;
+}
+.ListGame .GameInnerContainer .Players {
+  display: inline-block;
+  width: 19px;
+  height: 19px;
+}
+
+.FavIconContainer {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+  z-index: 16;
+  width: 15px;
+  height: 15px;
+  opacity: 0;
+}
+.FavIconContainer.Favorited {
+  opacity: 1;
+}
+.FavIconContainer svg path {
+  fill: #fff;
+}
+
+.Hovered .FavIconContainer {
+  opacity: 1;
+}
+
+.GameNameBelow {
+  color: var(--emfe-w-color-white, #FFFFFF);
+  position: relative;
+  bottom: -5px;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}