@everymatrix/lottery-ticket 0.0.3 → 0.1.4

package/dist/collection/components/lottery-ticket/lottery-ticket.css

@@ -4,6 +4,16 @@
   font-family: "Roboto", sans-serif;
 }
 
+.TicketTitle {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.ButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .Toggle {
   cursor: pointer;
   margin-top: 20px;
@@ -90,12 +100,10 @@ input[type=number]::-webkit-outer-spin-button {
   cursor: pointer;
   outline: none;
   -webkit-appearance: none;
-  background-color: transparent;
   border: none;
   align-items: center;
   justify-content: center;
   height: 20px;
-  margin: 0;
   position: relative;
 }
 
@@ -103,7 +111,6 @@ input[type=number]::-webkit-outer-spin-button {
   display: inline-block;
   position: absolute;
   transform: translate(-50%, -50%) rotate(180deg);
-  width: 30px;
   align-items: center;
   text-align: center;
 }
@@ -141,9 +148,9 @@ input[type=number]::-webkit-outer-spin-button {
 
 .AutoButton {
   cursor: pointer;
-  display: block;
+  display: inline-block;
   border-radius: 4px;
-  padding: 8px 25px;
+  padding: 8px 20px;
   width: max-content;
   margin: 5px 0;
   border: 1px solid #00958f;
@@ -162,9 +169,9 @@ input[type=number]::-webkit-outer-spin-button {
 
 .ResetButton {
   cursor: pointer;
-  display: block;
+  display: inline-block;
   border-radius: 4px;
-  padding: 8px 25px;
+  padding: 8px 20px;
   width: max-content;
   margin: 5px 0;
   color: #000;
@@ -190,4 +197,111 @@ input[type=number]::-webkit-outer-spin-button {
 }
 .TicketGridBullets .TicketGridTitle {
   margin-top: 0px;
+}
+
+.Minus {
+  border-radius: 4px;
+  width: 30px;
+  height: 24px !important;
+  margin-right: 10px;
+  color: #FFF;
+  background: #009993;
+}
+
+.Plus {
+  border-radius: 4px;
+  width: 30px;
+  height: 24px !important;
+  margin-left: 10px;
+  color: #FFF;
+  background: #009993;
+}
+
+.SelectWrapper {
+  width: auto;
+  padding: 5px;
+  margin: 0 auto;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  position: relative;
+}
+
+.SelectButton, .SelectOptions li {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.SelectButton {
+  display: flex;
+  padding: 0 5px;
+  border-radius: 7px;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+}
+.SelectButton span:first-child {
+  padding-right: 10px;
+}
+
+.SelectExpand {
+  transition: transform 0.3s linear;
+  font-size: 12px;
+}
+
+.SelectActive .SelectExpand {
+  transform: rotate(180deg);
+}
+
+.SelectContent {
+  display: none;
+  padding: 5px;
+  border-radius: 7px;
+}
+
+.SelectWrapper.SelectActive .SelectContent {
+  width: 100%;
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 32px;
+  padding: 0;
+  border: 1px solid #ccc;
+  overflow: hidden;
+  background: #fff;
+}
+
+.SelectContent .SelectOptions {
+  max-height: 100px;
+  margin: 0;
+  overflow-y: auto;
+  padding: 0;
+}
+.SelectContent .SelectOptions .SelectedValue {
+  background-color: #009993;
+  color: #fff;
+}
+
+.SelectOptions::-webkit-scrollbar {
+  width: 7px;
+}
+
+.SelectOptions::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 25px;
+}
+
+.SelectOptions::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 25px;
+}
+
+.SelectOptions li {
+  height: 20px;
+  padding: 0 13px;
+  font-size: 14px;
+}
+
+.SelectOptions li:hover {
+  background: #f2f2f2;
 }

package/dist/collection/components/lottery-ticket/lottery-ticket.js

@@ -28,6 +28,16 @@ export class LotteryTicket {
     this.isLoading = true;
     this.hasErrors = false;
     this.ticketDone = false;
+    this.isCustomSelect = false;
+    this.amountInfo = {};
+  }
+  /**
+   * @TODO find a better way to implement click outside the custom select, so that we don't have to use the 'data-cluster' attribute on each element
+   */
+  checkForClickOutside(ev) {
+    if (ev.composedPath()[0].getAttribute('data-cluster') !== 'SelectComponent') {
+      this.isCustomSelect = false;
+    }
   }
   connectedCallback() {
     let url = new URL(`${this.endpoint}/games/${this.gameId}`);
@@ -45,6 +55,7 @@ export class LotteryTicket {
       this.isLoading = false;
       this.gameData = data;
       this.grids = [...Array(data.rules.boards.length).keys()];
+      this.amountInfo = this.gameData.rules.stakes[0]; // initial value for select
     })
       .catch((err) => {
       this.isLoading = false;
@@ -73,12 +84,23 @@ export class LotteryTicket {
     this.ticketDone = false;
     this.resetSelection.emit(this.ticketId);
   }
-  changeStake(event) {
+  changeStake(ticketid, amount) {
     this.stakeChange.emit({
-      ticketId: this.ticketId,
-      stake: event.target.value
+      ticketId: ticketid,
+      stake: amount
     });
   }
+  toggleClass() {
+    this.isCustomSelect = !this.isCustomSelect;
+  }
+  setDropdownItem(item) {
+    this.amountInfo = {
+      amount: item.amount,
+      currency: item.currency
+    };
+    this.isCustomSelect = false;
+    this.changeStake(this.ticketId, item.amount);
+  }
   render() {
     if (this.isLoading) {
       return (h("div", null,
@@ -92,11 +114,13 @@ export class LotteryTicket {
       else {
         const { rules } = this.gameData;
         return (h("div", { class: "TicketContainer" },
-          h("p", null, this.gameData.name),
+          h("p", { class: "TicketTitle" }, this.gameData.name),
           this.resetButton && this.ticketDone &&
-            h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language)),
+            h("div", { class: "ButtonContainer" },
+              h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language))),
           this.autoPick && !this.ticketDone &&
-            h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language)),
+            h("div", { class: "ButtonContainer" },
+              h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language))),
           this.grids.map((item, index) => h("div", { class: "TicketGridBullets" },
             h("p", { class: "TicketGridTitle" },
               translate('grid', this.language),
@@ -120,16 +144,25 @@ export class LotteryTicket {
                 h("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"),
                 h("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }),
                 h("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))),
-          h("label", { class: "Label" },
-            translate('wagerPerDraw', this.language),
-            ": "),
-          h("div", { class: "WagerInput" }, rules.stakes.length > 1 ? h("div", null,
-            h("select", { class: "InputDefault", onChange: (event) => this.changeStake(event) }, rules.stakes.map((item) => h("option", { value: item.amount },
-              item.amount,
-              " ",
-              item.currency)))) : h("div", null,
-            h("input", { min: "1", value: rules.stakes[0].amount, type: "number", disabled: true }),
-            h("p", { class: "WagerInputTitle" }, rules.stakes[0].currency)))));
+          h("div", null,
+            h("label", { class: "Label" },
+              translate('wagerPerDraw', this.language),
+              ": "),
+            h("div", { class: "WagerInput" }, rules.stakes.length > 1 ?
+              (h("div", { "data-cluster": "SelectComponent", class: this.isCustomSelect ? "SelectWrapper SelectActive" : "SelectWrapper" },
+                h("div", { "data-cluster": "SelectComponent", class: "SelectButton", onClick: () => this.toggleClass() },
+                  h("span", { "data-cluster": "SelectComponent" },
+                    this.amountInfo.amount,
+                    " ",
+                    this.amountInfo.currency),
+                  h("span", { "data-cluster": "SelectComponent", class: "SelectExpand" }, "\u25BC")),
+                h("div", { "data-cluster": "SelectComponent", class: "SelectContent" },
+                  h("ul", { "data-cluster": "SelectComponent", class: "SelectOptions" }, rules.stakes.map((item) => h("li", { "data-cluster": "SelectComponent", class: this.amountInfo.amount == item.amount ? 'SelectedValue' : '', value: item.amount, onClick: () => this.setDropdownItem(item) },
+                    item.amount,
+                    " ",
+                    item.currency)))))) : (h("div", null,
+              h("input", { min: "1", value: rules.stakes[0].amount, type: "number", disabled: true }),
+              h("p", { class: "WagerInputTitle" }, rules.stakes[0].currency)))))));
       }
     }
   }
@@ -289,7 +322,9 @@ export class LotteryTicket {
     "numberOfDraws": {},
     "isLoading": {},
     "hasErrors": {},
-    "ticketDone": {}
+    "ticketDone": {},
+    "isCustomSelect": {},
+    "amountInfo": {}
   }; }
   static get events() { return [{
       "method": "ticketCompleted",
@@ -375,6 +410,12 @@ export class LotteryTicket {
       "methodName": "drawsChangeHandler"
     }]; }
   static get listeners() { return [{
+      "name": "click",
+      "method": "checkForClickOutside",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
       "name": "gridFilled",
       "method": "gridFilledHandler",
       "target": undefined,

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 /* LotteryTicket custom elements */
-export { LotteryTicket as LotteryTicket } from '../types/components/lottery-ticket/lottery-ticket';
+
+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 { LotteryTicket, defineCustomElement as defineCustomElementLotteryTicket } from './lottery-ticket.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 };

package/dist/components/lottery-grid.js

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

package/dist/components/lottery-grid2.js

@@ -0,0 +1,196 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './lottery-bullet2.js';
+
+const lotteryGridCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:25px}";
+
+const LotteryGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.gridFilledEvent = createEvent(this, "gridFilled", 7);
+    this.gridDirtyEvent = createEvent(this, "gridDirty", 7);
+    /**
+     * Number of bullets of grid
+     */
+    this.totalNumbers = 0;
+    /**
+     * Number of maximum bullets that can be selected
+     */
+    this.maximumAllowed = 0;
+    /**
+     * Minimum allowed of bullets
+     */
+    this.minimumAllowed = 1;
+    /**
+     * Allows the user to select numbers on the grid
+     */
+    this.selectable = true;
+    /**
+     * Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')
+     */
+    this.selectedNumbers = '';
+    /**
+     * Show only selected numbers
+     */
+    this.displaySelected = false;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    this.numbers = [];
+    this.selectedCounter = 0;
+  }
+  connectedCallback() {
+    let selected = [];
+    if (this.selectedNumbers.length > 0) {
+      selected = this.selectedNumbers.split(',');
+      this.selectedCounter = selected.length;
+    }
+    if (this.displaySelected) {
+      selected.forEach((item) => {
+        this.numbers.push({
+          number: item,
+          selected: true,
+          selectable: this.selectable
+        });
+      });
+    }
+    else {
+      [...Array(this.totalNumbers).keys()]
+        .map(number => (number + 1).toString())
+        .forEach((number) => {
+        this.numbers.push({
+          number,
+          selected: selected.indexOf(number) >= 0 ? true : false,
+          selectable: this.selectedCounter == this.maximumAllowed ? false : this.selectable
+        });
+      });
+    }
+  }
+  lotteryBulletSelectionHandler(event) {
+    this.numbers = this.numbers.map((item) => {
+      if (item.number == event.detail.value) {
+        return {
+          number: item.number,
+          selected: event.detail.selected,
+          selectable: item.selectable
+        };
+      }
+      return {
+        number: item.number,
+        selected: item.selected,
+        selectable: item.selectable
+      };
+    });
+    if (event.detail.selected) {
+      this.selectedCounter += 1;
+      if (this.selectedCounter == this.maximumAllowed) {
+        this.numbers = this.numbers.map((item) => {
+          return {
+            number: item.number,
+            selected: item.selected,
+            selectable: item.selected ? true : false
+          };
+        });
+        this.gridFilledEvent.emit({
+          id: this.ticketId,
+          index: this.gridIndex,
+          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+        });
+      }
+    }
+    else {
+      if (this.selectedCounter == this.maximumAllowed) {
+        this.numbers = this.numbers.map((item) => {
+          return {
+            number: item.number,
+            selected: item.selected,
+            selectable: true
+          };
+        });
+        this.gridDirtyEvent.emit({
+          id: this.ticketId,
+          index: this.gridIndex,
+          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+        });
+      }
+      this.selectedCounter -= 1;
+    }
+  }
+  async resetSelectionHandler(event) {
+    if (event.detail && event.detail == this.ticketId) {
+      this.selectedCounter = 0;
+      this.numbers = this.numbers.map((item) => {
+        return {
+          number: item.number,
+          selected: false,
+          selectable: this.selectable
+        };
+      });
+      this.gridDirtyEvent.emit({
+        id: this.ticketId,
+        index: this.gridIndex,
+        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+      });
+    }
+  }
+  async autoSelectionHandler(event) {
+    if (event.detail && event.detail == this.ticketId) {
+      this.resetSelectionHandler(event);
+      let array = [...Array(this.totalNumbers).keys()]
+        .map(number => number + 1)
+        .sort(() => 0.5 - Math.random());
+      array = array.slice(0, this.minimumAllowed);
+      this.numbers = this.numbers.map((item) => {
+        return {
+          number: item.number,
+          selected: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
+          selectable: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
+        };
+      });
+      this.gridFilledEvent.emit({
+        id: this.ticketId,
+        index: this.gridIndex,
+        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+      });
+      this.selectedCounter = this.maximumAllowed;
+    }
+  }
+  render() {
+    return (h("div", { class: "GridContainer" }, h("div", { class: "Grid" }, this.numbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected }))))));
+  }
+  static get style() { return lotteryGridCss; }
+}, [1, "lottery-grid", {
+    "ticketId": [2, "ticket-id"],
+    "totalNumbers": [2, "total-numbers"],
+    "gameId": [1, "game-id"],
+    "maximumAllowed": [2, "maximum-allowed"],
+    "minimumAllowed": [2, "minimum-allowed"],
+    "selectable": [4],
+    "selectedNumbers": [1, "selected-numbers"],
+    "displaySelected": [4, "display-selected"],
+    "language": [1],
+    "gridIndex": [2, "grid-index"],
+    "numbers": [32]
+  }, [[0, "lotteryBulletSelection", "lotteryBulletSelectionHandler"], [4, "resetSelection", "resetSelectionHandler"], [4, "autoSelection", "autoSelectionHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["lottery-grid", "lottery-bullet"];
+  components.forEach(tagName => { switch (tagName) {
+    case "lottery-grid":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LotteryGrid);
+      }
+      break;
+    case "lottery-bullet":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { LotteryGrid as L, defineCustomElement as d };