npm - @everymatrix/casino-game-thumbnail - Versions diffs - 1.29.6 → 1.29.8 - Mend

@everymatrix/casino-game-thumbnail 1.29.6 → 1.29.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/CHANGELOG.md +6 -0
package/dist/casino-game-thumbnail.js +3 -3
package/dist/casino-game-thumbnail.js.map +1 -1
package/package.json +2 -2
package/src/CasinoGameThumbnail.svelte +116 -120

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-game-thumbnail",
-  "version": "1.29.6",
+  "version": "1.29.8",
   "main": "dist/casino-game-thumbnail.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a67714e03295f6cdb76990ce33c8baeec7819b9f"
+  "gitHead": "a6ce52ac3c8209814f7d801c927c7d2d9224b2ae"
 }

package/src/CasinoGameThumbnail.svelte CHANGED Viewed

@@ -77,8 +77,6 @@
   let roulletteref:any;
   let dealername:string;
   let numberofplayers:number;
   const BLACKJACK = 'blackjack';
   const ROULETTE = 'roulette';
   const DOUBLE_ROULETTE = 'doubleballroulette';
@@ -603,80 +601,82 @@
         { gamevendor ? gamevendor : '-'}
       </span>
     </div>
-    {#if !isMobile(userAgent) && gamefavorite && isLoggedIn && favorites}
-      <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
-        <svg version="1.1" class="FavoredIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.481 19.481" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 19.481 19.481">
-          <path style="fill: var(--emfe-w-color-white, #FFFFFF);" d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>
-        </svg>
-      </div>
-    {:else if isMobile(userAgent) && gamefavorite && isLoggedIn && favorites}
-      <div class="FavIconContainer">
-        <svg version="1.1" class="FavoredIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.481 19.481" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 19.481 19.481">
-          <path style="fill: var(--emfe-w-color-white, #FFFFFF);" d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>
-        </svg>
-      </div>
-    {/if}
-    <div class="GameExtraInfo">
-      {#if gameisnew}
-        <span class="GameExtraInfoLabel NewGameTag">{$_('new')}</span>
-      {/if}
-      {#if gametag}
-        <span class="GameExtraInfoLabel PopularGameTag">{gametag}</span>
-      {/if}
-      {#if livegamedata}
-        {#if !isopen && starttime && timeformat}
-          <div class="GameProp LiveProps">
-            <div class="ClosedGame">
-              {$_('opens')}
-              <span>
-                {moment.utc(starttime).local().format(timeformat)}
-              </span>
-            </div>
-            {@html renderDealerName(dealername)}
-            {@html renderBetLimits(min, max, currencySymbol)}
-          </div>
+  <div class="GameExtraInfoContainer">
+      <div class="GameExtraInfo">
+        {#if gameisnew}
+          <span class="GameExtraInfoLabel NewGameTag">{$_('new')}</span>
         {/if}
-        {#if isopen && displaytype && displaytype === BLACKJACK}
-          <div class="GameProp LiveProps BlackjackDisplay" part="GameProp LiveProps BlackjackDisplay">
-            <div class="LiveIcons">
-              {#if istablefull}
-                <span class="FullTable">
-                  {$_('full')}
+        {#if gametag}
+          <span class="GameExtraInfoLabel PopularGameTag">{gametag}</span>
+        {/if}
+        {#if livegamedata}
+          {#if !isopen && starttime && timeformat}
+            <div class="GameProp LiveProps">
+              <div class="ClosedGame">
+                {$_('opens')}
+                <span>
+                  {moment.utc(starttime).local().format(timeformat)}
                 </span>
-              {:else}
-                {#each seats as seatData}
-                  <span class={contains(currentoccupiedseats, seatData.toString()) ? 'ClosedSeat' : 'OpenSeat'}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14">
-                      <path d="M11.58 6c-1.17 0-2.13.95-2.13 2.12v.4a8.82 8.82 0 00-2.92-.4c-1.54 0-2.45.22-2.92.4v-.4A2.136 2.136 0 001.48 6a1.33 1.33 0 00-.5 2.55c.14.07.24.21.24.37l.26 1.06c0 .96.73 1.75 1.65 1.85a.65.65 0 00.28 1.23.65.65 0 00.3-1.22h5.64a.65.65 0 00.3 1.22.65.65 0 00.28-1.23c.93-.1 1.65-.9 1.65-1.85l.27-1.06c0-.16.1-.3.24-.37A1.33 1.33 0 0011.58 6z"/>
-                      <path d="M4.34 7.5c.55-.1 1.27-.17 2.2-.17.91 0 1.63.07 2.18.17.21-.96.9-1.74 1.8-2.1V4a3.99 3.99 0 00-7.97 0v1.4c.9.36 1.58 1.14 1.79 2.1z"/>
-                    </svg>
+              </div>
+              {@html renderDealerName(dealername)}
+              {@html renderBetLimits(min, max, currencySymbol)}
+            </div>
+          {/if}
+          {#if isopen && displaytype && displaytype === BLACKJACK}
+            <div class="GameProp LiveProps BlackjackDisplay" part="GameProp LiveProps BlackjackDisplay">
+              <div class="LiveIcons">
+                {#if istablefull}
+                  <span class="FullTable">
+                    {$_('full')}
                   </span>
-                {/each}
-              {/if}
+                {:else}
+                  {#each seats as seatData}
+                    <span class={contains(currentoccupiedseats, seatData.toString()) ? 'ClosedSeat' : 'OpenSeat'}>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14">
+                        <path d="M11.58 6c-1.17 0-2.13.95-2.13 2.12v.4a8.82 8.82 0 00-2.92-.4c-1.54 0-2.45.22-2.92.4v-.4A2.136 2.136 0 001.48 6a1.33 1.33 0 00-.5 2.55c.14.07.24.21.24.37l.26 1.06c0 .96.73 1.75 1.65 1.85a.65.65 0 00.28 1.23.65.65 0 00.3-1.22h5.64a.65.65 0 00.3 1.22.65.65 0 00.28-1.23c.93-.1 1.65-.9 1.65-1.85l.27-1.06c0-.16.1-.3.24-.37A1.33 1.33 0 0011.58 6z"/>
+                        <path d="M4.34 7.5c.55-.1 1.27-.17 2.2-.17.91 0 1.63.07 2.18.17.21-.96.9-1.74 1.8-2.1V4a3.99 3.99 0 00-7.97 0v1.4c.9.36 1.58 1.14 1.79 2.1z"/>
+                      </svg>
+                    </span>
+                  {/each}
+                {/if}
+              </div>
+              {@html renderDealerName(dealername)}
+              {@html renderBetLimits(min, max, currencySymbol)}
             </div>
-            {@html renderDealerName(dealername)}
-            {@html renderBetLimits(min, max, currencySymbol)}
-          </div>
-        {:else if isopen && displaytype && displaytype === ROULETTE}
-          <div class="{roulettecontainerclassname}">
-            <div class="LiveIcons" bind:this={roulletteref}>
-              {#each new Array(numberofdisplayedresults) as garbage, i}
-                {#if roulleteresults && roulleteresults[i]}
-                  {#if isdouble}
-                    <div class="Double">
-                      {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, `first${i}${roulleteresults[i][0]}`, roulleteresults[i][0], colorsourcearray[roulleteresults[i][0]])}
-                      {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, `second${i}${roulleteresults[i][1]}`, roulleteresults[i][1], colorsourcearray[roulleteresults[i][1]])}
-                    </div>
-                  {:else}
-                    {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, i, roulleteresults[i], colorsourcearray[roulleteresults[i]])}
+          {:else if isopen && displaytype && displaytype === ROULETTE}
+            <div class="{roulettecontainerclassname}">
+              <div class="LiveIcons" bind:this={roulletteref}>
+                {#each new Array(numberofdisplayedresults) as garbage, i}
+                  {#if roulleteresults && roulleteresults[i]}
+                    {#if isdouble}
+                      <div class="Double">
+                        {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, `first${i}${roulleteresults[i][0]}`, roulleteresults[i][0], colorsourcearray[roulleteresults[i][0]])}
+                        {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, `second${i}${roulleteresults[i][1]}`, roulleteresults[i][1], colorsourcearray[roulleteresults[i][1]])}
+                      </div>
+                    {:else}
+                      {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, i, roulleteresults[i], colorsourcearray[roulleteresults[i]])}
+                    {/if}
                   {/if}
-                {/if}
-              {/each}
+                {/each}
+              </div>
+              {@html renderDealerName(dealername)}
+              {@html renderBetLimits(min, max, currencySymbol)}
             </div>
-            {@html renderDealerName(dealername)}
-            {@html renderBetLimits(min, max, currencySymbol)}
-          </div>
+          {/if}
         {/if}
+      </div>
+      {#if !isMobile(userAgent) && gamefavorite && isLoggedIn && favorites}
+        <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
+          <svg version="1.1" class="FavoredIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.481 19.481" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 19.481 19.481">
+            <path style="fill: var(--emfe-w-color-white, #FFFFFF);" d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>
+          </svg>
+        </div>
+      {:else if isMobile(userAgent) && gamefavorite && isLoggedIn && favorites}
+        <div class="FavIconContainer">
+          <svg version="1.1" class="FavoredIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.481 19.481" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 19.481 19.481">
+            <path style="fill: var(--emfe-w-color-white, #FFFFFF);" d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>
+          </svg>
+        </div>
       {/if}
     </div>
   </div>
@@ -700,11 +700,9 @@
     height: 100%;
     position: relative;
   }
   .GameContainer.WithGameName {
     padding-bottom: 20px;
   }
   .GameInnerContainer {
     position: relative;
     width: 100%;
@@ -732,6 +730,7 @@
       left: 0;
       background: rgba(0, 0, 0, .65);
       z-index: 15;
+      padding: 8px;
       .GameInfo {
         display: flex;
@@ -739,13 +738,16 @@
         height: 100%;
         flex-direction: column;
         align-items: center;
-        justify-content: center;
+        justify-content: space-evenly;
         &Name {
           color: white;
-          margin-bottom: 10px;
           text-align: center;
           font-size: 14px;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
         &Btn {
@@ -766,22 +768,34 @@
       }
       .GameInfoVendor {
-        display: block;
-        position: absolute;
-        bottom: 8px;
-        right: 8px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
         color: white;
         font-size: 12px;
         font-weight: normal;
       }
     }
-    .GameExtraInfo {
-      display: block;
+    .GameExtraInfoContainer{
       position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      height: auto;
+      padding: 4px;
+    }
+    .GameExtraInfo {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
       width: 100%;
       height: 100%;
-      top: 8px;
-      left: 8px;
       z-index: 0;
       &Label {
         font-size: 11px;
@@ -798,7 +812,9 @@
       cursor: pointer;
       .GameInfoWrapper{
-        display: block;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
       }
       .GameBg {
@@ -821,9 +837,9 @@
     height: 20px;
   }
   .FavIconContainer {
-    position: absolute;
-    top: 10px;
-    right: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     cursor: pointer;
     z-index: 15;
   }
@@ -1444,55 +1460,35 @@
   }
 }
-@container (max-width: 375px) {
+@container (max-width: 480px) {
+  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper{
+    gap: 0px;
+  }
   .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoName {
-    margin-bottom: 5px;
     font-size: 12px;
+    margin-top: 4px;
   }
   .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoBtn {
-    font-size: 14px;
-    padding:4px;
-  }
-  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
-    font-size: 10px;
-  }
-}
-@container (max-width: 410px) {
-  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoName {
     font-size: 12px;
-    margin-bottom: 5px;
+    padding:2px;
   }
-  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoBtn {
-    font-size: 14px;
-    padding:4px;
-  }
   .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
-    font-size: 10px;
-  }
-}
-@container (max-width: 480px) {
+    font-size: 8px;
+  }
-  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoName {
-    font-size: 12px;
-    margin-bottom: 5px;
+  .CasinoGamesGridSlider .GameInnerContainer .GameExtraInfoContainer .FavoredIcon,
+  .CasinoGamesGridSlider .GameInnerContainer .GameExtraInfoContainer .UnfavoredIcon {
+      width: 14px;
+      height: 14px;
   }
-  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoBtn {
-    font-size: 14px;
-    padding:4px;
+  .CasinoGamesGridSlider .GameInnerContainer .GameExtraInfoContainer .GameExtraInfoLabel {
+    font-size: 8px;
   }
-  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
-    font-size: 10px;
-  }
 }
 </style>