@everymatrix/casino-game-thumbnail 0.0.293 → 0.0.296

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-game-thumbnail",
-  "version": "0.0.293",
+  "version": "0.0.296",
   "main": "dist/casino-game-thumbnail.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5b7aee827d2cbc67a99e15775c630c6f9ddfbf43"
+  "gitHead": "628a0e30f5160748837a6a7acb4cf44623d87c3d"
 }

package/src/CasinoGameThumbnail.svelte

@@ -24,6 +24,7 @@
   export let gamefunmode:boolean = false;
   export let searchitem:boolean = false;
   export let gamefavorite:boolean = false;
+  export let gamecellsize = '';
   export let showfavoredcategory:boolean = false;
   export let showgamename:boolean = false;
   export let currency:string = '';
@@ -549,7 +550,7 @@
   $: gamethumbnail && setOnLoad();
   $: clientstyling && setClientStyling();
   $: favorites && setFavorites();
-  $: clientstylingurl && setClientStylingURL();
+  $: gamecellsize && clientstylingurl && setClientStylingURL();
   $: endpoint && livelobbyendpoint && setLiveLobbyData();
   $: livegamedata && updateComponent();
   $: roulletteref && roulleteresults && attachAnimations();
@@ -557,7 +558,7 @@
 
 <div class={`GameContainer ${extraclassname}`} part={`GameContainer ${extraclassname}`} bind:this={customStylingContainer}>
   <div class="GameInnerContainer { (livegamedata && !isopen && openhours.value) || (livegamedata && istablefull) ? 'GameInnerContainerUnavailable' : ''}" part="GameInnerContainer { (livegamedata && !isopen) || (livegamedata && istablefull) ? 'GameInnerContainerUnavailable' : ''}" on:mouseenter={gameHover} on:mouseleave={gameBlur} on:touchstart={gameTouch} on:touchleave={gameTouchLeave}>
-    <img src={gamethumbnail} class="GameBg {hover ? 'GameContainerHovered' : ''} {loaded ? 'Loaded' : ''}" part="GameBg {hover ? 'GameContainerHovered' : ''} {loaded ? 'Loaded' : ''}" alt="" bind:this={image} loading="lazy" />
+    <img src={gamethumbnail} class={`GameBg GameBg-${gamecellsize} ${hover ? 'GameContainerHovered' : ''} ${loaded ? 'Loaded' : ''}`} part="GameBg {hover ? 'GameContainerHovered' : ''} {loaded ? 'Loaded' : ''}" alt="" bind:this={image} loading="lazy" />
     <div class="GameInfoWrapper" part="GameInfoWrapper">
       <div class="GameInfo {hover ? 'GameHovered' : ''}" part="GameInfo {hover ? 'GameHovered' : ''}">
         {#if fav}
@@ -693,8 +694,11 @@
     .GameBg {
       width: 100%;
       height: 100%;
-      object-fit: cover;
+      object-fit: unset;
       transition: all 150ms ease-in-out;
+      &.GameBg-1x2, 
+      &.GameBg-2x1,
+      &.GameBg-2x2 { object-fit: cover; }
     }
 
     .GameInfoWrapper {