@everymatrix/lottery-game-page 0.0.16 → 0.1.0

package/dist/collection/collection-manifest.json

@@ -4,7 +4,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.17.0",
+    "version": "2.15.2",
     "typescriptVersion": "4.5.4"
   },
   "collections": [
@@ -14,24 +14,12 @@
         "helper-accordion"
       ]
     },
-    {
-      "name": "@everymatrix/helper-filters",
-      "tags": [
-        "helper-filters"
-      ]
-    },
     {
       "name": "@everymatrix/helper-modal",
       "tags": [
         "helper-modal"
       ]
     },
-    {
-      "name": "@everymatrix/helper-pagination",
-      "tags": [
-        "helper-pagination"
-      ]
-    },
     {
       "name": "@everymatrix/helper-tabs",
       "tags": [
@@ -39,47 +27,11 @@
         "helper-tabs"
       ]
     },
-    {
-      "name": "@everymatrix/lottery-bullet",
-      "tags": [
-        "lottery-bullet"
-      ]
-    },
-    {
-      "name": "@everymatrix/lottery-draw-results",
-      "tags": [
-        "lottery-draw-results"
-      ]
-    },
-    {
-      "name": "@everymatrix/lottery-draw-results-history",
-      "tags": [
-        "lottery-draw-results-history"
-      ]
-    },
     {
       "name": "@everymatrix/lottery-game-details",
       "tags": [
         "lottery-game-details"
       ]
-    },
-    {
-      "name": "@everymatrix/lottery-grid",
-      "tags": [
-        "lottery-grid"
-      ]
-    },
-    {
-      "name": "@everymatrix/lottery-ticket",
-      "tags": [
-        "lottery-ticket"
-      ]
-    },
-    {
-      "name": "@everymatrix/lottery-ticket-controller",
-      "tags": [
-        "lottery-ticket-controller"
-      ]
     }
   ],
   "bundles": [

package/dist/collection/components/lottery-game-page/lottery-game-page.css

@@ -36,16 +36,17 @@
   align-items: center;
 }
 .GamePage .TotalWinnings {
-  color: #00958f;
+  color: #000;
   font-size: 18px;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 10px;
+  text-transform: uppercase;
 }
 .GamePage .TotalWinnings span {
-  font-size: 22px;
+  font-size: 18px;
   font-weight: 700;
 }
 .GamePage .NextDraw {
@@ -54,7 +55,7 @@
   font-weight: 600;
   margin: 0 auto;
   text-align: center;
-  text-transform: capitalize;
+  text-transform: uppercase;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -63,6 +64,9 @@
 .GamePage .NextDraw .BannerText {
   font-weight: 400;
   font-size: 18px;
+  text-transform: uppercase;
+  padding: 0;
+  margin: 15px 0 0 0;
 }
 .GamePage .NextDraw .BannerCountdown {
   font-size: 22px;
@@ -95,9 +99,21 @@
   color: #FFF;
 }
 
+.LastDrawResultsTitle {
+  color: #009993;
+  padding: 25px 0 10px 0;
+  text-align: center;
+  border-radius: 4px;
+  text-transform: uppercase;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+}
+
 .NextDrawWrapper {
   padding: 10px 15px;
-  background: #fff;
+  background: #F1F1F1;
+  background: linear-gradient(0deg, #f1f1f1 0%, rgba(253, 187, 45, 0) 100%);
 }
 .NextDrawWrapper .BannerText {
   font-size: 16px;
@@ -114,7 +130,7 @@
 }
 
 .GamePageContent {
-  padding: 10px 15px;
+  padding: 15px;
   max-width: 1200px;
   margin: 0 auto;
 }
@@ -122,7 +138,6 @@
 .GameDetails {
   padding-bottom: 10px;
   margin-bottom: 20px;
-  border-bottom: 1px solid #e9e9e9;
 }
 
 .CreateNewTicket {
@@ -221,6 +236,11 @@
 .ButtonWrapper .Button:hover {
   background: #00ABA4;
 }
+.ButtonWrapper .Button.ButtonDisabled {
+  pointer-events: none;
+  background: #ccc;
+  border: 1px solid #ccc;
+}
 
 .SubmitModalSuccess {
   text-align: center;

package/dist/collection/components/lottery-game-page/lottery-game-page.js

@@ -28,6 +28,8 @@ export class LotteryGamePage {
     this.deleteVisible = false;
     this.latestDraw = {};
     this.totalWinningsAmount = 0;
+    this.isLoggedIn = false;
+    this.loginModalVisible = false;
     this.multiplier = false;
     this.quickPick = false;
   }
@@ -35,6 +37,10 @@ export class LotteryGamePage {
   connectedCallback() {
     this.getGameDetails();
     this.getDraws();
+    console.log(this.language);
+    if (this.sessionId) {
+      this.isLoggedIn = true;
+    }
   }
   countdownLogic(date) {
     this.interval = setInterval(() => {
@@ -61,7 +67,6 @@ export class LotteryGamePage {
       this.gameData = data;
       this.basicStake = this.gameData.rules.stakes[0].amount;
       let draws = this.gameData.draws.filter((item) => !item.winningNumbers);
-      console.log('draws', draws);
       this.nextDraw = draws[0].id;
       this.createNewTicket();
     })
@@ -124,6 +129,7 @@ export class LotteryGamePage {
   }
   modalCloseEvent() {
     this.deleteVisible = false;
+    this.loginModalVisible = false;
   }
   stakeChangeHandler(event) {
     const { ticketId, stake } = event.detail;
@@ -185,6 +191,9 @@ export class LotteryGamePage {
       { gameId: this.gameId, ticketId: this.tickets.length + 1, completed: false, amount: 1, stake: this.basicStake, grids: [] }
     ];
   }
+  showLoginModal() {
+    this.loginModalVisible = true;
+  }
   submitTickets() {
     let url = new URL(`${this.endpoint}/tickets`);
     // @TODO Body TS type
@@ -192,7 +201,6 @@ export class LotteryGamePage {
       gameId: this.gameId,
       tickets: []
     };
-    console.log('body', body);
     this.tickets.forEach((item) => {
       body.tickets.push({
         startingDrawId: this.nextDraw,
@@ -236,7 +244,7 @@ export class LotteryGamePage {
     }
     return (
     /* Game details */
-    h("div", { class: "GamePage" },
+    h("div", { class: "GamePage", dir: this.language == 'ar' ? 'rtl' : 'ltr' },
       h("div", { class: "GridBanner" },
         h("div", { class: "BannerButtonsWrapper" },
           h("button", { class: "BannerBackButton" },
@@ -291,9 +299,16 @@ export class LotteryGamePage {
                 " ",
                 this.currency)),
             h("div", { class: "ButtonWrapper" },
-              h("span", { class: "Button", onClick: () => this.submitTickets() }, translate('orderSummarySubmit', this.language))))),
+              this.isLoggedIn &&
+                h("span", { class: "Button", onClick: () => this.submitTickets() }, translate('orderSummarySubmit', this.language)),
+              !this.isLoggedIn &&
+                h("div", null,
+                  h("span", { class: "Button", onClick: () => this.showLoginModal() }, translate('orderSummarySubmit', this.language)),
+                  h("helper-modal", { "title-modal": "Success", visible: this.loginModalVisible },
+                    h("p", { class: "SubmitModalSuccess" }, translate('modalLogin', this.language))))))),
       this.tabIndex == 1 &&
         h("div", null,
+          h("h4", { class: "LastDrawResultsTitle" }, translate('lastDrawResultsTitle', this.language)),
           h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language, "draw-id": this.lastDrawId, "draw-mode": true }),
           h("lottery-draw-results-history", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language })),
       h("helper-modal", { "title-modal": "Success", visible: this.successVisible },
@@ -453,7 +468,9 @@ export class LotteryGamePage {
     "secondsRemaining": {},
     "latestDraw": {},
     "totalWinningsAmount": {},
-    "nextDate": {}
+    "nextDate": {},
+    "isLoggedIn": {},
+    "loginModalVisible": {}
   }; }
   static get elementRef() { return "element"; }
   static get listeners() { return [{

package/dist/collection/utils/locale.utils.js

@@ -1,5 +1,5 @@
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'ar'];
 const TRANSLATIONS = {
   en: {
     error: 'Error',
@@ -12,7 +12,7 @@ const TRANSLATIONS = {
     buy: 'Buy tickets',
     viewLatest: 'View latest results',
     createTicket: 'Create Ticket',
-    modalSuccess: 'Purchase will be successfull soon!',
+    modalSuccess: 'Purchase successfully completed!',
     deleteTicketModalTitle: 'Delete Ticket',
     deleteTicketModalText: 'Are you sure you want to delete this ticket?',
     deleteTicketModalCancel: 'Cancel',
@@ -20,7 +20,9 @@ const TRANSLATIONS = {
     orderSummaryTitle: 'Order Summary',
     orderSummaryTickets: 'Ticket',
     orderSummaryTotal: 'Total',
-    orderSummarySubmit: 'Submit'
+    orderSummarySubmit: 'Submit',
+    lastDrawResultsTitle: 'Last Draw Results',
+    modalLogin: 'Please login to submit a ticket',
   },
   ro: {
     error: 'Eroare',
@@ -29,11 +31,11 @@ const TRANSLATIONS = {
     lobbyButton: 'Lobby',
     prize: 'MARELE JACKPOT OMG',
     winUpTo: 'Castiga pana la',
-    nextDraw: 'In cat timp devii milionar daca cumperi acum!!!',
+    nextDraw: 'Urmatoarea extragere:',
     buy: 'Cumpara bilet',
     viewLatest: 'Ultimile extrageri',
     createTicket: 'Creeaza bilet',
-    modalSuccess: 'Achiziția va avea succes în curând!',
+    modalSuccess: 'Achizitie efectuata cu succes',
     deleteTicketModalTitle: 'Sterge biletul',
     deleteTicketModalText: 'Esti sigur ca vrei sa stergi acest bilet?',
     deleteTicketModalCancel: 'Anuleaza',
@@ -41,7 +43,32 @@ const TRANSLATIONS = {
     orderSummaryTitle: 'Rezumat comanda',
     orderSummaryTickets: 'Bilet',
     orderSummaryTotal: 'Total',
-    orderSummarySubmit: 'Trimite'
+    orderSummarySubmit: 'Trimite',
+    lastDrawResultsTitle: 'Cele mai recente extrageri',
+    modalLogin: 'Please login to submit a ticket',
+  },
+  ar: {
+    error: 'خطأ',
+    title: 'كرونو',
+    backButton: 'خلف',
+    lobbyButton: 'ردهة',
+    prize: 'جائزة',
+    winUpTo: 'الفوز بما يصل الى',
+    nextDraw: 'السحب التالي:',
+    buy: 'اشتري تذاكر',
+    viewLatest: 'عرض أحدث النتائج',
+    createTicket: 'إنشاء تذكرة',
+    modalSuccess: '!سيتم الشراء بنجاح قريبًا',
+    deleteTicketModalTitle: 'حذف التذكرة',
+    deleteTicketModalText: 'هل أنت متأكد أنك تريد حذف هذه التذكرة؟',
+    deleteTicketModalCancel: 'يلغي',
+    deleteTicketModalConfirm: 'حذف',
+    orderSummaryTitle: 'ملخص الطلب',
+    orderSummaryTickets: 'تذكرة',
+    orderSummaryTotal: 'المجموع',
+    orderSummarySubmit: 'يُقدِّم',
+    lastDrawResultsTitle: 'Cele mai recente extrageri',
+    modalLogin: 'الرجاء تسجيل الدخول لتقديم تذكرة'
   },
 };
 export const translate = (key, customLang) => {

package/dist/components/helper-accordion2.js

@@ -15,7 +15,7 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:4px;margin-bottom:1px;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{border-radius:4px;margin-top:10px;cursor:pointer;text-transform:capitalize;display:block;font-size:12px;text-align:center;padding:8px 20px;width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
+const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:4px 4px 0 0;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px}.HeaderTicketHistory:hover{background:#00ABA4}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:#000}.HeaderTicketHistory .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:4px;margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
 
 const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -23,6 +23,10 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.accordionEvent = createEvent(this, "helperAccordionAction", 7);
+    /**
+   * Flag for ticket history
+   */
+    this.ticketHistoryFlag = false;
     /**
      * Title (top header)
      */
@@ -75,13 +79,14 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.accordionEvent.emit();
   }
   render() {
-    return (h("div", { class: "Wrapper" }, h("div", { class: "Header" }, h("p", { class: "Title" }, this.headerTitle), h("p", { class: "Subtitle" }, this.headerSubtitle), h("p", { class: "Subtitle" }, this.description), h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
+    return (h("div", { class: "Wrapper" }, h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header' }, h("p", { class: "Title" }, this.headerTitle), h("p", { class: "Subtitle" }, this.headerSubtitle), h("p", { class: "Subtitle" }, this.description), h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
       h("div", null, h("div", { class: "Content" }, h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
         h("div", null, this.deleteTab &&
           h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
   }
   static get style() { return helperAccordionCss; }
 }, [1, "helper-accordion", {
+    "ticketHistoryFlag": [4, "ticket-history-flag"],
     "headerTitle": [1, "header-title"],
     "headerSubtitle": [1, "header-subtitle"],
     "description": [1],

package/dist/components/helper-tab2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const helperTabCss = ":host{display:block}";
+const helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:#000;font-weight:normal}";
 
 const HelperTab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -11,24 +11,28 @@ const HelperTab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Selected index
      */
     this.selectedIndex = 0;
+    this.tabContent = '';
   }
-  /**
- * Endpoing for CMS
- */
   connectedCallback() {
     /**
      * fetch(cmsEndpoint + / + / + selectedIndex)
      */
   }
   render() {
-    return [
-      h("div", null, "Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.", this.selectedIndex + 1)
-    ];
+    this.tabContent = h("div", { class: "TabContent" }, "Each play includes one set of numbers from 1 to 21 with a selectable number of 8 and a second, 4-digit set of numbers, with a minimum selection of 1. Draws are held every 5 minutes and the winnings are automatically credited to your account.");
+    if (this.selectedIndex + 1 == 2) {
+      this.tabContent = h("div", { class: "TabContent" }, h("ol", null, h("li", null, "Register or Login"), h("li", null, "Buy tickets. Select 'Buy Tickets' to pick your numbers. Want us to automatically generate random numbers for you? Choose \u201CI feel lucky\u201D."), h("li", null, "Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!")));
+    }
+    else if (this.selectedIndex + 1 == 3) {
+      this.tabContent = h("div", { class: "TabContent" }, h("ul", null, h("li", null, "What are my odds of winning?"), h("li", null, "How can I find out if I\u2019ve won a draw game?"), h("li", null, "How do I claim my prize?")));
+    }
+    return (this.tabContent);
   }
   static get style() { return helperTabCss; }
 }, [1, "helper-tab", {
     "selectedIndex": [2, "selected-index"],
-    "cmsEndpoint": [1, "cms-endpoint"]
+    "cmsEndpoint": [1, "cms-endpoint"],
+    "tabContent": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/helper-tabs2.js

@@ -23,7 +23,7 @@ const HelperTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     /**
      * Tabs details
      */
-    this.tabs = [{ label: 'Draw Details' }, { label: 'Winnings' }, { label: 'How to Play' }, { label: 'Game Odds' }, { label: 'FAQs' }];
+    this.tabs = [{ label: 'How to Play' }, { label: 'About' }, { label: 'FAQs' }];
   }
   connectedCallback() {
   }

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 /* LotteryGamePage custom elements */
-export { LotteryGamePage as LotteryGamePage } from '../types/components/lottery-game-page/lottery-game-page';
+
+import type { Components, JSX } from "../types/components";
 
 /**
  * Used to manually set the base path where assets can be found.
@@ -19,4 +20,7 @@ export interface SetPlatformOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
 export * from '../types';

package/dist/components/index.js

@@ -1,15 +1 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-export { HelperAccordion, defineCustomElement as defineCustomElementHelperAccordion } from './helper-accordion.js';
-export { HelperFilters, defineCustomElement as defineCustomElementHelperFilters } from './helper-filters.js';
-export { HelperModal, defineCustomElement as defineCustomElementHelperModal } from './helper-modal.js';
-export { HelperPagination, defineCustomElement as defineCustomElementHelperPagination } from './helper-pagination.js';
-export { HelperTab, defineCustomElement as defineCustomElementHelperTab } from './helper-tab.js';
-export { HelperTabs, defineCustomElement as defineCustomElementHelperTabs } from './helper-tabs.js';
-export { LotteryBullet, defineCustomElement as defineCustomElementLotteryBullet } from './lottery-bullet.js';
-export { LotteryDrawResults, defineCustomElement as defineCustomElementLotteryDrawResults } from './lottery-draw-results.js';
-export { LotteryDrawResultsHistory, defineCustomElement as defineCustomElementLotteryDrawResultsHistory } from './lottery-draw-results-history.js';
-export { LotteryGameDetails, defineCustomElement as defineCustomElementLotteryGameDetails } from './lottery-game-details.js';
-export { LotteryGamePage, defineCustomElement as defineCustomElementLotteryGamePage } from './lottery-game-page.js';
-export { LotteryGrid, defineCustomElement as defineCustomElementLotteryGrid } from './lottery-grid.js';
-export { LotteryTicket, defineCustomElement as defineCustomElementLotteryTicket } from './lottery-ticket.js';
-export { LotteryTicketController, defineCustomElement as defineCustomElementLotteryTicketController } from './lottery-ticket-controller.js';