@everymatrix/lottery-draw-results 0.0.3

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-03778cb9.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-draw-results.cjs",[[1,"lottery-draw-results",{"endpoint":[1],"gameId":[1,"game-id"],"language":[1],"playerId":[1,"player-id"],"drawMode":[4,"draw-mode"],"drawId":[1,"draw-id"],"gameName":[1,"game-name"],"multiplier":[32],"ticketData":[32],"isLoading":[32],"drawResults":[32],"rules":[32],"toggleDrawer":[32],"hasErrors":[32],"errorText":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/lottery-draw-results.cjs.entry.js

@@ -0,0 +1,179 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-03778cb9.js');
+require('@everymatrix/lottery-grid');
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    drawResultsHeader: 'Last draw results',
+    drawId: 'Draw ID',
+    drawName: 'Game name',
+    drawDate: 'Draw Date',
+    drawNumbersGridDraw: 'Draw numbers Grid A',
+    drawNumbersGridTicket: 'Draw numbers Grid B',
+    ticketResult: 'Ticket result',
+    amountWon: 'Amount won',
+    numberOfDraws: 'Number of draws'
+  },
+  ro: {
+    drawResultsHeader: 'Ultimele rezultate extragere',
+    drawId: 'Id extragere',
+    drawName: 'Numele jocului',
+    drawDate: 'Data extragerii',
+    drawNumbersGridDraw: 'Numerele extrase Grid A',
+    drawNumbersGridTicket: 'Numerele extrase Grid B',
+    ticketResult: 'Rezultatul biletului',
+    amountWon: 'Suma castigata',
+    numberOfDraws: 'Numarul de extrageri'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const lotteryDrawResultsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketInfo{display:flex;flex-direction:row;gap:15px;background-color:#009993;color:#fff;padding:12px;font-size:14px}.DrawResultsSection{max-width:500px;margin:0 auto;margin:0px auto 10px;border-radius:4px}.DrawResultsHeader{display:flex;justify-content:space-between;padding:10px 20px;background-color:#009993;color:#fff;font-size:14px}.DrawResultsHeader h4{text-transform:uppercase;font-weight:400;margin:0}.DrawMultipler label{display:block;margin:15px 0}.DrawResultsBody{padding:0 20px}.DrawResultsBody .DrawNumbersGrid{font-size:14px}.DrawResultsBody .NumberOfDrawsContainer{display:table;width:100%}.Toggle{cursor:pointer;display:inline-block}.ToggleSwitch{display:inline-block;background:#ccc;border-radius:16px;width:58px;height:24px;position:relative;vertical-align:middle;transition:background 0.25s}.ToggleSwitch:before,.ToggleSwitch:after{content:\"\"}.ToggleSwitch:before{display:block;background:linear-gradient(to bottom, #fff 0%, #eee 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.25);width:16px;height:16px;position:absolute;top:4px;left:4px;transition:left 0.25s}.Toggle:hover .ToggleSwitch:before{background:linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.5)}.ToggleCheckbox:checked+.ToggleSwitch{background:#56c080}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{margin-right:5px;position:relative;top:2px}.DrawTicketsContainer{margin:30px auto}.ExpandableBoxes{position:relative}.ExpandableBox{width:100%;height:100%;max-height:100px;float:left;margin:0 0 20px 0;border:1px solid #009993;border-radius:4px;padding:10px;box-sizing:border-box;-webkit-transition:all 0.6s ease-in-out;-moz-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;-ms-transition:all 0.6s ease-in-out;transition:all 0.6s ease-in-out;overflow:hidden}.ExpandableBox.ShowBox{max-height:400px;margin:0px 0px 20p 0px}.ExpandableBox.HideBox{width:0;height:0;overflow:hidden;border:none;padding:0;margin:0;opacity:0}";
+
+const DEFAULT_VALUES = {
+  gamename: 'Chrono',
+  gamedate: '24/09/2022',
+  state: 'Processing',
+  amount: 304444,
+  ticketid: '6963444',
+  selection: '[5, 6, 7, 8,  9]',
+  multiplier: 4.5,
+  resultstatus: 'Processing',
+  drawstatus: 'Won',
+  drawamount: 1022,
+  drawid: '54545555',
+  drawdate: '24/09/2032'
+};
+const LotteryDrawResults = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * Shows only the last draw
+     */
+    this.drawMode = false;
+    this.gameName = '';
+    this.multiplier = 5.434;
+    this.ticketData = {};
+    this.isLoading = true;
+    this.drawResults = [];
+    this.rules = {};
+    this.toggleDrawer = [false];
+    this.hasErrors = false;
+    this.errorText = '';
+    this.changeBox = (index) => {
+      this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
+        if (itemIndex == index) {
+          return !item;
+        }
+        return item;
+      });
+      if (index >= this.toggleDrawer.length) {
+        this.toggleDrawer.push(true);
+      }
+    };
+  }
+  connectedCallback() {
+    let promises = [];
+    promises.push(this.getGameData());
+    if (this.playerId) {
+      promises.push(this.getTicketData());
+    }
+    if (this.drawId) {
+      promises.push(this.getDrawData());
+    }
+    Promise.all(promises)
+      .then(() => {
+      this.isLoading = false;
+    });
+  }
+  getDrawData() {
+    return new Promise((resolve, reject) => {
+      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${this.drawId}`);
+      fetch(url.href)
+        .then((response) => {
+        // @TODO EXCEPTIONS
+        return response.json();
+      })
+        .then((data) => {
+        this.drawData = data;
+        resolve(true);
+      })
+        .catch((err) => {
+        reject(err);
+      });
+    });
+  }
+  getGameData() {
+    return new Promise((resolve, reject) => {
+      let url = new URL(`${this.endpoint}/games/${this.gameId}`);
+      fetch(url.href)
+        .then((response) => {
+        return response.json();
+      })
+        .then((data) => {
+        this.rules = {
+          maximumAllowed: data.rules.boards[0].maximumAllowed,
+          totalNumbers: data.rules.boards[0].totalNumbers
+        };
+        resolve(true);
+      })
+        .catch((err) => {
+        this.isLoading = false;
+        this.hasErrors = true;
+        this.errorText = err;
+        reject(err);
+      });
+    });
+  }
+  getTicketData() {
+    return new Promise((resolve, reject) => {
+      let url = new URL(`${this.endpoint}/tickets/player/${this.playerId}`);
+      fetch(url.href)
+        .then((response) => {
+        return response.json();
+      })
+        .then((data) => {
+        this.ticketData = data.length === 0 ? DEFAULT_VALUES : data[1];
+        this.drawResults = this.ticketData.drawResults.map((item) => item);
+        this.selection = this.ticketData.selection[0].join(',');
+        resolve(true);
+      })
+        .catch((err) => {
+        reject(err);
+      });
+    });
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f;
+    if (this.isLoading) {
+      return (index.h("p", null, "Loading, please wait ..."));
+    }
+    else if (this.hasErrors) {
+      index.h("p", null, this.errorText);
+    }
+    else {
+      return (index.h("section", { class: "DrawResultsSection" }, !this.drawMode ?
+        index.h("div", { class: "DrawResultsArea" }, index.h("div", { class: "TicketInfo" }, index.h("div", { class: "TicketGameName" }, translate('drawName', this.language), ": ", index.h("span", null, this.gameName)), index.h("div", { class: "TicketDate" }, "Ticket Purchase Date: ", index.h("span", null, (_a = this.ticketData) === null || _a === void 0 ? void 0 : _a.createdAt.slice(0, 10))), index.h("div", { class: "TicketStatus" }, "Status: ", index.h("span", null, (_b = this.ticketData) === null || _b === void 0 ? void 0 : _b.state))), index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "TicketIdContainer" }, index.h("p", null, "Ticket id: ", index.h("span", null, (_c = this.ticketData) === null || _c === void 0 ? void 0 : _c.id))), index.h("div", { class: "TicketAmountContainer" }, index.h("p", null, "Ticket amount: ", index.h("span", null, (_d = this.ticketData) === null || _d === void 0 ? void 0 : _d.amount))), index.h("div", { class: "DrawNumbersGrid" }, index.h("p", null, translate('drawNumbersGridTicket', this.language), ":"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": this.selection, selectable: false, "display-selected": true, language: this.language }))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, "Multiplier: ", index.h("span", null, JSON.stringify((_e = this.ticketData) === null || _e === void 0 ? void 0 : _e.multiplier)))), index.h("div", { class: "NumberOfDrawsContainer" }, index.h("p", null, translate('numberOfDraws', this.language), ": ", (_f = this.ticketData) === null || _f === void 0 ? void 0 :
+          _f.drawCount), index.h("div", { class: "DrawTicketsContainer" }, this.drawResults.map((item, index$1) => index.h("div", { class: "ExpandableBoxes" }, index.h("div", { class: this.toggleDrawer[index$1] ? 'ExpandableBox ShowBox' : 'ExpandableBox', onClick: () => this.changeBox(index$1) }, index.h("div", { class: "TicketResultContainer" }, index.h("p", null, translate('ticketResult', this.language), ": ", item.status)), item.state == 'won' &&
+          index.h("div", { class: "AmountWonContainer" }, index.h("p", null, translate('amountWon', this.language), ": ", Number(item.amount).toLocaleString('en'), " ", item.currency)), index.h("div", { class: "DrawIdContainer" }, index.h("p", null, translate('drawId', this.language), ": ", item.drawId)), index.h("div", { class: "DrawDateContainer" }, index.h("p", null, translate('drawDate', this.language), ": ", item.updatedAt.slice(0, 10), " | ", item.updatedAt.slice(11, 19))), index.h("div", { class: "DrawNumbersGrid" }), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, "Multiplier: ", item.multiplier)))))))))
+        :
+          index.h("div", { class: "DrawResultsArea" }, this.drawData &&
+            index.h("div", null, index.h("div", { class: "DrawResultsHeader" }, index.h("span", null, translate('drawId', this.language), ":  ", this.drawData.id), index.h("span", null, translate('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "DrawNumbersGrid" }, index.h("p", null, translate('drawNumbersGridDraw', this.language), ":"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, selectedNumbers: this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language })), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, "Multiplier: ", this.multiplier))))))));
+    }
+  }
+};
+LotteryDrawResults.style = lotteryDrawResultsCss;
+
+exports.lottery_draw_results = LotteryDrawResults;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-03778cb9.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-draw-results.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-draw-results.cjs",[[1,"lottery-draw-results",{"endpoint":[1],"gameId":[1,"game-id"],"language":[1],"playerId":[1,"player-id"],"drawMode":[4,"draw-mode"],"drawId":[1,"draw-id"],"gameName":[1,"game-name"],"multiplier":[32],"ticketData":[32],"isLoading":[32],"drawResults":[32],"rules":[32],"toggleDrawer":[32],"hasErrors":[32],"errorText":[32]}]]]], options);
+});

package/dist/collection/collection-manifest.json

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

package/dist/collection/components/lottery-draw-results/lottery-draw-results.css

@@ -0,0 +1,148 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
+:host {
+  display: block;
+  font-family: "Roboto", sans-serif;
+}
+
+.TicketInfo {
+  display: flex;
+  flex-direction: row;
+  gap: 15px;
+  background-color: #009993;
+  color: #fff;
+  padding: 12px;
+  font-size: 14px;
+}
+
+.DrawResultsSection {
+  max-width: 500px;
+  margin: 0 auto;
+  margin: 0px auto 10px;
+  border-radius: 4px;
+}
+
+.DrawResultsHeader {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 20px;
+  background-color: #009993;
+  color: #fff;
+  font-size: 14px;
+}
+.DrawResultsHeader h4 {
+  text-transform: uppercase;
+  font-weight: 400;
+  margin: 0;
+}
+
+.DrawMultipler label {
+  display: block;
+  margin: 15px 0;
+}
+
+.DrawResultsBody {
+  padding: 0 20px;
+}
+.DrawResultsBody .DrawNumbersGrid {
+  font-size: 14px;
+}
+.DrawResultsBody .NumberOfDrawsContainer {
+  display: table;
+  width: 100%;
+}
+
+.Toggle {
+  cursor: pointer;
+  display: inline-block;
+}
+
+.ToggleSwitch {
+  display: inline-block;
+  background: #ccc;
+  border-radius: 16px;
+  width: 58px;
+  height: 24px;
+  position: relative;
+  vertical-align: middle;
+  transition: background 0.25s;
+}
+.ToggleSwitch:before, .ToggleSwitch:after {
+  content: "";
+}
+.ToggleSwitch:before {
+  display: block;
+  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  transition: left 0.25s;
+}
+
+.Toggle:hover .ToggleSwitch:before {
+  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
+}
+
+.ToggleCheckbox:checked + .ToggleSwitch {
+  background: #56c080;
+}
+
+.ToggleCheckbox:checked + .ToggleSwitch:before {
+  left: 38px;
+}
+
+.ToggleCheckbox {
+  position: absolute;
+  visibility: hidden;
+}
+
+.Label {
+  margin-right: 5px;
+  position: relative;
+  top: 2px;
+}
+
+.DrawTicketsContainer {
+  margin: 30px auto;
+}
+
+.ExpandableBoxes {
+  position: relative;
+}
+
+.ExpandableBox {
+  width: 100%;
+  height: 100%;
+  max-height: 100px;
+  float: left;
+  margin: 0 0 20px 0;
+  border: 1px solid #009993;
+  border-radius: 4px;
+  padding: 10px;
+  box-sizing: border-box;
+  -webkit-transition: all 0.6s ease-in-out;
+  -moz-transition: all 0.6s ease-in-out;
+  -o-transition: all 0.6s ease-in-out;
+  -ms-transition: all 0.6s ease-in-out;
+  transition: all 0.6s ease-in-out;
+  overflow: hidden;
+}
+
+.ExpandableBox.ShowBox {
+  max-height: 400px;
+  margin: 0px 0px 20p 0px;
+}
+
+.ExpandableBox.HideBox {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  border: none;
+  padding: 0;
+  margin: 0;
+  opacity: 0;
+}