@everymatrix/casino-tournaments-table 0.0.260 → 0.0.263

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-tournaments-table",
-  "version": "0.0.260",
+  "version": "0.0.263",
   "main": "dist/casino-tournaments-table.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a30fdd6f6180c69aabbc0daf1bf2a2e1342bf0e2"
+  "gitHead": "fccb99c4d5259efacf828703242697132621b19d"
 }

package/src/CasinoTournamentsTable.svelte

@@ -6,6 +6,9 @@
   import { _, addNewMessages } from './i18n';
   import { TournamentsTableTranslations } 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';
@@ -18,6 +21,10 @@
   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;
 
   Object.keys(TournamentsTableTranslations).forEach((item) => {
     addNewMessages(item, TournamentsTableTranslations[item]);
@@ -25,10 +32,31 @@
 
   const findTableRowDataByRank =(position: Number, data)=>{
     let rowData = data.find((row)=>{
-      return row.Position == position;
+      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;
@@ -45,6 +73,16 @@
         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;
@@ -52,7 +90,17 @@
     }
     if (firstrow) {
       if (e.data && e.data.type === 'CasinoTableFirstRowData') {
-        firstRowData = e.data.tableData;
+        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
@@ -63,7 +111,7 @@
         return;
       }
       data.forEach(function (row, idx){
-          let updateRowByPosition = findTableRowDataByRank(row.Position, tableUpdateData);
+          let updateRowByPosition = findTableRowDataByRank(row.Rank, tableUpdateData);
           if(!updateRowByPosition){
             return;
           }
@@ -131,7 +179,6 @@
 
   onMount(() => {
     window.addEventListener('message', messageHandler, false);
-
     return () => {
       window.removeEventListener('message', messageHandler);
     }
@@ -159,7 +206,9 @@
       </div>
       {#if firstrow == 'true' && firstRowData}
         <div class="TableUser CurrentUserRow {firstRowData.Unqualified ? 'UnqualifiedRow' : ''}" part="TableUser">
-          <div class="TableCell TableRank {firstRowData.Prize? 'Qualified' : ''}">{firstRowData.Rank}</div>
+          <div class="TableCell TableRank {firstRowData.Prize? 'Qualified' : ''}">
+            {firstRowData.Rank}
+          </div>
           <div class="TableCell TablePlayer">{firstRowData.Player}</div>
           <div class="TableCell TablePoints">{firstRowData.Points}</div>
           {#if firstRowData.Prize}
@@ -221,9 +270,16 @@
         <tbody>
           {#if firstrow == 'true' && firstRowData}
             <tr class="FirstRow" part="FirstRow">
-              <td><strong><em>#{firstRowData.Rank}</em></strong></td>
+              <td><strong class="RankCol"><em>#{firstRowData.Rank}</em>
+                <div class="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>{firstRowData.Player}</td>
-              <td><div class="Flex" part="Flex">{firstRowData.Points}</div></td>
+              <td>
+                <div class="Flex">{firstRowData.Points}</div>
+              </td>
               <td>
                 {#if firstRowData.Prize}
                   {firstRowData.Prize}
@@ -236,9 +292,17 @@
           {#if showTable}
             {#each display as row}
               <tr class="{row.isCurrentUser ? 'FirstRow' : ''}" >
-                <td><strong><em>#{row.Rank}</em></strong></td>
+                <td><strong class="RankCol"><em>#{row.Rank}
+                  <div class="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>{row.Player}</td>
-                <td><div class="Flex" part="Flex">{row.Points}</div></td>
+                <td><div class="Flex ScoreUp">{row.Points}</div></td>
                 <td>
                   {#if row.Prize}
                     {row.Prize}
@@ -428,7 +492,37 @@
   }
 
   .FirstRow {
-    outline: 2px solid var(--emfe-w-color-green, #48952a);
+    outline: 2px solid #1B9800;
+    .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;
+  }
+
+  @keyframes twinkle {
+    0%   {opacity: 0;}
+    25%  {opacity: 1;}
+    100% {opacity: 0;}
   }
 
   table {

package/src/images/arrow-down.svg

@@ -0,0 +1,14 @@
+<svg width="15" height="15" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle r="4.9999" transform="matrix(1 0 0 -1 4.9999 5.0001)" fill="#434647"/>
+    <g clip-path="url(#clip0_2591_1154)">
+        <line y1="-0.933315" x2="3.99992" y2="-0.933315" transform="matrix(0 -1 -1 0 4 6)"
+              stroke="#CA0000" stroke-width="1.86663"/>
+        <path d="M4.99896 8L7.59699 5.00006H2.40094L4.99896 8Z" fill="#CA0000"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_2591_1154">
+            <rect width="5.99988" height="5.99928" fill="white"
+                  transform="matrix(1 0 0 -1 1.99902 8)"/>
+        </clipPath>
+    </defs>
+</svg>

package/src/images/arrow-up.svg

@@ -0,0 +1,12 @@
+<svg width="15" height="15" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="4.9999" cy="4.9999" r="4.9999" fill="#434647"/>
+    <g clip-path="url(#clip0_2591_1149)">
+        <line x1="4.93332" y1="4" x2="4.93332" y2="7.99992" stroke="#59CA00" stroke-width="1.86663"/>
+        <path d="M4.99896 2L7.59699 4.99994H2.40094L4.99896 2Z" fill="#59CA00"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_2591_1149">
+            <rect width="5.99988" height="5.99928" fill="white" transform="translate(1.99902 2)"/>
+        </clipPath>
+    </defs>
+</svg>