@everymatrix/lottery-game-page 0.0.16 → 0.1.0

package/dist/components/helper-pagination.js

@@ -1,216 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-
-/**
- * @name isMobile
- * @description A method that returns if the browser used to access the app is from a mobile device or not
- * @param {String} userAgent window.navigator.userAgent
- * @returns {Boolean} true or false
- */
-const isMobile = (userAgent) => {
-  return !!(userAgent.toLowerCase().match(/android/i) ||
-    userAgent.toLowerCase().match(/blackberry|bb/i) ||
-    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
-    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
-};
-
-const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en'];
-const TRANSLATIONS = {
-  en: {
-    firstPage: 'First',
-    previousPage: 'Previous',
-    nextPage: 'Next',
-    lastPage: 'Last'
-  },
-  ro: {
-    firstPage: 'Prima',
-    previousPage: 'Anterior',
-    nextPage: 'Urmatoarea',
-    lastPage: 'Ultima'
-  },
-};
-const translate = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
-};
-
-const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin-top:20px;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:12px}}@media screen and (max-width: 480px){button{width:70px;font-size:10px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:10px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
-
-const HelperPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.hpPageChange = createEvent(this, "hpPageChange", 7);
-    /**
-     * First page boolean value - determines if the page is disabled or active
-     */
-    this.firstPage = false;
-    /**
-     * Previous page boolean value - determines if the page is disabled or active
-     */
-    this.previousPage = false;
-    /**
-     * The received offset
-     */
-    this.offset = 0;
-    /**
-     * The received limit for the number of pages
-     */
-    this.limit = 1;
-    /**
-     * The received total number of pages
-     */
-    this.total = 1;
-    /**
-     * Language
-     */
-    this.language = 'en';
-    /**
-     * In component working variable for the array of pages
-     */
-    this.pagesArray = [];
-    /**
-     * In component working variable for last page
-     */
-    this.endInt = 0;
-    this.userAgent = window.navigator.userAgent;
-    this.currentPage = 1;
-    /**
-     * Navigation logic
-     */
-    this.navigateTo = (navigationPage) => {
-      switch (navigationPage) {
-        case 'firstPage':
-          this.offsetInt = 0;
-          break;
-        case 'lastPage':
-          this.offsetInt = this.endInt * this.limitInt;
-          break;
-        case 'previousPage':
-          this.offsetInt -= 10;
-          break;
-        case 'nextPage':
-          this.offsetInt += 10;
-          break;
-        case 'fivePagesBack':
-          this.offsetInt -= 30;
-          this.offsetInt = this.offsetInt < 0 ? 0 : this.offsetInt;
-          break;
-        case 'fivePagesForward':
-          this.offsetInt += 30;
-          this.offsetInt = this.offsetInt / 10 >= this.endInt ? this.endInt * 10 : this.offsetInt;
-          break;
-      }
-      this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
-    };
-    /**
-     * Handle navigation from here
-     */
-    this.paginationNavigation = (pageNumber, index) => {
-      if (!isNaN(pageNumber)) {
-        if (pageNumber === 1) {
-          this.offsetInt = pageNumber - 1;
-        }
-        else {
-          this.offsetInt = (pageNumber - 1) * 10;
-        }
-      }
-      else {
-        if (index === 0 && this.currentPage <= 4) {
-          this.navigateTo('firstPage');
-        }
-        else if (index === 0 && this.currentPage > 4) {
-          this.navigateTo('fivePagesBack');
-        }
-        else if (index === 4 && this.endInt - this.currentPage >= 2) {
-          this.navigateTo('fivePagesForward');
-        }
-      }
-      this.currentPage = this.offsetInt;
-      this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
-    };
-  }
-  componentWillRender() {
-    this.offsetInt = this.offset;
-    this.currentPage = this.offsetInt / this.limitInt + 1;
-    this.limitInt = this.limit;
-    this.totalInt = this.total;
-    this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
-    this.lastPage = (this.offsetInt >= this.endInt * this.limitInt) ? false : true;
-    /**
-     * Construct numbered navigation area based on current page position
-     */
-    if (this.currentPage === 1 || this.currentPage === 2) {
-      this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
-      this.pagesArray.push('...');
-    }
-    else if (this.currentPage >= 3 && ((this.endInt - this.currentPage) >= 2)) {
-      this.pagesArray = Array.from({ length: 3 }, (_, i) => this.currentPage + i - 1);
-      this.pagesArray.push('...');
-      this.pagesArray.unshift('...');
-    }
-    else if ((this.endInt - this.currentPage) < 3) {
-      this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i);
-      this.pagesArray.unshift('...');
-    }
-  }
-  render() {
-    /**
-     * Center navigation area
-     */
-    let navigationArea = h("ul", { class: "PaginationArea" }, this.pagesArray.map((item, index) => {
-      return (h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, h("button", { disabled: item === this.currentPage ? true : false, onClick: this.paginationNavigation.bind(this, item, index) }, h("span", null, item))));
-    }));
-    /**
-     * Left navigation area
-     */
-    let buttonsLeftSide = h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, translate('firstPage', this.language)), h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
-    if (isMobile(this.userAgent)) {
-      buttonsLeftSide =
-        h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
-    }
-    /**
-     * Right navigation area
-     */
-    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)), h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, translate('lastPage', this.language)));
-    if (isMobile(this.userAgent)) {
-      buttonsRightSide =
-        h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)));
-    }
-    return (h("div", { id: "PaginationContainer" }, buttonsLeftSide, navigationArea, buttonsRightSide));
-  }
-  static get style() { return helperPaginationCss; }
-}, [1, "helper-pagination", {
-    "firstPage": [1540, "first-page"],
-    "previousPage": [1540, "previous-page"],
-    "offset": [1538],
-    "limit": [1538],
-    "total": [1538],
-    "language": [1],
-    "offsetInt": [32],
-    "lastPage": [32],
-    "limitInt": [32],
-    "totalInt": [32],
-    "pagesArray": [32],
-    "endInt": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["helper-pagination"];
-  components.forEach(tagName => { switch (tagName) {
-    case "helper-pagination":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, HelperPagination$1);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const HelperPagination = HelperPagination$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { HelperPagination, defineCustomElement };

package/dist/components/lottery-bullet.js

@@ -1,6 +0,0 @@
-import { L as LotteryBullet$1, d as defineCustomElement$1 } from './lottery-bullet2.js';
-
-const LotteryBullet = LotteryBullet$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { LotteryBullet, defineCustomElement };

package/dist/components/lottery-bullet2.js

@@ -1,57 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-
-const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Circle{cursor:pointer;color:#000000;display:block;background:#FFF;border:solid 2px #00958f;height:20px;width:20px;border-radius:50%;margin:0;display:flex;align-items:center;justify-content:center;user-select:none;font-size:12px;font-weight:600;position:relative}.Circle:hover{background:#aee4e2}.Circle.Selected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{color:#707070;background:#D4D4D4;border:solid 2px #707070;cursor:default}.Circle.DisabledSelected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #707070;cursor:default}";
-
-const LotteryBullet = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.bulletEvent = createEvent(this, "lotteryBulletSelection", 7);
-    /**
-     * Value of the bullet
-     */
-    this.value = '0';
-    /**
-     * Marks if the bullet should be selectable
-     */
-    this.selectable = true;
-    /**
-     * Marks if the bullet should be selected
-     */
-    this.isSelected = false;
-    this.select = () => {
-      if (this.selectable) {
-        this.isSelected = !this.isSelected;
-        this.bulletEvent.emit({
-          value: this.value,
-          selected: this.isSelected
-        });
-      }
-    };
-  }
-  render() {
-    return (h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select() }, this.value));
-  }
-  static get style() { return lotteryBulletCss; }
-}, [1, "lottery-bullet", {
-    "value": [1],
-    "selectable": [4],
-    "isSelected": [4, "is-selected"]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["lottery-bullet"];
-  components.forEach(tagName => { switch (tagName) {
-    case "lottery-bullet":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, LotteryBullet);
-      }
-      break;
-  } });
-}
-defineCustomElement();
-
-export { LotteryBullet as L, defineCustomElement as d };

package/dist/components/lottery-draw-results-history.js

@@ -1,6 +0,0 @@
-import { L as LotteryDrawResultsHistory$1, d as defineCustomElement$1 } from './lottery-draw-results-history2.js';
-
-const LotteryDrawResultsHistory = LotteryDrawResultsHistory$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { LotteryDrawResultsHistory, defineCustomElement };

package/dist/components/lottery-draw-results-history2.js

@@ -1,175 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$5 } from './helper-filters2.js';
-import { d as defineCustomElement$4 } from './helper-modal2.js';
-import { d as defineCustomElement$3 } from './lottery-bullet2.js';
-import { d as defineCustomElement$2 } from './lottery-draw-results2.js';
-import { d as defineCustomElement$1 } from './lottery-grid2.js';
-
-const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en'];
-const TRANSLATIONS = {
-  en: {
-    drawResultsHeader: 'Draw results history',
-    drawId: 'Draw ID',
-    drawDate: 'Draw Date',
-    drawNumbersGridA: 'Draw numbers Grid A',
-    viewAllResults: 'View All',
-    lastFiveDraws: 'Last 5 Draws',
-    lastTenDraws: 'Last 10 Draws',
-    lastFifteenDraws: 'Last 15 Draws'
-  },
-  ro: {
-    drawResultsHeader: 'Draw results history',
-    drawId: 'Draw ID',
-    drawDate: 'Draw Date',
-    drawNumbersGridA: 'Draw numbers Grid A',
-    viewAllResults: 'View All',
-    lastFiveDraws: 'Last 5 Draws',
-    lastTenDraws: 'Last 10 Draws',
-    lastFifteenDraws: 'Last 15 Draws'
-  },
-};
-const translate = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
-};
-
-const lotteryDrawResultsHistoryCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridBanner{background-color:#009993;background-repeat:no-repeat;background-position:center;color:#111;padding:0 20px 30px}.GridBanner .BannerButtonsWrapper{display:flex;justify-content:space-between;padding-top:16px}.GridBanner .BannerButtonsWrapper .BannerBackButton,.GridBanner .BannerButtonsWrapper .BannerLobbyButton{background:#fff;border:1px solid #009993;border-radius:4px;padding:7px 15px;font-size:12px;text-transform:uppercase;width:80px}.GridBanner .HistoryGridBannerArea{padding-top:30px}.HistoryGridBannerArea{display:flex;flex-direction:column;align-items:center}.BannerText{font-size:14px;font-weight:300}.BannerCountdown{font-size:22px;display:flex;gap:20px}.DrawResultsSection{max-width:500px;margin:0 auto}.HistoryGridWrapper{padding:0 15px}.HistoryGrid{border:1px solid #009993;border-radius:5px}.DrawResultsHeader{color:#009993;padding:15px;text-align:center}.DrawResultsHeader h4{text-transform:uppercase;font-size:16px;font-weight:600;margin:0}.DrawNumbersGrid{padding:10px 50px}.DrawNumbersGrid p{margin:0 0 10px 0;font-size:14px}.BulletContainer{margin-bottom:20px}.DrawResultTop{background-color:#009993;padding:10px;text-align:center;color:#fff;padding:0 50px;display:flex;justify-content:center;gap:40px}.ViewAllResults{display:block;padding:10px 40px;margin:40px auto;border:0;border-radius:5px;background-color:#009993;color:#fff;outline:none}.FilterSection{display:flex;justify-content:space-between;padding:10px 0 25px}.FilterSection .FilterResultsContainer{display:flex;gap:5px}.FilterSection .QuickFilterButton{cursor:pointer;width:max-content;border-radius:4px;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterSection .QuickFilterButton:hover{background:#F1F1F1}.FilterSection helper-filters{margin-left:auto}";
-
-const LotteryDrawResultsHistory = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * The number of results to be displayed
-     */
-    this.numberOfResults = 3;
-    /**
-     *Language
-     */
-    this.language = 'en';
-    this.drawData = [];
-    this.displayAllDrawsResults = true;
-    this.showQuickFilters = true;
-    this.winningDataSetsData = [''];
-    this.getDrawsData = () => {
-      let url = new URL(`${this.endpoint}/games/${this.gameId}`);
-      fetch(url.href)
-        .then((res) => {
-        if (res.status >= 300) {
-          throw new Error('There was an error while fetching the data');
-        }
-        return res.json();
-      })
-        .then((data) => {
-        console.log("getDrawsData ", data);
-        // filter out incomplete data sets for draws
-        this.winningDataSetsData = data.draws.filter(draw => draw.winningNumbers);
-        this.drawData = this.winningDataSetsData;
-        console.log('this.drawData', this.drawData);
-      });
-    };
-    this.filterResults = (resultsNumber) => {
-      this.numberOfResults = resultsNumber;
-      this.displayAllDrawsResults = true;
-    };
-    this.getDrawResults = (drawID) => {
-      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawID}`);
-      let drawOptions = {
-        method: "GET",
-        headers: {
-          'Content-Type': "application/json",
-          'Accept': 'application/json',
-        },
-      };
-      fetch(url.href, drawOptions)
-        .then((response) => {
-        return response.json();
-      })
-        .then((data) => {
-        console.log("getDrawResults ", data);
-        this.drawData = [data];
-      });
-    };
-    this.viewAllResults = () => {
-      this.numberOfResults = this.drawData.length;
-      this.displayAllDrawsResults = false;
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    };
-  }
-  // Filters events
-  filtersHandler(event) {
-    var _a;
-    this.getDrawResults((_a = event.detail) === null || _a === void 0 ? void 0 : _a.drawTicketId);
-    this.showQuickFilters = false;
-  }
-  clearFiltersHandler() {
-    this.drawData = this.winningDataSetsData;
-    this.showQuickFilters = true;
-  }
-  connectedCallback() {
-    this.getDrawsData();
-  }
-  disconnectedCallback() {
-    clearInterval(this.interval);
-  }
-  render() {
-    let gridHeader = h("div", { class: "DrawResultsHeader" }, this.displayAllDrawsResults ? h("h4", null, translate('drawResultsHeader', this.language)) :
-      h("div", { class: "DrawResultsHeaderContent" }, h("div", { class: "FilterSection" }, this.showQuickFilters &&
-        h("div", { class: "FilterResultsContainer" }, h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(5) }, translate('lastFiveDraws', this.language)), h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(10) }, translate('lastTenDraws', this.language)), h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(15) }, translate('lastFifteenDraws', this.language))), h("helper-filters", { "show-filter-id": "true", "activate-ticket-search": "false", "game-id": "3797", "player-id": "2323" })), h("h4", null, "All draws results history")));
-    let gridContent = h("div", { class: "HistoryGridWrapper" }, h("div", { class: "HistoryGrid" }, this.drawData.map((item) => h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, "draw-id": item.id, "draw-mode": true })).reverse().slice(0, this.numberOfResults)));
-    return h("section", { class: "GridWrapper" }, h("div", { class: "DrawResultsSection" }, h("div", { class: "DrawResultsArea" }, gridHeader, gridContent, this.displayAllDrawsResults && h("button", { class: "ViewAllResults", onClick: this.viewAllResults }, "View All"))));
-  }
-  static get style() { return lotteryDrawResultsHistoryCss; }
-}, [1, "lottery-draw-results-history", {
-    "endpoint": [1],
-    "gameId": [1, "game-id"],
-    "numberOfResults": [2, "number-of-results"],
-    "language": [1],
-    "drawData": [32],
-    "displayAllDrawsResults": [32],
-    "showQuickFilters": [32],
-    "winningDataSetsData": [32]
-  }, [[0, "filterSelection", "filtersHandler"], [0, "filterSelectionReset", "clearFiltersHandler"]]]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["lottery-draw-results-history", "helper-filters", "helper-modal", "lottery-bullet", "lottery-draw-results", "lottery-grid"];
-  components.forEach(tagName => { switch (tagName) {
-    case "lottery-draw-results-history":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, LotteryDrawResultsHistory);
-      }
-      break;
-    case "helper-filters":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "helper-modal":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "lottery-bullet":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "lottery-draw-results":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "lottery-grid":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-defineCustomElement();
-
-export { LotteryDrawResultsHistory as L, defineCustomElement as d };

package/dist/components/lottery-draw-results.js

@@ -1,6 +0,0 @@
-import { L as LotteryDrawResults$1, d as defineCustomElement$1 } from './lottery-draw-results2.js';
-
-const LotteryDrawResults = LotteryDrawResults$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { LotteryDrawResults, defineCustomElement };