@everymatrix/casino-tournament-banner 1.20.0 → 1.20.5

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

@@ -44,11 +44,17 @@
   padding: 6px;
   font-size: 10px;
   display: flex;
+  align-items: center;
+  height: 13px;
 }
 .Tag.Closed {
   filter: grayscale(1);
 }
 
+.TagRemain {
+  text-indent: 5px;
+}
+
 .Date {
   gap: 4px;
   background: #FF7500;

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

@@ -4,51 +4,66 @@ import moment from 'moment';
 import '@everymatrix/casino-tournament-buttons';
 export class CasinoTournamentBanner {
   constructor() {
+    /**
+     * Short start time format
+     */
     this.shortstartformat = 'DD MMM YYYY';
+    /**
+     * Show date on widget
+     */
     this.showDate = true;
+    /**
+     * Show date on running state tournament tag
+     */
+    this.showRunningDate = false;
+    /**
+     * Show check icon on enrolled tag
+     */
     this.showCheck = false;
+    /**
+     * Widget display as a card
+     */
     this.cardMode = false;
+    /**
+     * Show read more button
+     */
     this.showReadMore = false;
+    /**
+     * Client custom styling via inline styles
+     */
     this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
     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;
+  }
+  getDateTimeDiff(dateString1, dateString2) {
+    return ((new Date(dateString2)).getTime() - (new Date(dateString1)).getTime()) / (1000 * 60);
+  }
+  getTextByDiff(diff) {
+    const renderText = (amount, type) => ' - ' + amount + ' ' + translate(type);
+    const renderTimeColumn = (column) => {
+      const columnInt = Math.floor(column);
+      if (columnInt < 10) {
+        return `0${columnInt}`;
       }
       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}`;
+        return `${columnInt}`;
       }
     };
+    if (diff < 1440) {
+      const hours = diff / 60;
+      const minutes = diff % 60;
+      const seconds = (minutes - Math.floor(minutes)) * 60;
+      return [hours, minutes, seconds].map(c => renderTimeColumn(c)).join(':');
+    }
+    return renderText(Math.ceil(diff / (60 * 24)), 'days');
+  }
+  getDuration() {
+    const dateNow = new Date();
+    this.tournamentLeftDays = this.getDateTimeDiff(dateNow, this.endTime);
+    this.showRemain = this.getTextByDiff(this.tournamentLeftDays);
   }
   infoCompletedHandler(event) {
     if (event.detail && this.useEvent) {
@@ -90,6 +105,43 @@ export class CasinoTournamentBanner {
       this.limitStylingAppends = true;
     }
   }
+  setClientStyling() {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = this.clientStyling;
+    this.stylingContainer.prepend(sheet);
+  }
+  setClientStylingURL() {
+    let cssFile = document.createElement('style');
+    setTimeout(() => {
+      cssFile.innerHTML = this.clientStylingUrl;
+      this.stylingContainer.prepend(cssFile);
+    }, 1);
+  }
+  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}`;
+    }
+  }
   componentWillLoad() {
     if (!this.useEvent && this.startTime) {
       this.formatDate();
@@ -97,9 +149,23 @@ export class CasinoTournamentBanner {
     if (this.state) {
       this.stateText = this.getStateText(this.state);
     }
+    if (this.startTime && this.endTime) {
+      this.getDuration();
+      this.getTextByDiff(this.tournamentLeftDays);
+    }
+    if (this.tournamentLeftDays < 1440 && this.tournamentLeftDays > 0) {
+      this.durationInterval = window.setInterval(() => {
+        if (this.startTime && this.endTime) {
+          this.getDuration();
+        }
+      }, 1000);
+    }
+    else {
+      clearInterval(this.durationInterval);
+    }
   }
   termsClick(tournamentId) {
-    window.postMessage({ type: 'termsAndConditionsClicked', tournamentId: tournamentId }, window.location.href);
+    window.postMessage({ type: 'TournamentTermsConditions', tournamentId: tournamentId }, window.location.href);
   }
   render() {
     return h("div", { ref: el => this.stylingContainer = el, class: "TournamentBannerWrap" }, this.thumbnail && h("div", { class: "TournamentBanner", part: "TournamentBanner" },
@@ -124,18 +190,24 @@ export class CasinoTournamentBanner {
         h("div", { class: "ThumbTitle", part: "ThumbTitle" }, translate('tournament', this.language)),
         h("div", { class: "ThumbName", part: "ThumbName" }, this.nameOrTitle),
         h("div", { class: "ThumbState" },
-          this.enrolled ?
+          this.session && 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' &&
+              this.session && 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 == 'Running' && h("span", { class: `Tag State ${this.state}` },
+            this.stateText,
+            this.showRunningDate &&
+              h("span", { class: "TagRemain" },
+                this.showRemain,
+                " ",
+                translate('left', this.language))),
           (this.state == 'Unstarted' || this.state == 'Upcoming' || this.state == 'Closed') &&
             h("span", { class: `Tag Date ${this.state}` },
               this.showCalendar &&
@@ -165,14 +237,31 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Use event to load data"
       },
       "attribute": "use-event",
       "reflect": false
     },
+    "endpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The NWA endpoint"
+      },
+      "attribute": "endpoint",
+      "reflect": false
+    },
     "state": {
       "type": "string",
       "mutable": false,
@@ -182,10 +271,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "The tournament state"
       },
       "attribute": "state",
       "reflect": false
@@ -199,10 +288,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Player enrolled"
       },
       "attribute": "enrolled",
       "reflect": false
@@ -216,14 +305,31 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Tournament start time"
       },
       "attribute": "start-time",
       "reflect": false
     },
+    "endTime": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Tournament end time"
+      },
+      "attribute": "end-time",
+      "reflect": false
+    },
     "thumbnail": {
       "type": "string",
       "mutable": false,
@@ -233,10 +339,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Tournament thumbnail"
       },
       "attribute": "thumbnail",
       "reflect": false
@@ -249,11 +355,11 @@ export class CasinoTournamentBanner {
         "resolved": "string",
         "references": {}
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Widget Language to show"
       },
       "attribute": "language",
       "reflect": false
@@ -267,10 +373,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Show calendar icon"
       },
       "attribute": "show-calendar",
       "reflect": false
@@ -284,10 +390,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Show short start time on tag"
       },
       "attribute": "short-start",
       "reflect": false
@@ -301,10 +407,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Short start time format"
       },
       "attribute": "shortstartformat",
       "reflect": false,
@@ -319,15 +425,33 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Show date on widget"
       },
       "attribute": "show-date",
       "reflect": false,
       "defaultValue": "true"
     },
+    "showRunningDate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Show date on running state tournament tag"
+      },
+      "attribute": "show-running-date",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "showCheck": {
       "type": "boolean",
       "mutable": false,
@@ -337,10 +461,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Show check icon on enrolled tag"
       },
       "attribute": "show-check",
       "reflect": false,
@@ -355,10 +479,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Widget display as a card"
       },
       "attribute": "card-mode",
       "reflect": false,
@@ -373,10 +497,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Widget name or title"
       },
       "attribute": "name-or-title",
       "reflect": false
@@ -390,10 +514,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Tournament ID"
       },
       "attribute": "tournament-id",
       "reflect": false
@@ -407,10 +531,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "The NWA Session"
       },
       "attribute": "session",
       "reflect": false
@@ -424,10 +548,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Login event"
       },
       "attribute": "login-event",
       "reflect": false
@@ -441,10 +565,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Login url"
       },
       "attribute": "login-url",
       "reflect": false
@@ -458,10 +582,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Register Event"
       },
       "attribute": "register-event",
       "reflect": false
@@ -475,31 +599,14 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Register url"
       },
       "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,
@@ -509,10 +616,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Player currency"
       },
       "attribute": "currency",
       "reflect": false
@@ -526,10 +633,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Bonus Code"
       },
       "attribute": "bonus-code",
       "reflect": false
@@ -543,10 +650,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Show read more button"
       },
       "attribute": "show-read-more",
       "reflect": false,
@@ -561,10 +668,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Client custom styling via inline styles"
       },
       "attribute": "client-styling",
       "reflect": false,
@@ -579,10 +686,10 @@ export class CasinoTournamentBanner {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Client custom styling via url"
       },
       "attribute": "client-styling-url",
       "reflect": false,
@@ -593,7 +700,10 @@ export class CasinoTournamentBanner {
     "stateText": {},
     "limitStylingAppends": {},
     "stylingContainer": {},
-    "startdate": {}
+    "startdate": {},
+    "tournamentLeftDays": {},
+    "showRemain": {},
+    "durationInterval": {}
   }; }
   static get listeners() { return [{
       "name": "getTournamentInfoCompleted",