@everymatrix/lottery-game-page 0.0.6 → 0.0.7

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-af6d701d.js');
+
+/*
+ Stencil Client Patch Esm v2.17.0 | 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([["lottery-game-page.cjs",[[1,"lottery-game-page",{"endpoint":[1],"gameId":[1,"game-id"],"playerId":[2,"player-id"],"sessionId":[1,"session-id"],"language":[1],"autoPick":[4,"auto-pick"],"resetButton":[4,"reset-button"],"tickets":[32],"tabIndex":[32],"hasErrors":[32],"totalAmount":[32],"successVisible":[32],"deleteVisible":[32],"deleteEventData":[32],"daysRemaining":[32],"hoursRemaining":[32],"minutesRemaining":[32],"secondsRemaining":[32],"latestDraw":[32],"totalWinningsAmount":[32],"nextDate":[32]},[[0,"ticketCompleted","gridFilledHandler"],[0,"gridDirty","gridDirtyHandler"],[0,"deleteTicket","deleteTicketHandler"],[0,"modalCloseEvent","modalCloseEvent"],[0,"stakeChange","stakeChangeHandler"],[0,"multiplierChange","multiplierChangeHandler"]]]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/lottery-game-page.cjs.entry.js

@@ -0,0 +1,304 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-af6d701d.js');
+require('@everymatrix/lottery-ticket-controller');
+require('@everymatrix/helper-modal');
+require('@everymatrix/lottery-game-details');
+require('@everymatrix/lottery-draw-results-history');
+require('@everymatrix/lottery-draw-results');
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    error: 'Error',
+    title: 'Chrono',
+    backButton: 'Back',
+    lobbyButton: 'Lobby',
+    prize: 'Prize',
+    winUpTo: 'Win up to',
+    nextDraw: 'Next draw in: ',
+    buy: 'Buy tickets',
+    viewLatest: 'View latest results',
+    createTicket: 'Create Ticket',
+    modalSuccess: 'Purchase will be successfull soon!',
+    deleteTicketModalTitle: 'Delete Ticket',
+    deleteTicketModalText: 'Are you sure you want to delete this ticket?',
+    deleteTicketModalCancel: 'Cancel',
+    deleteTicketModalConfirm: 'Delete',
+    orderSummaryTitle: 'Order Summary',
+    orderSummaryTickets: 'Ticket',
+    orderSummaryTotal: 'Total',
+    orderSummarySubmit: 'Submit'
+  },
+  ro: {
+    error: 'Eroare',
+    title: 'Loto 6/49',
+    backButton: 'Inapoi',
+    lobbyButton: 'Lobby',
+    prize: 'MARELE JACKPOT OMG',
+    winUpTo: 'Castiga pana la',
+    nextDraw: 'In cat timp devii milionar daca cumperi acum!!!',
+    buy: 'Cumpara bilet',
+    viewLatest: 'Ultimile extrageri',
+    createTicket: 'Creeaza bilet',
+    modalSuccess: 'Achiziția va avea succes în curând!',
+    deleteTicketModalTitle: 'Sterge biletul',
+    deleteTicketModalText: 'Esti sigur ca vrei sa stergi acest bilet?',
+    deleteTicketModalCancel: 'Anuleaza',
+    deleteTicketModalConfirm: 'Sterge',
+    orderSummaryTitle: 'Rezumat comanda',
+    orderSummaryTickets: 'Bilet',
+    orderSummaryTotal: 'Total',
+    orderSummarySubmit: 'Trimite'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const lotteryGamePageCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GamePage .GridBanner{background-color:#009993;background-repeat:no-repeat;background-position:center;color:#111;padding:0 20px 10px;height:220px;display:flex;flex-direction:column;justify-content:space-between}.GamePage .GridBanner .BannerButtonsWrapper{display:flex;justify-content:space-between;padding-top:16px}.GamePage .GridBanner .BannerButtonsWrapper .BannerBackButton,.GamePage .GridBanner .BannerButtonsWrapper .BannerLobbyButton{background:#fff;border:1px solid #D4D4D4;border-radius:4px;padding:7px 15px;font-size:12px;text-transform:uppercase;width:80px}.GamePage .GridBanner .GridBannerArea{padding-top:30px;display:flex;flex-direction:column;align-items:center}.GamePage .TotalWinnings{color:#00958f;font-size:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.GamePage .TotalWinnings span{font-size:22px;font-weight:700}.GamePage .NextDraw{color:#00958f;font-size:24px;font-weight:600;margin:0 auto;text-align:center;text-transform:capitalize;display:flex;justify-content:center;align-items:center;flex-direction:column}.GamePage .NextDraw .BannerText{font-weight:400;font-size:18px}.GamePage .NextDraw .BannerCountdown{font-size:22px;color:#00958f;display:flex;gap:20px}.GamePage .Tabs{display:flex;justify-content:center;gap:10px}.GamePage .Tabs .TabButton{border-radius:4px;cursor:pointer;padding:8px 0;width:50%;max-width:200px;border:1px solid #00958f;background:#F1F1F1;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.GamePage .Tabs .TabButton.Active{background:#00958f;color:#FFF}.NextDrawWrapper{padding:10px 15px;background:#fff}.NextDrawWrapper .BannerText{font-size:16px;font-weight:700;text-align:center}.NextDrawWrapper .BannerCountdown{font-size:22px;display:flex;gap:8px;color:#009993;font-weight:bolder;justify-content:center}.GamePageContent{padding:10px 15px;max-width:1200px;margin:0 auto}.GameDetails{padding-bottom:10px;margin-bottom:20px;border-bottom:1px solid #e9e9e9}.CreateNewTicket{background:#004D4A;height:100px;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.CreateNewTicket button{cursor:pointer;display:inline-block;border-radius:50%;width:40px;height:40px;margin:5px;border:1px solid #FFF;background:#FFF;color:#004D4A;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.CreateNewTicket button:hover{background:#F1F1F1}.CreateNewTicket span{display:inline-block;font-size:12px;text-align:center;margin:0 auto;color:#FFF}.OrderSummary{min-width:200px;border-radius:4px;display:flex;flex-direction:column;justify-content:center;margin-top:20px;background:#fff}.OrderSummary .OrderSummaryTitle{font-size:16px;color:#009993;text-transform:uppercase;text-align:center}.OrderSummary .Ticket{display:inline-block;color:#000;font-size:14px;height:50px;border-bottom:solid 1px #D4D4D4;line-height:50px}.OrderSummary .Ticket span{text-align:right}.OrderSummary .Total{display:inline-block;color:#000;font-size:14px;height:50px;line-height:50px}.OrderSummary .Total span{text-align:right}.ButtonWrapper{display:flex;align-items:center;justify-content:center}.ButtonWrapper .Button{cursor:pointer;border-radius:4px;padding:8px 60px;width:max-content;margin:5px;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0;background:#009993;border:1px solid #009993;color:#FFF}.ButtonWrapper .Button:hover{background:#00ABA4}.SubmitModalSuccess{text-align:center;font-size:18px;padding:20px}.DeleteTicketModalWrapper{padding:20px;text-align:center}.DeleteTicketModalWrapper .DeleteTicketModalTitle{font-size:16px;color:#00958f;font-weight:400;text-transform:uppercase;margin:20px 0 40px}.DeleteTicketModalWrapper .DeleteTicketModalText{font-size:14px;color:#000;line-height:22px;margin-bottom:40px}.DeleteTicketModalWrapper .DeleteTicketModalButtons{display:flex;gap:10px;justify-content:center}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalConfirm{cursor:pointer;border-radius:4px;padding:8px 25px;width:max-content;margin:5px;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalConfirm:hover{background:#FF6536;border:1px solid #FF3D00}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalCancel{cursor:pointer;width:max-content;border-radius:4px;padding:10px 25px;margin:5px;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalCancel:hover{background:#F1F1F1}@media (min-width: 1200px){.GamePageContent .TicketsWrapper{float:left;width:49%}.GamePageContent .GameDetails{float:right;width:49%}.GamePageContent .OrderSummary{float:right;width:49%}}";
+
+const LotteryGamePage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * Shows the auto-pick button
+     */
+    this.autoPick = false;
+    /**
+     * Shows the reset button
+     */
+    this.resetButton = false;
+    this.tickets = [];
+    this.tabIndex = 0;
+    this.hasErrors = false;
+    this.totalAmount = 0;
+    this.successVisible = false;
+    this.deleteVisible = false;
+    this.latestDraw = {};
+    this.totalWinningsAmount = 0;
+    this.multiplier = false;
+    this.quickPick = false;
+  }
+  // @TODO fix `any` type later, I'm lazy now
+  connectedCallback() {
+    this.getGameDetails();
+    this.getDraws();
+  }
+  countdownLogic(date) {
+    this.interval = setInterval(() => {
+      this.daysRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / (1000 * 60 * 60 * 24));
+      this.hoursRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / (1000 * 60 * 60) - this.daysRemaining * 24);
+      this.minutesRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / (1000 * 60) - this.daysRemaining * 24 * 60 - this.hoursRemaining * 60);
+      this.secondsRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / 1000 - this.daysRemaining * 24 * 60 * 60 - this.hoursRemaining * 60 * 60 - this.minutesRemaining * 60);
+    }, 1000);
+  }
+  disconnectedCallback() {
+    clearInterval(this.interval);
+  }
+  getGameDetails() {
+    let url = new URL(`${this.endpoint}/games/${this.gameId}`);
+    fetch(url.href)
+      .then((res) => {
+      if (res.status >= 300) {
+        this.hasErrors = true;
+        throw new Error('There was an error while fetching the data');
+      }
+      return res.json();
+    })
+      .then((data) => {
+      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();
+    })
+      .catch((err) => {
+      this.hasErrors = true;
+      console.log('Error', err);
+    });
+  }
+  calculateTotalAmount() {
+    const { currency } = this.gameData.rules.stakes[0];
+    this.totalAmount = 0;
+    this.tickets.forEach((item) => {
+      if (item.completed) {
+        this.totalAmount += item.amount * item.stake;
+      }
+    });
+    this.currency = currency;
+  }
+  // @TODO CustomEvent type
+  gridFilledHandler(event) {
+    // @TODO item ts
+    this.tickets = this.tickets.map((item) => {
+      if (item.ticketId == event.detail.id) {
+        let arr = item.selectedNumbers || [];
+        arr[event.detail.index] = event.detail.selectedNumbers.map((item) => parseInt(item, 10));
+        return {
+          gameId: item.gameId,
+          ticketId: item.ticketId,
+          completed: true,
+          amount: event.detail.draws,
+          stake: item.stake,
+          selectedNumbers: arr
+        };
+      }
+      return item;
+    });
+    this.calculateTotalAmount();
+  }
+  // @TODO fix any type
+  gridDirtyHandler(event) {
+    // @TODO item ts
+    this.tickets = this.tickets.map((item) => {
+      if (item.gameId == event.detail.id) {
+        return {
+          gameId: item.gameId,
+          ticketId: item.ticketId,
+          completed: false,
+          amount: item.amount,
+          stake: item.stake,
+          grids: []
+        };
+      }
+      return item;
+    });
+  }
+  // @TODO CustomEvent type
+  deleteTicketHandler(event) {
+    this.deleteVisible = true;
+    this.deleteEventData = event;
+  }
+  modalCloseEvent() {
+    this.deleteVisible = false;
+  }
+  stakeChangeHandler(event) {
+    const { ticketId, stake } = event.detail;
+    this.tickets[ticketId - 1].stake = stake;
+    this.calculateTotalAmount();
+  }
+  multiplierChangeHandler(event) {
+    this.multiplier = event.detail;
+  }
+  getDraws() {
+    // append from query param with the current date value in order to get the next draw
+    let url = new URL(`${this.endpoint}/games/${this.gameId}/draws`);
+    let drawOptions = {
+      method: "GET",
+      headers: {
+        'Content-Type': "application/json",
+        'Accept': 'application/json',
+      },
+    };
+    fetch(url.href, drawOptions)
+      .then((response) => {
+      return response.json();
+    })
+      .then((data) => {
+      var _a;
+      let upcoming = data.items.filter((item) => {
+        if (Date.parse(item.date) > new Date().getTime()) {
+          return !item.winningNumbers;
+        }
+      });
+      let past = data.items.filter((item) => item.winningNumbers);
+      this.latestDraw = upcoming[0];
+      this.nextDate = this.latestDraw.date;
+      this.countdownLogic(this.nextDate);
+      this.lastDrawId = past[past.length - 1].id;
+      // calculate total winnings
+      // @TODO fix any type
+      (_a = this.latestDraw) === null || _a === void 0 ? void 0 : _a.prizes.forEach((element) => {
+        this.totalWinningsAmount += JSON.parse(element.amount);
+      });
+    });
+  }
+  ;
+  // @TODO fix any type
+  confirmDeleteTicketHandler(event) {
+    // @TODO fix any type
+    this.tickets = this.tickets.filter((item) => {
+      if (item.ticketId == event.detail.ticketId) {
+        return false;
+      }
+      return true;
+    });
+    this.calculateTotalAmount();
+    this.deleteVisible = false;
+  }
+  createNewTicket() {
+    this.tickets = [
+      ...this.tickets,
+      { gameId: this.gameId, ticketId: this.tickets.length + 1, completed: false, amount: 1, stake: this.basicStake, grids: [] }
+    ];
+  }
+  submitTickets() {
+    let url = new URL(`${this.endpoint}/tickets`);
+    // @TODO Body TS type
+    let body = {
+      gameId: this.gameId,
+      tickets: []
+    };
+    console.log('body', body);
+    this.tickets.forEach((item) => {
+      body.tickets.push({
+        startingDrawId: this.nextDraw,
+        amount: item.stake,
+        gameId: this.gameId,
+        currency: this.currency,
+        selection: item.selectedNumbers,
+        multiplier: this.multiplier,
+        drawCount: item.amount,
+        quickPick: this.quickPick,
+      });
+    });
+    // @TODO Options TS type
+    let options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+        'Authorization': `Bearer ${this.sessionId}`
+      },
+      body: JSON.stringify(body)
+    };
+    fetch(url.href, options)
+      .then((res) => {
+      if (res.status > 300) {
+        throw new Error('err');
+      }
+      return res.json();
+    })
+      .then((data) => {
+      console.log('data', data);
+    });
+    this.successVisible = true;
+  }
+  render() {
+    // const backgroundSrc = getAssetPath('./static/chrono_lottery_mobile.png');
+    // const backgroundDesktopSrc = getAssetPath('./static/chrono_desktop.png');
+    if (this.hasErrors) {
+      return (index.h("div", { class: "GamePage" }, index.h("div", { class: "Title" }, translate('error', this.language))));
+    }
+    return (
+    /* Game details */
+    index.h("div", { class: "GamePage" }, index.h("div", { class: "GridBanner" }, index.h("div", { class: "BannerButtonsWrapper" }, index.h("button", { class: "BannerBackButton" }, index.h("span", { class: "BannerBackButtonArrow" }, "\u1438 "), translate('backButton', this.language)), index.h("button", { class: "BannerLobbyButton" }, translate('lobbyButton', this.language))), index.h("div", { class: "Tabs" }, index.h("div", { class: 'TabButton' + (this.tabIndex == 0 ? ' Active' : ''), onClick: () => this.tabIndex = 0 }, translate('buy', this.language)), index.h("div", { class: 'TabButton' + (this.tabIndex == 1 ? ' Active' : ''), onClick: () => this.tabIndex = 1 }, translate('viewLatest', this.language)))), index.h("div", { class: "NextDrawWrapper" }, index.h("div", { class: "TotalWinnings" }, translate('winUpTo', this.language), ": ", index.h("span", null, "$", this.totalWinningsAmount.toLocaleString('en-US', { maximumFractionDigits: 2 }))), index.h("div", { class: "NextDraw" }, index.h("p", { class: "BannerText" }, translate('nextDraw', this.language)), index.h("div", { class: "BannerCountdown" }, index.h("span", { class: "CountdownDays" }, this.daysRemaining, "D"), index.h("span", { class: "CountdownHours" }, this.hoursRemaining, "H"), index.h("span", { class: "CountdownMinutes" }, this.minutesRemaining, "M"), index.h("span", { class: "CountdownSeconds" }, this.secondsRemaining, "S")))), this.tabIndex == 0 &&
+      index.h("div", { class: "GamePageContent" }, index.h("div", { class: "GameDetails" }, index.h("lottery-game-details", null)), index.h("div", { class: "TicketsWrapper" }, this.tickets.map((item) => index.h("lottery-ticket-controller", { endpoint: this.endpoint, "ticket-id": item.ticketId, "game-id": item.gameId, collapsed: false, last: true, language: this.language, "auto-pick": this.autoPick, "reset-button": this.resetButton })), index.h("div", { class: "CreateNewTicket" }, index.h("button", { onClick: () => this.createNewTicket() }, "+"), index.h("span", null, translate('createTicket', this.language)))), index.h("div", { class: "OrderSummary" }, index.h("h3", { class: "OrderSummaryTitle" }, translate('orderSummaryTitle', this.language)), index.h("div", { class: "Ticket" }, translate('orderSummaryTickets', this.language), ": ", index.h("span", null, this.tickets.length)), index.h("div", { class: "Total" }, translate('orderSummaryTotal', this.language), ": ", index.h("span", null, this.totalAmount, " ", this.currency)), index.h("div", { class: "ButtonWrapper" }, index.h("span", { class: "Button", onClick: () => this.submitTickets() }, translate('orderSummarySubmit', this.language))))), this.tabIndex == 1 &&
+      index.h("div", null, index.h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language, "draw-id": this.lastDrawId, "draw-mode": true }), index.h("lottery-draw-results-history", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language })), index.h("helper-modal", { "title-modal": "Success", visible: this.successVisible }, index.h("p", { class: "SubmitModalSuccess" }, translate('modalSuccess', this.language))), index.h("helper-modal", { "title-modal": "Delete Ticket", visible: this.deleteVisible }, index.h("div", { class: "DeleteTicketModalWrapper" }, index.h("h3", { class: "DeleteTicketModalTitle" }, translate('deleteTicketModalTitle', this.language)), index.h("p", { class: "DeleteTicketModalText" }, translate('deleteTicketModalText', this.language)), index.h("div", { class: "DeleteTicketModalButtons" }, index.h("button", { class: "DeleteTicketModalCancel", onClick: () => this.modalCloseEvent() }, translate('deleteTicketModalCancel', this.language)), index.h("button", { class: "DeleteTicketModalConfirm", onClick: () => this.confirmDeleteTicketHandler(this.deleteEventData) }, translate('deleteTicketModalConfirm', this.language)))))));
+  }
+  static get assetsDirs() { return ["static"]; }
+  get element() { return index.getElement(this); }
+};
+LotteryGamePage.style = lotteryGamePageCss;
+
+exports.lottery_game_page = LotteryGamePage;

package/dist/cjs/lottery-game-page.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-af6d701d.js');
+
+/*
+ Stencil Client Patch Browser v2.17.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('lottery-game-page.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["lottery-game-page.cjs",[[1,"lottery-game-page",{"endpoint":[1],"gameId":[1,"game-id"],"playerId":[2,"player-id"],"sessionId":[1,"session-id"],"language":[1],"autoPick":[4,"auto-pick"],"resetButton":[4,"reset-button"],"tickets":[32],"tabIndex":[32],"hasErrors":[32],"totalAmount":[32],"successVisible":[32],"deleteVisible":[32],"deleteEventData":[32],"daysRemaining":[32],"hoursRemaining":[32],"minutesRemaining":[32],"secondsRemaining":[32],"latestDraw":[32],"totalWinningsAmount":[32],"nextDate":[32]},[[0,"ticketCompleted","gridFilledHandler"],[0,"gridDirty","gridDirtyHandler"],[0,"deleteTicket","deleteTicketHandler"],[0,"modalCloseEvent","modalCloseEvent"],[0,"stakeChange","stakeChangeHandler"],[0,"multiplierChange","multiplierChangeHandler"]]]]]], options);
+});

package/dist/collection/collection-manifest.json

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

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

@@ -0,0 +1,305 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
+:host {
+  display: block;
+  font-family: "Roboto", sans-serif;
+}
+
+.GamePage .GridBanner {
+  background-color: #009993;
+  background-repeat: no-repeat;
+  background-position: center;
+  color: #111;
+  padding: 0 20px 10px;
+  height: 220px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.GamePage .GridBanner .BannerButtonsWrapper {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 16px;
+}
+.GamePage .GridBanner .BannerButtonsWrapper .BannerBackButton, .GamePage .GridBanner .BannerButtonsWrapper .BannerLobbyButton {
+  background: #fff;
+  border: 1px solid #D4D4D4;
+  border-radius: 4px;
+  padding: 7px 15px;
+  font-size: 12px;
+  text-transform: uppercase;
+  width: 80px;
+}
+.GamePage .GridBanner .GridBannerArea {
+  padding-top: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.GamePage .TotalWinnings {
+  color: #00958f;
+  font-size: 18px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+.GamePage .TotalWinnings span {
+  font-size: 22px;
+  font-weight: 700;
+}
+.GamePage .NextDraw {
+  color: #00958f;
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0 auto;
+  text-align: center;
+  text-transform: capitalize;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.GamePage .NextDraw .BannerText {
+  font-weight: 400;
+  font-size: 18px;
+}
+.GamePage .NextDraw .BannerCountdown {
+  font-size: 22px;
+  color: #00958f;
+  display: flex;
+  gap: 20px;
+}
+.GamePage .Tabs {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+.GamePage .Tabs .TabButton {
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 8px 0;
+  width: 50%;
+  max-width: 200px;
+  border: 1px solid #00958f;
+  background: #F1F1F1;
+  color: #000;
+  font-size: 12px;
+  transition: all 0.2s linear;
+  text-transform: uppercase;
+  text-align: center;
+  letter-spacing: 0;
+}
+.GamePage .Tabs .TabButton.Active {
+  background: #00958f;
+  color: #FFF;
+}
+
+.NextDrawWrapper {
+  padding: 10px 15px;
+  background: #fff;
+}
+.NextDrawWrapper .BannerText {
+  font-size: 16px;
+  font-weight: 700;
+  text-align: center;
+}
+.NextDrawWrapper .BannerCountdown {
+  font-size: 22px;
+  display: flex;
+  gap: 8px;
+  color: #009993;
+  font-weight: bolder;
+  justify-content: center;
+}
+
+.GamePageContent {
+  padding: 10px 15px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.GameDetails {
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.CreateNewTicket {
+  background: #004D4A;
+  height: 100px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.CreateNewTicket button {
+  cursor: pointer;
+  display: inline-block;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  margin: 5px;
+  border: 1px solid #FFF;
+  background: #FFF;
+  color: #004D4A;
+  font-size: 12px;
+  transition: all 0.2s linear;
+  text-transform: uppercase;
+  text-align: center;
+  letter-spacing: 0;
+}
+.CreateNewTicket button:hover {
+  background: #F1F1F1;
+}
+.CreateNewTicket span {
+  display: inline-block;
+  font-size: 12px;
+  text-align: center;
+  margin: 0 auto;
+  color: #FFF;
+}
+
+.OrderSummary {
+  min-width: 200px;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-top: 20px;
+  background: #fff;
+}
+.OrderSummary .OrderSummaryTitle {
+  font-size: 16px;
+  color: #009993;
+  text-transform: uppercase;
+  text-align: center;
+}
+.OrderSummary .Ticket {
+  display: inline-block;
+  color: #000;
+  font-size: 14px;
+  height: 50px;
+  border-bottom: solid 1px #D4D4D4;
+  line-height: 50px;
+}
+.OrderSummary .Ticket span {
+  text-align: right;
+}
+.OrderSummary .Total {
+  display: inline-block;
+  color: #000;
+  font-size: 14px;
+  height: 50px;
+  line-height: 50px;
+}
+.OrderSummary .Total span {
+  text-align: right;
+}
+
+.ButtonWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ButtonWrapper .Button {
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 8px 60px;
+  width: max-content;
+  margin: 5px;
+  font-size: 12px;
+  transition: all 0.2s linear;
+  text-transform: uppercase;
+  text-align: center;
+  letter-spacing: 0;
+  background: #009993;
+  border: 1px solid #009993;
+  color: #FFF;
+}
+.ButtonWrapper .Button:hover {
+  background: #00ABA4;
+}
+
+.SubmitModalSuccess {
+  text-align: center;
+  font-size: 18px;
+  padding: 20px;
+}
+
+.DeleteTicketModalWrapper {
+  padding: 20px;
+  text-align: center;
+}
+.DeleteTicketModalWrapper .DeleteTicketModalTitle {
+  font-size: 16px;
+  color: #00958f;
+  font-weight: 400;
+  text-transform: uppercase;
+  margin: 20px 0 40px;
+}
+.DeleteTicketModalWrapper .DeleteTicketModalText {
+  font-size: 14px;
+  color: #000;
+  line-height: 22px;
+  margin-bottom: 40px;
+}
+.DeleteTicketModalWrapper .DeleteTicketModalButtons {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+}
+.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalConfirm {
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 8px 25px;
+  width: max-content;
+  margin: 5px;
+  color: #000;
+  font-size: 12px;
+  transition: all 0.2s linear;
+  text-transform: uppercase;
+  text-align: center;
+  letter-spacing: 0;
+  background: #FF3D00;
+  border: 1px solid #FF3D00;
+  color: #FFF;
+}
+.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalConfirm:hover {
+  background: #FF6536;
+  border: 1px solid #FF3D00;
+}
+.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalCancel {
+  cursor: pointer;
+  width: max-content;
+  border-radius: 4px;
+  padding: 10px 25px;
+  margin: 5px;
+  border: 1px solid #00958f;
+  background: #FFF;
+  color: #000;
+  font-size: 12px;
+  transition: all 0.2s linear;
+  text-transform: uppercase;
+  text-align: center;
+  letter-spacing: 0;
+}
+.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalCancel:hover {
+  background: #F1F1F1;
+}
+
+@media (min-width: 1200px) {
+  .GamePageContent .TicketsWrapper {
+    float: left;
+    width: 49%;
+  }
+  .GamePageContent .GameDetails {
+    float: right;
+    width: 49%;
+  }
+  .GamePageContent .OrderSummary {
+    float: right;
+    width: 49%;
+  }
+}