@everymatrix/casino-tournament-list 1.20.5

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

@@ -0,0 +1,578 @@
+import { Component, Prop, State, h, Element } from '@stencil/core';
+import { getDevice, isMobile } from '../../utils/utils';
+import { translate, getTranslations } from '../../utils/locale.utils';
+import { EventSourcePolyfill } from 'event-source-polyfill';
+import '@everymatrix/casino-tournament-banner';
+import '@everymatrix/casino-tournament-info';
+export class CasinoTournamentList {
+  constructor() {
+    /**
+     * NWA parameter tournaments offet
+     */
+    this.offset = 0;
+    /**
+     * NWA parameter tournaments limit
+     */
+    this.limit = 6;
+    /**
+     * NWA parameter show anonymous tournament
+     */
+    this.showAnonymous = false;
+    /**
+     * Tournament states
+     */
+    this.state = 'All,Ongoing,Upcoming,Expired';
+    /**
+     * Real time update
+     */
+    this.updateTournaments = true;
+    /**
+     * Event for login button
+     */
+    this.loginEvent = 'OpenLoginRegisterModal';
+    /**
+     * Event for register button
+     */
+    this.registerEvent = 'OpenLoginRegisterModal';
+    /**
+     * Display as 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 = '';
+    /**
+     * Translations via URL
+     */
+    this.translationUrl = '';
+    this.limitStylingAppends = false;
+    this.tournaments = [];
+    this.currentState = 'All';
+    this.isLoading = false;
+    this.tournamentsShown = 0;
+    this.allTournamentsShown = false;
+  }
+  getTournamentInfo(offset, limit) {
+    let url = new URL(this.endpoint + `/tournaments`);
+    let reqHeaders = new Headers();
+    if (this.session) {
+      reqHeaders.append('X-SessionId', this.session);
+    }
+    const filterOptions = {
+      StartTimeAfter: this.getStartTimeAfter(),
+    };
+    if (!this.session && this.showAnonymous == false) {
+      filterOptions.tags = 'no-role-set';
+    }
+    if (this.currentState && this.currentState != 'All') {
+      filterOptions.state = this.matchStatus(this.currentState);
+    }
+    const filter = Object.keys(filterOptions).map(k => `${k}=${filterOptions[k]}`).join(',');
+    url.searchParams.append('filter', filter);
+    url.searchParams.append('platform', getDevice());
+    url.searchParams.append('language', this.language);
+    url.searchParams.append('fields', 'id,nameOrTitle,termsUrl,thumbnail,startTime,endTime,closeTime,playerEnrolled');
+    url.searchParams.append('pagination', `offset=${offset},limit=${limit}`);
+    url.searchParams.append('sortField', 'StartTime');
+    url.searchParams.append('sortOrder', this.sortOrder || 'desc');
+    if (this.sortType) {
+      url.searchParams.append('sortType', this.sortType);
+    }
+    let requestOptions = {
+      method: 'GET',
+      headers: reqHeaders,
+      cache: 'no-cache'
+    };
+    this.isLoading = true;
+    fetch(url.href, requestOptions).then((res) => res.json())
+      .then((res) => {
+      this.tournaments = this.tournaments.concat(res.items);
+      this.tournamentsShown += res.items.length;
+      if (this.tournamentsShown >= res.total) {
+        this.allTournamentsShown = true;
+      }
+      if (this.updateTournaments) {
+        url.searchParams.set('pagination', `offset=0,limit=${this.tournamentsShown}`);
+        let endpointURL = `${this.endpoint}/tournaments/updates?${url.searchParams.toString()}`;
+        this.startUpdate(endpointURL, { headers: { 'accept': 'text/event-stream', 'X-SessionId': this.session } });
+      }
+    }).catch((err) => {
+      throw new Error(err);
+    }).finally(() => {
+      this.isLoading = false;
+    });
+  }
+  createImagePlaceHolder(width, height) {
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    ctx.fillStyle = 'rgb(0, 0, 0)';
+    ctx.fillRect(0, 0, width, height);
+    const img = new Image(width, height);
+    img.src = canvas.toDataURL();
+    return img.src;
+  }
+  componentDidRender() {
+    if (!this.limitStylingAppends && this.host) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  componentWillLoad() {
+    if (this.state) {
+      this.states = this.state.split(',');
+    }
+    if (this.endpoint) {
+      this.getTournamentInfo(this.offset, this.limit);
+    }
+  }
+  setClientStyling() {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = this.clientStyling;
+    this.host.shadowRoot.prepend(sheet);
+  }
+  setClientStylingURL() {
+    let url = new URL(this.clientStylingUrl);
+    let cssFile = document.createElement('style');
+    fetch(url.href)
+      .then((res) => res.text())
+      .then((data) => {
+      cssFile.innerHTML = data;
+      this.clientStyling = data;
+      setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
+    });
+  }
+  getStartTimeAfter() {
+    const dateStartTimeAfter = new Date();
+    if (this.startTimeAfter) {
+      dateStartTimeAfter.setDate(dateStartTimeAfter.getDate() - Number(this.startTimeAfter));
+    }
+    else {
+      dateStartTimeAfter.setMonth(dateStartTimeAfter.getMonth() - 12);
+    }
+    return dateStartTimeAfter.toISOString().substring(0, 10);
+  }
+  onStateChange(state) {
+    if (this.isLoading == false) {
+      this.tournaments = [];
+      this.tournamentsShown = 0;
+      this.allTournamentsShown = false;
+      this.sseConnection.removeEventListener('message', this.updateHandler);
+      this.currentState = state;
+      this.getTournamentInfo(this.offset, this.limit);
+    }
+  }
+  showMoreAction() {
+    this.getTournamentInfo(this.offset + this.tournamentsShown, this.limit);
+  }
+  matchStatus(status) {
+    if (status == 'Upcoming') {
+      return 'Unstarted';
+    }
+    if (status == 'Ongoing') {
+      return 'Running';
+    }
+    return 'Closing|Closed';
+  }
+  startUpdate(updateUrl, updateOptions) {
+    if (this.sseConnection) {
+      this.sseConnection.close();
+    }
+    this.sseConnection = new EventSourcePolyfill(updateUrl, updateOptions);
+    this.sseConnection.removeEventListener('message', this.updateHandler);
+    this.sseConnection.addEventListener('message', this.updateHandler.bind(this));
+  }
+  updateHandler(message) {
+    if (!message.data) {
+      return;
+    }
+    let data = JSON.parse(message.data);
+    if (data.messageType == 'LeaderBoardUpdate') {
+      this.updateView(data);
+    }
+  }
+  updateView(data) {
+    this.tournaments = data.items;
+  }
+  connectedCallback() {
+    if (this.translationUrl) {
+      getTranslations(this.translationUrl);
+    }
+  }
+  render() {
+    return h("div", { class: `TournamentList ${this.cardMode ? 'CardMode' : ''} ${isMobile() ? 'Mobile' : ''}` },
+      this.states && h("div", { class: "States" }, this.states.map(state => {
+        return h("div", { onClick: () => this.onStateChange.bind(this)(state), class: `State ${this.currentState == state ? 'active' : ''}` }, state);
+      })),
+      !this.isLoading && (!this.tournaments || this.tournaments.length == 0) && h("div", { class: `NoTournaments ${isMobile() ? 'Mobile' : ''}` }, translate('noTournaments', this.language)),
+      this.tournaments && h("div", { class: `Tournaments ${isMobile() ? 'Mobile' : ''}` },
+        this.tournaments.map(item => {
+          if (this.cardMode) {
+            return h("div", { class: `TournamentCard ${isMobile() ? 'Mobile' : ''}` },
+              h("casino-tournament-banner", { "name-or-title": item.nameOrTitle, "tournament-id": item.id, state: item.state, enrolled: item.playerEnrolled, "start-time": item.startTime, "end-time": item.endTime, thumbnail: item.thumbnail ? item.thumbnail : this.createImagePlaceHolder(320, 180), "show-date": "false", "show-check": "true", "show-calendar": "true", "show-running-date": "true", "short-start": "true", "show-read-more": this.showReadMore, "card-mode": this.cardMode, language: this.language, endpoint: this.endpoint, loginEvent: this.loginEvent, session: this.session, registerEvent: this.registerEvent, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl }));
+          }
+          else {
+            return h("div", { class: "Tournament" },
+              h("casino-tournament-banner", { "name-or-title": item.nameOrTitle, "tournament-id": item.id, state: item.state, enrolled: item.playerEnrolled, "start-time": item.startTime, thumbnail: item.thumbnail ? item.thumbnail : this.createImagePlaceHolder(320, 180), "show-date": "false", "show-check": "true", "show-calendar": "true", "short-start": "true", "card-mode": this.cardMode, language: this.language, endpoint: this.endpoint, session: this.session, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl }),
+              h("casino-tournament-info", { "name-or-title": item.nameOrTitle, "tournament-id": item.id, "start-time": item.startTime, "end-time": item.endTime, "score-criteria": item.scoreCriteria, "min-bet-count": item.minBetCount, enrolled: item.playerEnrolled, align: "left", "see-games": "true", "show-button": "true", loginEvent: this.loginEvent, registerEvent: this.registerEvent, "show-read-more": this.showReadMore, language: this.language, endpoint: this.endpoint, session: this.session, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl }));
+          }
+        }),
+        this.isLoading &&
+          h("p", { class: "Loading" }, translate('loading', this.language)),
+        !this.isLoading && !this.allTournamentsShown &&
+          h("div", { class: "CenterButton", part: "CenterButton" },
+            h("button", { class: "ShowMoreButton", part: "ShowMoreButton", onClick: () => this.showMoreAction(), title: "Show More" }, translate('showMore', this.language)))));
+  }
+  static get is() { return "casino-tournament-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["casino-tournament-list.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["casino-tournament-list.css"]
+  }; }
+  static get properties() { return {
+    "endpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The NWA endpoint"
+      },
+      "attribute": "endpoint",
+      "reflect": false
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Language to show"
+      },
+      "attribute": "language",
+      "reflect": false
+    },
+    "session": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The NWA session for the logged-in user"
+      },
+      "attribute": "session",
+      "reflect": false
+    },
+    "sortType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "NWA parameter for tournaments sort type"
+      },
+      "attribute": "sort-type",
+      "reflect": false
+    },
+    "sortOrder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "NWA parameter for tournaments sort order"
+      },
+      "attribute": "sort-order",
+      "reflect": false
+    },
+    "offset": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "NWA parameter tournaments offet"
+      },
+      "attribute": "offset",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "limit": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "NWA parameter tournaments limit"
+      },
+      "attribute": "limit",
+      "reflect": false,
+      "defaultValue": "6"
+    },
+    "showAnonymous": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "NWA parameter show anonymous tournament"
+      },
+      "attribute": "show-anonymous",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "state": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Tournament states"
+      },
+      "attribute": "state",
+      "reflect": false,
+      "defaultValue": "'All,Ongoing,Upcoming,Expired'"
+    },
+    "startTimeAfter": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Display tournaments from a specific time onward"
+      },
+      "attribute": "start-time-after",
+      "reflect": false
+    },
+    "updateTournaments": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Real time update"
+      },
+      "attribute": "update-tournaments",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "loginEvent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Event for login button"
+      },
+      "attribute": "login-event",
+      "reflect": false,
+      "defaultValue": "'OpenLoginRegisterModal'"
+    },
+    "registerEvent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Event for register button"
+      },
+      "attribute": "register-event",
+      "reflect": false,
+      "defaultValue": "'OpenLoginRegisterModal'"
+    },
+    "cardMode": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Display as card"
+      },
+      "attribute": "card-mode",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showReadMore": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Show read more button"
+      },
+      "attribute": "show-read-more",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via inline styles"
+      },
+      "attribute": "client-styling",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "clientStylingUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url"
+      },
+      "attribute": "client-styling-url",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "translationUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Translations via URL"
+      },
+      "attribute": "translation-url",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "limitStylingAppends": {},
+    "tournaments": {},
+    "states": {},
+    "currentState": {},
+    "isLoading": {},
+    "tournamentsShown": {},
+    "allTournamentsShown": {},
+    "sseConnection": {}
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/index.js

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

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

@@ -0,0 +1,104 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'zh-hk', 'fr', 'hu', 'tr', 'el', 'es', 'pt'];
+const TRANSLATIONS = {
+  en: {
+    500: '500 - Internal server error',
+    showMore: 'Show more',
+    Scheduled: 'Scheduled',
+    Ongoing: 'Ongoing',
+    Finished: 'Finished',
+    loading: 'Loading, please wait ...',
+    noTournaments: 'No tournaments found'
+  },
+  'zh-hk': {
+    500: '500內部服務器錯誤',
+    showMore: '顯示更多',
+    Scheduled: '預定的',
+    Ongoing: '進行中',
+    Finished: '完成的',
+    loading: '加載請稍候 ...',
+    noTournaments: '沒有找到比賽'
+  },
+  fr: {
+    500: '500 - erreur de serveur interne',
+    showMore: 'Afficher plus',
+    Scheduled: 'Programmé',
+    Ongoing: 'En cours',
+    Finished: 'Fini',
+    loading: 'Chargement , veuillez patienter ...',
+    noTournaments: 'Aucun tournoi trouvé'
+  },
+  ro: {
+    500: '500 - Internal server error',
+    showMore: 'Mai mult',
+    Scheduled: 'Programate',
+    Ongoing: 'În curs',
+    Finished: 'Finalizat',
+    loading: 'Se încarcă, asteptati ...',
+    noTournaments: 'Niciun turneu gasit'
+  },
+  tr: {
+    500: '500 - Dahili sunucu hatası',
+    showMore: 'Daha fazla',
+    Scheduled: 'Planlanmış',
+    Ongoing: 'Devam Eden',
+    Finished: 'Sona Ermiş',
+    loading: 'Yükleniyor, lütfen bekleyin ...',
+    noTournaments: 'Herhangi bir turnuva bulunamadı.'
+  },
+  el: {
+    500: '500 - Σφάλμα Διακομιστή',
+    showMore: 'Περισσότερα',
+    Scheduled: 'Προγραμματισμένα',
+    Ongoing: 'Τρέχοντα',
+    Finished: 'Ολοκληρωμένα',
+    loading: 'Φορτώνει, παρακαλούμε περιμένετε ...',
+    noTournaments: 'Δεν βρέθηκαν τουρνουά'
+  },
+  es: {
+    500: '500 - Error servidor interno',
+    showMore: 'Mostrar más',
+    Scheduled: 'Programado',
+    Ongoing: 'En vivo',
+    Finished: 'Finalizado',
+    loading: 'Cargando …',
+    noTournaments: 'No se encontraron Torneos',
+  },
+  hu: {
+    500: '500 - Belső szerver hiba',
+    showMore: 'Mutass többet',
+    Scheduled: 'Ütemezés',
+    Ongoing: 'Folyamatban',
+    Finished: 'Befejezett',
+    loading: 'Betöltés, kérjük várjon...',
+    noTournaments: 'Verseny nem található',
+  },
+  pt: {
+    500: 'Erro 500 - Erro interno do servidor',
+    showMore: 'Ver mais',
+    Scheduled: 'Agendado',
+    Ongoing: 'Em progresso',
+    Finished: 'Finalizado',
+    loading: 'Carregando, por favor espere ...',
+    noTournaments: 'Nenhum torneio encontrado'
+  }
+};
+export const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+export const getTranslations = (url) => {
+  // fetch url, get the data, replace the TRANSLATIONS content
+  return new Promise((resolve) => {
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+      Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+          TRANSLATIONS[item][key] = data[item][key];
+        }
+      });
+      resolve(true);
+    });
+  });
+};