@everymatrix/casino-tournaments-limited-controller 1.5.6 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-tournaments-limited-controller",
-  "version": "1.5.6",
+  "version": "1.6.0",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "18b817f66a008871bf85a5a004a749dca5111add"
+  "gitHead": "e4b57a534bdee7d09fc53a7b49e31338bc1a3f00"
 }

package/src/CasinoTournamentsLimitedController.svelte

@@ -4,6 +4,7 @@
   import { onMount } from "svelte";
   import { formatDate } from './date'
   import icon from './icon'
+  import './private.loader.svelte'
 
   import {  
     _fetch, 
@@ -23,6 +24,7 @@
   } from "./message";
 
   import '@everymatrix/casino-tournaments-tab'
+  import { translations } from './translations'
 
   type State = 'Scheduled' | 'Ongoing' | 'Finished'
 
@@ -30,7 +32,7 @@
   export let lang: string = 'en'
   export let session: string = ''
   export let state: State | undefined = undefined
-  export let states: string = ''
+  export let states: string = 'Scheduled,Ongoing,Finished'
   export let filter: string = ''
 
   export let clientstyling:string = '';
@@ -42,6 +44,7 @@
   let eventSource = undefined
   let svgSize: number = 0
   let href = icon
+  let isLoading:boolean = true
 
   type Tournament = {
     id: string
@@ -64,36 +67,39 @@
 
   let tournamentsMatrix: TournamentsMatrix = {}
 
-  const eventSourceHandler = composeEventSourceMessageHandler({
-    "PlayerLeaderBoardsUpdate": (data) => {
-      let _tournamentsMatrix: TournamentsMatrix = {}
-      __states.map(s => {
-        if(!_tournamentsMatrix[s]){
-          _tournamentsMatrix[s] = []
-        }
-      })
+  const setTournamentsMatrix = (data) => {
+    let _tournamentsMatrix: TournamentsMatrix = {}
+    __states.map(s => {
+      if(!_tournamentsMatrix[s]){
+        _tournamentsMatrix[s] = []
+      }
+    })
 
-      data.items.map(_item => {
+    // data.items = []
+    data.items.map(_item => {
 
-        const { id, nameOrTitle: title, endTime: enddate } = _item.tournament
+      const { id, nameOrTitle: title, endTime: enddate } = _item.tournament
 
-        const tournamentComposed: TournamentForRendering = {
-          id,
-          title,
-          rank: _item.leaderBoard && `#${_item.leaderBoard.rank}/${_item.endRank}`,
-          enddate,
-          prize: _item.leaderBoard && _item.leaderBoard.prizeName,
-        }
+      const tournamentComposed: TournamentForRendering = {
+        id,
+        title,
+        rank: _item.leaderBoard && `#${_item.leaderBoard.rank}/${_item.endRank}`,
+        enddate,
+        prize: _item.leaderBoard && _item.leaderBoard.prizeName,
+      }
 
-        _tournamentsMatrix[matchStatusFromApiToView(_item.tournament.state)].push(tournamentComposed)
-      })
+      _tournamentsMatrix[matchStatusFromApiToView(_item.tournament.state)].push(tournamentComposed)
+    })
 
-      tournamentsMatrix = _tournamentsMatrix
-      
+    tournamentsMatrix = _tournamentsMatrix
+  }
+
+  const eventSourceHandler = composeEventSourceMessageHandler({
+    "PlayerLeaderBoardsUpdate": (data) => {
+      setTournamentsMatrix(data)
       statesNeedSubscribe.map(s => {
         postMessageTabTotalUpdate(s, tournamentsMatrix[s].length)
       })
-
     },
     'TournamentUpdate': (data) => {
       if(data.item){
@@ -151,12 +157,8 @@
 
   const init = () => {
     subscribeApi(0, 30)
-
     setLocale(lang)
-
-    postMessageTabLocaleTextUpdate('Scheduled', $_('tournamentsLimitedController.Scheduled'))
-    postMessageTabLocaleTextUpdate('Ongoing', $_('tournamentsLimitedController.Ongoing'))
-    postMessageTabLocaleTextUpdate('Finished', `${$_(`tournamentsLimitedController.Finished`)} (${$_('tournamentsLimitedController.last')} 48h)`)
+    setTabTexts()
   }
 
   const setClientStyling = ():void => {
@@ -181,6 +183,15 @@
       });
   }
 
+  const setTabTexts = () => {
+    setTimeout(() => {
+      const text = translations[lang]['tournamentsLimitedController']
+      postMessageTabLocaleTextUpdate('Scheduled', text['Scheduled'])
+      postMessageTabLocaleTextUpdate('Ongoing', text['Ongoing'])
+      postMessageTabLocaleTextUpdate('Finished', `${text[`Finished`]} (${text['last']} 48h)`)
+    }, 1)
+  }
+
   onMount(() => {
     return () => {
       if(eventSource){
@@ -197,9 +208,15 @@
   $: clientstyling && customStylingContainer && setClientStyling();
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
 
+  $: lang && setTabTexts()
+
+  $: Object.keys(tournamentsMatrix).length && (() => {
+    isLoading = false
+    setTabTexts()
+  })()
 </script>
 
-<div class="casino-tournaments-limited-controller" bind:this={customStylingContainer}> 
+<div class="Root" part="Root" bind:this={customStylingContainer}> 
 
   <div class="top-wrapper">
     <div class="svg" bind:clientWidth={svgSize}>
@@ -231,65 +248,64 @@
       }'
     >X</div>
   </div>
-  
-  <section>
-    <casino-tournaments-tab
-      tabs={states}
-      tab={state}
-    />
-
-    <div class='list header'>
-      {#each [
-        $_('tournamentsLimitedController.name'), 
-        $_('tournamentsLimitedController.rank'), 
-        $_('tournamentsLimitedController.enddate'), 
-        $_('tournamentsLimitedController.prize')
-      ] as item}
-        <div>{item}</div>
-      {/each}
+    
+  {#if isLoading}
+    <div class="Loading">
+      <casino-tournaments-limited-controller-loader />
     </div>
-
-    {#if list}
-      {#each list as item, i}
-
-        <div class='list'>
-          {#if item}
-            {#each Object.keys(item).filter(_key => _key !== 'id') as key, i}
-            
-              <div class={key}>
-                {#if item[key]}
-
-                  {#if key === 'title'}
-                    <span on:click={() => {
-                      window.postMessage({ 
-                        type: 'MyTournamentFromNavClicked', 
-                        tournamentId: item.id, 
-                        showLeaderboard: true
-                      }, window.location.href)
-                    }}>
-                      {item.title}
-                    </span>
-                  {/if}
-
-                  {#if key === 'enddate'}
-                    {formatDate(item.enddate)}
-                  {/if}
-                {/if}
-
-                {#if key === 'rank'}
-                  <span class={item.prize ? "prize-active" : ''}>{item.rank || ' -'}</span>
-                {/if}
-
-                {#if key === 'prize'}
-                  <span class={item.prize ? "prize-active" : ''}>{item.prize || ' -'}</span>
-                {/if}
-              </div>
+  {:else}
+    <section>
+      <casino-tournaments-tab
+        tabs={states}
+        tab={state}
+      />
+
+      {#if list}
+      <table>
+        <thead>
+          <tr>
+            {#each [
+              $_('tournamentsLimitedController.name'), 
+              $_('tournamentsLimitedController.rank'), 
+              $_('tournamentsLimitedController.enddate'), 
+              $_('tournamentsLimitedController.prize')
+            ] as item}
+              <th>{item}</th>
             {/each}
-          {/if}
-        </div>
-      {/each}
-    {/if}
-  </section>
+          </tr>
+        </thead>
+        {#each list as item, i}
+        <tbody>
+          <tr>
+            {#if item}
+
+              <td class="Title" part="Title" on:click={() => {
+                window.postMessage({ 
+                  type: 'MyTournamentFromNavClicked', 
+                  tournamentId: item.id, 
+                  showLeaderboard: true
+                }, window.location.href)
+              }}>
+                {item.title}
+              </td>
+              <td class:active={item.prize} class="Rank">{item.rank || ' -'}</td>
+              <td class="EndDate" part="EndDate" nowrap>
+                {#each formatDate(item.enddate) as s}
+                  <p>{s}</p>
+                {/each}
+              </td>
+              <td class:active={item.prize} class="Prize">{item.prize || ' -'}</td>
+            {/if}
+          </tr>
+        </tbody>
+        {/each}
+      </table>
+      {:else}
+        <div class="NoContent"></div>
+      {/if}
+      
+    </section>
+  {/if}
 </div>
 
 <style lang="scss">
@@ -310,7 +326,7 @@
 
   $vw_base: 320px;
   @function vw($px) {
-      @return ($px / $vw_base) * 100vw;
+    @return ($px / $vw_base) * 100vw;
   }
   
   .CloseButton {
@@ -321,7 +337,11 @@
     cursor: pointer
   }
 
-  .casino-tournaments-limited-controller {
+  .NoContent {
+    padding: 120px;
+  }
+
+  .Root {
     background: #282828;
 
     .top-wrapper {
@@ -348,65 +368,58 @@
 
     section {
       padding: 0 vw(12px);  
-
     }
+  }
 
-    .list {
-      
-      &.header {
-        background: #1C1C1C;
-        div {
-          color: #F7F7F7;
-        }
-      }
-
-      display: flex;
-      align-items: center;
-      font-size: vw(12px);
-
-      @import url('https://rsms.me/inter/inter.css');
-        div {     font: initial; font-family: 'Inter', sans-serif; }
-      @supports (font-variation-settings: normal) {
-        div {     font: initial; font-family: 'Inter var', sans-serif; }
-      }
-
-      div {
-        display: flex;
-        padding: vw(8px) vw(6.45px);
-        // text-align: center;
-        word-break: break-word;
-        font-size: vw(12px) !important;
-        color: #B5B5B5;
-
-        &:nth-child(1) {
-          flex: 0 0 25%;
-        }
-
-        &:nth-child(2) {
-          flex: 0 0 25%;
-        }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: vw(12px);
+    line-height: vw(14px);
 
-        &:nth-child(3) {
-          flex: 0 0 25%;
-        }
+    
+    @import url('https://rsms.me/inter/inter.css');
+      div {     font: initial; font-family: 'Inter', sans-serif; }
+    @supports (font-variation-settings: normal) {
+      div {     font: initial; font-family: 'Inter var', sans-serif; }
+    }
 
-        &:nth-child(4) {
-          flex: 0 0 25%;
-        }
+    thead {
+    
+      background: #1C1C1C;
+      color: #F7F7F7;
+    }
 
-        &.title span {
-          color: #FF8364; 
-          text-decoration-line: underline;
+    th, td {
+      padding: vw(8px) vw(5px);
+      overflow-wrap: break-word;
+    }
+    
+    td {
+      color: #B5B5B5;
+    }
+  }
+  
+  .Title {
+    color: #FF8364; 
+    text-decoration-line: underline;
+    word-break: break-word;
 
-          &:active {
-            opacity: 0.6;
-          }
-        }
+    &:active {
+      opacity: 0.6;
+    }
+  }
 
-        .prize-active {
-          color: #FFD700;
-        }
-      }
+  .Prize .Rank {
+    &:active {
+      color: #FFD700;
     }
   }
+
+  .Loading {
+    display: flex;
+    justify-content: center;
+    padding: vw(30px);
+  }
+
 </style>

package/src/date.js

@@ -6,20 +6,21 @@ export function formatDate(date) {
 
   const _date = new Date(date)
 
-  let str = ''
-  
-  str += [
+  const day = [
     padTo2Digits(_date.getDate()),
     padTo2Digits(_date.getMonth() + 1),
     _date.getFullYear() % 100,
   ].join('.')
-  str += '\n'
-  str += [
+
+  const hm = [
     padTo2Digits(_date.getHours()),
     padTo2Digits(_date.getMinutes()),
   ].join(':')
-  str += ' '
-  str += _date.getHours() >= 12 ? 'PM' : 'AM'
 
-  return str
+  const xm = _date.getHours() >= 12 ? 'PM' : 'AM'
+
+  return [
+    day,
+    hm + ' ' + xm
+  ]
 }

package/src/private.loader.svelte

@@ -0,0 +1,61 @@
+<svelte:options tag={'casino-tournaments-limited-controller-loader'} />
+<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+<style lang="scss">
+
+  .lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+  .lds-ellipsis div {
+    position: absolute;
+    top: 33px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: #fff;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+  .lds-ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+  }
+  @keyframes lds-ellipsis1 {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  @keyframes lds-ellipsis3 {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+  }
+  @keyframes lds-ellipsis2 {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(24px, 0);
+    }
+  }
+
+</style>