@everymatrix/casino-challenges-overlay-drawer 0.0.1

package/dist/collection/assets/term-and-condition.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.87935 1L5 1C5.27614 1 5.5 1.22386 5.5 1.5C5.5 1.77614 5.27614 2 5 2H3.9C3.47171 2 3.18056 2.00039 2.95552 2.01878C2.73631 2.03669 2.62421 2.06915 2.54601 2.10899C2.35785 2.20487 2.20487 2.35785 2.10899 2.54601C2.06915 2.62421 2.03669 2.73631 2.01878 2.95552C2.00039 3.18056 2 3.47171 2 3.9V8.1C2 8.52829 2.00039 8.81944 2.01878 9.04448C2.03669 9.26369 2.06915 9.37579 2.10899 9.45399C2.20487 9.64215 2.35785 9.79513 2.54601 9.89101C2.62421 9.93085 2.73631 9.96331 2.95552 9.98122C3.18056 9.99961 3.47171 10 3.9 10H8.1C8.52829 10 8.81944 9.99961 9.04448 9.98122C9.26369 9.96331 9.37579 9.93085 9.45399 9.89101C9.64215 9.79513 9.79513 9.64215 9.89101 9.45399C9.93085 9.37579 9.96331 9.26369 9.98122 9.04448C9.99961 8.81944 10 8.52829 10 8.1V7C10 6.72386 10.2239 6.5 10.5 6.5C10.7761 6.5 11 6.72386 11 7V8.12066C11 8.52314 11 8.85532 10.9779 9.12591C10.9549 9.40696 10.9057 9.66531 10.782 9.90798C10.5903 10.2843 10.2843 10.5903 9.90798 10.782C9.66531 10.9057 9.40696 10.9549 9.12591 10.9779C8.85532 11 8.52314 11 8.12066 11H3.87934C3.47686 11 3.14468 11 2.87409 10.9779C2.59304 10.9549 2.33469 10.9057 2.09202 10.782C1.7157 10.5903 1.40973 10.2843 1.21799 9.90798C1.09434 9.66531 1.04506 9.40696 1.0221 9.12591C0.999989 8.85532 0.999994 8.52314 1 8.12065V3.87935C0.999994 3.47687 0.999989 3.14469 1.0221 2.87409C1.04506 2.59304 1.09434 2.33469 1.21799 2.09202C1.40973 1.7157 1.7157 1.40973 2.09202 1.21799C2.33469 1.09434 2.59304 1.04506 2.87409 1.0221C3.14469 0.999989 3.47687 0.999994 3.87935 1ZM6.99999 1.50001C6.99999 1.22386 7.22385 1.00001 7.49999 1.00001H10.5C10.7761 1.00001 11 1.22386 11 1.5L11 4.5C11 4.77615 10.7761 5 10.5 5.00001C10.2238 5.00001 9.99999 4.77615 9.99999 4.50001L9.99999 2.70711L6.35355 6.35355C6.15829 6.54882 5.84171 6.54882 5.64645 6.35355C5.45119 6.15829 5.45118 5.84171 5.64645 5.64645L9.29288 2.00001H7.49999C7.22385 2.00001 6.99999 1.77615 6.99999 1.50001Z" fill="#00FA5A"/>
+</svg>

package/dist/collection/collection-manifest.json

@@ -0,0 +1,48 @@
+{
+  "entries": [
+    "components/casino-challenges-overlay-drawer/casino-challenges-overlay-drawer.js",
+    "components/components/casino-challenge-opt-out-modal/casino-challenge-opt-out-modal.js",
+    "components/components/casino-challenge-overlay-background/casino-challenge-overlay-background.js",
+    "components/components/casino-challenges-claim-code/casino-challenges-claim-code.js",
+    "components/components/casino-challenges-empty-state/casino-challenges-empty-state.js",
+    "components/components/casino-challenges-overlay-drawer-history/casino-challenges-overlay-drawer-history.js",
+    "components/components/casino-challenges-overlay-drawer-history/components/casino-challenge-drawer-history-item/casino-challenge-drawer-history-item.js",
+    "components/components/casino-challenges-overlay-loader/casino-challenges-overlay-loader.js",
+    "components/components/casino-challenges-overlay-tabs/casino-challenges-overlay-tabs.js",
+    "components/components/swipe-up/swipe-up.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/casino-challenges-modal",
+      "tags": [
+        "casino-challenges-modal"
+      ]
+    },
+    {
+      "name": "@everymatrix/casino-challenges-overlay-drawer-details",
+      "tags": [
+        "casino-challenge-details-events",
+        "casino-challenge-details-games",
+        "casino-challenge-details-levels",
+        "casino-challenge-details-progress-bar",
+        "casino-challenge-details-rules",
+        "casino-challenge-expandable-paragraph",
+        "casino-challenge-level-progress-bar",
+        "casino-challenges-overlay-drawer-details"
+      ]
+    },
+    {
+      "name": "@everymatrix/casino-challenges-overlay-slider",
+      "tags": [
+        "casino-challenges-overlay-card",
+        "casino-challenges-overlay-slider"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/casino-challenges-overlay-drawer/casino-challenges-overlay-drawer.css

@@ -0,0 +1,260 @@
+@import url("https://fonts.googleapis.com/css2?family=Teachers:ital,wght@0,400..800;1,400..800&display=swap");
+.container {
+  z-index: 301;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  container-name: challenges-game-page;
+  container-type: size;
+}
+
+.mobile .challenges__drawer {
+  width: 100%;
+  height: 100%;
+  left: 0;
+  bottom: 0;
+  border-radius: 0;
+  backdrop-filter: blur(16px);
+  border: none;
+  max-width: none;
+  min-width: initial;
+}
+.mobile .challenges__drawer .content-spacer {
+  margin-bottom: 32px;
+}
+.mobile .challenges__drawer .content-spacer.one-slide {
+  margin-bottom: 38px;
+}
+.mobile .challenges__drawer__content {
+  padding: 16px 0 0;
+}
+.mobile .challenges__drawer__content .content-details {
+  height: calc(100% - 30px);
+}
+.mobile .challenges__drawer__title {
+  height: 26px;
+  font-size: var(--emw--font-size-large, 18px);
+}
+.mobile .challenges__drawer__close {
+  right: 16px;
+  width: 26px;
+  height: 26px;
+}
+.mobile .challenges__drawer__close img {
+  width: 14px;
+}
+.mobile .challenges__backdrop {
+  display: none;
+}
+.mobile .notification {
+  padding: 8px 16px;
+  gap: 8px;
+}
+.mobile .notification .row {
+  margin: 15px 0 14px 0;
+}
+.mobile .notification__icon {
+  width: 16px;
+  height: 16px;
+}
+.mobile .notification__message {
+  font-size: var(--emw--font-size-small, 14px);
+}
+
+.challenges__drawer {
+  z-index: 302;
+  position: fixed;
+  left: 62px;
+  bottom: 76px;
+  border: 1px solid var(--emw--color-container-border, rgba(255, 255, 255, 0.0705882353));
+  background: var(--emw--color-Overlay-Background, rgba(9, 9, 9, 0.8));
+  backdrop-filter: blur(11px);
+  box-sizing: border-box;
+  width: 35%;
+  min-width: 400px;
+  max-width: 600px;
+  height: calc(100% - 20px - 76px);
+  border-radius: 30px;
+  opacity: 1;
+  font-family: var(--emw--font-family-primary, "Teachers"), sans-serif;
+  container-name: challenges-drawer;
+  container-type: size;
+}
+.challenges__drawer__title {
+  height: 36px;
+  color: var(--emw--color-title, #edeff2);
+  text-align: center;
+  font-size: var(--emw--font-size-large-xl, 22px);
+  font-weight: var(--emw--font-weight-semibold, 600);
+  margin: 0;
+  position: relative;
+  z-index: 1;
+  align-content: center;
+}
+.challenges__drawer__close {
+  outline: none;
+  background: transparent;
+  border-radius: 20px;
+  border: 1.5px solid var(--emw--color-container-border, rgba(255, 255, 255, 0.0705882353));
+  background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));
+  backdrop-filter: blur(6.882352829px);
+  cursor: pointer;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  right: 24px;
+}
+.challenges__drawer__content {
+  height: 100%;
+  position: relative;
+  z-index: 2;
+  padding: 24px 0 0;
+  box-sizing: border-box;
+}
+.challenges__drawer__content .content-header {
+  width: 100%;
+  flex-shrink: 0;
+}
+.challenges__drawer__content .content-details {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+.challenges__drawer__content .content-sub-page {
+  display: flex;
+  height: 100%;
+}
+.challenges__drawer .content-spacer {
+  margin-bottom: 24px;
+}
+.challenges__drawer, .challenges__drawer * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--emw--color-gray-250, rgba(255, 255, 255, 0.3)) transparent;
+}
+.challenges__drawer::-webkit-scrollbar, .challenges__drawer *::-webkit-scrollbar {
+  width: 3px;
+}
+.challenges__drawer::-webkit-scrollbar-track, .challenges__drawer *::-webkit-scrollbar-track {
+  background: transparent;
+}
+.challenges__drawer::-webkit-scrollbar-thumb, .challenges__drawer *::-webkit-scrollbar-thumb {
+  background: var(--emw--color-gray-250, rgba(255, 255, 255, 0.3));
+  opacity: 0.3;
+  border-radius: 999px;
+  transition: none;
+  width: 3px;
+}
+.challenges__drawer::-webkit-scrollbar-thumb:hover, .challenges__drawer *::-webkit-scrollbar-thumb:hover {
+  background: var(--emw--color-gray-250, rgba(255, 255, 255, 0.3));
+  opacity: 0.3;
+  width: 3px;
+}
+.challenges__drawer::-webkit-scrollbar-button, .challenges__drawer *::-webkit-scrollbar-button {
+  display: none;
+}
+.challenges__backdrop {
+  border: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--emw--color-gray-backdrop, rgba(0, 0, 0, 0.6));
+  z-index: 301;
+  opacity: 1;
+}
+
+.notification {
+  display: flex;
+  position: fixed;
+  z-index: 400;
+  align-items: center;
+  bottom: 76px;
+  right: 0;
+  padding: 24px;
+  gap: 12px;
+  max-width: 445px;
+  box-sizing: border-box;
+  border-radius: 20px 0 0 20px;
+  border-top: 1px solid var(--emw--status-badge-success-color, #d6fff0);
+  border-bottom: 1px solid var(--emw--status-badge-success-color, #d6fff0);
+  border-left: 1px solid var(--emw--status-badge-success-color, #d6fff0);
+  background: var(--emw--background-success-notification, linear-gradient(112deg, rgba(74, 255, 135, 0.2) 0%, rgba(74, 255, 135, 0) 100%));
+  backdrop-filter: blur(16px);
+  color: var(--emw--color-white, #ffffff);
+  font-family: var(--emw--font-family-primary, "Teachers"), sans-serif;
+}
+.notification.errored {
+  border-top: 1px solid var(--emw--status-badge-red-bg, #d63d1e);
+  border-bottom: 1px solid var(--emw--status-badge-red-bg, #d63d1e);
+  border-left: 1px solid var(--emw--status-badge-red-bg, #d63d1e);
+  background: var(--emw--background-error-notification, rgba(9, 9, 9, 0.4));
+}
+.notification .row {
+  display: flex;
+  align-items: flex-start;
+}
+.notification__icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 12px;
+}
+.notification__message {
+  margin: 0;
+  font-size: var(--emw--font-size-medium, 16px);
+  font-weight: var(--emw--font-weight-medium, 500);
+}
+.notification__message .active-tab {
+  color: var(--emw--border-success-color, #00b74f);
+  text-decoration-line: underline;
+  cursor: pointer;
+}
+
+casino-challenges-overlay-drawer-details {
+  flex: 1;
+}
+
+@container challenges-game-page (width <= 1430px) {
+  .challenges__drawer {
+    width: 40%;
+    left: 45px;
+  }
+}
+@container challenges-game-page (width <= 1250px) {
+  .challenges__drawer {
+    width: 45%;
+  }
+}
+@container challenges-game-page (width <= 1000px) {
+  .challenges__drawer {
+    width: 50%;
+    left: 25px;
+  }
+}
+@container challenges-game-page (width <= 800px) {
+  .challenges__drawer__content {
+    padding: 20px 0 0;
+  }
+}
+@container challenges-game-page (height <= 850px) {
+  .challenges__drawer {
+    bottom: 36px;
+    height: calc(100% - 20px - 36px);
+  }
+  .challenges__drawer .content-spacer {
+    margin-bottom: 18px;
+  }
+}
+@container challenges-drawer (height <= 760px) {
+  .challenges__drawer .content-spacer {
+    margin-bottom: 12px;
+  }
+}