@everymatrix/casino-tournaments-table 0.0.245 → 0.0.249

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-tournaments-table",
-  "version": "0.0.245",
+  "version": "0.0.249",
   "main": "dist/casino-tournaments-table.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d96554d716d8c3b41f947c85c9b8cae8f03aa5bf"
+  "gitHead": "38af455e241b6ef7ccabb2367be2be59e6b24352"
 }

package/src/CasinoTournamentsTable.svelte

@@ -39,6 +39,17 @@
       columns = e.data.tableColumns;
     }
 
+    // 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;
+          }
+        });
+        display = data;
+      }
+    }
     if (firstrow) {
       if (e.data && e.data.type === 'CasinoTableFirstRowData') {
         firstRowData = e.data.tableData;
@@ -132,67 +143,63 @@
 
 {#if data.length > 0 || firstRowData}
   {#if isMobile(userAgent) == true}
-    <div class="LeaderboardContainer" part="LeaderboardContainer">
-      <div class="Leaderboard" part="Leaderboard">{$_('tournamentsTable.leaderboard')}</div>
-      <div class="RightButton { isMobile(userAgent) ? 'MobileClass' : '' }" part="RightButton { isMobile(userAgent) ? 'MobileClass' : '' }">
-        <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>
+    <div class="TableContent" part="TableContent">
+      <div class="TableUser TableHeadRow" part="TableHeadRow">
+        {#each columns as column}
+          <div class="TableCell Table{column}">
+            {#if sortable == 'true'}
+              <button on:click={() => sortBy(column)} data-sort={sort}>
+                {$_(`tournamentsTable.${column}`)}
+              </button>
+            {:else}
+              <p data-sort={sort}>{$_(`tournamentsTable.${column}`)}</p>
+            {/if}
+          </div>
+        {/each}
+      </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 TablePlayer">{firstRowData.Player}</div>
+          <div class="TableCell TablePoints">{firstRowData.Points}</div>
+          {#if firstRowData.Prize}
+            <div class="TableCell TablePrize {!firstRowData.Unqualified? 'Qualified' : ''}">{firstRowData.Prize}</div>
           {: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>
+            <div class="TableCell TablePrize">-</div>
           {/if}
         </div>
-      </div>
-    </div>
-
-    {#if firstrow == 'true' && firstRowData}
-      <div class="TableContent TableContentFirstRow" part="TableContent TableContentFirstRow">
-        <div class="TableUser" part="TableUser"><span>{firstRowData.Position}</span><span>{firstRowData.Name}</span></div>
-
-        <div class="TableUserDetails" part="TableUserDetails">
-          <div>
-            <p>{$_('tournamentsTable.score')}</p>
-            <p>{firstRowData.Score}</p>
-          </div>
-          <!-- <div>
-            <p>{$_('tournamentsTable.betcounts')}</p>
-            <p>{firstRowData.Score}</p>
-          </div>
-          <div>
-            <p>{$_('tournamentsTable.qualified')}</p>
-            <p>{firstRowData.Score}</p>
-          </div> -->
+        {#if firstRowData.Unqualified}
+        <div class="TableUserTooltips" part="TableUserTooltips">
+          <svg class="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" fill="#B5B5B5"/>
+          </svg>
+          <em>Minimum bet count not completed. Check Rules.</em>
         </div>
-
-      </div>
-    {/if}
-    {#if showTable}
-      {#each display as row}
-        <div class="TableContent" part="TableContent">
-          <div class="TableUser" part="TableUser"><span>{row.Position}</span><span>{row.Name}</span></div>
-
-          <div class="TableUserDetails" part="TableUserDetails">
-            <div>
-              <p>{$_('tournamentsTable.score')}</p>
-              <p>{row.Score}</p>
-            </div>
-            <!-- <div>
-              <p>{$_('tournamentsTable.betcounts')}</p>
-              <p>{row.Score}</p>
-            </div> -->
-            <!-- <div>
-              <p>{$_('tournamentsTable.qualified')}</p>
-              <p>{row.Score}</p>
-            </div> -->
+        {/if}
+      {/if}
+      {#if showTable}
+        {#each display as row}
+          <div class="TableUser {row.isCurrentUser ? 'CurrentUserRow' : ''}">
+            <div class="TableCell TableRank {row.Prize? 'Qualified' : ''}">{row.Rank}</div>
+            <div class="TableCell TablePlayer">{row.Player}</div>
+            <div class="TableCell TablePoints">{row.Points}</div>
+            {#if row.Prize}
+              <div class="TableCell TablePrize {!row.Unqualified? 'Qualified' : ''}">{row.Prize}</div>
+            {:else}
+              <div class="TableCell TablePrize">-</div>
+            {/if}
           </div>
-
-        </div>
-      {/each}
-    {/if}
+          {#if row.isCurrentUser && row.Unqualified}
+            <div class="TableUserTooltips {row.Unqualified ? 'UnqualifiedRow' : ''}">
+              <svg class="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" fill="#B5B5B5"/>
+              </svg>
+              <em>Minimum bet count not completed. Check Rules.</em>
+            </div>
+          {/if}
+        {/each}
+      {/if}
+    </div>
   {:else}
     <div class="TournamentsTable" part="TournamentsTable">
       <table class="LeftTable" part="LeftTable">
@@ -214,17 +221,31 @@
         <tbody>
           {#if firstrow == 'true' && firstRowData}
             <tr class="FirstRow" part="FirstRow">
-              <td><strong><em>#{firstRowData.Position}</em></strong></td>
-              <td>{firstRowData.Name}</td>
-              <td><div class="Flex" part="Flex">{firstRowData.Score}</div></td>
+              <td><strong><em>#{firstRowData.Rank}</em></strong></td>
+              <td>{firstRowData.Player}</td>
+              <td><div class="Flex" part="Flex">{firstRowData.Points}</div></td>
+              <td>
+                {#if firstRowData.Prize}
+                  {firstRowData.Prize}
+                {:else}
+                  -
+                {/if}
+              </td>
             </tr>
           {/if}
           {#if showTable}
             {#each display as row}
-              <tr>
-                <td><strong><em>#{row.Position}</em></strong></td>
-                <td>{row.Name}</td>
-                <td><div class="Flex" part="Flex">{row.Score}</div></td>
+              <tr class="{row.isCurrentUser ? 'FirstRow' : ''}" >
+                <td><strong><em>#{row.Rank}</em></strong></td>
+                <td>{row.Player}</td>
+                <td><div class="Flex" part="Flex">{row.Points}</div></td>
+                <td>
+                  {#if row.Prize}
+                    {row.Prize}
+                  {:else}
+                    -
+                  {/if}
+                </td>
               </tr>
             {/each}
           {/if}
@@ -247,23 +268,6 @@
   {/if}
 {:else}
   {#if isMobile(userAgent) == true}
-    <div class="LeaderboardContainer" part="LeaderboardContainer">
-      <div class="Leaderboard" part="Leaderboard">{$_('tournamentsTable.leaderboard')}</div>
-      <div class="RightButton { isMobile(userAgent) ? 'MobileClass' : '' }" part="RightButton { isMobile(userAgent) ? 'MobileClass' : '' }">
-        <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 showTable}
       <div class="TableContent" part="TableContent">
         <div class="TableUser" part="TableUser"><p>{$_('tournamentsTable.nowinners')}</p></div>
@@ -289,7 +293,7 @@
           </thead>
           <tbody>
             <tr>
-              <td colspan="3">{$_('tournamentsTable.nowinners')}</td>
+              <td colspan="4">{$_('tournamentsTable.nowinners')}</td>
             </tr>
           </tbody>
         </table>
@@ -315,21 +319,25 @@
 
   .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: calc(100% - 50px);
-    height: 52px;
+    width: 100%;
+    height: 44px;
     display: flex;
     align-items: center;
     padding-left: 20px;
   }
 
   .TableContent {
-    width: calc(100% - 46px);
+    width: 100%;
     font-size: 14px;
     margin-bottom: 2px;
     border-bottom: solid 1px var(--emfe-w-color-white, #FFFFFF);
@@ -340,15 +348,52 @@
   }
 
   .TableUser {
-    background: var(--emfe-w-color-contrast, #07072A);
-    height: 52px;
+    background: var(--emfe-w-table-bg, #282828);
+    height: 44px;
     display: flex;
     align-items: center;
-    gap: 20px;
-    padding-left: 20px;
-    font-weight: bold;
+    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{
+    background: var(--emfe-w-table-currentuser-bg, #533a34);
+    width: 100%;
+    height: 18px;
+    text-align: center;
+    font-size: 0.8rem;
+  }
+  .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;
   }
-
   .TableUserDetails {
     background: var(--emfe-w-color-contrast, #07072A);
     display: flex;

package/src/translations.js

@@ -6,9 +6,10 @@ export const TournamentsTableTranslations = {
       betcounts: 'Bet Counts',
       qualified: 'Qualified',
       nowinners: 'No winners for the time being. Be one of them!',
-      Position: 'Position',
-      Name: 'Name',
-      Score: 'Score',
+      Rank: 'Rank',
+      Player: 'Player',
+      Points: 'Points',
+      Prize: 'Prize'
     }
   },
   tr: {
@@ -18,9 +19,10 @@ export const TournamentsTableTranslations = {
       betcounts: 'Bahis Sayısı',
       qualified: 'Tur atlamış',
       nowinners: 'Kazanan yok. Kazananlardan birisi ol!',
-      Position: 'Pozisyon',
-      Name: 'İsim',
-      Score: 'Skor',
+      Rank: 'Rütbe',
+      Player: 'oyuncu',
+      Points: 'Puan',
+      Prize: 'Ödül'
     }
   },
   el: {
@@ -30,9 +32,10 @@ export const TournamentsTableTranslations = {
       betcounts: 'Αριθμός Πονταρισμάτων',
       qualified: 'Προκρίθηκε',
       nowinners: 'Δεν υπάρχουν νικητές ακόμα.',
-      Position: 'Θέση',
-      Name: 'Ονομα',
-      Score: 'Σκορ',
+      Rank: 'Τάξη',
+      Player: 'Παίχτης',
+      Points: 'Πόντοι',
+      Prize: 'Βραβείο'
     }
   },
 };