@everymatrix/casino-engagement-suite-tournament 1.44.0 → 1.45.5

package/dist/collection/components/casino-engagement-suite-tournament/casino-engagement-suite-tournament.js

@@ -1,601 +1,511 @@
 import { __rest } from "tslib";
-import { Component, Fragment, Prop, State, h, Event, Listen, Host } from '@stencil/core';
-import { TRANSLATIONS, Tab, localePostprocess } from '../../utils/translations';
-import { classnames } from '../../utils/utils';
-import { TournamentState, LeaderboardPage, DialogType, } from '../../utils/types';
-import { GradientRoundedButton } from '../../shared/GradientRoundedButton';
-import { iconBack, iconClose, iconReward, iconEyeClose, iconEyeOpen, iconQuestion, iconTrophy } from '../../shared/icons';
-import { CloseBar } from '../../shared/renderBar';
-import { addSeconds, formatDate, getDifference, getProgress } from '../../utils/util.date';
-import { leaderboardsAdapter, tournamentAdapter } from '../../utils/api.apdater';
-import "@everymatrix/general-animation-loading";
-import "@everymatrix/general-styling-wrapper";
-import "@everymatrix/casino-engagement-suite-progress-bar";
+import { Fragment, h, Host } from "@stencil/core";
+import { TRANSLATIONS, Tab, localePostprocess } from "../../utils/translations";
+import { classnames } from "../../utils/utils";
+import { TournamentState, LeaderboardPage, DialogType, } from "../../utils/types";
+import { GradientRoundedButton } from "../../shared/GradientRoundedButton";
+import { iconBack, iconClose, iconReward, iconEyeClose, iconEyeOpen, iconQuestion, iconTrophy } from "../../shared/icons";
+import { CloseBar } from "../../shared/renderBar";
+import { addSeconds, formatDate, getDifference, getProgress } from "../../utils/util.date";
+import { leaderboardsAdapter, tournamentAdapter } from "../../utils/api.apdater";
+import "../../../../../../svelte/general-animation-loading/es2015/general-animation-loading";
+import "../../../../../general-styling-wrapper/dist/types/index";
+import "../../../../../casino-engagement-suite-progress-bar/dist/types/index";
 export class CasinoEngagementSuiteTournament {
-  constructor() {
-    /**
-     * Language
-     */
-    this.language = 'en';
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url
-     */
-    this.clientStylingUrl = '';
-    /**
-     * Translation via url
-     */
-    this.translationUrl = '';
-    this.tab = Tab.Info;
-    this.locale = TRANSLATIONS;
-    this.tournamentItem = undefined;
-    this.tournamentList = undefined;
-    this.leaderboards = [];
-    this.isActionJoinPending = false;
-    this.isDialogOpen = false;
-    this.isShowInfo = false;
-    this.page = LeaderboardPage.List;
-    this.tournamentInDialog = undefined;
-    this.dialog = {
-      isOpen: false,
-      type: undefined,
-      data: undefined,
-    };
-    this.time = 0;
-    this.onClickConfirmJoin = () => {
-      this.actionJoin(this.tournamentItem);
-      this.nextPage = LeaderboardPage.List;
-    };
-    this.onClickConfirmUnjoin = () => {
-      this.close.emit();
-    };
-    this.onClickDialogUnjoin = () => {
-      this.actionJoin(this.dialog.data);
-      this.closeDialog();
-    };
-    this.onClickDialogJoin = () => {
-      this.closeDialog();
-    };
-    this.onClickBarInLayout = () => {
-      this.close.emit();
-    };
-    this.onClickBarInLayoutDialog = () => {
-      this.closeDialog();
-    };
-    this.onClickShowInfo = () => {
-      this.isShowInfo = !this.isShowInfo;
-    };
-    this.onClickBarTip = () => {
-      this.openDialog(DialogType.Tip);
-    };
-    this.onClickBarBack = () => {
-      this.setPage(LeaderboardPage.List);
-    };
-  }
-  setTimeInterval() {
-    this.timeHolder = setInterval(() => {
-      if (this.tournamentList || this.tournamentItem) {
-        this.time += 1;
-      }
-      else {
+    constructor() {
+        this.onClickConfirmJoin = () => {
+            this.actionJoin(this.tournamentItem);
+            this.nextPage = LeaderboardPage.List;
+        };
+        this.onClickConfirmUnjoin = () => {
+            this.close.emit();
+        };
+        this.onClickDialogUnjoin = () => {
+            this.actionJoin(this.dialog.data);
+            this.closeDialog();
+        };
+        this.onClickDialogJoin = () => {
+            this.closeDialog();
+        };
+        this.onClickBarInLayout = () => {
+            this.close.emit();
+        };
+        this.onClickBarInLayoutDialog = () => {
+            this.closeDialog();
+        };
+        this.onClickShowInfo = () => {
+            this.isShowInfo = !this.isShowInfo;
+        };
+        this.onClickBarTip = () => {
+            this.openDialog(DialogType.Tip);
+        };
+        this.onClickBarBack = () => {
+            this.setPage(LeaderboardPage.List);
+        };
+        this.language = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.leaderboardsInit = undefined;
+        this.tab = Tab.Info;
+        this.locale = TRANSLATIONS;
+        this.tournamentItem = undefined;
+        this.tournamentList = undefined;
+        this.leaderboards = [];
+        this.isActionJoinPending = false;
+        this.isDialogOpen = false;
+        this.isShowInfo = false;
+        this.page = LeaderboardPage.List;
+        this.tournamentInDialog = undefined;
+        this.dialog = {
+            isOpen: false,
+            type: undefined,
+            data: undefined,
+        };
         this.time = 0;
-      }
-    }, 1000);
-  }
-  updateTournamentListByItem(tournament) {
-    this.tournamentList = this.tournamentList.map((_tournament) => {
-      if (_tournament.id === tournament.id) {
-        return tournamentAdapter(tournament);
-      }
-      else {
-        return _tournament;
-      }
-    });
-  }
-  handleEvent(e) {
-    const _a = e.data, { type } = _a, rest = __rest(_a, ["type"]);
-    switch (type) {
-      case 'ShowLeaderboardRewardModal': {
-        const { tournament } = rest;
-        this.setPage(LeaderboardPage.Confirm, { tournament: tournamentAdapter(tournament) });
-        postMessage({ type: 'BarLeaderboardsClick' });
-        break;
-      }
-      case 'UpdateTournamentsItemRes': {
-        const tournamentNew = tournamentAdapter(rest.data.item);
-        this.tournamentItem = tournamentNew;
-        this.updateTournamentListByItem(tournamentNew);
-        break;
-      }
-      case 'UpdateLeaderboardsRes': {
-        this.leaderboards = leaderboardsAdapter(rest.data);
-        break;
-      }
-      case 'JoinTournamentRes':
-      case 'UnjoinTournamentRes':
-        const { success } = rest;
-        if (success) {
-          this.tournamentItem = Object.assign(Object.assign({}, this.tournamentItem), { playerEnrolled: !!!this.tournamentItem.playerEnrolled });
-          switch (this.page) {
-            case LeaderboardPage.Item: {
-              break;
+    }
+    setTimeInterval() {
+        this.timeHolder = setInterval(() => {
+            if (this.tournamentList || this.tournamentItem) {
+                this.time += 1;
+            }
+            else {
+                this.time = 0;
+            }
+        }, 1000);
+    }
+    updateTournamentListByItem(tournament) {
+        this.tournamentList = this.tournamentList.map((_tournament) => {
+            if (_tournament.id === tournament.id) {
+                return tournamentAdapter(tournament);
+            }
+            else {
+                return _tournament;
             }
-            case LeaderboardPage.List: {
-              this.updateTournamentListByItem(this.tournamentItem);
-              break;
+        });
+    }
+    handleEvent(e) {
+        const _a = e.data, { type } = _a, rest = __rest(_a, ["type"]);
+        switch (type) {
+            case 'ShowLeaderboardRewardModal': {
+                const { tournament } = rest;
+                this.setPage(LeaderboardPage.Confirm, { tournament: tournamentAdapter(tournament) });
+                postMessage({ type: 'BarLeaderboardsClick' });
+                break;
             }
-          }
+            case 'UpdateTournamentsItemRes': {
+                const tournamentNew = tournamentAdapter(rest.data.item);
+                this.tournamentItem = tournamentNew;
+                this.updateTournamentListByItem(tournamentNew);
+                break;
+            }
+            case 'UpdateLeaderboardsRes': {
+                this.leaderboards = leaderboardsAdapter(rest.data);
+                break;
+            }
+            case 'JoinTournamentRes':
+            case 'UnjoinTournamentRes':
+                const { success } = rest;
+                if (success) {
+                    this.tournamentItem = Object.assign(Object.assign({}, this.tournamentItem), { playerEnrolled: !!!this.tournamentItem.playerEnrolled });
+                    switch (this.page) {
+                        case LeaderboardPage.Item: {
+                            break;
+                        }
+                        case LeaderboardPage.List: {
+                            this.updateTournamentListByItem(this.tournamentItem);
+                            break;
+                        }
+                    }
+                }
+                if (this.nextPage) {
+                    this.setPage(this.nextPage);
+                    this.nextPage = undefined;
+                }
+                this.isActionJoinPending = false;
+                break;
         }
-        if (this.nextPage) {
-          this.setPage(this.nextPage);
-          this.nextPage = undefined;
+    }
+    get messageSender() {
+        return {
+            JoinTournamentReq: (tournament) => { var _a; return window.postMessage({ type: 'JoinTournamentReq', bonusCode: (_a = tournament.wallets[0]) === null || _a === void 0 ? void 0 : _a.code }); },
+            UnjoinTournamentReq: (tournament) => window.postMessage({ type: 'UnjoinTournamentReq', id: tournament.id }),
+            UpdateTournamentsItemReq: (tournament) => window.postMessage({ type: 'UpdateTournamentsItemReq', id: tournament.id }),
+            UpdateLeaderboardsReq: (tournament) => window.postMessage({ type: 'UpdateLeaderboardsReq', id: tournament.id }),
+        };
+    }
+    connectedCallback() {
+        this.setTimeInterval();
+    }
+    disconnectedCallback() {
+        clearInterval(this.timeHolder);
+    }
+    actionJoin(tournament) {
+        if (this.isActionJoinPending)
+            return;
+        this.isActionJoinPending = true;
+        try {
+            if (tournament.playerEnrolled) {
+                this.messageSender.UnjoinTournamentReq(tournament);
+            }
+            else {
+                this.messageSender.JoinTournamentReq(tournament);
+            }
         }
-        this.isActionJoinPending = false;
-        break;
-    }
-  }
-  get messageSender() {
-    return {
-      JoinTournamentReq: (tournament) => { var _a; return window.postMessage({ type: 'JoinTournamentReq', bonusCode: (_a = tournament.wallets[0]) === null || _a === void 0 ? void 0 : _a.code }); },
-      UnjoinTournamentReq: (tournament) => window.postMessage({ type: 'UnjoinTournamentReq', id: tournament.id }),
-      UpdateTournamentsItemReq: (tournament) => window.postMessage({ type: 'UpdateTournamentsItemReq', id: tournament.id }),
-      UpdateLeaderboardsReq: (tournament) => window.postMessage({ type: 'UpdateLeaderboardsReq', id: tournament.id }),
-    };
-  }
-  connectedCallback() {
-    this.setTimeInterval();
-  }
-  disconnectedCallback() {
-    clearInterval(this.timeHolder);
-  }
-  actionJoin(tournament) {
-    if (this.isActionJoinPending)
-      return;
-    this.isActionJoinPending = true;
-    try {
-      if (tournament.playerEnrolled) {
-        this.messageSender.UnjoinTournamentReq(tournament);
-      }
-      else {
-        this.messageSender.JoinTournamentReq(tournament);
-      }
-    }
-    catch (e) {
-      console.log('error', e);
-      return;
-    }
-  }
-  isTournamentClosed(tournament) {
-    return [
-      TournamentState.Closed,
-      TournamentState.Closing
-    ].includes(tournament.state);
-  }
-  setPage(page, metaData) {
-    switch (page) {
-      case LeaderboardPage.Confirm:
-      case LeaderboardPage.Item:
-        this.tournamentItem = metaData.tournament;
-        if (!this.tournamentItem) {
-          this.messageSender.UpdateTournamentsItemReq(metaData.tournament);
+        catch (e) {
+            console.log('error', e);
+            return;
+        }
+    }
+    isTournamentClosed(tournament) {
+        return [
+            TournamentState.Closed,
+            TournamentState.Closing
+        ].includes(tournament.state);
+    }
+    setPage(page, metaData) {
+        switch (page) {
+            case LeaderboardPage.Confirm:
+            case LeaderboardPage.Item:
+                this.tournamentItem = metaData.tournament;
+                if (!this.tournamentItem) {
+                    this.messageSender.UpdateTournamentsItemReq(metaData.tournament);
+                }
+                if (this.isTournamentClosed(this.tournamentItem)) {
+                    this.messageSender.UpdateLeaderboardsReq(this.tournamentItem);
+                }
+                break;
+            case LeaderboardPage.List:
+                break;
+        }
+        this.tab = Tab.Info;
+        this.page = page;
+    }
+    renderPage() {
+        switch (this.page) {
+            case LeaderboardPage.Confirm: return this.renderPageConfirm();
+            case LeaderboardPage.Item: return this.renderPageLeaderboardItem();
+            case LeaderboardPage.List: return this.renderPageLeaderboardList();
+        }
+    }
+    render() {
+        return (h(Host, { key: '07ebdb6c71a03be84b430e18a80417323a9cd3cc' }, h("general-styling-wrapper", { key: 'ac0134009a6bfcdb4b79816138ea441a8415b953', clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling,
+            // @ts-ignore
+            targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), this.renderPage()));
+    }
+    onClickListItemChangePage(tournament) {
+        this.setPage(LeaderboardPage.Item, { tournament });
+    }
+    onClickItemJoin(tournament, e) {
+        e.stopPropagation();
+        if (tournament.playerEnrolled) {
+            this.openDialog(DialogType.Unjoin, tournament);
+        }
+        else {
+            this.actionJoin(tournament);
+            this.tournamentItem = tournament;
+        }
+    }
+    onClickTab(tab) {
+        this.tab = tab;
+        switch (tab) {
+            case Tab.Leaderboard:
+                this.leaderboards = undefined;
+                this.messageSender.UpdateLeaderboardsReq(this.tournamentItem);
+                break;
+            case Tab.Games:
+                this.messageSender.UpdateTournamentsItemReq(this.tournamentItem);
+                break;
+        }
+    }
+    renderPageLeaderboardList() {
+        var _a;
+        if (!this.tournamentList) {
+            this.tournamentList = (_a = this.leaderboardsInit) === null || _a === void 0 ? void 0 : _a.map(item => tournamentAdapter(item));
+            return h("general-animation-loading", null);
+        }
+        const { locale } = this;
+        if (this.tournamentList.length) {
+            return this.renderLeaderboardContainer(h(Fragment, null, h("div", { class: "Leaderboards Row" }, this.tournamentList.map(_tournament => (h("div", { class: classnames("LeaderboardsItem", _tournament.playerEnrolled ? ' GradientRounded Hollow' : ''), onClick: this.onClickListItemChangePage.bind(this, _tournament) }, h("div", { class: "LeaderboardsItemContainer" }, this.renderTitleContainer(_tournament), this.renderTimeBar(_tournament))))))));
         }
-        if (this.isTournamentClosed(this.tournamentItem)) {
-          this.messageSender.UpdateLeaderboardsReq(this.tournamentItem);
+        else {
+            return (h("div", { class: "NoLeaderboards Row" }, h("div", null, locale.NoLeaderboards), h("div", null, locale.NoLeaderboardsTip)));
         }
-        break;
-      case LeaderboardPage.List:
-        break;
-    }
-    this.tab = Tab.Info;
-    this.page = page;
-  }
-  renderPage() {
-    switch (this.page) {
-      case LeaderboardPage.Confirm: return this.renderPageConfirm();
-      case LeaderboardPage.Item: return this.renderPageLeaderboardItem();
-      case LeaderboardPage.List: return this.renderPageLeaderboardList();
-    }
-  }
-  render() {
-    return (h(Host, null,
-      h("general-styling-wrapper", { clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, 
-        // @ts-ignore
-        targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }),
-      this.renderPage()));
-  }
-  onClickListItemChangePage(tournament) {
-    this.setPage(LeaderboardPage.Item, { tournament });
-  }
-  onClickItemJoin(tournament, e) {
-    e.stopPropagation();
-    if (tournament.playerEnrolled) {
-      this.openDialog(DialogType.Unjoin, tournament);
-    }
-    else {
-      this.actionJoin(tournament);
-      this.tournamentItem = tournament;
-    }
-  }
-  onClickTab(tab) {
-    this.tab = tab;
-    switch (tab) {
-      case Tab.Leaderboard:
-        this.leaderboards = undefined;
-        this.messageSender.UpdateLeaderboardsReq(this.tournamentItem);
-        break;
-      case Tab.Games:
-        this.messageSender.UpdateTournamentsItemReq(this.tournamentItem);
-        break;
-    }
-  }
-  renderPageLeaderboardList() {
-    var _a;
-    if (!this.tournamentList) {
-      this.tournamentList = (_a = this.leaderboardsInit) === null || _a === void 0 ? void 0 : _a.map(item => tournamentAdapter(item));
-      return h("general-animation-loading", null);
-    }
-    const { locale } = this;
-    if (this.tournamentList.length) {
-      return this.renderLeaderboardContainer(h(Fragment, null,
-        h("div", { class: "Leaderboards Row" }, this.tournamentList.map(_tournament => (h("div", { class: classnames("LeaderboardsItem", _tournament.playerEnrolled ? ' GradientRounded Hollow' : ''), onClick: this.onClickListItemChangePage.bind(this, _tournament) },
-          h("div", { class: "LeaderboardsItemContainer" },
-            this.renderTitleContainer(_tournament),
-            this.renderTimeBar(_tournament))))))));
-    }
-    else {
-      return (h("div", { class: "NoLeaderboards Row" },
-        h("div", null, locale.NoLeaderboards),
-        h("div", null, locale.NoLeaderboardsTip)));
-    }
-  }
-  renderPageConfirm() {
-    if (!this.tournamentItem)
-      return h("general-animation-loading", null);
-    const tournamentName = this.tournamentItem.nameOrTitle;
-    const { locale } = this;
-    return (h("div", { class: "PageConfirmContainer" },
-      h("div", { class: "GradientRounded Hollow PageConfirm" },
-        h("div", null, iconTrophy),
-        h("div", { class: "Title" }, locale.JoinDialog.Tile),
-        h("div", { class: "Description", innerHTML: localePostprocess(locale.JoinDialog.Description, { tournamentName }) }),
-        h("div", { class: "PageConfirmButtonsGroup" },
-          h(GradientRoundedButton, Object.assign({}, {
-            statedClasses: {
-              isPending: this.isActionJoinPending,
+    }
+    renderPageConfirm() {
+        if (!this.tournamentItem)
+            return h("general-animation-loading", null);
+        const tournamentName = this.tournamentItem.nameOrTitle;
+        const { locale } = this;
+        return (h("div", { class: "PageConfirmContainer" }, h("div", { class: "GradientRounded Hollow PageConfirm" }, h("div", null, iconTrophy), h("div", { class: "Title" }, locale.JoinDialog.Tile), h("div", { class: "Description", innerHTML: localePostprocess(locale.JoinDialog.Description, { tournamentName }) }), h("div", { class: "PageConfirmButtonsGroup" }, h(GradientRoundedButton, { statedClasses: {
+                isPending: this.isActionJoinPending,
             },
             onClick: this.onClickConfirmJoin,
-            innerHTML: locale.JoinDialog.ButtonYes,
-          })),
-          h(GradientRoundedButton, Object.assign({}, {
-            statedClasses: {
-              isPending: this.isActionJoinPending,
-              isHollow: true,
+            innerHTML: locale.JoinDialog.ButtonYes }), h(GradientRoundedButton, { statedClasses: {
+                isPending: this.isActionJoinPending,
+                isHollow: true,
             },
             onClick: this.onClickConfirmUnjoin,
-            innerHTML: locale.JoinDialog.ButtonNo,
-          }))))));
-  }
-  renderPageLeaderboardItem() {
-    if (!this.tournamentItem)
-      return h("general-animation-loading", null);
-    return this.renderLeaderboardContainer(h(Fragment, null,
-      this.renderTitleContainer(this.tournamentItem),
-      this.renderTabs(),
-      this.renderTabbedContent()));
-  }
-  renderDialogContent() {
-    switch (this.dialog.type) {
-      case DialogType.Unjoin:
-        return this.renderDialogContentUnjoin();
-      case DialogType.Tip:
-        return (h("div", { class: "Tip" }, this.locale.Tip));
-    }
-  }
-  renderDialogContentUnjoin() {
-    const { locale } = this;
-    return (h("div", { class: "DialogContentUnjoin" },
-      h("div", { class: "DialogContentUnjoinTitle" }, locale.UnjoinDialog.Title),
-      h("div", { class: "DialogContentUnjoinDescription", innerHTML: locale.UnjoinDialog.Description }),
-      h(GradientRoundedButton, Object.assign({}, {
-        statedClasses: {
-          isPending: this.isActionJoinPending,
-        },
-        onClick: this.onClickDialogUnjoin,
-        innerHTML: locale.UnjoinDialog.ButtonYes,
-      })),
-      h(GradientRoundedButton, Object.assign({}, {
-        statedClasses: {
-          isHollow: true,
-          isPending: this.isActionJoinPending,
-        },
-        onClick: this.onClickDialogJoin,
-        innerHTML: locale.UnjoinDialog.ButtonNo,
-      }))));
-  }
-  renderTitleContainer(tournament) {
-    const { locale } = this;
-    return (h("div", { class: "TitleContainer" },
-      h("div", { class: "Title" }, tournament.nameOrTitle),
-      tournament.state !== TournamentState.Closed && (h("div", null,
-        h(GradientRoundedButton, Object.assign({}, {
-          statedClasses: {
-            isHollow: tournament.playerEnrolled,
-            isPending: this.isActionJoinPending,
-          },
-          onClick: this.onClickItemJoin.bind(this, tournament),
-          innerHTML: tournament.playerEnrolled ? locale.Unjoin : locale.Join,
-        }))))));
-  }
-  renderTabbedContent() {
-    switch (this.tab) {
-      case Tab.Info: return this.renderInfo();
-      case Tab.Leaderboard: return this.renderLeaderboard();
-      case Tab.Games: return this.renderGames();
-    }
-  }
-  renderGames() {
-    var _a;
-    return (h("div", { class: "Games" }, (_a = this.tournamentItem.games) === null || _a === void 0 ? void 0 : _a.map(game => (h("div", null,
-      h("img", { src: game.defaultThumbnail, alt: "" }))))));
-  }
-  renderLeaderboard() {
-    if (!this.leaderboards)
-      return h("general-animation-loading", null);
-    if (!this.leaderboards.length)
-      return '';
-    return (h("table", { class: "Leaderboards" }, this.leaderboards.map(leaderboard => (h("tr", { class: classnames({ isMe: leaderboard.isMe }) },
-      h("td", { class: "LeaderboardRank" },
-        h("span", null, leaderboard.rank)),
-      h("td", { class: "LeaderboardName" }, leaderboard.shortName),
-      h("td", { class: "LeaderboardScore" }, leaderboard.score),
-      h("td", { class: "LeaderboardPrize" }, leaderboard.prizeName))))));
-  }
-  renderTabs() {
-    const { locale, tab } = this;
-    return (h("div", { class: "TabsContainer" },
-      h("div", { class: "Tabs" }, Object.keys(Tab).map((_tab) => (h("div", Object.assign({}, {
-        class: classnames({ active: tab === _tab }),
-        onClick: this.onClickTab.bind(this, _tab)
-      }), locale[_tab]))))));
-  }
-  renderTimeBar(tournament) {
-    return (h("section", { class: "TimeContainer" },
-      h("div", { class: 'Time' }, tournament.playerEnrolled ? (h(Fragment, null,
-        h("div", null, getDifference(addSeconds(tournament.startTime, this.time), tournament.endTime)),
-        h("div", null,
-          h(GradientRoundedButton, { statedClasses: {
-              isHollow: true,
-              isPendding: false,
-            }, innerHTML: `${getProgress(tournament.startTime, tournament.endTime)}%` })))) : (h(Fragment, null,
-        h("div", null, formatDate(tournament.startTime)),
-        h("div", null, formatDate(tournament.endTime))))),
-      h("casino-engagement-suite-progress-bar", { value: Number(getProgress(tournament.startTime, tournament.endTime)), "hide-percent": true })));
-  }
-  renderInfo() {
-    var _a, _b;
-    const { locale, tournamentItem: tournament, isShowInfo } = this;
-    return (h("div", { class: "InfoContainer" },
-      this.renderTimeBar(tournament),
-      (h("section", { class: "ShowInfo", onClick: this.onClickShowInfo },
-        h("p", null,
-          h("span", null, isShowInfo ? iconEyeClose : iconEyeOpen),
-          h("span", null, locale.LeaderboardDetails)))),
-      isShowInfo && (h("section", { class: "Info" },
-        h("div", null, tournament.description),
-        h("div", { class: "Criterias" },
-          h("div", null,
-            locale.ScoreCriteria,
-            ": ",
-            h("span", null, tournament.scoreCriteria)),
-          h("div", null,
-            locale.MinimumBetCriteria,
-            ": ",
-            h("span", null, tournament.minBetCount))),
-        h("div", { class: "TC" },
-          h("a", { href: tournament.termsUrl, target: '_blank' }, locale.TC)))),
-      this.isTournamentClosed(this.tournamentItem) && ((_a = this.leaderboards) === null || _a === void 0 ? void 0 : _a.find(l => l.isMe)) && (h("section", { class: "ResultPrize", innerHTML: localePostprocess(locale.TipPrize, this.getResultPrize((_b = this.leaderboards) === null || _b === void 0 ? void 0 : _b.find(l => l.isMe))) })),
-      h("section", { class: "Prizes" },
-        h("div", { class: "PrizesHeader" },
-          iconReward,
-          h("span", { class: "PrizesText" }, locale.Prizes)),
-        tournament.prizes.map((prize, index) => (h("div", { class: "Prize" },
-          index + 1,
-          " ",
-          locale.Place,
-          ": ",
-          h("span", { class: "PrizeText" }, prize.name)))))));
-  }
-  getResultPrize(leaderboard) {
-    return {
-      prize: leaderboard.prizeName,
-      place: leaderboard.rank,
-    };
-  }
-  renderCloseBarInLayout() {
-    const { left, middle } = this.getWrapperBarData();
-    return (h(CloseBar, Object.assign({}, { left, middle,
-      right: (h("span", Object.assign({}, { onClick: this.onClickBarInLayout }), iconClose))
-    })));
-  }
-  renderCloseBarInLayoutDialog() {
-    return (h(CloseBar, Object.assign({}, {
-      right: (h("span", Object.assign({}, { onClick: this.onClickBarInLayoutDialog }), iconClose))
-    })));
-  }
-  renderLeaderboardContainer(render) {
-    const { dialog: { isOpen } } = this;
-    return (h("div", { class: "Wrapper" },
-      h("div", { class: classnames("WrapperContent", { faded: isOpen }) },
-        this.renderCloseBarInLayout(),
-        h("div", { class: "Root" },
-          h("div", { class: "Main" }, render))),
-      h("div", { class: "WrapperUtil" },
-        h("dialog", { open: isOpen },
-          h("div", null,
-            this.renderCloseBarInLayoutDialog(),
-            isOpen && this.renderDialogContent())))));
-  }
-  getWrapperBarData() {
-    const { page, locale } = this;
-    switch (page) {
-      case LeaderboardPage.List:
+            innerHTML: locale.JoinDialog.ButtonNo })))));
+    }
+    renderPageLeaderboardItem() {
+        if (!this.tournamentItem)
+            return h("general-animation-loading", null);
+        return this.renderLeaderboardContainer(h(Fragment, null, this.renderTitleContainer(this.tournamentItem), this.renderTabs(), this.renderTabbedContent()));
+    }
+    renderDialogContent() {
+        switch (this.dialog.type) {
+            case DialogType.Unjoin:
+                return this.renderDialogContentUnjoin();
+            case DialogType.Tip:
+                return (h("div", { class: "Tip" }, this.locale.Tip));
+        }
+    }
+    renderDialogContentUnjoin() {
+        const { locale } = this;
+        return (h("div", { class: "DialogContentUnjoin" }, h("div", { class: "DialogContentUnjoinTitle" }, locale.UnjoinDialog.Title), h("div", { class: "DialogContentUnjoinDescription", innerHTML: locale.UnjoinDialog.Description }), h(GradientRoundedButton, { statedClasses: {
+                isPending: this.isActionJoinPending,
+            },
+            onClick: this.onClickDialogUnjoin,
+            innerHTML: locale.UnjoinDialog.ButtonYes }), h(GradientRoundedButton, { statedClasses: {
+                isHollow: true,
+                isPending: this.isActionJoinPending,
+            },
+            onClick: this.onClickDialogJoin,
+            innerHTML: locale.UnjoinDialog.ButtonNo })));
+    }
+    renderTitleContainer(tournament) {
+        const { locale } = this;
+        return (h("div", { class: "TitleContainer" }, h("div", { class: "Title" }, tournament.nameOrTitle), tournament.state !== TournamentState.Closed && (h("div", null, h(GradientRoundedButton, { statedClasses: {
+                isHollow: tournament.playerEnrolled,
+                isPending: this.isActionJoinPending,
+            },
+            onClick: this.onClickItemJoin.bind(this, tournament),
+            innerHTML: tournament.playerEnrolled ? locale.Unjoin : locale.Join })))));
+    }
+    renderTabbedContent() {
+        switch (this.tab) {
+            case Tab.Info: return this.renderInfo();
+            case Tab.Leaderboard: return this.renderLeaderboard();
+            case Tab.Games: return this.renderGames();
+        }
+    }
+    renderGames() {
+        var _a;
+        return (h("div", { class: "Games" }, (_a = this.tournamentItem.games) === null || _a === void 0 ? void 0 : _a.map(game => (h("div", null, h("img", { src: game.defaultThumbnail, alt: "" }))))));
+    }
+    renderLeaderboard() {
+        if (!this.leaderboards)
+            return h("general-animation-loading", null);
+        if (!this.leaderboards.length)
+            return '';
+        return (h("table", { class: "Leaderboards" }, this.leaderboards.map(leaderboard => (h("tr", { class: classnames({ isMe: leaderboard.isMe }) }, h("td", { class: "LeaderboardRank" }, h("span", null, leaderboard.rank)), h("td", { class: "LeaderboardName" }, leaderboard.shortName), h("td", { class: "LeaderboardScore" }, leaderboard.score), h("td", { class: "LeaderboardPrize" }, leaderboard.prizeName))))));
+    }
+    renderTabs() {
+        const { locale, tab } = this;
+        return (h("div", { class: "TabsContainer" }, h("div", { class: "Tabs" }, Object.keys(Tab).map((_tab) => (h("div", { class: classnames({ active: tab === _tab }),
+            onClick: this.onClickTab.bind(this, _tab) }, locale[_tab]))))));
+    }
+    renderTimeBar(tournament) {
+        return (h("section", { class: "TimeContainer" }, h("div", { class: 'Time' }, tournament.playerEnrolled ? (h(Fragment, null, h("div", null, getDifference(addSeconds(tournament.startTime, this.time), tournament.endTime)), h("div", null, h(GradientRoundedButton, { statedClasses: {
+                isHollow: true,
+                isPendding: false,
+            }, innerHTML: `${getProgress(tournament.startTime, tournament.endTime)}%` })))) : (h(Fragment, null, h("div", null, formatDate(tournament.startTime)), h("div", null, formatDate(tournament.endTime))))), h("casino-engagement-suite-progress-bar", { value: Number(getProgress(tournament.startTime, tournament.endTime)), "hide-percent": true })));
+    }
+    renderInfo() {
+        var _a, _b;
+        const { locale, tournamentItem: tournament, isShowInfo } = this;
+        return (h("div", { class: "InfoContainer" }, this.renderTimeBar(tournament), (h("section", { class: "ShowInfo", onClick: this.onClickShowInfo }, h("p", null, h("span", null, isShowInfo ? iconEyeClose : iconEyeOpen), h("span", null, locale.LeaderboardDetails)))), isShowInfo && (h("section", { class: "Info" }, h("div", null, tournament.description), h("div", { class: "Criterias" }, h("div", null, locale.ScoreCriteria, ": ", h("span", null, tournament.scoreCriteria)), h("div", null, locale.MinimumBetCriteria, ": ", h("span", null, tournament.minBetCount))), h("div", { class: "TC" }, h("a", { href: tournament.termsUrl, target: '_blank' }, locale.TC)))), this.isTournamentClosed(this.tournamentItem) && ((_a = this.leaderboards) === null || _a === void 0 ? void 0 : _a.find(l => l.isMe)) && (h("section", { class: "ResultPrize", innerHTML: localePostprocess(locale.TipPrize, this.getResultPrize((_b = this.leaderboards) === null || _b === void 0 ? void 0 : _b.find(l => l.isMe))) })), h("section", { class: "Prizes" }, h("div", { class: "PrizesHeader" }, iconReward, h("span", { class: "PrizesText" }, locale.Prizes)), tournament.prizes.map((prize, index) => (h("div", { class: "Prize" }, index + 1, " ", locale.Place, ": ", h("span", { class: "PrizeText" }, prize.name)))))));
+    }
+    getResultPrize(leaderboard) {
+        return {
+            prize: leaderboard.prizeName,
+            place: leaderboard.rank,
+        };
+    }
+    renderCloseBarInLayout() {
+        const { left, middle } = this.getWrapperBarData();
+        return (h(CloseBar, { left, middle,
+            right: (h("span", { onClick: this.onClickBarInLayout }, iconClose)) }));
+    }
+    renderCloseBarInLayoutDialog() {
+        return (h(CloseBar, { right: (h("span", { onClick: this.onClickBarInLayoutDialog }, iconClose)) }));
+    }
+    renderLeaderboardContainer(render) {
+        const { dialog: { isOpen } } = this;
+        return (h("div", { class: "Wrapper" }, h("div", { class: classnames("WrapperContent", { faded: isOpen }) }, this.renderCloseBarInLayout(), h("div", { class: "Root" }, h("div", { class: "Main" }, render))), h("div", { class: "WrapperUtil" }, h("dialog", { open: isOpen }, h("div", null, this.renderCloseBarInLayoutDialog(), isOpen && this.renderDialogContent())))));
+    }
+    getWrapperBarData() {
+        const { page, locale } = this;
+        switch (page) {
+            case LeaderboardPage.List:
+                return {
+                    left: h("span", { onClick: this.onClickBarTip }, iconQuestion),
+                    middle: locale.Leaderboards
+                };
+            case LeaderboardPage.Item:
+                return {
+                    left: (h("span", { onClick: this.onClickBarBack }, iconBack)),
+                    middle: '',
+                };
+        }
+    }
+    openDialog(type, data = undefined) {
+        this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: true, type, data });
+    }
+    closeDialog() {
+        this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: false });
+    }
+    static get is() { return "casino-engagement-suite-tournament"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
         return {
-          left: h("span", { onClick: this.onClickBarTip }, iconQuestion),
-          middle: locale.Leaderboards
+            "$": ["casino-engagement-suite-tournament.scss"]
         };
-      case LeaderboardPage.Item:
+    }
+    static get styleUrls() {
         return {
-          left: (h("span", { onClick: this.onClickBarBack }, iconBack)),
-          middle: '',
+            "$": ["casino-engagement-suite-tournament.css"]
         };
     }
-  }
-  openDialog(type, data = undefined) {
-    this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: true, type, data });
-  }
-  closeDialog() {
-    this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: false });
-  }
-  static get is() { return "casino-engagement-suite-tournament"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["casino-engagement-suite-tournament.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["casino-engagement-suite-tournament.css"]
-  }; }
-  static get properties() { return {
-    "language": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Language"
-      },
-      "attribute": "language",
-      "reflect": false,
-      "defaultValue": "'en'"
-    },
-    "clientStyling": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Client custom styling via string"
-      },
-      "attribute": "client-styling",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "clientStylingUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Client custom styling via url"
-      },
-      "attribute": "client-styling-url",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "translationUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Translation via url"
-      },
-      "attribute": "translation-url",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "leaderboardsInit": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "TournamentApi[]",
-        "resolved": "TournamentApi[]",
-        "references": {
-          "TournamentApi": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Raw Leaderboards from API for Init"
-      }
-    }
-  }; }
-  static get states() { return {
-    "tab": {},
-    "locale": {},
-    "tournamentItem": {},
-    "tournamentList": {},
-    "leaderboards": {},
-    "isActionJoinPending": {},
-    "isDialogOpen": {},
-    "isShowInfo": {},
-    "page": {},
-    "tournamentInDialog": {},
-    "dialog": {},
-    "time": {}
-  }; }
-  static get events() { return [{
-      "method": "close",
-      "name": "close",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get listeners() { return [{
-      "name": "message",
-      "method": "handleEvent",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }]; }
+    static get properties() {
+        return {
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language"
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'en'"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translation via url"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "leaderboardsInit": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TournamentApi[]",
+                    "resolved": "TournamentApi[]",
+                    "references": {
+                        "TournamentApi": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "../../../../packages/stencil/casino-engagement-suite-tournament/src/utils/types.ts::TournamentApi"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Raw Leaderboards from API for Init"
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tab": {},
+            "locale": {},
+            "tournamentItem": {},
+            "tournamentList": {},
+            "leaderboards": {},
+            "isActionJoinPending": {},
+            "isDialogOpen": {},
+            "isShowInfo": {},
+            "page": {},
+            "tournamentInDialog": {},
+            "dialog": {},
+            "time": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "message",
+                "method": "handleEvent",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }