@everymatrix/casino-tournaments-limited-controller 0.0.363 → 0.0.367

package/src/CasinoTournamentsLimitedController.svelte

@@ -1,382 +1,382 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { formatDate } from './date'
-  import icon from './icon'
-
-  import {  
-    _fetch, 
-    matchStatusFromApiToView,
-  } from "./util";
-  
-  import { setLocale, setLocaleWhenInit, _ } from './i18n'
-
-  import { 
-    onMountMessageLifeCycle,
-    updateEventSourceLifeCycle,
-    composeEventSourceMessageHandler, 
-    postMessageTabLocaleTextUpdate,
-    postMessageTabTotalUpdate,
-    _postMessage, 
-    createEventSource,
-  } from "./message";
-
-  import '@everymatrix/casino-tournaments-tab'
-
-  type State = 'Scheduled' | 'Ongoing' | 'Finished'
-
-  export let endpoint: string = ''
-  export let lang: string = 'en'
-  export let session: string = ''
-  export let state: State | undefined = undefined
-  export let states: string = ''
-  export let filter: string = ''
-
-  let eventSource = undefined
-  let svgSize: number = 0
-  let href = icon
-
-  type Tournament = {
-    id: string
-    nameOrTitle: string
-    endTime: string
-    state: string
-  }
-
-  type TournamentForRendering = {
-    id: string,
-    title: string,
-    rank: string,
-    enddate: string,
-    prize: string,
-  }
-
-  type TournamentsMatrix = {
-    [P in State]?: TournamentForRendering[]
-  }
-
-  let tournamentsMatrix: TournamentsMatrix = {}
-
-  const eventSourceHandler = composeEventSourceMessageHandler({
-    "PlayerLeaderBoardsUpdate": (data) => {
-      let _tournamentsMatrix: TournamentsMatrix = {}
-      __states.map(s => {
-        if(!_tournamentsMatrix[s]){
-          _tournamentsMatrix[s] = []
-        }
-      })
-
-      data.items.map(_item => {
-
-        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,
-        }
-
-        _tournamentsMatrix[matchStatusFromApiToView(_item.tournament.state)].push(tournamentComposed)
-      })
-
-      tournamentsMatrix = _tournamentsMatrix
-      
-      statesNeedSubscribe.map(s => {
-        postMessageTabTotalUpdate(s, tournamentsMatrix[s].length)
-      })
-
-    },
-    'TournamentUpdate': (data) => {
-      if(data.item){
-        const tournament = data.item as Tournament
-        let _state = matchStatusFromApiToView(tournament.state)
-        tournamentsMatrix = {
-          ...tournamentsMatrix,
-          [_state]: tournamentsMatrix[_state].map(t => {
-            if(t.id === tournament.id){
-              return {
-                ...t,
-                title: tournament.nameOrTitle,
-                enddate: tournament.endTime
-              }
-            }else{
-              return t
-            }
-          })
-        }
-      }
-    },
-  })
-
-  const subscribeApi = async (offset:number, limit:number) => {
-    
-    const source = `${endpoint}/tournaments`
-    const url = new URL(source)
-
-    url.searchParams.append('pagination', `offset=${offset},limit=${limit}`);
-    url.searchParams.append('sortField', 'StartTime');
-    url.searchParams.append('sortOrder', 'desc');
-    url.searchParams.append('language', lang);
-    url.searchParams.append('XSessionId', session);
-
-
-    if(filter){
-      url.searchParams.append('filter', filter);
-    }
-
-    eventSource = updateEventSourceLifeCycle(
-      eventSource,
-      createEventSource(`${source}/leaderboard/player/updates?${url.searchParams.toString()}`),
-      eventSourceHandler
-    )
-  }
-
-  // =============== define above, run below =============== \\
-
-  setLocaleWhenInit()
-
-  $: __state = state
-  $: __states = states.split(',') as State[]
-  $: statesNeedSubscribe = __states.filter(s => s !== 'Finished')
-  $: list = tournamentsMatrix[__state]
-
-  const init = () => {
-    subscribeApi(0, 30)
-
-    setLocale(lang)
-
-    postMessageTabLocaleTextUpdate('Scheduled', $_('tournamentsLimitedController.Scheduled'))
-    postMessageTabLocaleTextUpdate('Ongoing', $_('tournamentsLimitedController.Ongoing'))
-    postMessageTabLocaleTextUpdate('Finished', `${$_(`tournamentsLimitedController.Finished`)} (${$_('tournamentsLimitedController.last')} 48h)`)
-  }
-
-  $: endpoint && filter && lang && session && init()
-
-  onMount(() => {
-    return () => {
-      if(eventSource){
-        eventSource.removeEventListener('message', eventSourceHandler);
-      }
-    }
-  })
-
-  onMountMessageLifeCycle({
-    TournamentsTabSwitch: async (data) => __state = data.tab
-  })
-
-</script>
-
-<div class="casino-tournaments-limited-controller">
-
-  <div class="top-wrapper">
-    <div class="svg" bind:clientWidth={svgSize}>
-      <svg width={svgSize} height={svgSize} viewBox={`0 0 ${svgSize} ${svgSize}`} fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width={svgSize} height={svgSize} fill="url(#pattern0)"/>
-        <defs>
-          <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-            <use xlink:href="#image0_2606_356" transform="scale(0.00195312)"/>
-          </pattern>
-          {#if href}
-          <image 
-            id="image0_2606_356" 
-            width="512" 
-            height="512" 
-            xlink:href={href}
-          />
-          {/if}
-        </defs>
-      </svg>
-    </div>
-
-    <div class="text">
-      {$_('tournamentsLimitedController.myTournaments')}
-    </div>
-    
-    <div class="CloseButton" part="CloseButton" 
-      on:click='{
-        ()=>window.postMessage({ type: 'OnCloseThumbnail' }, window.location.href)
-      }'
-    >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}
-    </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>
-            {/each}
-          {/if}
-        </div>
-      {/each}
-    {/if}
-  </section>
-</div>
-
-<style lang="scss">
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  *,
-  *::before,
-  *::after {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    text-decoration: none;
-    outline: none;
-    box-sizing: border-box;
-  }
-
-  $vw_base: 320px;
-  @function vw($px) {
-      @return ($px / $vw_base) * 100vw;
-  }
-  
-  .CloseButton {
-    position: absolute; 
-    right: vw(5px); 
-    font-size: vw(11px); 
-    color: #FFFFFF;
-    cursor: pointer
-  }
-
-  .casino-tournaments-limited-controller {
-    background: #282828;
-
-    .top-wrapper {
-      padding: vw(6px);
-      display: flex;
-      background: #333333;
-
-      .svg {
-        & {
-          width: vw(35px);
-          height: vw(35px);
-        }
-      }
-
-      .text {
-        color: white;
-        font-size: vw(16px);
-        padding-left: vw(10px);
-        font-weight: bold;
-        line-height: vw(19px);
-        padding-top: vw(7px);
-      }
-    }
-
-    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%;
-        }
-
-        &:nth-child(3) {
-          flex: 0 0 25%;
-        }
-
-        &:nth-child(4) {
-          flex: 0 0 25%;
-        }
-
-        &.title span {
-          color: #FF8364; 
-          text-decoration-line: underline;
-
-          &:active {
-            opacity: 0.6;
-          }
-        }
-
-        .prize-active {
-          color: #FFD700;
-        }
-      }
-    }
-  }
-</style>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { formatDate } from './date'
+  import icon from './icon'
+
+  import {  
+    _fetch, 
+    matchStatusFromApiToView,
+  } from "./util";
+  
+  import { setLocale, setLocaleWhenInit, _ } from './i18n'
+
+  import { 
+    onMountMessageLifeCycle,
+    updateEventSourceLifeCycle,
+    composeEventSourceMessageHandler, 
+    postMessageTabLocaleTextUpdate,
+    postMessageTabTotalUpdate,
+    _postMessage, 
+    createEventSource,
+  } from "./message";
+
+  import '@everymatrix/casino-tournaments-tab'
+
+  type State = 'Scheduled' | 'Ongoing' | 'Finished'
+
+  export let endpoint: string = ''
+  export let lang: string = 'en'
+  export let session: string = ''
+  export let state: State | undefined = undefined
+  export let states: string = ''
+  export let filter: string = ''
+
+  let eventSource = undefined
+  let svgSize: number = 0
+  let href = icon
+
+  type Tournament = {
+    id: string
+    nameOrTitle: string
+    endTime: string
+    state: string
+  }
+
+  type TournamentForRendering = {
+    id: string,
+    title: string,
+    rank: string,
+    enddate: string,
+    prize: string,
+  }
+
+  type TournamentsMatrix = {
+    [P in State]?: TournamentForRendering[]
+  }
+
+  let tournamentsMatrix: TournamentsMatrix = {}
+
+  const eventSourceHandler = composeEventSourceMessageHandler({
+    "PlayerLeaderBoardsUpdate": (data) => {
+      let _tournamentsMatrix: TournamentsMatrix = {}
+      __states.map(s => {
+        if(!_tournamentsMatrix[s]){
+          _tournamentsMatrix[s] = []
+        }
+      })
+
+      data.items.map(_item => {
+
+        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,
+        }
+
+        _tournamentsMatrix[matchStatusFromApiToView(_item.tournament.state)].push(tournamentComposed)
+      })
+
+      tournamentsMatrix = _tournamentsMatrix
+      
+      statesNeedSubscribe.map(s => {
+        postMessageTabTotalUpdate(s, tournamentsMatrix[s].length)
+      })
+
+    },
+    'TournamentUpdate': (data) => {
+      if(data.item){
+        const tournament = data.item as Tournament
+        let _state = matchStatusFromApiToView(tournament.state)
+        tournamentsMatrix = {
+          ...tournamentsMatrix,
+          [_state]: tournamentsMatrix[_state].map(t => {
+            if(t.id === tournament.id){
+              return {
+                ...t,
+                title: tournament.nameOrTitle,
+                enddate: tournament.endTime
+              }
+            }else{
+              return t
+            }
+          })
+        }
+      }
+    },
+  })
+
+  const subscribeApi = async (offset:number, limit:number) => {
+    
+    const source = `${endpoint}/tournaments`
+    const url = new URL(source)
+
+    url.searchParams.append('pagination', `offset=${offset},limit=${limit}`);
+    url.searchParams.append('sortField', 'StartTime');
+    url.searchParams.append('sortOrder', 'desc');
+    url.searchParams.append('language', lang);
+    url.searchParams.append('XSessionId', session);
+
+
+    if(filter){
+      url.searchParams.append('filter', filter);
+    }
+
+    eventSource = updateEventSourceLifeCycle(
+      eventSource,
+      createEventSource(`${source}/leaderboard/player/updates?${url.searchParams.toString()}`),
+      eventSourceHandler
+    )
+  }
+
+  // =============== define above, run below =============== \\
+
+  setLocaleWhenInit()
+
+  $: __state = state
+  $: __states = states.split(',') as State[]
+  $: statesNeedSubscribe = __states.filter(s => s !== 'Finished')
+  $: list = tournamentsMatrix[__state]
+
+  const init = () => {
+    subscribeApi(0, 30)
+
+    setLocale(lang)
+
+    postMessageTabLocaleTextUpdate('Scheduled', $_('tournamentsLimitedController.Scheduled'))
+    postMessageTabLocaleTextUpdate('Ongoing', $_('tournamentsLimitedController.Ongoing'))
+    postMessageTabLocaleTextUpdate('Finished', `${$_(`tournamentsLimitedController.Finished`)} (${$_('tournamentsLimitedController.last')} 48h)`)
+  }
+
+  $: endpoint && filter && lang && session && init()
+
+  onMount(() => {
+    return () => {
+      if(eventSource){
+        eventSource.removeEventListener('message', eventSourceHandler);
+      }
+    }
+  })
+
+  onMountMessageLifeCycle({
+    TournamentsTabSwitch: async (data) => __state = data.tab
+  })
+
+</script>
+
+<div class="casino-tournaments-limited-controller">
+
+  <div class="top-wrapper">
+    <div class="svg" bind:clientWidth={svgSize}>
+      <svg width={svgSize} height={svgSize} viewBox={`0 0 ${svgSize} ${svgSize}`} fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width={svgSize} height={svgSize} fill="url(#pattern0)"/>
+        <defs>
+          <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+            <use xlink:href="#image0_2606_356" transform="scale(0.00195312)"/>
+          </pattern>
+          {#if href}
+          <image 
+            id="image0_2606_356" 
+            width="512" 
+            height="512" 
+            xlink:href={href}
+          />
+          {/if}
+        </defs>
+      </svg>
+    </div>
+
+    <div class="text">
+      {$_('tournamentsLimitedController.myTournaments')}
+    </div>
+    
+    <div class="CloseButton" part="CloseButton" 
+      on:click='{
+        ()=>window.postMessage({ type: 'OnCloseThumbnail' }, window.location.href)
+      }'
+    >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}
+    </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>
+            {/each}
+          {/if}
+        </div>
+      {/each}
+    {/if}
+  </section>
+</div>
+
+<style lang="scss">
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  *,
+  *::before,
+  *::after {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    outline: none;
+    box-sizing: border-box;
+  }
+
+  $vw_base: 320px;
+  @function vw($px) {
+      @return ($px / $vw_base) * 100vw;
+  }
+  
+  .CloseButton {
+    position: absolute; 
+    right: vw(5px); 
+    font-size: vw(11px); 
+    color: #FFFFFF;
+    cursor: pointer
+  }
+
+  .casino-tournaments-limited-controller {
+    background: #282828;
+
+    .top-wrapper {
+      padding: vw(6px);
+      display: flex;
+      background: #333333;
+
+      .svg {
+        & {
+          width: vw(35px);
+          height: vw(35px);
+        }
+      }
+
+      .text {
+        color: white;
+        font-size: vw(16px);
+        padding-left: vw(10px);
+        font-weight: bold;
+        line-height: vw(19px);
+        padding-top: vw(7px);
+      }
+    }
+
+    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%;
+        }
+
+        &:nth-child(3) {
+          flex: 0 0 25%;
+        }
+
+        &:nth-child(4) {
+          flex: 0 0 25%;
+        }
+
+        &.title span {
+          color: #FF8364; 
+          text-decoration-line: underline;
+
+          &:active {
+            opacity: 0.6;
+          }
+        }
+
+        .prize-active {
+          color: #FFD700;
+        }
+      }
+    }
+  }
+</style>