@everymatrix/lottery-draw-results 0.0.3 → 0.1.4

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

@@ -14,10 +14,13 @@
   font-size: 14px;
 }
 
+.DrawResultsArea {
+  margin-top: 15px;
+}
+
 .DrawResultsSection {
-  max-width: 500px;
-  margin: 0 auto;
-  margin: 0px auto 10px;
+  max-width: 600px;
+  margin: 0px auto;
   border-radius: 4px;
 }
 
@@ -28,11 +31,13 @@
   background-color: #009993;
   color: #fff;
   font-size: 14px;
+  border-radius: 4px 4px 0 0;
 }
 .DrawResultsHeader h4 {
   text-transform: uppercase;
   font-weight: 400;
   margin: 0;
+  padding-top: 15px;
 }
 
 .DrawMultipler label {
@@ -41,7 +46,10 @@
 }
 
 .DrawResultsBody {
-  padding: 0 20px;
+  padding: 0px 20px;
+  margin-bottom: 5px;
+  border-radius: 0 0 4px 4px;
+  border: 1px solid #009993;
 }
 .DrawResultsBody .DrawNumbersGrid {
   font-size: 14px;
@@ -115,21 +123,24 @@
 }
 
 .ExpandableBox {
+  line-height: 12px;
+  font-weight: lighter;
   width: 100%;
   height: 100%;
-  max-height: 100px;
+  max-height: 70px;
   float: left;
   margin: 0 0 20px 0;
-  border: 1px solid #009993;
+  border: 1px solid #f1f1f1;
+  background: #fff;
   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;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 }
 
 .ExpandableBox.ShowBox {

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

@@ -1,20 +1,6 @@
 import { Component, Prop, h, State } from '@stencil/core';
 import { translate } from '../../utils/locale.utils';
 import '@everymatrix/lottery-grid';
-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'
-};
 export class LotteryDrawResults {
   constructor() {
     /**
@@ -25,9 +11,39 @@ export class LotteryDrawResults {
      * Shows only the last draw
      */
     this.drawMode = false;
+    /**
+     * The drawID (option)
+     */
+    this.drawId = '';
+    /**
+     * The game name
+     */
     this.gameName = '';
-    this.multiplier = 5.434;
-    this.ticketData = {};
+    /**
+     * The ticket submission date
+     */
+    this.ticketDate = '';
+    /**
+     * The ticket status
+     */
+    this.ticketStatus = '';
+    /**
+     * The ticket id
+     */
+    this.ticketId = '';
+    /**
+     * The ticket amount
+     */
+    this.ticketAmount = '';
+    /**
+     * The ticket multiplier
+     */
+    this.ticketMultiplier = false;
+    /**
+     * The ticket draw count
+     */
+    this.ticketDrawCount = 0;
+    this.multiplier = 3;
     this.isLoading = true;
     this.drawResults = [];
     this.rules = {};
@@ -49,9 +65,6 @@ export class LotteryDrawResults {
   connectedCallback() {
     let promises = [];
     promises.push(this.getGameData());
-    if (this.playerId) {
-      promises.push(this.getTicketData());
-    }
     if (this.drawId) {
       promises.push(this.getDrawData());
     }
@@ -71,9 +84,11 @@ export class LotteryDrawResults {
         .then((data) => {
         this.drawData = data;
         resolve(true);
+        this.isLoading = false;
       })
         .catch((err) => {
         reject(err);
+        this.isLoading = false;
       });
     });
   }
@@ -90,6 +105,8 @@ export class LotteryDrawResults {
           totalNumbers: data.rules.boards[0].totalNumbers
         };
         resolve(true);
+        this.isLoading = false;
+        this.hasErrors = false;
       })
         .catch((err) => {
         this.isLoading = false;
@@ -99,26 +116,7 @@ export class LotteryDrawResults {
       });
     });
   }
-  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 (h("p", null, "Loading, please wait ..."));
     }
@@ -134,20 +132,24 @@ export class LotteryDrawResults {
               ": ",
               h("span", null, this.gameName)),
             h("div", { class: "TicketDate" },
-              "Ticket Purchase Date: ",
-              h("span", null, (_a = this.ticketData) === null || _a === void 0 ? void 0 : _a.createdAt.slice(0, 10))),
+              translate('ticketPurchaseDate', this.language),
+              ": ",
+              h("span", null, this.ticketDate.slice(0, 10))),
             h("div", { class: "TicketStatus" },
-              "Status: ",
-              h("span", null, (_b = this.ticketData) === null || _b === void 0 ? void 0 : _b.state))),
+              translate('ticketStatus', this.language),
+              ": ",
+              h("span", null, this.ticketStatus))),
           h("div", { class: "DrawResultsBody" },
             h("div", { class: "TicketIdContainer" },
               h("p", null,
-                "Ticket id: ",
-                h("span", null, (_c = this.ticketData) === null || _c === void 0 ? void 0 : _c.id))),
+                translate('ticketId', this.language),
+                ": ",
+                h("span", null, this.ticketId))),
             h("div", { class: "TicketAmountContainer" },
               h("p", null,
-                "Ticket amount: ",
-                h("span", null, (_d = this.ticketData) === null || _d === void 0 ? void 0 : _d.amount))),
+                translate('ticketAmount', this.language),
+                " ",
+                h("span", null, this.ticketAmount))),
             h("div", { class: "DrawNumbersGrid" },
               h("p", null,
                 translate('drawNumbersGridTicket', this.language),
@@ -156,13 +158,14 @@ export class LotteryDrawResults {
                 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 }))),
             h("div", { class: "DrawMultipler" },
               h("label", { class: "Label" },
-                "Multiplier: ",
-                h("span", null, JSON.stringify((_e = this.ticketData) === null || _e === void 0 ? void 0 : _e.multiplier)))),
+                translate('winUpTo', this.language),
+                " ",
+                h("span", null, JSON.stringify(this.ticketMultiplier)))),
             h("div", { class: "NumberOfDrawsContainer" },
               h("p", null,
                 translate('numberOfDraws', this.language),
-                ": ", (_f = this.ticketData) === null || _f === void 0 ? void 0 :
-                _f.drawCount),
+                ": ",
+                this.ticketDrawCount),
               h("div", { class: "DrawTicketsContainer" }, this.drawResults.map((item, index) => h("div", { class: "ExpandableBoxes" },
                 h("div", { class: this.toggleDrawer[index] ? 'ExpandableBox ShowBox' : 'ExpandableBox', onClick: () => this.changeBox(index) },
                   h("div", { class: "TicketResultContainer" },
@@ -193,7 +196,8 @@ export class LotteryDrawResults {
                   h("div", { class: "DrawNumbersGrid" }),
                   h("div", { class: "DrawMultipler" },
                     h("label", { class: "Label" },
-                      "Multiplier: ",
+                      translate('winUpTo', this.language),
+                      " ",
                       item.multiplier)))))))))
         :
           h("div", { class: "DrawResultsArea" }, this.drawData &&
@@ -216,7 +220,8 @@ export class LotteryDrawResults {
                     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 })),
                   h("div", { class: "DrawMultipler" },
                     h("label", { class: "Label" },
-                      "Multiplier: ",
+                      translate('multiplier', this.language),
+                      " ",
                       this.multiplier))))))));
     }
   }
@@ -328,10 +333,11 @@ export class LotteryDrawResults {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Shows results for a specific drawID (option)"
+        "text": "The drawID (option)"
       },
       "attribute": "draw-id",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "''"
     },
     "gameName": {
       "type": "string",
@@ -345,16 +351,123 @@ export class LotteryDrawResults {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "The game name"
       },
       "attribute": "game-name",
       "reflect": false,
       "defaultValue": "''"
+    },
+    "ticketDate": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The ticket submission date"
+      },
+      "attribute": "ticket-date",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "ticketStatus": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The ticket status"
+      },
+      "attribute": "ticket-status",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "ticketId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The ticket id"
+      },
+      "attribute": "ticket-id",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "ticketAmount": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The ticket amount"
+      },
+      "attribute": "ticket-amount",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "ticketMultiplier": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The ticket multiplier"
+      },
+      "attribute": "ticket-multiplier",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "ticketDrawCount": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The ticket draw count"
+      },
+      "attribute": "ticket-draw-count",
+      "reflect": false,
+      "defaultValue": "0"
     }
   }; }
   static get states() { return {
     "multiplier": {},
-    "ticketData": {},
     "isLoading": {},
     "drawResults": {},
     "rules": {},

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

@@ -10,7 +10,13 @@ const TRANSLATIONS = {
     drawNumbersGridTicket: 'Draw numbers Grid B',
     ticketResult: 'Ticket result',
     amountWon: 'Amount won',
-    numberOfDraws: 'Number of draws'
+    numberOfDraws: 'Number of draws',
+    multiplier: 'Multiplier:',
+    ticketPurchaseDate: 'Ticket Purchase Date',
+    ticketStatus: 'Ticket Status',
+    ticketId: 'Ticket ID',
+    ticketAmount: 'Ticket Amount',
+    winUpTo: 'Win up to',
   },
   ro: {
     drawResultsHeader: 'Ultimele rezultate extragere',
@@ -21,7 +27,13 @@ const TRANSLATIONS = {
     drawNumbersGridTicket: 'Numerele extrase Grid B',
     ticketResult: 'Rezultatul biletului',
     amountWon: 'Suma castigata',
-    numberOfDraws: 'Numarul de extrageri'
+    numberOfDraws: 'Numarul de extrageri',
+    multiplier: 'Multiplicator:',
+    ticketPurchaseDate: 'Data achizitionarii biletului',
+    ticketStatus: 'Statusul biletului',
+    ticketId: 'Id biletul',
+    ticketAmount: 'Valoarea biletului',
+    winUpTo: 'Poti castiga'
   },
 };
 export const translate = (key, customLang) => {

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 /* LotteryDrawResults custom elements */
-export { LotteryDrawResults as LotteryDrawResults } from '../types/components/lottery-draw-results/lottery-draw-results';
+
+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,2 +1 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-export { LotteryDrawResults, defineCustomElement as defineCustomElementLotteryDrawResults } from './lottery-draw-results.js';

package/dist/components/lottery-bullet.js

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,56 @@
+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}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:#000000;display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px #ffffff;background:radial-gradient(circle at top, white 0%, white 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, white 0%, #f1f1f1 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;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{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#D4D4D4;border:solid 2px #D4D4D4;cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;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 #D4D4D4;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;
+  } });
+}
+
+export { LotteryBullet as L, defineCustomElement as d };