@everymatrix/casino-tournament-list 1.0.69

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

@@ -0,0 +1,598 @@
+import { h } from "@stencil/core";
+import { getDevice, isMobile } from "../../utils/utils";
+import { translate, getTranslations } from "../../utils/locale.utils";
+import { EventSourcePolyfill } from "event-source-polyfill";
+import "../../../../../casino-tournament-banner/dist/types/index";
+import "../../../../../casino-tournament-info/dist/types/index";
+export class CasinoTournamentList {
+    constructor() {
+        this.endpoint = undefined;
+        this.language = undefined;
+        this.session = undefined;
+        this.sortType = undefined;
+        this.sortOrder = undefined;
+        this.offset = 0;
+        this.limit = 6;
+        this.showAnonymous = false;
+        this.state = 'All,Ongoing,Upcoming,Expired';
+        this.startTimeAfter = undefined;
+        this.updateTournaments = true;
+        this.loginEvent = 'OpenLoginRegisterModal';
+        this.registerEvent = 'OpenLoginRegisterModal';
+        this.cardMode = false;
+        this.showReadMore = false;
+        this.currency = '';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.limitStylingAppends = false;
+        this.tournaments = [];
+        this.states = undefined;
+        this.currentState = 'All';
+        this.isLoading = false;
+        this.tournamentsShown = 0;
+        this.allTournamentsShown = false;
+        this.sseConnection = undefined;
+        this.translationData = undefined;
+        this.initialLoad = false;
+    }
+    async updateTournament(newVal, oldValue) {
+        if (newVal != oldValue) {
+            this.setDefaultTournaments();
+            this.getTournamentInfo(this.offset, this.limit);
+        }
+    }
+    getTournamentInfo(offset, limit, showMore) {
+        let url = new URL(this.endpoint + `/v1/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,wallets');
+        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 = showMore ? this.tournaments.concat(res.items) : res.items;
+            this.tournaments.forEach((item) => {
+                if (item.wallets && item.wallets[0]) {
+                    item.bonusCode = item.wallets[0].code;
+                }
+            });
+            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}/v1/tournaments/updates?${url.searchParams.toString()}`;
+                this.startUpdate(endpointURL, { headers: { 'accept': 'text/event-stream', 'X-SessionId': this.session } });
+            }
+        }).catch((err) => {
+            this.allTournamentsShown = true;
+            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;
+        }
+    }
+    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.setDefaultTournaments();
+            this.sseConnection.removeEventListener('message', this.updateHandler);
+            this.currentState = state;
+            this.getTournamentInfo(this.offset, this.limit);
+        }
+    }
+    setDefaultTournaments() {
+        this.tournaments = [];
+        this.tournamentsShown = 0;
+        this.allTournamentsShown = false;
+    }
+    showMoreAction() {
+        this.getTournamentInfo(this.offset + this.tournamentsShown, this.limit, true);
+    }
+    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;
+    }
+    async componentWillLoad() {
+        if (this.state) {
+            this.states = this.state.split(',');
+        }
+        const promises = [];
+        if (this.endpoint) {
+            const consentsPromise = this.getTournamentInfo(this.offset, this.limit);
+            promises.push(consentsPromise);
+        }
+        if (this.translationUrl) {
+            const translationPromise = getTranslations(this.translationUrl).then((data) => {
+                this.translationData = JSON.stringify(data);
+            }).catch(err => {
+                console.log(err);
+            });
+            promises.push(translationPromise);
+        }
+        return Promise.all(promises);
+    }
+    render() {
+        return h("div", { key: '4975447a0a236f8be9a5fd7c45d939df8238dc67', class: `TournamentList ${this.cardMode ? 'CardMode' : ''} ${isMobile() ? 'Mobile' : ''}` }, this.states && h("div", { key: '6ec43b09ed16eab506acdd4119f4ba896e4861c8', class: "States" }, this.states.map(state => {
+            return h("div", { onClick: this.onStateChange.bind(this, state), class: `State ${this.currentState == state ? 'active' : ''}` }, translate(state, this.language));
+        })), !this.isLoading && (!this.tournaments || this.tournaments.length == 0) && h("div", { key: '59a7ec3d32a8563f2dd3175dea325d1f839c0d90', class: `NoTournaments ${isMobile() ? 'Mobile' : ''}` }, translate('noTournaments', this.language)), this.tournaments && h("div", { key: 'f8e0922425689ce92be5abfede1dfc9101de5c33', 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, description: item.description, "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", "bonus-code": item.bonusCode, currency: this.currency, "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, "translation-data": this.translationData }));
+            }
+            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", "bonus-code": item.bonusCode, currency: this.currency, "card-mode": this.cardMode, language: this.language, endpoint: this.endpoint, session: this.session, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-data": this.translationData }), 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", "bonus-code": item.bonusCode, currency: this.currency, 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, "translation-data": this.translationData }));
+            }
+        }), this.isLoading &&
+            h("p", { key: '42467b468909822aa4549d7169bac0fd0f9d942c', class: "Loading" }, translate('loading', this.language)), !this.isLoading && !this.allTournamentsShown &&
+            h("div", { key: '5483c6a4ef85ae8cc61b5ebf660c1d59be110d5f', class: "CenterButton", part: "CenterButton" }, h("button", { key: '87fad8d67a1cfa6e04c40384eae95d36565f8b86', 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"
+            },
+            "currency": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Player currency"
+                },
+                "attribute": "currency",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "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": {},
+            "translationData": {},
+            "initialLoad": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "session",
+                "methodName": "updateTournament"
+            }];
+    }
+}

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

@@ -0,0 +1 @@
+export { CasinoTournamentList } from './casino-tournament-list';

package/dist/collection/index.js

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