@everymatrix/casino-tournaments-slider-controller 1.7.2 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-tournaments-slider-controller",
-  "version": "1.7.2",
+  "version": "1.8.1",
   "main": "dist/casino-tournaments-slider-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d38acb0f8e7dfbaadfc047558a121ec1d5f543f8"
+  "gitHead": "e558ed5234cd858fa71696743229caa273752a2e"
 }

package/src/CasinoTournamentsSliderController.svelte

@@ -1,6 +1,7 @@
 <svelte:options tag={null} />
 <script lang="ts">
   import {onMount} from "svelte";
+  import {fade } from 'svelte/transition';
   import { getDevice } from 'rvhelper';
   import { _, addNewMessages, setLocale, setupI18n } from './i18n';
   import { TournamentsSliderTranslations } from './translations';
@@ -42,7 +43,9 @@
   let slideAutoInterval;
   let isHided: boolean = false;
   let animatorRef: HTMLElement
-  let transistionTime: number = 1
+  let transistionTime: number = 1;
+  let curTournamentElement:HTMLElement;
+  let sliderTransitionTime:number = 300;
 
   setupI18n({ withLocale: 'en', translations: {}});
 
@@ -88,24 +91,31 @@
 
   const slideAuto = () => {
     if(tournamentList.length === 0) return;
-    currentTournamentIdx = (currentTournamentIdx + 1) % tournamentList.length
+    animator.curTournament.hide();
+    setTimeout(()=>{
+      currentTournamentIdx = (currentTournamentIdx + 1) % tournamentList.length
+      animator.curTournament.show();
+    }, sliderTransitionTime*1.5);
   }
-
   const setSlideAutoInterval = () => {
     clearInterval(slideAutoInterval)
     slideAutoInterval = setInterval(() => {
       if(isHided) return;
-      slideAuto()
+      slideAuto();
     }, Number(looptime) * 1000)
   }
 
   const slideTo = (idxTo) =>{
+    animator.curTournament.hide();
     setSlideAutoInterval()
     if(idxTo > 0 && isLast) onHideSlider();
     if(idxTo > 0 && isLast || (idxTo < 0 && isFirst)){
       return;
     }
-    currentTournamentIdx  = currentTournamentIdx+ idxTo;
+    setTimeout(()=>{
+      currentTournamentIdx  = currentTournamentIdx+ idxTo;
+      animator.curTournament.show();
+    }, sliderTransitionTime*1.5);
   }
 
   // animator
@@ -143,6 +153,19 @@
         tourSlider.style.transform = `translateX(${tourSlider.clientWidth + 20}px)`;
         delay(() => document.querySelector('body').setAttribute('style', null))
       }
+    },
+
+    curTournament: {
+      init: function() {
+        curTournamentElement.style.transition = `all ${sliderTransitionTime}ms linear`;
+      },
+      show: function() {
+        curTournamentElement.style.opacity = '1';
+      },
+      hide: function() {
+        this.init();
+        curTournamentElement.style.opacity = '0'
+      }
     }
   }
 
@@ -182,6 +205,22 @@
     urlSearchParams.append('filter', `state=Running`);
     return urlSearchParams;
   }
+
+  const updateTournamentByNewTour = (newTournament: any) =>{
+    let briefTournamentInfo = transformTournamentItem(newTournament);
+    let tournamentIdx = tournamentList.findIndex((item)=>{
+      return item.id == briefTournamentInfo.id;
+    })
+    if(currentTournamentIdx == tournamentIdx){
+      window.postMessage({type: `TournamentRankInfo_${briefTournamentInfo.id}}`, rankInfo:{
+          rank: briefTournamentInfo.rank,
+          overallRank: briefTournamentInfo.overallRank,
+          prize: briefTournamentInfo.prize
+        }});
+    }
+    tournamentList[tournamentIdx] = briefTournamentInfo;
+  }
+
   const tournamentsUpdateMessageHandler = (message:any)=>{
     if(!message.data){
       return;
@@ -189,45 +228,16 @@
     try{
       let messageData:any = message.data;
       let updateInfo:any = JSON.parse(messageData);
-      let newTournamentList = [];
       if(updateInfo.messageType=='PlayerLeaderBoardsUpdate' && updateInfo.items){
         updateInfo.items.forEach((item:any, idx: number)=>{
-          let briefTournamentInfo = transformTournamentItem(item);
-          if(currentTournament && currentTournament.id == briefTournamentInfo.id && currentTournament.rank != briefTournamentInfo.rank){
-            window.postMessage({type: `TournamentRankInfo_${briefTournamentInfo.id}}`, rankInfo:{
-                rank: briefTournamentInfo.rank,
-                overallRank: briefTournamentInfo.overallRank,
-                prize: briefTournamentInfo.prize
-              }});
-          }
-          newTournamentList.push(briefTournamentInfo);
-        })
-        tournamentList = newTournamentList;
-        if(currentTournamentIdx >= updateInfo.items.length ){
-          currentTournamentIdx = updateInfo.items.length - 1;
-        }
-        currentTournament = newTournamentList[currentTournamentIdx];
+          updateTournamentByNewTour(item);
+        });
+      } else if(updateInfo.messageType=='PlayerLeaderBoardUpdate' && updateInfo.item){
+          updateTournamentByNewTour(updateInfo.item);
       }
-
-      if(updateInfo.messageType=='PlayerLeaderBoardUpdate' && updateInfo.item){
-        let briefTournamentInfo = transformTournamentItem(updateInfo.item);
-        let tournamentIdx = tournamentList.findIndex((item)=>{
-          return item.id == briefTournamentInfo.id;
-        })
-        if(currentTournamentIdx == tournamentIdx){
-          window.postMessage({type: `TournamentRankInfo_${briefTournamentInfo.id}}`, rankInfo:{
-              rank: briefTournamentInfo.rank,
-              overallRank: briefTournamentInfo.overallRank,
-              prize: briefTournamentInfo.prize
-            }});
-        }
-        tournamentList[tournamentIdx] = briefTournamentInfo;
-      }
-
     }catch(err){
       console.log(err);
     }
-
   }
 
   const getTouches = (evt:any) => {
@@ -271,6 +281,10 @@
     if(!endpoint){
       return;
     }
+    if(tournamentsUpdateEventSource){
+      tournamentsUpdateEventSource.removeEventListener('message', tournamentsUpdateMessageHandler);
+      tournamentsUpdateEventSource.close();
+    }
     let tournamentsUrl:URL = new URL(`${endpoint}/tournaments/leaderboard/player/updates`);
     setTournamentsSearchParams(tournamentsUrl.searchParams, 0, tournamentsshownnumber);
     tournamentsUpdateEventSource = new EventSourcePolyfill(tournamentsUrl.href, {headers: {'accept': 'text/event-stream','X-SessionId': session}});
@@ -278,14 +292,6 @@
       tournamentsUpdateEventSource.addEventListener('message', tournamentsUpdateMessageHandler);
     }
   }
-  const resetSliderListener= ()=>{
-    if(!tournamentsUpdateEventSource){
-      return;
-    }
-    tournamentsUpdateEventSource.removeEventListener('message', tournamentsUpdateMessageHandler);
-    tournamentsUpdateEventSource.close();
-    startupUpdateListener();
-  }
 
   const setClientStyling = ():void => {
     let sheet = document.createElement('style');
@@ -309,12 +315,46 @@
       });
   }
 
+  const loadData=()=>{
+    if(!endpoint || !session){
+      return;
+    }
+    let playerTournamentsUrl:any = new URL(`${endpoint}/tournaments/leaderboard/player`);
 
+    let reqHeaders = new Headers();
+    setTournamentsSearchParams(playerTournamentsUrl.searchParams, 0, tournamentsshownnumber);
+    if (session) {
+      reqHeaders.append("X-SessionID", session);
+    }
+
+    let requestOptions = {
+      method: 'GET',
+      headers: reqHeaders,
+    };
+
+    fetch(playerTournamentsUrl, requestOptions)
+      .then((res:any) => res.json())
+      .then((data:any) => {
+        if(!data.items){
+          return;
+        }
+        tournamentList = [];
+        let tournaments = data.items;
+        tournaments.forEach((item:any, idx: number)=>{
+          tournamentList.push(transformTournamentItem(item));
+        })
+        currentTournament = tournamentList[currentTournamentIdx];
+        startupUpdateListener();
+        setSlideAutoInterval();
+      });
+  }
+  let isMounted = false;
   onMount(()=>{
-    startupUpdateListener();
+    isMounted = true;
     window.addEventListener("message", messageHandler, false);
-    setSlideAutoInterval()
-
+    setTimeout(()=>{
+       lang = 'tr';
+    }, 5000);
     return ()=>{
       clearInterval(slideAutoInterval);
       window.removeEventListener("message", messageHandler);
@@ -329,17 +369,14 @@
   $: customStylingContainer && clientstyling && setClientStyling();
   $: customStylingContainer && clientstylingurl && setClientStylingURL();
   $: iconHref = icon || iconDefault
-
-  $: endpoint && startupUpdateListener();
+  $: isMounted && endpoint && tournamentsshownnumber && lang && loadData();
   $: tourSlider && addEventListeners();
   $: session && setSession();
   $: lang && setActiveLanguage();
-  $: looptime && setSlideAutoInterval();
   $: translationurl && setTranslationUrl();
   $: currentTournament = tournamentList[currentTournamentIdx];
   $: isLast = currentTournamentIdx == tournamentList.length - 1;
   $: isFirst = currentTournamentIdx == 0;
-  $: tournamentsshownnumber && lang && resetSliderListener();
 </script>
 <div bind:this={customStylingContainer}>
   <div part="Tournaments" class="casino-tournaments-slider-controller" bind:this={tourSlider}>
@@ -358,9 +395,9 @@
         </div>
       </div>
     {/if}
-    {#if (tournamentList && tournamentList.length > 0)}
-      <div part="TournamentInfo" class="TournamentInfo">
-        <div part="TournamentInfo_Name" class="name"><span part="TournamentInfo_Name_link" on:click={() => detailsAction(currentTournament.id)}>{currentTournament.name}</span></div>
+    {#if (tournamentList && tournamentList.length > 0) }
+      <div part="TournamentInfo" class="TournamentInfo" bind:this={curTournamentElement} transition:fade="{{delay: 250, duration: 300}}">
+        <div part="TournamentInfo_Name" class="name"><span part="TournamentInfo_Name_link" class="TournamentNameLink" on:click={() => detailsAction(currentTournament.id)} title="{currentTournament.name}">{currentTournament.name}</span></div>
         <div part="TournamentInfo_Rank" class="rank">
           <casino-tournaments-rank displayin="col" showicon="false" userrank="{currentTournament.rank}"
                                   prize='{currentTournament.prize}' overallrank="{currentTournament.overallRank}"
@@ -434,15 +471,24 @@
   .TournamentInfo{
     width: calc(100% - 4px);
     padding: 2px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     .name{
       white-space: nowrap;
-      overflow: auto;
       width: 99%;
       text-align: center;
       text-transform: capitalize;
       font-size: 11px;
       margin-bottom: 5px;
       cursor: pointer;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .TournamentNameLink{
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
     .circle{text-align: center; height: 7px;
       height: 5px;