@everymatrix/casino-play-random-game 1.32.4 → 1.33.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8944e204.js');
+
+/*
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["casino-play-random-game.cjs",[[1,"casino-play-random-game",{"endpoint":[513],"datasource":[513],"language":[513],"specificCategory":[513,"specific-category"],"iconVisible":[513,"icon-visible"],"iconVisibleOnAnim":[513,"icon-visible-on-anim"],"launchByGameCard":[513,"launch-by-game-card"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"gamesToShow":[32],"selectedGame":[32],"animationDone":[32],"animationStarted":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "./components/casino-play-random-game/casino-play-random-game.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/casino-play-random-game/casino-play-random-game.css

@@ -0,0 +1,347 @@
+:host {
+  display: block;
+  font-family: inherit;
+}
+
+.RandomGameWrapper {
+  width: 100%;
+  overflow: hidden;
+  background: transparent;
+  position: relative;
+}
+
+.GameContainerGradient {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100%;
+  background: linear-gradient(90deg, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 0%, rgba(7, 7, 42, 0.5) 25%, rgba(7, 7, 42, 0) 50%, rgba(7, 7, 42, 0.5) 75%, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 100%);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.GamesContainer {
+  display: flex;
+  height: 330px;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  align-content: flex-start;
+  gap: 20px;
+}
+
+.RandomGameCard {
+  position: relative;
+  width: 256px;
+  height: 170px;
+  border-radius: 5px;
+  filter: blur(5px);
+}
+.RandomGameCard .RandomGameVendor {
+  position: absolute;
+  font-size: 12px;
+  bottom: 10px;
+  left: 10px;
+  color: var(--emfe-w-color-white, #FFFFFF);
+}
+
+.TheRandomGame {
+  animation-name: ZoomFadeIn;
+  animation-duration: 0.5s;
+  animation-fill-mode: forwards;
+  -webkit-animation-name: ZoomFadeIn;
+  -webkit-animation-duration: 0.5s;
+  -webkit-animation-fill-mode: forwards;
+  opacity: 1;
+  cursor: pointer;
+  filter: blur(0);
+}
+
+.RandomGameImage {
+  width: 256px;
+  height: 170px;
+}
+
+.RandomGameDetails {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
+  font-size: 14px;
+  width: 100%;
+}
+.RandomGameDetails .RandomGameTitle {
+  line-height: 18px;
+}
+.RandomGameDetails .RandomGameInfo {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+  font-weight: 400;
+  border: solid 1px var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
+  text-align: center;
+  margin: 4px 0;
+  line-height: 14px;
+  cursor: pointer;
+}
+.RandomGameDetails .RandomGamePlay {
+  background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
+  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
+  border: none;
+  border-radius: 5px;
+  width: 200px;
+  height: 40px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.ButtonWrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.ButtonContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.ButtonIcon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+}
+
+.QustionMark {
+  position: relative;
+  font-size: 80px;
+  font-weight: 700;
+  color: var(--emfe-w-color-white, #FFFFFF);
+  z-index: 5;
+  bottom: 20px;
+  text-shadow: 0px 4px 0px var(--emfe-w-color-black, #000000);
+}
+
+.HexagonMark {
+  position: absolute;
+  width: 70px;
+  height: 85px;
+  background: linear-gradient(90deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);
+  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);
+}
+
+.HexagonMarkBorder {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 5px;
+  left: 5px;
+  width: 60px;
+  height: 75px;
+  background: linear-gradient(180deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);
+  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);
+}
+
+.RandomButtons {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  width: 100%;
+}
+
+.RandomButton {
+  font-size: 18px;
+  text-transform: uppercase;
+  width: max-content;
+  border-radius: 5px;
+  padding: 5px 25px;
+  border: solid 3px var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
+  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
+  opacity: 1;
+  text-shadow: 1px 1px 2px var(--emfe-w-color-black, #000000);
+  animation: ButtonEffect 3s linear infinite;
+  background-image: linear-gradient(to right, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)), var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)));
+  background-size: 300% 100%;
+  cursor: pointer;
+}
+.RandomButton:hover {
+  opacity: 0.8;
+}
+
+.HideAnimation {
+  filter: blur(5px);
+  animation: AnimateButton 0.2s forwards;
+}
+
+.Flip {
+  animation-name: Flip, Blur;
+  animation-duration: 0.75s, 3s;
+  animation-iteration-count: infinite, 1;
+  -webkit-animation-name: Flip, Blur;
+  -webkit-animation-duration: 0.75s, 3s;
+  -webkit-animation-iteration-count: infinite, 1;
+}
+
+@keyframes ButtonEffect {
+  0% {
+    background-position: 0% 50%;
+  }
+  33% {
+    background-position: 100% 50%;
+  }
+  66% {
+    background-position: 200% 50%;
+  }
+  100% {
+    background-position: 300% 50%;
+  }
+}
+@keyframes ZoomFadeIn {
+  0% {
+    transform: scale(0.2) translateY(0);
+    filter: blur(5px);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1.1) translateY(-30px);
+    filter: blur(2px);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1) translateY(-30px);
+    filter: blur(0px);
+    opacity: 1;
+  }
+}
+@keyframes AnimateButton {
+  0% {
+    opacity: 0.7;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 0;
+    display: none;
+  }
+}
+@keyframes Flip {
+  0% {
+    transform: rotateY(0deg);
+  }
+  50% {
+    transform: rotateY(180deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+@keyframes Blur {
+  0% {
+    filter: blur(0);
+  }
+  50% {
+    filter: blur(1px);
+  }
+  100% {
+    filter: blur(3px);
+  }
+}
+@container (max-width: 475px) {
+  .GameContainerGradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100%;
+    background: linear-gradient(90deg, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 0%, rgba(7, 7, 42, 0.2) 25%, rgba(7, 7, 42, 0) 50%, rgba(7, 7, 42, 0.2) 75%, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 100%);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .RandomGameCard {
+    width: 102px;
+    height: 146px;
+    border-radius: 5px;
+    filter: blur(5px);
+  }
+
+  .RandomGameImage {
+    width: 102px;
+    height: 146px;
+  }
+
+  .RandomGameDetails {
+    font-size: 14px;
+    width: 100%;
+  }
+  .RandomGameDetails .RandomGameTitle {
+    line-height: 18px;
+    width: 75%;
+  }
+  .RandomGameDetails .RandomGameInfo {
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    font-size: 12px;
+    line-height: 14px;
+  }
+  .RandomGameDetails .RandomGamePlay {
+    background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
+    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
+    border: none;
+    border-radius: 5px;
+    width: 200px;
+    height: 40px;
+    font-size: 14px;
+    cursor: pointer;
+  }
+
+  .RandomGameCard .RandomGameVendor {
+    font-size: 12px;
+    bottom: 5px;
+    right: 5px;
+  }
+
+  .RandomButtons {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    width: 100%;
+  }
+
+  .RandomButton {
+    font-size: 18px;
+    text-transform: uppercase;
+    width: max-content;
+    border-radius: 5px;
+    padding: 5px 25px;
+    border: solid 3px var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
+    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
+    opacity: 1;
+    text-shadow: 1px 1px 2px var(--emfe-w-color-black, #000000);
+    animation: ButtonEffect 3s linear infinite;
+    background-image: linear-gradient(to right, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)), var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)));
+    background-size: 300% 100%;
+    cursor: pointer;
+  }
+  .RandomButton:hover {
+    opacity: 0.8;
+  }
+}