@everymatrix/casino-tournament-banner 1.16.1

package/dist/collection/components/casino-tournament-banner/casino-tournament-banner.js

@@ -0,0 +1,605 @@
+import { Component, Prop, h, Listen, State } from '@stencil/core';
+import { translate } from '../../utils/locale.utils';
+import moment from 'moment';
+import '@everymatrix/casino-tournament-buttons';
+export class CasinoTournamentBanner {
+  constructor() {
+    this.shortstartformat = 'DD MMM YYYY';
+    this.showDate = true;
+    this.showCheck = false;
+    this.cardMode = false;
+    this.showReadMore = false;
+    this.clientStyling = '';
+    this.clientStylingUrl = '';
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrl;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
+    this.formatDate = () => {
+      const dateOptions = { month: 'long' };
+      let currentDate = new Date(this.startTime);
+      const setTranslation = () => {
+        return (this.state === 'Running' || this.state == 'Closing' || this.state == 'Closed') ?
+          translate('startedAt', this.language) :
+          translate('startingAt', this.language);
+      };
+      if (this.shortStart) {
+        let startTimeAsString = moment(currentDate).format(this.shortstartformat);
+        this.startdate = (this.state === 'Running' || this.state == 'Closing' || this.state == 'Closed') ?
+          translate('startedAtWithTime', this.language) + startTimeAsString :
+          translate('startingAtWithTime', this.language) + startTimeAsString;
+      }
+      else {
+        let currentMonthKey = new Intl.DateTimeFormat('en', dateOptions).format(currentDate);
+        let currentDay = currentDate.getDate();
+        let currentHour = currentDate.toLocaleString('en-GB', { hour: 'numeric', minute: 'numeric', hour12: false });
+        this.startdate =
+          `${currentDay}` + ' ' +
+            translate(`${currentMonthKey}`, this.language) + ', ' +
+            setTranslation() +
+            ` ${currentHour}`;
+      }
+    };
+  }
+  infoCompletedHandler(event) {
+    if (event.detail && this.useEvent) {
+      this.state = event.detail.state;
+      this.stateText = this.getStateText(this.state);
+      this.enrolled = event.detail.playerEnrolled;
+      this.startTime = event.detail.startTime;
+      this.thumbnail = event.detail.thumbnail;
+      this.tournamentId = event.detail.id;
+      if (this.startTime) {
+        this.formatDate();
+      }
+    }
+  }
+  getStateText(state) {
+    let text = '';
+    switch (state) {
+      case 'Upcoming':
+        text = translate('scheduled', this.language);
+        break;
+      case 'Unstarted':
+        text = translate('scheduled', this.language);
+        break;
+      case 'Running':
+        text = translate('ongoing', this.language);
+        break;
+      default:
+        text = translate('finished', this.language);
+        break;
+    }
+    return text;
+  }
+  componentDidRender() {
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  componentWillLoad() {
+    if (!this.useEvent && this.startTime) {
+      this.formatDate();
+    }
+    if (this.state) {
+      this.stateText = this.getStateText(this.state);
+    }
+  }
+  termsClick(tournamentId) {
+    window.postMessage({ type: 'termsAndConditionsClicked', tournamentId: tournamentId }, window.location.href);
+  }
+  render() {
+    return h("div", { ref: el => this.stylingContainer = el, class: "TournamentBannerWrap" }, this.thumbnail && h("div", { class: "TournamentBanner", part: "TournamentBanner" },
+      h("img", { src: this.thumbnail, alt: "", class: `TournamentBannerBg ${this.cardMode && this.state ? this.state : ''}` }),
+      !this.cardMode &&
+        h("div", { class: "TournamentBannerInfo", part: "TournamentBannerInfo" },
+          h("div", { class: "BannerInfo", part: "BannerInfo" },
+            h("span", { class: `Tag State ${this.state}` }, this.stateText)),
+          h("div", { class: "BannerInfo", part: "BannerInfo" }, this.showDate &&
+            h("span", { class: "Tag Date" },
+              this.showCalendar &&
+                h("svg", { class: "CalendarIcon", width: "9", height: "11", viewBox: "0 0 9 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.1 1.4H7.65V0.5H6.75V1.4H2.25V0.5H1.35V1.4H0.9C0.405 1.4 0 1.805 0 2.3V9.5C0 9.995 0.405 10.4 0.9 10.4H8.1C8.595 10.4 9 9.995 9 9.5V2.3C9 1.805 8.595 1.4 8.1 1.4ZM8.10003 9.5H0.900027V4.55H8.10003V9.5ZM0.900027 3.65005H8.10003V2.30005H0.900027V3.65005Z", fill: "#1E1616" })),
+              this.startdate)),
+          h("div", { class: "BannerInfo", part: "BannerInfo" }, this.enrolled &&
+            h("span", { class: "Tag Enroll" },
+              this.showCheck &&
+                h("svg", { class: "EnrollCheck", xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
+                  h("path", { d: "M4.50008 8.08492L2.41508 5.99992L1.70508 6.70492L4.50008 9.49992L10.5001 3.49992L9.79508 2.79492L4.50008 8.08492Z", fill: "white" })),
+              translate('enrolled', this.language)))),
+      this.cardMode && h("div", { class: "TournamentBannerThumb", part: "TournamentBannerThumb" },
+        h("div", { class: "ThumbTitle", part: "ThumbTitle" }, translate('tournament', this.language)),
+        h("div", { class: "ThumbName", part: "ThumbName" }, this.nameOrTitle),
+        h("div", { class: "ThumbState" },
+          this.enrolled ?
+            h("span", { class: "Tag Join" },
+              h("svg", { class: "EnrollCheck", xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
+                h("path", { d: "M4.50008 8.08492L2.41508 5.99992L1.70508 6.70492L4.50008 9.49992L10.5001 3.49992L9.79508 2.79492L4.50008 8.08492Z", fill: "white" })),
+              translate('joined', this.language))
+            :
+              this.state != 'Closed' &&
+                h("span", { class: "Tag Join" },
+                  h("svg", { class: "JoinPlus", xmlns: "http://www.w3.org/2000/svg", width: "12", height: "13", viewBox: "0 0 12 13", fill: "none" },
+                    h("path", { d: "M9.5 6.8335H6.5V9.8335H5.5V6.8335H2.5V5.8335H5.5V2.8335H6.5V5.8335H9.5V6.8335Z", fill: "white" })),
+                  translate('join', this.language)),
+          this.state == 'Running' && h("span", { class: `Tag State ${this.state}` }, this.stateText),
+          (this.state == 'Unstarted' || this.state == 'Upcoming' || this.state == 'Closed') &&
+            h("span", { class: `Tag Date ${this.state}` },
+              this.showCalendar &&
+                h("svg", { class: "CalendarIcon", width: "9", height: "11", viewBox: "0 0 9 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.1 1.4H7.65V0.5H6.75V1.4H2.25V0.5H1.35V1.4H0.9C0.405 1.4 0 1.805 0 2.3V9.5C0 9.995 0.405 10.4 0.9 10.4H8.1C8.595 10.4 9 9.995 9 9.5V2.3C9 1.805 8.595 1.4 8.1 1.4ZM8.10003 9.5H0.900027V4.55H8.10003V9.5ZM0.900027 3.65005H8.10003V2.30005H0.900027V3.65005Z", fill: "#1E1616" })),
+              this.startdate)),
+        h("div", { class: "ThumbButtons" },
+          h("casino-tournament-buttons", { enrolled: this.enrolled, session: this.session, endpoint: this.endpoint, language: this.language, "tournament-id": this.tournamentId, "login-event": this.loginEvent, "login-url": this.loginUrl, "register-event": this.registerEvent, "register-url": this.registerUrl, currency: this.currency, "bonus-code": this.bonusCode, "show-read-more": this.showReadMore })),
+        h("div", { class: "ThumbTC" },
+          h("span", { onClick: this.termsClick.bind(this, this.tournamentId) }, translate('terms', this.language))))));
+  }
+  static get is() { return "casino-tournament-banner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["casino-tournament-banner.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["casino-tournament-banner.css"]
+  }; }
+  static get properties() { return {
+    "useEvent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "use-event",
+      "reflect": false
+    },
+    "state": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "state",
+      "reflect": false
+    },
+    "enrolled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "enrolled",
+      "reflect": false
+    },
+    "startTime": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "start-time",
+      "reflect": false
+    },
+    "thumbnail": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "thumbnail",
+      "reflect": false
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": false
+    },
+    "showCalendar": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-calendar",
+      "reflect": false
+    },
+    "shortStart": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "short-start",
+      "reflect": false
+    },
+    "shortstartformat": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "shortstartformat",
+      "reflect": false,
+      "defaultValue": "'DD MMM YYYY'"
+    },
+    "showDate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-date",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "showCheck": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-check",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "cardMode": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "card-mode",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "nameOrTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name-or-title",
+      "reflect": false
+    },
+    "tournamentId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tournament-id",
+      "reflect": false
+    },
+    "session": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "session",
+      "reflect": false
+    },
+    "loginEvent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "login-event",
+      "reflect": false
+    },
+    "loginUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "login-url",
+      "reflect": false
+    },
+    "registerEvent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "register-event",
+      "reflect": false
+    },
+    "registerUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "register-url",
+      "reflect": false
+    },
+    "endpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "endpoint",
+      "reflect": false
+    },
+    "currency": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "currency",
+      "reflect": false
+    },
+    "bonusCode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "bonus-code",
+      "reflect": false
+    },
+    "showReadMore": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-read-more",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "client-styling",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "clientStylingUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "client-styling-url",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "stateText": {},
+    "limitStylingAppends": {},
+    "stylingContainer": {},
+    "startdate": {}
+  }; }
+  static get listeners() { return [{
+      "name": "getTournamentInfoCompleted",
+      "method": "infoCompletedHandler",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';