@everymatrix/casino-collections-providers 1.6.0 → 1.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-collections-providers",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e4b57a534bdee7d09fc53a7b49e31338bc1a3f00"
+  "gitHead": "c0b2bf42b27d9f10a77af4c5be6a2708be5435cf"
 }

package/src/CasinoCollectionsProviders.svelte

@@ -1,6 +1,6 @@
 <svelte:options tag={null} />
 <script lang="ts">
-  import { _, addNewMessages, setLocale} from './i18n';
+  import { _, addNewMessages, setLocale } from './i18n';
   import { Translations } from './translations.js';
   import { isMobile } from 'rvhelper';
   import { onMount } from 'svelte';
@@ -26,7 +26,6 @@
   let slides:Array<any>;
 
   let customStylingContainer:HTMLElement;
-  let displayNoneClientStyling:boolean = false;
   let userAgent:string = window.navigator.userAgent;
   let mobile:boolean;
 
@@ -60,7 +59,7 @@
         isLoading = false;
 
         let filteredCategories = gameCategoriesData.items.filter(item => item.flags == type);
-        
+
         gameCategories = filteredCategories.map(category => {
           return {
             id: category.id,
@@ -78,7 +77,7 @@
   const positionSlides = (curSlide?):void => {
     //store each slide HTML element in an array
     slides = [...categoriesSlider.children];
-    
+
     //iterate the array of elements and translate each of them by 100% times the index to create the slider
     slides.forEach((slide: HTMLElement, index: number) => {
       slide.style.transform = `translateX(${100 * (curSlide ? index - curSlide : index)}%)`;
@@ -132,7 +131,7 @@
         'context': 'CollectionsProviders',
         'gameName': `${gameName}`
       });
-    } 
+    }
   };
 
   const openCategory = (categoryId:any):void => {
@@ -150,8 +149,6 @@
   }
 
   const setClientStylingURL = ():void => {
-    displayNoneClientStyling = true;
-
     let url:URL = new URL(clientstylingurl);
     let cssFile:HTMLElement = document.createElement('style');
 
@@ -161,14 +158,13 @@
         cssFile.innerHTML = data
 
         setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-        setTimeout(() => { displayNoneClientStyling = false; }, 500);
       });
   }
 
   onMount(() => {
     mobile = isMobile(userAgent);
   })
- 
+
   $: endpoint && datasource && lang && getGameCategories();
   //making sure we have something to position, before trying to
   $: gameCategories && categoriesSlider && positionSlides();
@@ -176,10 +172,10 @@
   $: clientstyling && customStylingContainer && setClientStyling();
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
   $: translationurl && setTranslationUrl();
-  
+
 </script>
 
-  <div bind:this={customStylingContainer}> 
+  <div bind:this={customStylingContainer}>
     {#if isLoading}
       <p>{$_('Translations.loading')}</p>
     {:else}
@@ -199,7 +195,7 @@
             </button>
           </div>
         </div>
-        
+
         <div class="CategoriesSlider" bind:this={categoriesSlider}>
           {#each gameCategories as category}
           <div class="CategoriesSliderWrapper Animation">
@@ -225,7 +221,7 @@
           </div>
           {/each}
         </div>
-      </div>  
+      </div>
     {/if}
   </div>
 
@@ -260,7 +256,7 @@
       display: flex;
       justify-content: space-between;
       height: 70px;
-      
+
       & .Title {
         color: var(--emfe-w-color-white, #FFFFFF);
         font-size: 22px;
@@ -275,7 +271,7 @@
           width: 40px;
 
           cursor: pointer;
-          
+
           &:active {
             opacity: 0.7;
           }
@@ -287,7 +283,7 @@
       position: relative;
       height: 230px;
       overflow: hidden;
-      
+
       &Wrapper {
         position: absolute;
         top: 0;
@@ -321,11 +317,11 @@
           align-items: center;
         }
         &Logo {
-          max-height: 100px;
-          position: absolute;
-          top: 30%;
-          left: 50%;
           transform: translate(-50%, -50%);
+          max-width: 175px;
+          top: 30%;
+          max-height: 100%;
+          position: absolute;
         }
         &Title {
           color: var(--emfe-w-color-white, #FFFFFF);
@@ -334,26 +330,26 @@
         }
         &GameContainer {
           display: flex;
+          width: 40px;
           justify-content: center;
-          gap: 3%;
+          gap: 10%;
           min-height: 85px;
         }
         &GameImage {
           border-radius: 10px;
           width: auto;
-          height: 54px;
+          height: 55px;
           object-fit: cover;
         }
         &Games{
           color:white;
           text-align: center;
           p{
-            font-size: 10px;
-            text-overflow: ellipsis;
+            font-size: 8px;
+            display: -webkit-box;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;  
             overflow: hidden;
-            height: 20px;
-            width: 90px;
-            white-space: nowrap;
           }
         }
       }
@@ -364,7 +360,7 @@
 
     &.CasinoCollectionsProviders {
      padding: 25px 10px;
-    } 
+    }
     & .CategoriesSlider {
       overflow: auto;
       scroll-snap-type: x mandatory;
@@ -375,12 +371,18 @@
       display: none;
     }
     & .CategorySlide {
-     width: 85vw;
+     width: 80vw;
      scroll-snap-align: start;
     }
-    & .ButtonsContainer{ 
+    & .ButtonsContainer{
      display: none;
     }
+    & .CategorySlideGameImage{
+      border-radius: 10px;
+      width: auto;
+      height: 40px;
+      object-fit: cover;
+    }
   }
 
 </style>

package/src/translations.js

@@ -6,7 +6,7 @@ export const Translations = {
     loading: 'Loading, please wait ...',
     },
   },
-  zh: {
+  'zh-hk': {
     Translations: {
       collections: '收藏品',
       providers: '供应商',