@everymatrix/casino-tournaments-table 1.44.0 → 1.45.2

package/src/CasinoTournamentsTable.svelte

@@ -1,722 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { getDevice, isMobile } from 'rvhelper';
-  import { _, addNewMessages } from './i18n';
-  import { TRANSLATIONS } from './translations';
-
-  import arrowUpSvg from './images/arrow-up.svg';
-  import arrowDownSvg from './images/arrow-down.svg'
-
-  export let sortable:Boolean = false;
-  export let firstrow:Boolean = false;
-  export let lang:String = 'en';
-  export let fractiondigit: string = '2'
-
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  export let translationurl:string = '';
-
-  let customStylingContainer: HTMLElement;
-  let displayNone:boolean = false;
-
-  let columns:any = [];
-  let data:any = [];
-  let sortColumn:any = null;
-  let sortDirection:any = null;
-  let column:any = null;
-  let firstRowData:any = null;
-  let showTable:Boolean = true;
-  let userAgent = window.navigator.userAgent;
-  let isUserPositionChanged:Boolean = false;
-  let isUserPositionUp:Boolean = false;
-  let firstRowChangeFlagTimer: any=null;
-  let lastUserPosition:number;
-  let tooltipColSpan:number;
-
-  const setTranslationUrl = ():void => {
-    let url:string = translationurl;
-
-    fetch(url).then((res:any) => res.json())
-    .then((res) => {
-      Object.keys(res).forEach((item:any):void => {
-        addNewMessages(item, res[item]);
-      });
-    }).catch((err:any) => {
-      console.log(err);
-    });
-  }
-
-  Object.keys(TRANSLATIONS).forEach((item) => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  const findTableRowDataByRank =(position: Number, data)=>{
-    let rowData = data.find((row)=>{
-      return row.Rank == position;
-    })
-    return rowData;
-  }
-  let rankChangeTime1,rankChangeTime2:any;
-  const processUserRankChanged = (newUserPosion) =>{
-    if(!lastUserPosition){
-      lastUserPosition = newUserPosion;
-      return;// first place bet, do not show change flag
-    }
-    isUserPositionChanged = lastUserPosition != newUserPosion;
-    // when (position changed) or (position not changed but still in 2.5s)
-    isUserPositionUp = lastUserPosition > newUserPosion;
-    if(isUserPositionChanged){
-      rankChangeTime1 = (new Date()).getTime(); //reset time1, make sure userrank change more than once during 5mins
-      firstRowChangeFlagTimer = setTimeout(function (){
-        rankChangeTime2 = (new Date()).getTime();
-        let timeInterval = (rankChangeTime2 - rankChangeTime1)/1000;
-        if(timeInterval > 4){
-          isUserPositionChanged = false;
-        }
-        lastUserPosition = newUserPosion;
-      }, 5000);
-    }
-  }
-  const messageHandler = (e:any) => {
-    if (e.data && e.data.type === 'CasinoTableData') {
-      data = e.data.tableData;
-      display = data;
-    }
-
-    if (e.data && e.data.type === 'CasinoTableColumns') {
-      columns = e.data.tableColumns;
-      tooltipColSpan = columns.length || 4;
-    }
-
-    // set view after current user row defined.
-    if (e.data && e.data.type === 'CasinoTableCurrentUserData'){
-      if(data){
-        data.forEach(item => {
-          if(item.userID == e.data.tableData.userID){
-            item.isCurrentUser = true;
-            //clear first row data when update
-            if(!lastUserPosition){
-              lastUserPosition = e.data.tableData.Rank;
-            }
-            if(firstRowData){
-              processUserRankChanged( e.data.tableData.Rank);
-              firstRowData = null;
-            }else{
-              processUserRankChanged( e.data.tableData.Rank);
-            }
-          }
-        });
-        display = data;
-      }
-    }
-    if (firstrow) {
-      if (e.data && e.data.type === 'CasinoTableFirstRowData') {
-        let newFirstRowData:any = e.data.tableData;
-        if(!firstRowData){
-          firstRowData = e.data.tableData;
-          lastUserPosition = firstRowData.Rank;
-          return;
-        }
-        if(firstRowData && firstRowData.UserID == newFirstRowData.UserID){
-          processUserRankChanged( newFirstRowData.Rank);
-          firstRowData = e.data.tableData;
-        }
-
-      }
-    }
-    // CasinoTableDataUpdate
-    if(e.data && e.data.type==='CasinoTableDataUpdate' && e.data.tableData){
-      let tableUpdateData = e.data.tableData;
-      //check data type before foreach
-      if( !(data instanceof Array)){
-        return;
-      }
-      data.forEach(function (row, idx){
-          let updateRowByPosition = findTableRowDataByRank(row.Rank, tableUpdateData);
-          if(!updateRowByPosition){
-            return;
-          }
-          data[idx] = updateRowByPosition;
-      });
-    }
-  }
-
-  const sortBy = (column:any) => {
-    const sameColumn = column === sortColumn;
-    const currentlyAscending = sortDirection === "ASC";
-    const unsetSort = sameColumn && !currentlyAscending;
-
-    sortColumn = unsetSort ? null : column;
-    sortDirection = unsetSort
-      ? null
-      : sameColumn && currentlyAscending
-      ? "DESC"
-      : "ASC";
-  }
-
-  const getComparator = (type:any, column:any) => {
-    const key = column.toLowerCase();
-
-    if (type === "string") {
-      return (a, b) => a[key].localeCompare(b[key]);
-    }
-    if (type === "number") {
-      return (a, b) => a[key] - b[key];
-    }
-    if (type === "object") {
-      return (a, b) => a[key] - b[key];
-    }
-  }
-
-  const formatDate = (value:any) => {
-    return new Intl.DateTimeFormat("en-GB", {
-      year: "numeric",
-      month: "short",
-      day: "numeric"
-    }).format(value);
-  }
-
-  const sortData = () => {
-    let items = [];
-
-    if (data) {
-      items = [...data];
-    }
-
-    if (!data.length) {
-      return data;
-    }
-
-    const type:any = typeof data[0][sortColumn.toLowerCase()];
-
-    items.sort(getComparator(type, sortColumn));
-
-    return sortDirection === "ASC" ? items : items.reverse();
-  }
-
-  const collapseTable = () => {
-    showTable = !showTable;
-  }
-
-  const shownPlayer = (name: string) => name === 'me' ? $_('me') : name
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    displayNone = true;
-
-    let url:URL = new URL(clientstylingurl);
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(url.href)
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-        setTimeout(() => { displayNone = false; }, 500);
-      });
-  }
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  $: customStylingContainer && clientstyling && setClientStyling();
-  $: customStylingContainer && clientstylingurl && setClientStylingURL();
-  $: translationurl && setTranslationUrl();
-  $: display = sortColumn && sortDirection ? sortData() : [...data];
-  $: sort = column === sortColumn ? sortDirection : null;
-
-</script>
-
-<div bind:this={customStylingContainer}>
-  {#if data.length > 0 || firstRowData}
-    {#if isMobile(userAgent) == true}
-      <div class="TableContent" part="TableContent">
-        <div class="TableUser TableHeadRow" part="TableUser TableHeadRow">
-          {#each columns as column}
-            <div class="TableCell Table{column}" part="TableCell Table{column}">
-              {#if sortable == 'true'}
-                <button on:click={() => sortBy(column)} data-sort={sort}>
-                  {$_(`${column}`)}
-                </button>
-              {:else}
-                <p data-sort={sort}>{$_(`${column}`)}</p>
-              {/if}
-            </div>
-          {/each}
-        </div>
-        {#if firstrow == 'true' && firstRowData}
-          <div class="TableUser CurrentUserRow {firstRowData.Unqualified ? 'UnqualifiedRow' : ''}" part="TableUser CurrentUserRow {firstRowData.Unqualified ? 'UnqualifiedRow' : ''}">
-            <div class="TableCell TableRank {firstRowData.Prize? 'Qualified' : ''}" part="TableCell TableRank RankFirstRow {firstRowData.Prize? 'Qualified' : ''}">
-              {firstRowData.Rank}
-            </div>
-            <div class="TableCell TablePlayer" part="TableCell TablePlayer">{shownPlayer(firstRowData.Player)}</div>
-            <div class="TableCell TablePoints" part="TableCell TablePoints">{firstRowData.Points}</div>
-            {#if firstRowData.Prize}
-              <div class="TableCell TablePrize {!firstRowData.Unqualified? 'Qualified' : ''}" part="TableCell TablePrize {!firstRowData.Unqualified? 'Qualified' : ''}">{firstRowData.Prize}</div>
-            {:else}
-              <div class="TableCell TablePrize" part="TableCell TablePrize">-</div>
-            {/if}
-          </div>
-          {#if firstRowData.Unqualified}
-          <div class="TableUserTooltips" part="TableUserTooltips">
-            <svg class="ExclamationMark" part="ExclamationMark" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M9.03087 3.14062C8.71521 2.56443 8.27722 2.06437 7.74767 1.67553C7.21811 1.28669 6.60971 1.01855 5.96544 0.889885C5.32118 0.761222 4.65646 0.775158 4.01817 0.930778C3.37988 1.0864 2.78361 1.37989 2.27086 1.79064C1.68689 2.25306 1.22358 2.85008 0.920762 3.53063C0.679091 4.08921 0.556377 4.69205 0.560655 5.30065C0.562354 5.92327 0.693172 6.53873 0.944444 7.10839C1.19572 7.67806 1.5622 8.18953 2.02086 8.61059C2.83307 9.36649 3.89773 9.79259 5.00719 9.80553C6.11665 9.81848 7.19124 9.4174 8.02086 8.68066C8.3779 8.38276 8.67913 8.0238 8.91075 7.6206C9.34355 6.92428 9.57213 6.12051 9.57066 5.30065C9.57316 4.54694 9.38776 3.80448 9.03087 3.14062V3.14062ZM4.43077 7.39062C4.41666 7.24208 4.44786 7.09281 4.52013 6.96227C4.59239 6.83174 4.70243 6.72606 4.8358 6.65917C4.96917 6.59228 5.11961 6.56724 5.26744 6.58739C5.41528 6.60754 5.55357 6.67195 5.66417 6.77209C5.77477 6.87223 5.85238 7.00344 5.88707 7.14855C5.92176 7.29367 5.91186 7.44586 5.85851 7.5852C5.80516 7.72454 5.71098 7.84448 5.58824 7.92931C5.46551 8.01415 5.31996 8.05999 5.17076 8.06066C5.0777 8.06746 4.9841 8.05526 4.89586 8.02489C4.80762 7.99453 4.72651 7.94653 4.65733 7.8839C4.58816 7.82127 4.53247 7.74531 4.49352 7.66051C4.45456 7.57572 4.43323 7.4839 4.43077 7.39062V7.39062ZM5.05065 2.69067H5.25084C5.32609 2.69062 5.40056 2.70571 5.46983 2.7351C5.53911 2.76448 5.60165 2.80755 5.65392 2.86169C5.70619 2.91582 5.7471 2.9799 5.77403 3.05016C5.80097 3.12043 5.81334 3.19542 5.81066 3.27062L5.7108 5.66064C5.70312 5.8039 5.64068 5.93873 5.53649 6.03735C5.43229 6.13596 5.29421 6.19087 5.15074 6.19067C5.00827 6.19076 4.87125 6.13559 4.76866 6.03674C4.66607 5.93788 4.60587 5.80301 4.60069 5.66064L4.50084 3.27062C4.49817 3.19625 4.51016 3.12209 4.53648 3.05248C4.5628 2.98287 4.60295 2.91923 4.65416 2.86523C4.70537 2.81123 4.76671 2.76801 4.83483 2.73803C4.90294 2.70805 4.97624 2.69195 5.05065 2.69067V2.69067Z"/>
-            </svg>
-            <em part="TableUserTooltipsEm">{$_('UnqualifiedTips')}</em>
-          </div>
-          {/if}
-        {/if}
-        {#if showTable}
-          {#each display as row}
-            <div class="TableUser {row.isCurrentUser ? 'CurrentUserRow' : ''}" part="TableUser {row.isCurrentUser ? 'CurrentUserRow' : ''}">
-              <div class="TableCell TableRank {row.Prize? 'Qualified' : ''}" part="TableCell Rank-{row.Rank} TableRank {row.Prize? 'Qualified' : ''}">{row.Rank}</div>
-              <div class="TableCell TablePlayer" part="TableCell TablePlayer">{shownPlayer(row.Player)}</div>
-              <div class="TableCell TablePoints" part="TableCell TablePoints">{row.Points}</div>
-              {#if row.Prize}
-                <div class="TableCell TablePrize {!row.Unqualified? 'Qualified' : ''}" part="TableCell TablePrize {!row.Unqualified? 'Qualified' : ''}">{row.Prize}</div>
-              {:else}
-                <div class="TableCell TablePrize" part="TableCell TablePrize">-</div>
-              {/if}
-            </div>
-            {#if row.isCurrentUser && row.Unqualified}
-              <div class="TableUserTooltips {row.Unqualified ? 'UnqualifiedRow' : ''}" part="TableUserTooltips {row.Unqualified ? 'UnqualifiedRow' : ''}">
-                <svg class="ExclamationMark" part="ExclamationMark" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M9.03087 3.14062C8.71521 2.56443 8.27722 2.06437 7.74767 1.67553C7.21811 1.28669 6.60971 1.01855 5.96544 0.889885C5.32118 0.761222 4.65646 0.775158 4.01817 0.930778C3.37988 1.0864 2.78361 1.37989 2.27086 1.79064C1.68689 2.25306 1.22358 2.85008 0.920762 3.53063C0.679091 4.08921 0.556377 4.69205 0.560655 5.30065C0.562354 5.92327 0.693172 6.53873 0.944444 7.10839C1.19572 7.67806 1.5622 8.18953 2.02086 8.61059C2.83307 9.36649 3.89773 9.79259 5.00719 9.80553C6.11665 9.81848 7.19124 9.4174 8.02086 8.68066C8.3779 8.38276 8.67913 8.0238 8.91075 7.6206C9.34355 6.92428 9.57213 6.12051 9.57066 5.30065C9.57316 4.54694 9.38776 3.80448 9.03087 3.14062V3.14062ZM4.43077 7.39062C4.41666 7.24208 4.44786 7.09281 4.52013 6.96227C4.59239 6.83174 4.70243 6.72606 4.8358 6.65917C4.96917 6.59228 5.11961 6.56724 5.26744 6.58739C5.41528 6.60754 5.55357 6.67195 5.66417 6.77209C5.77477 6.87223 5.85238 7.00344 5.88707 7.14855C5.92176 7.29367 5.91186 7.44586 5.85851 7.5852C5.80516 7.72454 5.71098 7.84448 5.58824 7.92931C5.46551 8.01415 5.31996 8.05999 5.17076 8.06066C5.0777 8.06746 4.9841 8.05526 4.89586 8.02489C4.80762 7.99453 4.72651 7.94653 4.65733 7.8839C4.58816 7.82127 4.53247 7.74531 4.49352 7.66051C4.45456 7.57572 4.43323 7.4839 4.43077 7.39062V7.39062ZM5.05065 2.69067H5.25084C5.32609 2.69062 5.40056 2.70571 5.46983 2.7351C5.53911 2.76448 5.60165 2.80755 5.65392 2.86169C5.70619 2.91582 5.7471 2.9799 5.77403 3.05016C5.80097 3.12043 5.81334 3.19542 5.81066 3.27062L5.7108 5.66064C5.70312 5.8039 5.64068 5.93873 5.53649 6.03735C5.43229 6.13596 5.29421 6.19087 5.15074 6.19067C5.00827 6.19076 4.87125 6.13559 4.76866 6.03674C4.66607 5.93788 4.60587 5.80301 4.60069 5.66064L4.50084 3.27062C4.49817 3.19625 4.51016 3.12209 4.53648 3.05248C4.5628 2.98287 4.60295 2.91923 4.65416 2.86523C4.70537 2.81123 4.76671 2.76801 4.83483 2.73803C4.90294 2.70805 4.97624 2.69195 5.05065 2.69067V2.69067Z"/>
-                </svg>
-                <em part="TableUserTooltipsEm">{$_('UnqualifiedTips')}</em>
-              </div>
-            {/if}
-          {/each}
-        {/if}
-      </div>
-    {:else}
-      <div class="TournamentsTable" part="TournamentsTable">
-        <table class="LeftTable" part="LeftTable">
-          <thead part="LeftTableThead">
-            <tr part="LeftTableTr">
-              {#each columns as column}
-                <th part="LeftTableTh">
-                  {#if sortable == 'true'}
-                    <button on:click={() => sortBy(column)} data-sort={sort} part="LeftTableButton">
-                      {$_(`${column}`)}
-                    </button>
-                  {:else}
-                    <p data-sort={sort} part="LeftTableP">{$_(`${column}`)}</p>
-                  {/if}
-                </th>
-              {/each}
-            </tr>
-          </thead>
-          <tbody part="LeftTableTbody">
-            {#if firstrow == 'true' && firstRowData}
-              <tr class="FirstRow {firstRowData.Unqualified ? 'UnqualifiedRow':''}" part="FirstRow {firstRowData.Unqualified ? 'UnqualifiedRow':''}">
-                <td part="LeftTableTd RankFirstRow"><strong class="RankCol" part="RankCol"><em part="LeftTableTdEm">#{firstRowData.Rank}</em>
-                  <div class="ScoreChangeFlag {isUserPositionChanged ? 'Show' : 'Hidden'}" part="ScoreChangeFlag {isUserPositionChanged ? 'Show' : 'Hidden'}">
-                    <img src="{arrowUpSvg}"  part="Rank_Arror_UP" class="svg Arrow Up {isUserPositionChanged && isUserPositionUp ? 'Show' : 'Hidden'}" />
-                    <img src="{arrowDownSvg}" part="Rank_Arror_Down" class="svg Arrow Down {isUserPositionChanged && !isUserPositionUp ? 'Show' : 'Hidden'}" />
-                  </div></strong>
-                </td>
-                <td part="LeftTableTd">{shownPlayer(firstRowData.Player)}</td>
-                <td part="LeftTableTd">
-                  <div class="Flex" part="Flex">{firstRowData.Points}</div>
-                </td>
-                <td class="LeftTableTd {!firstRowData.Unqualified? 'Qualified' : ''}" part="LeftTableTd {!firstRowData.Unqualified? 'Qualified' : ''}">
-                  {#if firstRowData.Prize}
-                    {firstRowData.Prize}
-                  {:else}
-                    -
-                  {/if}
-                </td>
-              </tr>
-              {#if firstRowData.Unqualified}
-                <tr class="TooltipsRow" part="TooltipsRow">
-                  <td colspan="{tooltipColSpan}" part="LeftTableTd">
-                    <span class="TipsContent" part="TipsContent">
-                    <svg class="ExclamationMark" part="ExclamationMark" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <path d="M9.03087 3.14062C8.71521 2.56443 8.27722 2.06437 7.74767 1.67553C7.21811 1.28669 6.60971 1.01855 5.96544 0.889885C5.32118 0.761222 4.65646 0.775158 4.01817 0.930778C3.37988 1.0864 2.78361 1.37989 2.27086 1.79064C1.68689 2.25306 1.22358 2.85008 0.920762 3.53063C0.679091 4.08921 0.556377 4.69205 0.560655 5.30065C0.562354 5.92327 0.693172 6.53873 0.944444 7.10839C1.19572 7.67806 1.5622 8.18953 2.02086 8.61059C2.83307 9.36649 3.89773 9.79259 5.00719 9.80553C6.11665 9.81848 7.19124 9.4174 8.02086 8.68066C8.3779 8.38276 8.67913 8.0238 8.91075 7.6206C9.34355 6.92428 9.57213 6.12051 9.57066 5.30065C9.57316 4.54694 9.38776 3.80448 9.03087 3.14062V3.14062ZM4.43077 7.39062C4.41666 7.24208 4.44786 7.09281 4.52013 6.96227C4.59239 6.83174 4.70243 6.72606 4.8358 6.65917C4.96917 6.59228 5.11961 6.56724 5.26744 6.58739C5.41528 6.60754 5.55357 6.67195 5.66417 6.77209C5.77477 6.87223 5.85238 7.00344 5.88707 7.14855C5.92176 7.29367 5.91186 7.44586 5.85851 7.5852C5.80516 7.72454 5.71098 7.84448 5.58824 7.92931C5.46551 8.01415 5.31996 8.05999 5.17076 8.06066C5.0777 8.06746 4.9841 8.05526 4.89586 8.02489C4.80762 7.99453 4.72651 7.94653 4.65733 7.8839C4.58816 7.82127 4.53247 7.74531 4.49352 7.66051C4.45456 7.57572 4.43323 7.4839 4.43077 7.39062V7.39062ZM5.05065 2.69067H5.25084C5.32609 2.69062 5.40056 2.70571 5.46983 2.7351C5.53911 2.76448 5.60165 2.80755 5.65392 2.86169C5.70619 2.91582 5.7471 2.9799 5.77403 3.05016C5.80097 3.12043 5.81334 3.19542 5.81066 3.27062L5.7108 5.66064C5.70312 5.8039 5.64068 5.93873 5.53649 6.03735C5.43229 6.13596 5.29421 6.19087 5.15074 6.19067C5.00827 6.19076 4.87125 6.13559 4.76866 6.03674C4.66607 5.93788 4.60587 5.80301 4.60069 5.66064L4.50084 3.27062C4.49817 3.19625 4.51016 3.12209 4.53648 3.05248C4.5628 2.98287 4.60295 2.91923 4.65416 2.86523C4.70537 2.81123 4.76671 2.76801 4.83483 2.73803C4.90294 2.70805 4.97624 2.69195 5.05065 2.69067V2.69067Z"/>
-                    </svg>
-                    {$_('UnqualifiedTips')}
-                    </span>
-                  </td>
-                </tr>
-              {/if}
-            {/if}
-            {#if showTable}
-              {#each display as row}
-                <tr class="LeftTableTr {row.isCurrentUser ? 'FirstRow' : ''} {row.isCurrentUser && row.Unqualified? 'UnqualifiedRow': ''}" part="LeftTableTr {row.isCurrentUser ? 'FirstRow' : ''} {row.isCurrentUser && row.Unqualified? 'UnqualifiedRow': ''}">
-                  <td part="LeftTableTd Rank-{row.Rank}"><strong class="RankCol" part="RankCol"><em part="LeftTableTdEm">#{row.Rank}
-                    <div class="ScoreChangeFlag {isUserPositionChanged ? 'Show' : 'Hidden'}" part="ScoreChangeFlag {isUserPositionChanged ? 'Show' : 'Hidden'}">
-                      {#if row.isCurrentUser}
-                          <img src="{arrowUpSvg}"  part="Rank_Arror_UP" class="svg Arrow Up {isUserPositionChanged && isUserPositionUp ? 'Show' : 'Hidden'}" />
-                          <img src="{arrowDownSvg}" part="Rank_Arror_Down" class="svg Arrow Down {isUserPositionChanged && !isUserPositionUp ? 'Show' : 'Hidden'}" />
-                      {/if}
-                    </div>
-
-                  </em></strong></td>
-                  <td part="LeftTableTd">{shownPlayer(row.Player)}</td>
-                  <td part="LeftTableTd"><div class="Flex ScoreUp" part="Flex ScoreUp">{row.Points}</div></td>
-                  <td class="LeftTableTd {!row.Unqualified? 'Qualified' : ''}" part="LeftTableTd {!row.Unqualified? 'Qualified' : ''}">
-                    {#if row.Prize}
-                      {row.Prize}
-                    {:else}
-                      -
-                    {/if}
-                  </td>
-                </tr>
-                {#if row.Unqualified && row.isCurrentUser}
-                  <tr class="TooltipsRow" part="TooltipsRow">
-                    <td colspan="{tooltipColSpan}" part="LeftTableTd">
-                      <span class="TipsContent" part="TipsContent">
-                      <svg class="ExclamationMark" part="ExclamationMark" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M9.03087 3.14062C8.71521 2.56443 8.27722 2.06437 7.74767 1.67553C7.21811 1.28669 6.60971 1.01855 5.96544 0.889885C5.32118 0.761222 4.65646 0.775158 4.01817 0.930778C3.37988 1.0864 2.78361 1.37989 2.27086 1.79064C1.68689 2.25306 1.22358 2.85008 0.920762 3.53063C0.679091 4.08921 0.556377 4.69205 0.560655 5.30065C0.562354 5.92327 0.693172 6.53873 0.944444 7.10839C1.19572 7.67806 1.5622 8.18953 2.02086 8.61059C2.83307 9.36649 3.89773 9.79259 5.00719 9.80553C6.11665 9.81848 7.19124 9.4174 8.02086 8.68066C8.3779 8.38276 8.67913 8.0238 8.91075 7.6206C9.34355 6.92428 9.57213 6.12051 9.57066 5.30065C9.57316 4.54694 9.38776 3.80448 9.03087 3.14062V3.14062ZM4.43077 7.39062C4.41666 7.24208 4.44786 7.09281 4.52013 6.96227C4.59239 6.83174 4.70243 6.72606 4.8358 6.65917C4.96917 6.59228 5.11961 6.56724 5.26744 6.58739C5.41528 6.60754 5.55357 6.67195 5.66417 6.77209C5.77477 6.87223 5.85238 7.00344 5.88707 7.14855C5.92176 7.29367 5.91186 7.44586 5.85851 7.5852C5.80516 7.72454 5.71098 7.84448 5.58824 7.92931C5.46551 8.01415 5.31996 8.05999 5.17076 8.06066C5.0777 8.06746 4.9841 8.05526 4.89586 8.02489C4.80762 7.99453 4.72651 7.94653 4.65733 7.8839C4.58816 7.82127 4.53247 7.74531 4.49352 7.66051C4.45456 7.57572 4.43323 7.4839 4.43077 7.39062V7.39062ZM5.05065 2.69067H5.25084C5.32609 2.69062 5.40056 2.70571 5.46983 2.7351C5.53911 2.76448 5.60165 2.80755 5.65392 2.86169C5.70619 2.91582 5.7471 2.9799 5.77403 3.05016C5.80097 3.12043 5.81334 3.19542 5.81066 3.27062L5.7108 5.66064C5.70312 5.8039 5.64068 5.93873 5.53649 6.03735C5.43229 6.13596 5.29421 6.19087 5.15074 6.19067C5.00827 6.19076 4.87125 6.13559 4.76866 6.03674C4.66607 5.93788 4.60587 5.80301 4.60069 5.66064L4.50084 3.27062C4.49817 3.19625 4.51016 3.12209 4.53648 3.05248C4.5628 2.98287 4.60295 2.91923 4.65416 2.86523C4.70537 2.81123 4.76671 2.76801 4.83483 2.73803C4.90294 2.70805 4.97624 2.69195 5.05065 2.69067V2.69067Z"/>
-                      </svg>
-                      {$_('UnqualifiedTips')}
-                      </span>
-                    </td>
-                  </tr>
-                {/if}
-              {/each}
-            {/if}
-          </tbody>
-        </table>
-        <div class="RightButton" part="RightButton">
-          <div class="CollapseButton" part="CollapseButton" on:click={() => collapseTable()}>
-            {#if showTable}
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M18 15l-6-6-6 6"/>
-              </svg>
-            {:else}
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M6 9l6 6 6-6"/>
-              </svg>
-            {/if}
-          </div>
-        </div>
-      </div>
-    {/if}
-  {:else}
-    {#if isMobile(userAgent) == true}
-      {#if showTable}
-        <div bind:this={customStylingContainer} class="TableContent" part="TableContent">
-          <div class="TableUser" part="TableUser"><p>{$_('nowinners')}</p></div>
-        </div>
-      {/if}
-      {:else}
-        <div class="TournamentsTable" part="TournamentsTable">
-          <table class="LeftTable" part="LeftTable">
-            <thead part="LeftTableThead">
-              <tr part="LeftTableTr">
-                {#each columns as column}
-                  <th part="LeftTableTh">
-                    {#if sortable == 'true'}
-                      <button on:click={() => sortBy(column)} data-sort={sort} part="LeftTableButton">
-                        {$_(`${column}`)}
-                      </button>
-                    {:else}
-                      <p data-sort={sort} part="LeftTableP">{$_(`${column}`)}</p>
-                    {/if}
-                  </th>
-                {/each}
-              </tr>
-            </thead>
-            <tbody part="LeftTableTbody">
-              <tr part="LeftTableTr">
-                <td colspan="{tooltipColSpan}" part="LeftTableTd">{$_('nowinners')}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-    {/if}
-  {/if}
-</div>
-<style lang="scss">
-
-
-  *,
-  *::before,
-  *::after {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    text-decoration: none;
-    outline: none;
-    box-sizing: border-box;
-  }
-
-  .LeaderboardContainer {
-    background: var(--emfe-w-color-contrast, #07072A);
-    color: #fff;
-    display: flex;
-    width: 100%;
-    height: 52px;
-    align-items: center;
-    justify-content: space-between;
-    gap: 20px;
-  }
-
-  .Leaderboard {
-    width: 100%;
-    height: 44px;
-    display: flex;
-    align-items: center;
-    padding-left: 20px;
-  }
-
-  .TableContent {
-    width: 100%;
-    font-size: 14px;
-    margin-bottom: 2px;
-    border-bottom: solid 1px var(--emfe-w-color-white, #FFFFFF);
-    &.TableContentFirstRow {
-      box-sizing: border-box;
-      border: 2px solid var(--emfe-w-color-green, #48952a);
-    }
-  }
-
-  .TableUser {
-    background: var(--emfe-w-table-bg, #282828);
-    height: 44px;
-    display: flex;
-    align-items: center;
-    border-bottom: solid 1px var(--emfe-w-table-border, #3a3a3a);
-    &.TableHeadRow {
-      background: var(--emfe-w-table-header-bg, #1c1c1c);
-      color: var(--emfe-w-color-white, #fff);
-    }
-    &.CurrentUserRow {
-      box-sizing: border-box;
-      background: var(--emfe-w-table-currentuser-bg, #533a34);
-    }
-    &.UnqualifiedRow {
-      border-bottom: 0;
-    }
-  }
-  .TableUserTooltips{
-    display: flex;
-    gap: 4px;
-    flex-direction: row;
-    width: 100%;
-    padding: 10px 0;
-    background: var(--emfe-w-table-currentuser-bg, #533a34);
-    font-size: 0.8rem;
-    line-height: 1.2;
-  }
-  .TooltipsRow {
-    border: 2px solid  var(--emfe-w-tooltips-border, #fecf00);
-    border-top: 0;
-    .ExclamationMark {
-      fill:var(--emfe-w-color-exclamation, #fecf00);
-    }
-    td {
-      padding: 0 0 10px 0;
-      font-size: 12px;
-      color: var(--emfe-w-color-tooltips, #fecf00);
-    }
-  }
-  .TableCell {
-    padding:10px;
-    flex: 2;
-    text-align: center;
-  }
-  .TableRank {
-    flex: 1 50px;
-  }
-  .TablePlayer{
-    flex: 5;
-  }
-  .TablePrize {
-    flex: 5;
-  }
-  .Qualified {
-    color: var(--emfe-w-highlight, #debb05);
-  }
-  .ExclamationMark {
-    vertical-align: text-top;
-    width: 14px;
-    height: 14px;
-    fill: var(--emfe-w-color-exclamation, #fecf00);
-  }
-  .TableUserDetails {
-    background: var(--emfe-w-color-contrast, #07072A);
-    display: flex;
-    line-height: 18px;
-    align-items: center;
-    text-align: center;
-    justify-content:space-around;
-    height: 52px;
-  }
-
-  .TournamentsTable {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    text-align: center;
-    .LeftTable {
-      width: 100%;
-      border-collapse: collapse;
-      tr td{text-align: center;}
-      .TooltipsRow td{
-        text-align: center;
-        display: table-cell;
-        span{
-          text-align: center;
-          display: inline-block;
-        }
-      }
-    }
-  }
-
-  .RightButton {
-    cursor: pointer;
-    background: var(--emfe-w-color-contrast, #07072A);
-    width: 50px;
-    height: 70px;
-    border: 2px solid var(--emfe-w-color-contrast, #0D0D4D);
-    &.MobileClass {
-      height: 50px;
-    }
-  }
-
-  .FirstRow {
-    outline: 2px solid #1B9800;
-    &.UnqualifiedRow {
-      outline: 0;
-      border: 2px solid var(--emfe-w-tooltips-border, #fecf00);
-      border-bottom: 0;
-      td {
-        border-bottom: 0;
-      }
-    }
-    .RankCol{
-      position: relative;
-      width: max-content;
-      display: inline;
-      .ScoreChangeFlag{
-        position: absolute;
-        top: 0px;
-        right: -29px;
-        .Arrow{
-          &.Up{ color: #0cdc13}
-          &.Down{color: #FF4500}
-        }
-      }
-
-    }
-  }
-  .Show{display: inline-flex}
-  .Hidden{display: none}
-  svg.Arrow.Up, svg.Arrow.Down, .svg.Arrow.Up, .svg.Arrow.Down {
-    &.Show{display: inline-flex}
-    &.Hidden{display: none}
-    animation-name: twinkle;
-    animation-duration: 1s;
-    animation-iteration-count: infinite;
-    width: 14px;
-    height: 14px;
-  }
-
-  @keyframes twinkle {
-    0%   {opacity: 0;}
-    25%  {opacity: 1;}
-    100% {opacity: 0;}
-  }
-
-  table {
-    width: 100%;
-    border-spacing: 0;
-    position: relative;
-    overflow: auto;
-    margin-bottom: 0.5rem;
-  }
-
-  th {
-    padding: 1.5rem 1.25rem;
-    height: 70px;
-    background-color: var(--emfe-w-color-contrast, #07072A);
-    border-bottom: 1px solid var(--emfe-w-color-contrast, #0D0D4D);
-    top: 0;
-    color: var(--emfe-w-color-white, #FFFFFF);
-  }
-
-  td {
-    margin: 0;
-    padding: 1.25rem;
-    vertical-align: top;
-    text-align: inherit;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: 11px;
-    max-width: 20%;
-    background-color: var(--emfe-w-color-contrast, #07072A);
-    border-bottom: 1px solid var(--emfe-w-color-contrast, #0D0D4D);
-  }
-
-  td:first-child {
-    left: 0;
-    top: auto;
-    width: 10rem;
-  }
-
-  svg {
-    width: 1.25rem;
-    height: 1.25rem;
-
-    fill: rgba(0, 0, 0, 0.5);
-    flex-shrink: 0;
-  }
-
-  .flex {
-    display: flex;
-    align-items: center;
-  }
-
-  button {
-    font-weight: bold;
-    font-size: inherit;
-    text-transform: capitalize;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    display: block;
-    padding: 0 1rem 0 0;
-    background-size: 0.75rem;
-    background-repeat: no-repeat;
-    background-position: center right;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234f4f4f' d='M16.29 14.29L12 18.59l-4.29-4.3a1 1 0 00-1.42 1.42l5 5a1 1 0 001.42 0l5-5a1 1 0 00-1.42-1.42zM7.71 9.71L12 5.41l4.29 4.3a1 1 0 001.42 0 1 1 0 000-1.42l-5-5a1 1 0 00-1.42 0l-5 5a1 1 0 001.42 1.42z'/%3E%3C/svg%3E");
-  }
-
-  .CollapseButton {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background: var(--emfe-w-color-contrast, #07072A);
-    color: var(--emfe-w-color-white, #FFFFFF);
-  }
-
-  [data-sort="ASC"],
-  [data-sort="DESC"] {
-    background-size: 1rem;
-    background-position: right -0.15rem center;
-  }
-
-  [data-sort="ASC"] {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234f4f4f' d='M11.29 11.46a1 1 0 001.42 0l3-3A1 1 0 1014.29 7L12 9.34 9.71 7a1 1 0 10-1.42 1.46zm3 1.08L12 14.84l-2.29-2.3A1 1 0 008.29 14l3 3a1 1 0 001.42 0l3-3a1 1 0 00-1.42-1.42z'/%3E%3C/svg%3E");
-  }
-
-  [data-sort="DESC"] {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234f4f4f' d='M12.71 12.54a1 1 0 00-1.42 0l-3 3A1 1 0 009.71 17L12 14.66 14.29 17a1 1 0 001.42 0 1 1 0 000-1.42zm-3-1.08L12 9.16l2.29 2.3a1 1 0 001.42 0 1 1 0 000-1.42l-3-3a1 1 0 00-1.42 0l-3 3a1 1 0 001.42 1.42z'/%3E%3C/svg%3E");
-  }
-</style>