@everymatrix/casino-game-thumbnail 0.0.367 → 0.0.369

package/src/CasinoGameThumbnail.svelte

@@ -1,1377 +1,1377 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import moment from 'moment';
-  import { onMount, tick } from "svelte";
-  import { isMobile, getDevice } from 'rvhelper';
-  import { _, addNewMessages } from './i18n';
-  import { GameThumbnailTranslations } from './translations';
-  import { currenciesSymbols } from './currency-symbols';
-
-  export let session:string = '';
-  export let userid:string = '';
-  export let lang:string = '';
-  export let clientstyling:string = ''
-  export let clientstylingurl:string = '';
-
-  export let favorites:string = '';
-  export let gamethumbnail:string = '';
-  export let gamename:string = '';
-  export let gamevendor:string = '';
-  export let gameid:string = '';
-  export let gameisnew:string = '';
-  export let gamepopularity:string = '';
-  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 = '';
-  export let gamepagemodalurl:string = 'false';
-
-  export let endpoint:string = '';
-
-  export let livelobbyendpoint:string = '';
-  export let connectlive:string = '';
-  export let visibilityconnect:string = '';
-
-  let isLoggedIn:boolean = false;
-  let sessionID:string;
-  let playerID:string;
-
-  let fav:boolean = false;
-  let hover:Boolean = false;
-  let loaded:boolean = false
-  let image:any;
-  let userAgent:any = window.navigator.userAgent;
-  let customStylingContainer:HTMLElement;
-
-  let livegamedata:any;
-  let liveLobbyConnection:EventSource;
-  let displaytype:string;
-  let starttime:any;
-  let timeformat = 'HH:mm';
-  let isopen:Boolean;
-  let betlimit:any = {};
-  let openhours:any;
-  let seats:any = [];
-  let currencySymbol:any='EUR';
-  let min:any;
-  let max:any;
-  let totalseats:any;
-  let currentoccupiedseats:any;
-  let currentroulettenumbers:any;
-  let currentdoubleballroulettenumbers:any;
-  let vendorcategory:any;
-  let isdouble:any;
-  let roulleteresults:any;
-  let roulettecontainerclassname:any;
-  let colorsourcearray:any;
-  let istablefull:boolean;
-  let oldistablefull:boolean;
-  let extraclassname:string='';
-  let roulletteref:any;
-  let dealername:string;
-  let numberofplayers:number;
-
-
-  const BLACKJACK = 'blackjack';
-  const ROULETTE = 'roulette';
-  const DOUBLE_ROULETTE = 'doubleballroulette';
-  const DEFAULT_BLACKJACK_TOTAL_SEATS = 7;
-  const blackjackcategory = [BLACKJACK];
-  const roulettecategory = [ROULETTE, DOUBLE_ROULETTE];
-  const DEFAULT_AMOUNT_SEPARATOR = ',';
-  const numberofdisplayedresults = 5;
-  export const MONEY_WHEEL_COLOR_MAP = {
-    '01': 'Yellow',
-    '02': 'Blue',
-    10: 'Green',
-    40: 'Red',
-    '05': 'Purple',
-    20: 'Orange',
-    X7: 'Gold',
-    X2: 'Gold',
-  };
-  export const ROULETTE_COLOR_MAP = {
-    1: 'Red',
-    3: 'Red',
-    5: 'Red',
-    7: 'Red',
-    9: 'Red',
-    12: 'Red',
-    14: 'Red',
-    16: 'Red',
-    18: 'Red',
-    19: 'Red',
-    21: 'Red',
-    23: 'Red',
-    25: 'Red',
-    27: 'Red',
-    30: 'Red',
-    32: 'Red',
-    34: 'Red',
-    36: 'Red',
-    2: 'Black',
-    4: 'Black',
-    6: 'Black',
-    8: 'Black',
-    10: 'Black',
-    11: 'Black',
-    13: 'Black',
-    15: 'Black',
-    17: 'Black',
-    20: 'Black',
-    22: 'Black',
-    24: 'Black',
-    26: 'Black',
-    28: 'Black',
-    29: 'Black',
-    31: 'Black',
-    33: 'Black',
-    35: 'Black',
-    0: 'Green',
-    '00': 'Green',
-  };
-
-  Object.keys(GameThumbnailTranslations).forEach((item:any):void => {
-    addNewMessages(item, GameThumbnailTranslations[item]);
-  });
-
-  const enter = () => {
-    hover = true;
-  }
-  const leave = () => {
-    hover = false;
-  }
-
-  const messageHandler = (e:any):void => {
-    if (e.data.type === `AddFavoriteThumbnail_${gameid}` && !showfavoredcategory) {
-      gamefavorite = true;
-    }
-
-    if (e.data.type === `RemoveFavoriteThumbnail_${gameid}` && !showfavoredcategory) {
-      gamefavorite = false;
-    }
-
-    if (e.data.type === 'UserSessionID') {
-      isLoggedIn = true;
-      sessionID = e.data.session;
-      playerID = e.data.userID;
-    }
-
-    if(e.data.type === 'CategoryUpdate') {
-      livegamedata = null;
-    }
-  }
-
-  const toggleGameFrame = (gameId:any):void => {
-    if (searchitem) {
-      window.postMessage({ type: 'SearchedItemClicked', gameId }, window.location.href);
-    }
-    if (!isMobile(userAgent)) {
-      window.postMessage({ type: 'OpenGameFrame', gameId, gamefunmode, gamepagemodalurl, isMobile: isMobile(userAgent)  }, window.location.href)
-    } else {
-      window.postMessage({ type: 'ShowGameModal', gameId, isMobile: isMobile(userAgent) }, window.location.href);
-    }
-  };
-
-
-  const toggleFavoriteGame = (id:any):void => {
-    let triggerFactor = "thumbnail";
-
-    if (gamefavorite) {
-      window.postMessage({ type: 'SetUnfavoredGame', id, triggerFactor }, window.location.href);
-    } else {
-      window.postMessage({ type: 'SetFavoredGame', id, triggerFactor }, window.location.href);
-    }
-  }
-
-  const gameTouch = ():void => {
-    window.postMessage({ type: 'GameHovered' }, window.location.href);
-  }
-
-  const gameTouchEnd = ():void => {
-    window.postMessage({ type: 'GameBlur' }, window.location.href);
-  }
-
-  const gameHover = ():void => {
-    window.postMessage({ type: 'GameHovered' }, window.location.href);
-  }
-
-  const gameBlur = ():void => {
-    window.postMessage({ type: 'GameBlur' }, window.location.href);
-  }
-
-  const setActiveLanguage = ():void => {
-    // Not needed yet
-    // setLocale(lang);
-  }
-
-  const setSession = ():void => {
-    isLoggedIn = true;
-    sessionID = session;
-    playerID = userid;
-  }
-
-  const setOnLoad = ():void => {
-    if (image) {
-      image.onload = () => {
-        loaded = true;
-      }
-    }
-  }
-
-  const getLiveLobbyURL = (vendorName, id) => {
-    return `${endpoint}/encoder/lobby/updates/${vendorName}/${id}`;
-  }
-  const connectGameToLiveLobby = () => {
-    if (livelobbyendpoint && EventSource && !liveLobbyConnection) {
-        if (gamevendor && gameid) {
-        liveLobbyConnection = new EventSource(getLiveLobbyURL(gamevendor, gameid)),
-        liveLobbyConnection.addEventListener('message', liveLobbyMessageHandler);
-      }
-    }
-  }
-  const disconnectGameFromLiveLobby = () => {
-    if (liveLobbyConnection) {
-      liveLobbyConnection.close();
-      liveLobbyConnection = undefined;
-    }
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-
-    sheet.innerHTML = clientstyling;
-
-    setTimeout(() => { customStylingContainer.appendChild(sheet);});
-  }
-
-  const setFavorites = ():void => {
-    if (favorites == 'true') {
-      fav = true;
-    }
-  }
-
-  const setClientStylingURL = ():void => {
-    let url:URL = new URL(clientstylingurl);
-
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(url.href)
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        setTimeout(() => { customStylingContainer.appendChild(cssFile); });
-      });
-  }
-
-  const liveLobbyMessageHandler = async (event) => {
-    const { type, data: rawData } = event;
-    let data;
-    switch (type) {
-      case 'message': {
-        if (rawData) {
-          try {
-            data = JSON.parse(rawData);
-          } catch (err) {
-            // eslint-disable-next-line no-console
-            console.error('MESSAGE PARSING ERROR: ', err);
-          }
-        }
-        if (data) {
-          const {
-            InternalTableId,
-            MessageType,
-            // TakenSeats,
-            Results,
-            // Roads, // for baccarat
-            Seats,
-            Open,
-          } = data;
-          if (InternalTableId) {
-            switch (MessageType) {
-              case 'SeatsUpdated': {
-                if (Seats && Array.isArray(Seats)) {
-                  currentoccupiedseats = Seats;
-                  livegamedata.currentOccupiedSeats = Seats;
-                  await tick();
-                }
-                break;
-              }
-              case 'RouletteResultsUpdated': {
-                if (Results && Array.isArray(Results)) {
-                  currentroulettenumbers = Results;
-                  livegamedata.currentRouletteNumbers = Results;
-                  await tick();
-                }
-                break;
-              }
-              case 'DoubleBallRouletteResultsUpdated': {
-                if (Results && Array.isArray(Results)) {
-                  currentdoubleballroulettenumbers = Results;
-                  livegamedata.currentDoubleBallRouletteNumbers = Results;
-                  await tick();
-                }
-                break;
-              }
-              case 'TableOpened': {
-                isopen = Open;
-                livegamedata.isOpen = Open;
-                await tick();
-                break;
-              }
-              case 'TableClosed': {
-                isopen = Open;
-                livegamedata.isOpen = Open;
-                await tick();
-                break;
-              }
-              default: {
-                // default case
-              }
-            }
-          }
-        }
-      }
-      default: {
-        // default case
-      }
-    }
-  }
-
-  const setLiveLobbyData = () => {
-    let url:any = new URL(`${livelobbyendpoint.split('?')[0]}`);
-    url.searchParams.append("platform", getDevice(userAgent));
-    url.searchParams.append('language', lang);
-    fetch(url)
-      .then((res:any) => res.json())
-      .then((data:any) => {
-        const { details } = data[0];
-        livegamedata = details;
-      });
-  }
-  const numberWithSeparators = (value, sep = DEFAULT_AMOUNT_SEPARATOR) => {
-    if (value !== undefined && value !== null) {
-      return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, sep);
-    }
-    return '';
-  }
-  const contains = (array, value) => {
-    return array.some(item => item === value);
-  }
-  const getGameComponent = (livegamedata) => {
-    let GameComponent = null;
-    if (livegamedata) {
-      const { vendorCategory } = livegamedata;
-      if (vendorCategory) {
-        const gameTypeToLower = vendorCategory.toLowerCase();
-        if (contains(blackjackcategory, gameTypeToLower)) {
-          GameComponent = BLACKJACK;
-        } else if (contains(roulettecategory, gameTypeToLower)) {
-          GameComponent = ROULETTE;
-        }
-        // else if (contains(baccaratCategory, gameTypeToLower)) {
-        //   GameComponent = 'baccarat';
-        // } else if (contains(otherLiveGamesCategory, gameTypeToLower)) {
-        //   GameComponent = 'poker';
-        // }
-      }
-    }
-    return GameComponent;
-  };
-  const renderBetLimits = (min, max, currencySymbol) => {
-    let rightSideContent;
-    let leftSideContent;
-    if (min !== undefined && min !== null && max !== undefined && max !== null) {
-      leftSideContent = `
-        <span>
-          ${currencySymbol}
-        </span>
-        ${
-          numberWithSeparators(min)
-        }-${
-          numberWithSeparators(max)
-        }`;
-    }
-    if (numberofplayers) {
-      rightSideContent = `
-        <svg fill="white" width="13" height="13" viewBox="0 0 13 14" xmlns="http://www.w3.org/2000/svg"><path d="M4 8.2a4.6 4.6 0 0 0 5 0c2.7.8 4 2.6 4 4.8H0c0-2.2 1.3-4 4-4.8zM6.6 8c2 0 3.8-1.7 3.8-4 0-2.1-1.7-4-3.8-4a3.9 3.9 0 0 0-3.8 4c0 2.2 1.7 4 3.8 4z"/></svg>
-        <span class="NrOfPlayers">${numberofplayers}</span>`;
-    }
-    if (!rightSideContent && !leftSideContent) {
-      return '';
-    }
-    return `
-      <p class="LiveLimits">
-        <span class="BetLimitLeft">
-          ${leftSideContent || ''}
-        </span>
-        <span class="BetLimitRight">
-          ${rightSideContent || ''}
-        </span>
-      </p>`;
-  }
-  const renderDealerName = (dealername) => {
-    if (!dealername) {
-      return '';
-    }
-    return `
-      <p class="LiveLimits">
-        <span class="DealerName">${$_('gameThumbnail.dealer')}: ${dealername}</span>
-      </p>
-    `;
-  }
-  const createDisplayData = (livegamedata) => {
-    totalseats = livegamedata.totalSeats || DEFAULT_BLACKJACK_TOTAL_SEATS;
-    currentoccupiedseats = livegamedata.currentOccupiedSeats || [];
-    const seats = [];
-    for (let i = 1; i <= totalseats; i++) {
-      seats.push(i);
-    }
-    return { seats };
-  }
-  const renderSpan = (selectedClass, key, value, colorClass = '') => {
-    const rouletteItemClassname = `${selectedClass} ${colorClass}`;
-    const firstMatch = key.toString().match(/first0|second0|0/g);
-    if (key === 0 || (firstMatch && firstMatch.length !== 0)) {
-      return `
-        <span
-          id=${key}
-          class="${rouletteItemClassname}"
-        >
-          ${value}
-        </span>
-      `;
-    }
-    return `
-      <span id=${key} class="${rouletteItemClassname}">
-        ${value}
-      </span>
-    `;
-  }
-
-  const attachAnimations = () => {
-    const animatedClassName = 'FirstElementAnimated';
-    const firstElem = roulletteref.getElementsByClassName('First')[0];
-    if (firstElem) {
-      firstElem.classList.add(animatedClassName);
-      setTimeout(() => {
-        firstElem.classList.remove(animatedClassName);
-      }, 2000);
-    }
-  }
-  const updateComponent = () => {
-    if (livegamedata) {
-      isopen = livegamedata.isOpen;
-      betlimit = livegamedata.betLimit || {};
-      openhours = livegamedata.openHours;
-      seats = createDisplayData(livegamedata).seats;
-      if (openhours && openhours.value) {
-        const { value: { startTime: starttimeRaw /* , timeFormat: timeFormatRaw */, originalTimeFormat } } = openhours;
-        starttime = starttimeRaw;
-        timeformat = originalTimeFormat || timeformat;
-      }
-      if (isopen) {
-        displaytype = getGameComponent(livegamedata);
-      }
-      currencySymbol = currenciesSymbols[currency];
-      min = (betlimit.min || {})[currency];
-      max = (betlimit.max || {})[currency];
-      currentroulettenumbers = livegamedata.currentRouletteNumbers;
-      currentdoubleballroulettenumbers = livegamedata.currentDoubleBallRouletteNumbers;
-      vendorcategory = livegamedata.vendorCategory;
-      isdouble = vendorcategory.toLowerCase() === DOUBLE_ROULETTE;
-      roulleteresults = (isdouble ? currentdoubleballroulettenumbers : currentroulettenumbers) || [];
-      roulettecontainerclassname = 'GameProp LiveProps RoulleteProps';
-      roulettecontainerclassname += isdouble ? ' Double' : '';
-      colorsourcearray = contains(roulettecategory, vendorcategory.toLowerCase()) ? ROULETTE_COLOR_MAP : MONEY_WHEEL_COLOR_MAP;
-      oldistablefull = istablefull;
-      istablefull = Array.isArray(currentoccupiedseats) && currentoccupiedseats.length === totalseats;
-      if (livegamedata.dealer) {
-        dealername = livegamedata.dealer.DealerName;
-      }
-      numberofplayers = livegamedata.numberOfPlayers;
-      extraclassname = 'ListGame';
-      if(livegamedata.isOpen && livegamedata.currentRouletteNumbers) {
-        extraclassname += ' GameBackdrop';
-      }
-      if (isopen && istablefull && min && max && livegamedata.currentOccupiedSeats) {
-        extraclassname += ' GameContainerDimmed';
-      } else {
-        if (isopen === false && starttime) {
-          extraclassname += ' GameContainerFullyDimmed';
-        }
-      }
-      if (customStylingContainer) {
-        if (!oldistablefull && istablefull) {
-          extraclassname += ' PulsatingRedShadow';
-          extraclassname = extraclassname.replace(' PulsatingGreenShadow', '');
-        } else if (oldistablefull && !istablefull) {
-          extraclassname += ' PulsatingGreenShadow';
-          extraclassname = extraclassname.replace(' PulsatingRedShadow', '');
-        }
-      }
-    }
-  }
-  const toggleConnect = ():void => {
-    if (connectlive === 'disconnect') {
-      disconnectGameFromLiveLobby();
-    } else if (connectlive === 'connect') {
-      connectGameToLiveLobby();
-    }
-  }
-  const toggleVisibilityConnect = ():void => {
-    if (visibilityconnect === 'disconnect') {
-      disconnectGameFromLiveLobby();
-    } else if (visibilityconnect === 'connect' && connectlive === 'connect') {
-      connectGameToLiveLobby();
-    }
-  }
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-      if (liveLobbyConnection) {
-        liveLobbyConnection.removeEventListener('message', liveLobbyMessageHandler);
-      }
-    }
-  });
-
-  $: connectlive && toggleConnect();
-  $: visibilityconnect && toggleVisibilityConnect();
-  $: lang && setActiveLanguage();
-  $: session && userid && endpoint && setSession();
-  $: gamethumbnail && setOnLoad();
-  $: clientstyling && setClientStyling();
-  $: favorites && setFavorites();
-  $: gamecellsize && clientstylingurl && setClientStylingURL();
-  $: endpoint && livelobbyendpoint && setLiveLobbyData();
-  $: livegamedata && updateComponent();
-  $: roulletteref && roulleteresults && attachAnimations();
-</script>
-
-<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:touchend={gameTouchEnd}>
-    <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}
-          {#if !isMobile(userAgent) && !gamefavorite && isLoggedIn}
-            <div class="FavIconContainer" part="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
-              <svg version="1.1" class="UnfavoredIcon" part="UnfavoredIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
-          viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"><path style="fill: white" d="M511.266,197.256c-1.764-5.431-6.458-9.388-12.108-10.209l-158.722-23.065L269.452,20.155
-              c-2.527-5.12-7.741-8.361-13.451-8.361c-5.709,0-10.924,3.242-13.451,8.361l-70.988,143.828L12.843,187.047
-              c-5.65,0.821-10.344,4.779-12.108,10.209c-1.765,5.43-0.293,11.391,3.795,15.376l114.848,111.955L92.27,482.67
-              c-0.965,5.627,1.349,11.315,5.968,14.67c4.618,3.355,10.74,3.798,15.797,1.142L256,423.846l141.961,74.637
-              c2.195,1.154,4.591,1.723,6.979,1.723c3.11,0,6.206-0.966,8.818-2.865c4.619-3.356,6.933-9.043,5.968-14.671L392.61,324.587
-              l114.86-111.954C511.559,208.647,513.031,202.686,511.266,197.256z M366.023,308.608c-3.536,3.446-5.15,8.412-4.314,13.278
-              l23.311,135.898l-122.038-64.162c-4.37-2.297-9.591-2.297-13.961,0l-122.045,64.163l23.304-135.9
-              c0.834-4.866-0.779-9.83-4.313-13.276l-98.731-96.244l136.445-19.829c4.886-0.71,9.108-3.778,11.294-8.205L256,60.685
-              l61.023,123.645c2.186,4.427,6.408,7.496,11.294,8.206l136.447,19.828L366.023,308.608z"/></svg>
-            </div>
-          {/if}
-        {/if}
-        <p class="GameInfoName" part="GameInfoName" title="{gamename}">{gamename}</p>
-        <button class="GameInfoBtn" part="GameInfoBtn" on:click="{() => toggleGameFrame(gameid)}">{$_('gameThumbnail.playNow')}</button>
-      </div>
-      <span class="GameInfoVendor" part="GameInfoVendor">
-        { gamevendor ? gamevendor : '-'}
-      </span>
-    </div>
-    {#if !isMobile(userAgent) && gamefavorite && isLoggedIn && favorites}
-      <div class="FavIconContainer" part="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
-        <svg version="1.1" class="FavoredIcon" part="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: white" 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" part="FavIconContainer">
-        <svg version="1.1" class="FavoredIcon" part="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: white" 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" part="GameExtraInfo">
-      {#if gameisnew}
-        <span class="GameExtraInfoLabel NewGameTag" part="GameExtraInfoLabel NewGameTag">{$_('gameThumbnail.new')}</span>
-      {/if}
-      {#if (parseInt(gamepopularity) > 0)}
-        <span class="GameExtraInfoLabel PopularGameTag" part="GameExtraInfoLabel PopularGameTag">{$_('gameThumbnail.hot')}</span>
-      {/if}
-      {#if livegamedata}
-        {#if !isopen && starttime && timeformat}
-          <div class="GameProp LiveProps" part="GameProp LiveProps">
-            <div class="ClosedGame" part="ClosedGame">
-              {$_('gameThumbnail.opens')}
-              <span>
-                {moment.utc(starttime).local().format(timeformat)}
-              </span>
-            </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" part="LiveIcons">
-              {#if istablefull}
-                <span class="FullTable" part="FullTable">
-                  {$_('gameThumbnail.full')}
-                </span>
-              {:else}
-                {#each seats as seatData}
-                  <span class={contains(currentoccupiedseats, seatData.toString()) ? 'ClosedSeat' : 'OpenSeat'} part={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>
-        {:else if isopen && displaytype && displaytype === ROULETTE}
-          <div class="{roulettecontainerclassname}" part="{roulettecontainerclassname}">
-            <div class="LiveIcons" part="LiveIcons" bind:this={roulletteref}>
-              {#each new Array(numberofdisplayedresults) as garbage, i}
-                {#if roulleteresults && roulleteresults[i]}
-                  {#if isdouble}
-                    <div class="Double" part="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}
-              {/each}
-            </div>
-            {@html renderDealerName(dealername)}
-            {@html renderBetLimits(min, max, currencySymbol)}
-          </div>
-        {/if}
-      {/if}
-    </div>
-  </div>
-  {#if showgamename}
-    <p class="GameNameBelow" part="GameNameBelow" title="{gamename}">{gamename}</p>
-  {/if}
-</div>
-
-
-<style lang="scss">
-
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  *, *::before, *::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  .GameContainer {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-
-  .GameInnerContainer {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    border-radius: 5px;
-    .GameBg {
-      width: 100%;
-      height: 100%;
-      object-fit: unset;
-      transition: all 150ms ease-in-out;
-      &.GameBg-1x2,
-      &.GameBg-2x1,
-      &.GameBg-2x2 { object-fit: cover; }
-    }
-
-    .GameInfoWrapper {
-      display: none;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background: rgba(0, 0, 0, .65);
-      z-index: 15;
-
-      .GameInfo {
-        display: flex;
-        width: 100%;
-        height: 100%;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-
-        &Name {
-          color: white;
-          margin-bottom: 10px;
-          text-align: center;
-          font-size: 14px;
-        }
-
-        &Btn {
-          appearance: none;
-          padding: 6px;
-          background: var(--emfe-w-color-primary, #D0046C);
-          color: var(--emfe-w-color-primary-50, #FBECF4);
-          font-size: 16px;
-          border: 2px solid var(--emfe-w-color-primary-600, #99034F);
-          border-radius: 5px;
-          cursor: pointer;
-          transition: border 150ms ease-in-out;
-
-          &:hover {
-            border: 2px solid var(--emfe-w-color-primary-100, #F1BED9);
-          }
-        }
-      }
-
-      .GameInfoVendor {
-        display: block;
-        position: absolute;
-        bottom: 8px;
-        right: 8px;
-        color: white;
-        font-size: 12px;
-        font-weight: normal;
-      }
-    }
-
-    &:hover {
-      cursor: pointer;
-
-      .GameInfoWrapper{
-        display: block;
-      }
-
-      .GameBg {
-        filter: blur(5px) grayscale(1);
-      }
-    }
-
-    .GameExtraInfo {
-      display: block;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 8px;
-      left: 8px;
-      z-index: 0;
-      &Label {
-        font-size: 11px;
-        padding: 3px;
-        background-color: var(--emfe-w-color-primary, #D0046C);
-        color: var(--emfe-w-color-primary-50, #FBECF4);
-        font-weight: bold;
-        text-transform: uppercase;
-        border-radius: 5px;
-      }
-    }
-  }
-
-  .GameNameBelow {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    position: relative;
-    bottom: -5px;
-    text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .FavoredIcon, .UnfavoredIcon {
-    width: 20px;
-    height: 20px;
-  }
-  .FavIconContainer {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    cursor: pointer;
-    z-index: 15;
-  }
-
-  // LIVE LOBBY DATA STYLING
-  .GamesWrapper .ListGame:hover .GamePlayNowText {
-    @media (min-width: 1100px) {
-      z-index: 4;
-    }
-  }
-  // dim the game that doesn't have open seats or table is full
-  .ListGame:hover, .ListGame:active {
-    .OpenSeat, .ClosedSeat, .LiveLimits, .LatestResult, .FullTable {
-      opacity: .2;
-    }
-  }
-  // fix for displaying live game thumbnails that don't have details without backdrop
-  .ListGame.GameBackdrop {
-    .GameInnerContainer  {
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(0deg, rgba(0,0,0,1) 15%, rgba(0,0,0,0) 100%);
-      }
-    }
-  }
-
-  .ListGame .GameInnerContainer {
-    z-index: 0;
-
-    .GameBg {
-      z-index: 5;
-    }
-
-    .GameExtraInfo {
-      z-index: 10;
-    }
-    &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-      }
-
-    &.GameInnerContainerUnavailable {
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background: rgba(0,0,0,0.9);
-      }
-    }
-
-    .ListGame.GameContainerDimmed:before {
-      display: block;
-      content: ' ';
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 5;
-      background: rgba(0,0,0, .4);
-      color: var(--emfe-w-color-white, #FFFFFF);
-      fill: var(--emfe-w-color-white, #FFFFFF);
-      opacity: 1;
-      border-radius: 4px;
-    }
-
-    .ListGame.GameContainerFullyDimmed:before {
-      display: block;
-      content: ' ';
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 5;
-      background: rgba(0,0,0, .8);
-      color: var(--emfe-w-color-white, #FFFFFF);
-      fill: var(--emfe-w-color-white, #FFFFFF);
-      opacity: 1;
-      border-radius: 4px;
-    }
-
-    .LiveProps {
-      display: flex;
-      flex-direction: column;
-      position: absolute;
-      bottom: 8px;
-      left: -8px;
-      right: 0;
-      width: 100%;
-      padding: 0;
-      background: linear-gradient(to top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.3) 80%, rgba(0,0,0,.99) 100%);
-      color: var(--emfe-w-color-white, #FFFFFF);
-      opacity: 1;
-      font-size: 14px;
-    }
-
-    .ListGame:hover .LiveProps,
-    .ListGameLink:hover .LiveProps {
-      opacity: 0;
-    }
-    //--------------------------------------LIVE LOBBY ANIMATIONS------------------------------------------
-    // Pulsating animations
-    @keyframes red-pulse {
-      0% {
-        box-shadow: 0 0 2px 0 rgba(red, 0.75);
-      }
-
-      15% {
-        box-shadow: 0 0 10px 2px rgba(red, 0.75);
-      }
-
-      30% {
-        box-shadow: 0 0 2px 0 rgba(red, 0.75);
-      }
-
-      50% {
-        box-shadow: 0 0 10px 2px rgba(red, 0.75);
-      }
-
-      65% {
-        box-shadow: 0 0 2px 0 rgba(red, 0.75);
-      }
-
-      80% {
-        box-shadow: 0 0 10px 2px rgba(red, 0.75);
-      }
-
-      100% {
-        box-shadow: 0 0 0 0 rgba(red, 0.75);
-      }
-    }
-
-    @keyframes green-pulse {
-      0% {
-        box-shadow: 0 0 2px 0 rgba(#56A80A, 0.75);
-      }
-
-      15% {
-        box-shadow: 0 0 10px 2px rgba(#56A80A, 0.75);
-      }
-
-      30% {
-        box-shadow: 0 0 2px 0 rgba(#56A80A, 0.75);
-      }
-
-      50% {
-        box-shadow: 0 0 10px 2px rgba(#56A80A, 0.75);
-      }
-
-      65% {
-        box-shadow: 0 0 2px 0 rgba(#56A80A, 0.75);
-      }
-
-      80% {
-        box-shadow: 0 0 10px 2px rgba(#56A80A, 0.75);
-      }
-
-      100% {
-        box-shadow: 0 0 0 0 rgba(#56A80A, 0.75);
-      }
-    }
-    // Flip animation
-    @keyframes flip-open {
-      0% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-        -webkit-transition-timing-function: ease-in;
-        transition-timing-function: ease-in;
-        opacity: 0;
-      }
-      40% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-        -webkit-transition-timing-function: ease-in;
-        transition-timing-function: ease-in;
-      }
-      60% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-        opacity: 1;
-      }
-      80% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-      }
-      100% {
-        -webkit-transform: perspective(400px);
-        transform: perspective(400px);
-      }
-    }
-
-    .silde-in-from-left {
-      -webkit-animation-name: silde-in-from-left;
-      animation-name: silde-in-from-left;
-      -webkit-animation-duration: 1s;
-      animation-duration: 1s;
-      -webkit-animation-fill-mode: both;
-      animation-fill-mode: both;
-    }
-    @-webkit-keyframes silde-in-from-left {
-      0% {
-        -webkit-transform: translateX(-100%);
-        transform: translateX(-100%);
-        visibility: visible;
-      }
-      100% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-      }
-    }
-    @keyframes silde-in-from-left {
-      0% {
-        -webkit-transform: translateX(-100%);
-        transform: translateX(-100%);
-        visibility: visible;
-      }
-      100% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-      }
-    }
-
-    @keyframes flip-closed-seat {
-      0% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-        -webkit-transition-timing-function: ease-in;
-        transition-timing-function: ease-in;
-        opacity: 0;
-      }
-      40% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-        -webkit-transition-timing-function: ease-in;
-        transition-timing-function: ease-in;
-      }
-      60% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-        opacity: 1;
-      }
-      80% {
-        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-      }
-      100% {
-        -webkit-transform: perspective(400px);
-        transform: perspective(400px);
-      }
-    }
-
-    // .Page-LiveCasino .GamesListContainer,
-    // .Page-LiveCasino-Child .GamesListContainer,
-    // .Page-LiveCasino .OperatorSticky .GamesListContainer,
-    // .Page-LiveCasino .CasinoGames .GamesListContainer,
-    // .Page-Live-casinoSource .GamesListContainer,
-    // .Page-Live-casinoSource .GamesListContainer,
-    // .Page-Live-casinoSource .OperatorSticky .GamesListContainer,
-    // .Page-Live-casinoSource .CasinoGames .GamesListContainer {
-    //   overflow: visible;
-    // }
-
-    .ListGame.PulsatingGreenShadow, .ListGame.PulsatingRedShadow {
-      overflow: auto;
-    }
-
-    .ListGame.PulsatingGreenShadow {
-      animation: green-pulse 2s linear;
-    }
-
-    .ListGame.PulsatingRedShadow {
-      animation: red-pulse 2s linear;
-    }
-
-    .LiveIcons {
-      position: relative;
-      display: flex;
-      padding: 0 16px;
-      // flex-wrap: wrap;
-      box-sizing: border-box;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      min-height: auto;
-      margin-bottom: 5px;
-      @media (min-width: 1100px) {
-        min-height: auto;
-      }
-
-      &:first-child {
-        margin-left: 0;
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
-
-      &.Black, &.Red, &.Green {
-        color: var(--emfe-w-color-white, #FFFFFF);
-        border: 1px solid var(--emfe-w-color-white, #FFFFFF);
-      }
-
-      .LatestResult {
-        min-width: 12px;
-        padding: 2px;
-        margin: 0 1px;
-        margin-right: 6px;
-        font-size: 14px;
-        text-align: center;
-        @media (min-width: 1100px) {
-          min-width: 12px;
-          font-size: 14px;
-          margin: 0 2px;
-          margin-right: 5px;
-          padding: 2px;
-        }
-
-        &.FirstElementAnimated {
-          animation: flip-open 2s both;
-          -webkit-animation: flip-open 2s both;
-          -webkit-backface-visibility: visible;
-          backface-visibility: visible;
-        }
-
-        &.First {
-          min-width: 24px;
-          &.Black, &.Red, &.Green {
-            color: var(--emfe-w-color-white, #FFFFFF);
-            border: 1px solid var(--emfe-w-color-white, #FFFFFF);
-          }
-          &.Black {
-            background: var(--emfe-w-color-black, #000000)
-          }
-          &.Red {
-            background: red;
-          }
-          &.Green {
-            background: #56A80A;
-          }
-          padding: 4px;
-          @media (min-width: 1100px) {
-            padding: 4px;
-          }
-        }
-      }
-
-      .Double {
-        display: flex;
-        flex-direction: column;
-
-        .LatestResult {
-          &:first-child {
-            margin-bottom: 10px;
-          }
-        }
-
-        &:first-child {
-          .LatestResult {
-            margin-left: 0;
-            margin-bottom: 0;
-          }
-        }
-
-        &:last-child {
-          .LatestResult {
-            margin-right: 0;
-          }
-        }
-      }
-
-      .Black, .Red, .Green {
-        background-color: transparent;
-      }
-
-      .Black {
-        color: var(--emfe-w-color-white, #FFFFFF);
-      }
-
-      .Red {
-        color: red;
-      }
-
-      .Green {
-        color: #56A80A;
-      }
-    }
-
-    .Blue {
-      color: #4d90a7;
-    }
-
-    .Red {
-      background-color: red;
-    }
-
-    .Black {
-      background-color: var(--emfe-w-color-black, #000000);
-    }
-
-    .Green {
-      background-color: #56A80A;
-    }
-
-    .White {
-      background-color: var(--emfe-w-color-white, #FFFFFF);
-    }
-
-    .Yellow {
-      background-color: #eeca3d;
-    }
-
-    .Gold {
-      background-color: darken(#eeca3d, 30%);
-    }
-
-    .Orange {
-      background-color: darken(#eeca3d, 40%);
-    }
-
-    .Purple {
-      background-color: darken(#f0f, 40%);
-    }
-
-    .Tie {
-      background-color: var(--emfe-w-color-white, #FFFFFF);
-      background-image: linear-gradient(135deg, var(--emfe-w-color-white, #FFFFFF) 25%, transparent 25%, transparent 50%, #212121 50%, var(--emfe-w-color-white, #FFFFFF) 75%, transparent 75%, var(--emfe-w-color-white, #FFFFFF));
-    }
-    .OpenSeat, .ClosedSeat {
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      margin-right: 4px;
-      @media (min-width: 768px) {
-        width: 16px;
-        height: 16px;
-      }
-      @media (min-width: 1100px) {
-        width: 16px;
-        height: 16px;
-      }
-      svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  .OpenSeat {
-    animation: flip-closed-seat 2s both;
-    -webkit-animation: flip-closed-seat 2s both;
-    -webkit-backface-visibility: visible;
-    backface-visibility: visible;
-  }
-  .ClosedSeat {
-    animation: flip-open 2s both;
-    -webkit-animation: flip-open 2s both;
-    -webkit-backface-visibility: visible;
-    backface-visibility: visible;
-  }
-  .OpenSeat svg {
-    fill: transparent;
-    stroke: var(--emfe-w-color-white, #FFFFFF);
-  }
-  .ClosedSeat svg {
-    fill: var(--emfe-w-color-white, #FFFFFF);
-  }
-  .FullTable {
-    display: flex;
-    position: relative;
-    z-index: 10;
-    height: 20px;
-    padding: 1px 4px 1px 0;
-    align-items: center;
-    border-radius: 3px;
-    font-size: 12px;
-    white-space: normal;
-    text-transform: uppercase;
-    -webkit-animation-name: silde-in-from-left;
-    animation-name: silde-in-from-left;
-    -webkit-animation-duration: 1s;
-    animation-duration: 1s;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-    svg {
-      width: 100%;
-      height: 100%;
-      fill: var(--emfe-w-color-white, #FFFFFF);
-    }
-    &.ClosedSeat {
-      margin-right: -3px;
-    }
-  }
-  .PlayersDisplay {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    padding: 2px 10px;
-    background: linear-gradient(to bottom, rgba(33, 33, 33, .9) 0%, rgba(33, 33, 33, .1) 100%);
-    color: var(--emfe-w-color-white, #FFFFFF);
-    @media (min-width: 1100px) {
-      padding: 2px 16px;
-    }
-    .PlayersIcon {
-      width: 14px;
-      height: 14px;
-      margin-right: 4px;
-      //@media (min-width: 1100px) {
-      //  width: 1.7rem;
-      //  height: 1.7rem;
-      //}
-      svg {
-        fill: var(--emfe-w-color-white, #FFFFFF);
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-  .ClosedGame {
-    opacity: 1;
-    z-index: 10;
-    padding: 8px 10px;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: 18px;
-    @media (min-width: 1100px) {
-      padding: 8px 16px;
-    }
-    span {
-      font-size: 18px;
-    }
-  }
-  .LiveLimits {
-    opacity: 1;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: 2px 20px 5px 20px;
-    background: var(--emfe-w-color-black, #000000);
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-weight: normal;
-    font-size: 12px;
-    @media (min-width: 1100px) {
-      padding: 2px 18px 5px 18px;
-    }
-    span {
-      font-size: 12px;
-    }
-  }
-  .Players {
-    display: inline-block;
-    width: 19px;
-    height: 19px;
-  }
-}
-</style>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import moment from 'moment';
+  import { onMount, tick } from "svelte";
+  import { isMobile, getDevice } from 'rvhelper';
+  import { _, addNewMessages } from './i18n';
+  import { GameThumbnailTranslations } from './translations';
+  import { currenciesSymbols } from './currency-symbols';
+
+  export let session:string = '';
+  export let userid:string = '';
+  export let lang:string = '';
+  export let clientstyling:string = ''
+  export let clientstylingurl:string = '';
+
+  export let favorites:string = '';
+  export let gamethumbnail:string = '';
+  export let gamename:string = '';
+  export let gamevendor:string = '';
+  export let gameid:string = '';
+  export let gameisnew:string = '';
+  export let gamepopularity:string = '';
+  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 = '';
+  export let gamepagemodalurl:string = 'false';
+
+  export let endpoint:string = '';
+
+  export let livelobbyendpoint:string = '';
+  export let connectlive:string = '';
+  export let visibilityconnect:string = '';
+
+  let isLoggedIn:boolean = false;
+  let sessionID:string;
+  let playerID:string;
+
+  let fav:boolean = false;
+  let hover:Boolean = false;
+  let loaded:boolean = false
+  let image:any;
+  let userAgent:any = window.navigator.userAgent;
+  let customStylingContainer:HTMLElement;
+
+  let livegamedata:any;
+  let liveLobbyConnection:EventSource;
+  let displaytype:string;
+  let starttime:any;
+  let timeformat = 'HH:mm';
+  let isopen:Boolean;
+  let betlimit:any = {};
+  let openhours:any;
+  let seats:any = [];
+  let currencySymbol:any='EUR';
+  let min:any;
+  let max:any;
+  let totalseats:any;
+  let currentoccupiedseats:any;
+  let currentroulettenumbers:any;
+  let currentdoubleballroulettenumbers:any;
+  let vendorcategory:any;
+  let isdouble:any;
+  let roulleteresults:any;
+  let roulettecontainerclassname:any;
+  let colorsourcearray:any;
+  let istablefull:boolean;
+  let oldistablefull:boolean;
+  let extraclassname:string='';
+  let roulletteref:any;
+  let dealername:string;
+  let numberofplayers:number;
+
+
+  const BLACKJACK = 'blackjack';
+  const ROULETTE = 'roulette';
+  const DOUBLE_ROULETTE = 'doubleballroulette';
+  const DEFAULT_BLACKJACK_TOTAL_SEATS = 7;
+  const blackjackcategory = [BLACKJACK];
+  const roulettecategory = [ROULETTE, DOUBLE_ROULETTE];
+  const DEFAULT_AMOUNT_SEPARATOR = ',';
+  const numberofdisplayedresults = 5;
+  export const MONEY_WHEEL_COLOR_MAP = {
+    '01': 'Yellow',
+    '02': 'Blue',
+    10: 'Green',
+    40: 'Red',
+    '05': 'Purple',
+    20: 'Orange',
+    X7: 'Gold',
+    X2: 'Gold',
+  };
+  export const ROULETTE_COLOR_MAP = {
+    1: 'Red',
+    3: 'Red',
+    5: 'Red',
+    7: 'Red',
+    9: 'Red',
+    12: 'Red',
+    14: 'Red',
+    16: 'Red',
+    18: 'Red',
+    19: 'Red',
+    21: 'Red',
+    23: 'Red',
+    25: 'Red',
+    27: 'Red',
+    30: 'Red',
+    32: 'Red',
+    34: 'Red',
+    36: 'Red',
+    2: 'Black',
+    4: 'Black',
+    6: 'Black',
+    8: 'Black',
+    10: 'Black',
+    11: 'Black',
+    13: 'Black',
+    15: 'Black',
+    17: 'Black',
+    20: 'Black',
+    22: 'Black',
+    24: 'Black',
+    26: 'Black',
+    28: 'Black',
+    29: 'Black',
+    31: 'Black',
+    33: 'Black',
+    35: 'Black',
+    0: 'Green',
+    '00': 'Green',
+  };
+
+  Object.keys(GameThumbnailTranslations).forEach((item:any):void => {
+    addNewMessages(item, GameThumbnailTranslations[item]);
+  });
+
+  const enter = () => {
+    hover = true;
+  }
+  const leave = () => {
+    hover = false;
+  }
+
+  const messageHandler = (e:any):void => {
+    if (e.data.type === `AddFavoriteThumbnail_${gameid}` && !showfavoredcategory) {
+      gamefavorite = true;
+    }
+
+    if (e.data.type === `RemoveFavoriteThumbnail_${gameid}` && !showfavoredcategory) {
+      gamefavorite = false;
+    }
+
+    if (e.data.type === 'UserSessionID') {
+      isLoggedIn = true;
+      sessionID = e.data.session;
+      playerID = e.data.userID;
+    }
+
+    if(e.data.type === 'CategoryUpdate') {
+      livegamedata = null;
+    }
+  }
+
+  const toggleGameFrame = (gameId:any):void => {
+    if (searchitem) {
+      window.postMessage({ type: 'SearchedItemClicked', gameId }, window.location.href);
+    }
+    if (!isMobile(userAgent)) {
+      window.postMessage({ type: 'OpenGameFrame', gameId, gamefunmode, gamepagemodalurl, isMobile: isMobile(userAgent)  }, window.location.href)
+    } else {
+      window.postMessage({ type: 'ShowGameModal', gameId, isMobile: isMobile(userAgent) }, window.location.href);
+    }
+  };
+
+
+  const toggleFavoriteGame = (id:any):void => {
+    let triggerFactor = "thumbnail";
+
+    if (gamefavorite) {
+      window.postMessage({ type: 'SetUnfavoredGame', id, triggerFactor }, window.location.href);
+    } else {
+      window.postMessage({ type: 'SetFavoredGame', id, triggerFactor }, window.location.href);
+    }
+  }
+
+  const gameTouch = ():void => {
+    window.postMessage({ type: 'GameHovered' }, window.location.href);
+  }
+
+  const gameTouchEnd = ():void => {
+    window.postMessage({ type: 'GameBlur' }, window.location.href);
+  }
+
+  const gameHover = ():void => {
+    window.postMessage({ type: 'GameHovered' }, window.location.href);
+  }
+
+  const gameBlur = ():void => {
+    window.postMessage({ type: 'GameBlur' }, window.location.href);
+  }
+
+  const setActiveLanguage = ():void => {
+    // Not needed yet
+    // setLocale(lang);
+  }
+
+  const setSession = ():void => {
+    isLoggedIn = true;
+    sessionID = session;
+    playerID = userid;
+  }
+
+  const setOnLoad = ():void => {
+    if (image) {
+      image.onload = () => {
+        loaded = true;
+      }
+    }
+  }
+
+  const getLiveLobbyURL = (vendorName, id) => {
+    return `${endpoint}/encoder/lobby/updates/${vendorName}/${id}`;
+  }
+  const connectGameToLiveLobby = () => {
+    if (livelobbyendpoint && EventSource && !liveLobbyConnection) {
+        if (gamevendor && gameid) {
+        liveLobbyConnection = new EventSource(getLiveLobbyURL(gamevendor, gameid)),
+        liveLobbyConnection.addEventListener('message', liveLobbyMessageHandler);
+      }
+    }
+  }
+  const disconnectGameFromLiveLobby = () => {
+    if (liveLobbyConnection) {
+      liveLobbyConnection.close();
+      liveLobbyConnection = undefined;
+    }
+  }
+
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+
+    sheet.innerHTML = clientstyling;
+
+    setTimeout(() => { customStylingContainer.appendChild(sheet);});
+  }
+
+  const setFavorites = ():void => {
+    if (favorites == 'true') {
+      fav = true;
+    }
+  }
+
+  const setClientStylingURL = ():void => {
+    let url:URL = new URL(clientstylingurl);
+
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(url.href)
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile); });
+      });
+  }
+
+  const liveLobbyMessageHandler = async (event) => {
+    const { type, data: rawData } = event;
+    let data;
+    switch (type) {
+      case 'message': {
+        if (rawData) {
+          try {
+            data = JSON.parse(rawData);
+          } catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('MESSAGE PARSING ERROR: ', err);
+          }
+        }
+        if (data) {
+          const {
+            InternalTableId,
+            MessageType,
+            // TakenSeats,
+            Results,
+            // Roads, // for baccarat
+            Seats,
+            Open,
+          } = data;
+          if (InternalTableId) {
+            switch (MessageType) {
+              case 'SeatsUpdated': {
+                if (Seats && Array.isArray(Seats)) {
+                  currentoccupiedseats = Seats;
+                  livegamedata.currentOccupiedSeats = Seats;
+                  await tick();
+                }
+                break;
+              }
+              case 'RouletteResultsUpdated': {
+                if (Results && Array.isArray(Results)) {
+                  currentroulettenumbers = Results;
+                  livegamedata.currentRouletteNumbers = Results;
+                  await tick();
+                }
+                break;
+              }
+              case 'DoubleBallRouletteResultsUpdated': {
+                if (Results && Array.isArray(Results)) {
+                  currentdoubleballroulettenumbers = Results;
+                  livegamedata.currentDoubleBallRouletteNumbers = Results;
+                  await tick();
+                }
+                break;
+              }
+              case 'TableOpened': {
+                isopen = Open;
+                livegamedata.isOpen = Open;
+                await tick();
+                break;
+              }
+              case 'TableClosed': {
+                isopen = Open;
+                livegamedata.isOpen = Open;
+                await tick();
+                break;
+              }
+              default: {
+                // default case
+              }
+            }
+          }
+        }
+      }
+      default: {
+        // default case
+      }
+    }
+  }
+
+  const setLiveLobbyData = () => {
+    let url:any = new URL(`${livelobbyendpoint.split('?')[0]}`);
+    url.searchParams.append("platform", getDevice(userAgent));
+    url.searchParams.append('language', lang);
+    fetch(url)
+      .then((res:any) => res.json())
+      .then((data:any) => {
+        const { details } = data[0];
+        livegamedata = details;
+      });
+  }
+  const numberWithSeparators = (value, sep = DEFAULT_AMOUNT_SEPARATOR) => {
+    if (value !== undefined && value !== null) {
+      return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, sep);
+    }
+    return '';
+  }
+  const contains = (array, value) => {
+    return array.some(item => item === value);
+  }
+  const getGameComponent = (livegamedata) => {
+    let GameComponent = null;
+    if (livegamedata) {
+      const { vendorCategory } = livegamedata;
+      if (vendorCategory) {
+        const gameTypeToLower = vendorCategory.toLowerCase();
+        if (contains(blackjackcategory, gameTypeToLower)) {
+          GameComponent = BLACKJACK;
+        } else if (contains(roulettecategory, gameTypeToLower)) {
+          GameComponent = ROULETTE;
+        }
+        // else if (contains(baccaratCategory, gameTypeToLower)) {
+        //   GameComponent = 'baccarat';
+        // } else if (contains(otherLiveGamesCategory, gameTypeToLower)) {
+        //   GameComponent = 'poker';
+        // }
+      }
+    }
+    return GameComponent;
+  };
+  const renderBetLimits = (min, max, currencySymbol) => {
+    let rightSideContent;
+    let leftSideContent;
+    if (min !== undefined && min !== null && max !== undefined && max !== null) {
+      leftSideContent = `
+        <span>
+          ${currencySymbol}
+        </span>
+        ${
+          numberWithSeparators(min)
+        }-${
+          numberWithSeparators(max)
+        }`;
+    }
+    if (numberofplayers) {
+      rightSideContent = `
+        <svg fill="white" width="13" height="13" viewBox="0 0 13 14" xmlns="http://www.w3.org/2000/svg"><path d="M4 8.2a4.6 4.6 0 0 0 5 0c2.7.8 4 2.6 4 4.8H0c0-2.2 1.3-4 4-4.8zM6.6 8c2 0 3.8-1.7 3.8-4 0-2.1-1.7-4-3.8-4a3.9 3.9 0 0 0-3.8 4c0 2.2 1.7 4 3.8 4z"/></svg>
+        <span class="NrOfPlayers">${numberofplayers}</span>`;
+    }
+    if (!rightSideContent && !leftSideContent) {
+      return '';
+    }
+    return `
+      <p class="LiveLimits">
+        <span class="BetLimitLeft">
+          ${leftSideContent || ''}
+        </span>
+        <span class="BetLimitRight">
+          ${rightSideContent || ''}
+        </span>
+      </p>`;
+  }
+  const renderDealerName = (dealername) => {
+    if (!dealername) {
+      return '';
+    }
+    return `
+      <p class="LiveLimits">
+        <span class="DealerName">${$_('gameThumbnail.dealer')}: ${dealername}</span>
+      </p>
+    `;
+  }
+  const createDisplayData = (livegamedata) => {
+    totalseats = livegamedata.totalSeats || DEFAULT_BLACKJACK_TOTAL_SEATS;
+    currentoccupiedseats = livegamedata.currentOccupiedSeats || [];
+    const seats = [];
+    for (let i = 1; i <= totalseats; i++) {
+      seats.push(i);
+    }
+    return { seats };
+  }
+  const renderSpan = (selectedClass, key, value, colorClass = '') => {
+    const rouletteItemClassname = `${selectedClass} ${colorClass}`;
+    const firstMatch = key.toString().match(/first0|second0|0/g);
+    if (key === 0 || (firstMatch && firstMatch.length !== 0)) {
+      return `
+        <span
+          id=${key}
+          class="${rouletteItemClassname}"
+        >
+          ${value}
+        </span>
+      `;
+    }
+    return `
+      <span id=${key} class="${rouletteItemClassname}">
+        ${value}
+      </span>
+    `;
+  }
+
+  const attachAnimations = () => {
+    const animatedClassName = 'FirstElementAnimated';
+    const firstElem = roulletteref.getElementsByClassName('First')[0];
+    if (firstElem) {
+      firstElem.classList.add(animatedClassName);
+      setTimeout(() => {
+        firstElem.classList.remove(animatedClassName);
+      }, 2000);
+    }
+  }
+  const updateComponent = () => {
+    if (livegamedata) {
+      isopen = livegamedata.isOpen;
+      betlimit = livegamedata.betLimit || {};
+      openhours = livegamedata.openHours;
+      seats = createDisplayData(livegamedata).seats;
+      if (openhours && openhours.value) {
+        const { value: { startTime: starttimeRaw /* , timeFormat: timeFormatRaw */, originalTimeFormat } } = openhours;
+        starttime = starttimeRaw;
+        timeformat = originalTimeFormat || timeformat;
+      }
+      if (isopen) {
+        displaytype = getGameComponent(livegamedata);
+      }
+      currencySymbol = currenciesSymbols[currency];
+      min = (betlimit.min || {})[currency];
+      max = (betlimit.max || {})[currency];
+      currentroulettenumbers = livegamedata.currentRouletteNumbers;
+      currentdoubleballroulettenumbers = livegamedata.currentDoubleBallRouletteNumbers;
+      vendorcategory = livegamedata.vendorCategory;
+      isdouble = vendorcategory.toLowerCase() === DOUBLE_ROULETTE;
+      roulleteresults = (isdouble ? currentdoubleballroulettenumbers : currentroulettenumbers) || [];
+      roulettecontainerclassname = 'GameProp LiveProps RoulleteProps';
+      roulettecontainerclassname += isdouble ? ' Double' : '';
+      colorsourcearray = contains(roulettecategory, vendorcategory.toLowerCase()) ? ROULETTE_COLOR_MAP : MONEY_WHEEL_COLOR_MAP;
+      oldistablefull = istablefull;
+      istablefull = Array.isArray(currentoccupiedseats) && currentoccupiedseats.length === totalseats;
+      if (livegamedata.dealer) {
+        dealername = livegamedata.dealer.DealerName;
+      }
+      numberofplayers = livegamedata.numberOfPlayers;
+      extraclassname = 'ListGame';
+      if(livegamedata.isOpen && livegamedata.currentRouletteNumbers) {
+        extraclassname += ' GameBackdrop';
+      }
+      if (isopen && istablefull && min && max && livegamedata.currentOccupiedSeats) {
+        extraclassname += ' GameContainerDimmed';
+      } else {
+        if (isopen === false && starttime) {
+          extraclassname += ' GameContainerFullyDimmed';
+        }
+      }
+      if (customStylingContainer) {
+        if (!oldistablefull && istablefull) {
+          extraclassname += ' PulsatingRedShadow';
+          extraclassname = extraclassname.replace(' PulsatingGreenShadow', '');
+        } else if (oldistablefull && !istablefull) {
+          extraclassname += ' PulsatingGreenShadow';
+          extraclassname = extraclassname.replace(' PulsatingRedShadow', '');
+        }
+      }
+    }
+  }
+  const toggleConnect = ():void => {
+    if (connectlive === 'disconnect') {
+      disconnectGameFromLiveLobby();
+    } else if (connectlive === 'connect') {
+      connectGameToLiveLobby();
+    }
+  }
+  const toggleVisibilityConnect = ():void => {
+    if (visibilityconnect === 'disconnect') {
+      disconnectGameFromLiveLobby();
+    } else if (visibilityconnect === 'connect' && connectlive === 'connect') {
+      connectGameToLiveLobby();
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+      if (liveLobbyConnection) {
+        liveLobbyConnection.removeEventListener('message', liveLobbyMessageHandler);
+      }
+    }
+  });
+
+  $: connectlive && toggleConnect();
+  $: visibilityconnect && toggleVisibilityConnect();
+  $: lang && setActiveLanguage();
+  $: session && userid && endpoint && setSession();
+  $: gamethumbnail && setOnLoad();
+  $: clientstyling && setClientStyling();
+  $: favorites && setFavorites();
+  $: gamecellsize && clientstylingurl && setClientStylingURL();
+  $: endpoint && livelobbyendpoint && setLiveLobbyData();
+  $: livegamedata && updateComponent();
+  $: roulletteref && roulleteresults && attachAnimations();
+</script>
+
+<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:touchend={gameTouchEnd}>
+    <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}
+          {#if !isMobile(userAgent) && !gamefavorite && isLoggedIn}
+            <div class="FavIconContainer" part="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
+              <svg version="1.1" class="UnfavoredIcon" part="UnfavoredIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
+          viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"><path style="fill: white" d="M511.266,197.256c-1.764-5.431-6.458-9.388-12.108-10.209l-158.722-23.065L269.452,20.155
+              c-2.527-5.12-7.741-8.361-13.451-8.361c-5.709,0-10.924,3.242-13.451,8.361l-70.988,143.828L12.843,187.047
+              c-5.65,0.821-10.344,4.779-12.108,10.209c-1.765,5.43-0.293,11.391,3.795,15.376l114.848,111.955L92.27,482.67
+              c-0.965,5.627,1.349,11.315,5.968,14.67c4.618,3.355,10.74,3.798,15.797,1.142L256,423.846l141.961,74.637
+              c2.195,1.154,4.591,1.723,6.979,1.723c3.11,0,6.206-0.966,8.818-2.865c4.619-3.356,6.933-9.043,5.968-14.671L392.61,324.587
+              l114.86-111.954C511.559,208.647,513.031,202.686,511.266,197.256z M366.023,308.608c-3.536,3.446-5.15,8.412-4.314,13.278
+              l23.311,135.898l-122.038-64.162c-4.37-2.297-9.591-2.297-13.961,0l-122.045,64.163l23.304-135.9
+              c0.834-4.866-0.779-9.83-4.313-13.276l-98.731-96.244l136.445-19.829c4.886-0.71,9.108-3.778,11.294-8.205L256,60.685
+              l61.023,123.645c2.186,4.427,6.408,7.496,11.294,8.206l136.447,19.828L366.023,308.608z"/></svg>
+            </div>
+          {/if}
+        {/if}
+        <p class="GameInfoName" part="GameInfoName" title="{gamename}">{gamename}</p>
+        <button class="GameInfoBtn" part="GameInfoBtn" on:click="{() => toggleGameFrame(gameid)}">{$_('gameThumbnail.playNow')}</button>
+      </div>
+      <span class="GameInfoVendor" part="GameInfoVendor">
+        { gamevendor ? gamevendor : '-'}
+      </span>
+    </div>
+    {#if !isMobile(userAgent) && gamefavorite && isLoggedIn && favorites}
+      <div class="FavIconContainer" part="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
+        <svg version="1.1" class="FavoredIcon" part="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: white" 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" part="FavIconContainer">
+        <svg version="1.1" class="FavoredIcon" part="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: white" 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" part="GameExtraInfo">
+      {#if gameisnew}
+        <span class="GameExtraInfoLabel NewGameTag" part="GameExtraInfoLabel NewGameTag">{$_('gameThumbnail.new')}</span>
+      {/if}
+      {#if (parseInt(gamepopularity) > 0)}
+        <span class="GameExtraInfoLabel PopularGameTag" part="GameExtraInfoLabel PopularGameTag">{$_('gameThumbnail.hot')}</span>
+      {/if}
+      {#if livegamedata}
+        {#if !isopen && starttime && timeformat}
+          <div class="GameProp LiveProps" part="GameProp LiveProps">
+            <div class="ClosedGame" part="ClosedGame">
+              {$_('gameThumbnail.opens')}
+              <span>
+                {moment.utc(starttime).local().format(timeformat)}
+              </span>
+            </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" part="LiveIcons">
+              {#if istablefull}
+                <span class="FullTable" part="FullTable">
+                  {$_('gameThumbnail.full')}
+                </span>
+              {:else}
+                {#each seats as seatData}
+                  <span class={contains(currentoccupiedseats, seatData.toString()) ? 'ClosedSeat' : 'OpenSeat'} part={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>
+        {:else if isopen && displaytype && displaytype === ROULETTE}
+          <div class="{roulettecontainerclassname}" part="{roulettecontainerclassname}">
+            <div class="LiveIcons" part="LiveIcons" bind:this={roulletteref}>
+              {#each new Array(numberofdisplayedresults) as garbage, i}
+                {#if roulleteresults && roulleteresults[i]}
+                  {#if isdouble}
+                    <div class="Double" part="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}
+              {/each}
+            </div>
+            {@html renderDealerName(dealername)}
+            {@html renderBetLimits(min, max, currencySymbol)}
+          </div>
+        {/if}
+      {/if}
+    </div>
+  </div>
+  {#if showgamename}
+    <p class="GameNameBelow" part="GameNameBelow" title="{gamename}">{gamename}</p>
+  {/if}
+</div>
+
+
+<style lang="scss">
+
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  *, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .GameContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .GameInnerContainer {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: 5px;
+    .GameBg {
+      width: 100%;
+      height: 100%;
+      object-fit: unset;
+      transition: all 150ms ease-in-out;
+      &.GameBg-1x2,
+      &.GameBg-2x1,
+      &.GameBg-2x2 { object-fit: cover; }
+    }
+
+    .GameInfoWrapper {
+      display: none;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: rgba(0, 0, 0, .65);
+      z-index: 15;
+
+      .GameInfo {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        &Name {
+          color: white;
+          margin-bottom: 10px;
+          text-align: center;
+          font-size: 14px;
+        }
+
+        &Btn {
+          appearance: none;
+          padding: 6px;
+          background: var(--emfe-w-color-primary, #D0046C);
+          color: var(--emfe-w-color-primary-50, #FBECF4);
+          font-size: 16px;
+          border: 2px solid var(--emfe-w-color-primary-600, #99034F);
+          border-radius: 5px;
+          cursor: pointer;
+          transition: border 150ms ease-in-out;
+
+          &:hover {
+            border: 2px solid var(--emfe-w-color-primary-100, #F1BED9);
+          }
+        }
+      }
+
+      .GameInfoVendor {
+        display: block;
+        position: absolute;
+        bottom: 8px;
+        right: 8px;
+        color: white;
+        font-size: 12px;
+        font-weight: normal;
+      }
+    }
+
+    &:hover {
+      cursor: pointer;
+
+      .GameInfoWrapper{
+        display: block;
+      }
+
+      .GameBg {
+        filter: blur(5px) grayscale(1);
+      }
+    }
+
+    .GameExtraInfo {
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 8px;
+      left: 8px;
+      z-index: 0;
+      &Label {
+        font-size: 11px;
+        padding: 3px;
+        background-color: var(--emfe-w-color-primary, #D0046C);
+        color: var(--emfe-w-color-primary-50, #FBECF4);
+        font-weight: bold;
+        text-transform: uppercase;
+        border-radius: 5px;
+      }
+    }
+  }
+
+  .GameNameBelow {
+    color: var(--emfe-w-color-white, #FFFFFF);
+    position: relative;
+    bottom: -5px;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .FavoredIcon, .UnfavoredIcon {
+    width: 20px;
+    height: 20px;
+  }
+  .FavIconContainer {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    z-index: 15;
+  }
+
+  // LIVE LOBBY DATA STYLING
+  .GamesWrapper .ListGame:hover .GamePlayNowText {
+    @media (min-width: 1100px) {
+      z-index: 4;
+    }
+  }
+  // dim the game that doesn't have open seats or table is full
+  .ListGame:hover, .ListGame:active {
+    .OpenSeat, .ClosedSeat, .LiveLimits, .LatestResult, .FullTable {
+      opacity: .2;
+    }
+  }
+  // fix for displaying live game thumbnails that don't have details without backdrop
+  .ListGame.GameBackdrop {
+    .GameInnerContainer  {
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background: linear-gradient(0deg, rgba(0,0,0,1) 15%, rgba(0,0,0,0) 100%);
+      }
+    }
+  }
+
+  .ListGame .GameInnerContainer {
+    z-index: 0;
+
+    .GameBg {
+      z-index: 5;
+    }
+
+    .GameExtraInfo {
+      z-index: 10;
+    }
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+
+    &.GameInnerContainerUnavailable {
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background: rgba(0,0,0,0.9);
+      }
+    }
+
+    .ListGame.GameContainerDimmed:before {
+      display: block;
+      content: ' ';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 5;
+      background: rgba(0,0,0, .4);
+      color: var(--emfe-w-color-white, #FFFFFF);
+      fill: var(--emfe-w-color-white, #FFFFFF);
+      opacity: 1;
+      border-radius: 4px;
+    }
+
+    .ListGame.GameContainerFullyDimmed:before {
+      display: block;
+      content: ' ';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 5;
+      background: rgba(0,0,0, .8);
+      color: var(--emfe-w-color-white, #FFFFFF);
+      fill: var(--emfe-w-color-white, #FFFFFF);
+      opacity: 1;
+      border-radius: 4px;
+    }
+
+    .LiveProps {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      bottom: 8px;
+      left: -8px;
+      right: 0;
+      width: 100%;
+      padding: 0;
+      background: linear-gradient(to top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.3) 80%, rgba(0,0,0,.99) 100%);
+      color: var(--emfe-w-color-white, #FFFFFF);
+      opacity: 1;
+      font-size: 14px;
+    }
+
+    .ListGame:hover .LiveProps,
+    .ListGameLink:hover .LiveProps {
+      opacity: 0;
+    }
+    //--------------------------------------LIVE LOBBY ANIMATIONS------------------------------------------
+    // Pulsating animations
+    @keyframes red-pulse {
+      0% {
+        box-shadow: 0 0 2px 0 rgba(red, 0.75);
+      }
+
+      15% {
+        box-shadow: 0 0 10px 2px rgba(red, 0.75);
+      }
+
+      30% {
+        box-shadow: 0 0 2px 0 rgba(red, 0.75);
+      }
+
+      50% {
+        box-shadow: 0 0 10px 2px rgba(red, 0.75);
+      }
+
+      65% {
+        box-shadow: 0 0 2px 0 rgba(red, 0.75);
+      }
+
+      80% {
+        box-shadow: 0 0 10px 2px rgba(red, 0.75);
+      }
+
+      100% {
+        box-shadow: 0 0 0 0 rgba(red, 0.75);
+      }
+    }
+
+    @keyframes green-pulse {
+      0% {
+        box-shadow: 0 0 2px 0 rgba(#56A80A, 0.75);
+      }
+
+      15% {
+        box-shadow: 0 0 10px 2px rgba(#56A80A, 0.75);
+      }
+
+      30% {
+        box-shadow: 0 0 2px 0 rgba(#56A80A, 0.75);
+      }
+
+      50% {
+        box-shadow: 0 0 10px 2px rgba(#56A80A, 0.75);
+      }
+
+      65% {
+        box-shadow: 0 0 2px 0 rgba(#56A80A, 0.75);
+      }
+
+      80% {
+        box-shadow: 0 0 10px 2px rgba(#56A80A, 0.75);
+      }
+
+      100% {
+        box-shadow: 0 0 0 0 rgba(#56A80A, 0.75);
+      }
+    }
+    // Flip animation
+    @keyframes flip-open {
+      0% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+        -webkit-transition-timing-function: ease-in;
+        transition-timing-function: ease-in;
+        opacity: 0;
+      }
+      40% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+        -webkit-transition-timing-function: ease-in;
+        transition-timing-function: ease-in;
+      }
+      60% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+        opacity: 1;
+      }
+      80% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+      }
+      100% {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+      }
+    }
+
+    .silde-in-from-left {
+      -webkit-animation-name: silde-in-from-left;
+      animation-name: silde-in-from-left;
+      -webkit-animation-duration: 1s;
+      animation-duration: 1s;
+      -webkit-animation-fill-mode: both;
+      animation-fill-mode: both;
+    }
+    @-webkit-keyframes silde-in-from-left {
+      0% {
+        -webkit-transform: translateX(-100%);
+        transform: translateX(-100%);
+        visibility: visible;
+      }
+      100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+      }
+    }
+    @keyframes silde-in-from-left {
+      0% {
+        -webkit-transform: translateX(-100%);
+        transform: translateX(-100%);
+        visibility: visible;
+      }
+      100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+      }
+    }
+
+    @keyframes flip-closed-seat {
+      0% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+        -webkit-transition-timing-function: ease-in;
+        transition-timing-function: ease-in;
+        opacity: 0;
+      }
+      40% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+        -webkit-transition-timing-function: ease-in;
+        transition-timing-function: ease-in;
+      }
+      60% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+        opacity: 1;
+      }
+      80% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+      }
+      100% {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+      }
+    }
+
+    // .Page-LiveCasino .GamesListContainer,
+    // .Page-LiveCasino-Child .GamesListContainer,
+    // .Page-LiveCasino .OperatorSticky .GamesListContainer,
+    // .Page-LiveCasino .CasinoGames .GamesListContainer,
+    // .Page-Live-casinoSource .GamesListContainer,
+    // .Page-Live-casinoSource .GamesListContainer,
+    // .Page-Live-casinoSource .OperatorSticky .GamesListContainer,
+    // .Page-Live-casinoSource .CasinoGames .GamesListContainer {
+    //   overflow: visible;
+    // }
+
+    .ListGame.PulsatingGreenShadow, .ListGame.PulsatingRedShadow {
+      overflow: auto;
+    }
+
+    .ListGame.PulsatingGreenShadow {
+      animation: green-pulse 2s linear;
+    }
+
+    .ListGame.PulsatingRedShadow {
+      animation: red-pulse 2s linear;
+    }
+
+    .LiveIcons {
+      position: relative;
+      display: flex;
+      padding: 0 16px;
+      // flex-wrap: wrap;
+      box-sizing: border-box;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      min-height: auto;
+      margin-bottom: 5px;
+      @media (min-width: 1100px) {
+        min-height: auto;
+      }
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &.Black, &.Red, &.Green {
+        color: var(--emfe-w-color-white, #FFFFFF);
+        border: 1px solid var(--emfe-w-color-white, #FFFFFF);
+      }
+
+      .LatestResult {
+        min-width: 12px;
+        padding: 2px;
+        margin: 0 1px;
+        margin-right: 6px;
+        font-size: 14px;
+        text-align: center;
+        @media (min-width: 1100px) {
+          min-width: 12px;
+          font-size: 14px;
+          margin: 0 2px;
+          margin-right: 5px;
+          padding: 2px;
+        }
+
+        &.FirstElementAnimated {
+          animation: flip-open 2s both;
+          -webkit-animation: flip-open 2s both;
+          -webkit-backface-visibility: visible;
+          backface-visibility: visible;
+        }
+
+        &.First {
+          min-width: 24px;
+          &.Black, &.Red, &.Green {
+            color: var(--emfe-w-color-white, #FFFFFF);
+            border: 1px solid var(--emfe-w-color-white, #FFFFFF);
+          }
+          &.Black {
+            background: var(--emfe-w-color-black, #000000)
+          }
+          &.Red {
+            background: red;
+          }
+          &.Green {
+            background: #56A80A;
+          }
+          padding: 4px;
+          @media (min-width: 1100px) {
+            padding: 4px;
+          }
+        }
+      }
+
+      .Double {
+        display: flex;
+        flex-direction: column;
+
+        .LatestResult {
+          &:first-child {
+            margin-bottom: 10px;
+          }
+        }
+
+        &:first-child {
+          .LatestResult {
+            margin-left: 0;
+            margin-bottom: 0;
+          }
+        }
+
+        &:last-child {
+          .LatestResult {
+            margin-right: 0;
+          }
+        }
+      }
+
+      .Black, .Red, .Green {
+        background-color: transparent;
+      }
+
+      .Black {
+        color: var(--emfe-w-color-white, #FFFFFF);
+      }
+
+      .Red {
+        color: red;
+      }
+
+      .Green {
+        color: #56A80A;
+      }
+    }
+
+    .Blue {
+      color: #4d90a7;
+    }
+
+    .Red {
+      background-color: red;
+    }
+
+    .Black {
+      background-color: var(--emfe-w-color-black, #000000);
+    }
+
+    .Green {
+      background-color: #56A80A;
+    }
+
+    .White {
+      background-color: var(--emfe-w-color-white, #FFFFFF);
+    }
+
+    .Yellow {
+      background-color: #eeca3d;
+    }
+
+    .Gold {
+      background-color: darken(#eeca3d, 30%);
+    }
+
+    .Orange {
+      background-color: darken(#eeca3d, 40%);
+    }
+
+    .Purple {
+      background-color: darken(#f0f, 40%);
+    }
+
+    .Tie {
+      background-color: var(--emfe-w-color-white, #FFFFFF);
+      background-image: linear-gradient(135deg, var(--emfe-w-color-white, #FFFFFF) 25%, transparent 25%, transparent 50%, #212121 50%, var(--emfe-w-color-white, #FFFFFF) 75%, transparent 75%, var(--emfe-w-color-white, #FFFFFF));
+    }
+    .OpenSeat, .ClosedSeat {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      margin-right: 4px;
+      @media (min-width: 768px) {
+        width: 16px;
+        height: 16px;
+      }
+      @media (min-width: 1100px) {
+        width: 16px;
+        height: 16px;
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  .OpenSeat {
+    animation: flip-closed-seat 2s both;
+    -webkit-animation: flip-closed-seat 2s both;
+    -webkit-backface-visibility: visible;
+    backface-visibility: visible;
+  }
+  .ClosedSeat {
+    animation: flip-open 2s both;
+    -webkit-animation: flip-open 2s both;
+    -webkit-backface-visibility: visible;
+    backface-visibility: visible;
+  }
+  .OpenSeat svg {
+    fill: transparent;
+    stroke: var(--emfe-w-color-white, #FFFFFF);
+  }
+  .ClosedSeat svg {
+    fill: var(--emfe-w-color-white, #FFFFFF);
+  }
+  .FullTable {
+    display: flex;
+    position: relative;
+    z-index: 10;
+    height: 20px;
+    padding: 1px 4px 1px 0;
+    align-items: center;
+    border-radius: 3px;
+    font-size: 12px;
+    white-space: normal;
+    text-transform: uppercase;
+    -webkit-animation-name: silde-in-from-left;
+    animation-name: silde-in-from-left;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: var(--emfe-w-color-white, #FFFFFF);
+    }
+    &.ClosedSeat {
+      margin-right: -3px;
+    }
+  }
+  .PlayersDisplay {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 2px 10px;
+    background: linear-gradient(to bottom, rgba(33, 33, 33, .9) 0%, rgba(33, 33, 33, .1) 100%);
+    color: var(--emfe-w-color-white, #FFFFFF);
+    @media (min-width: 1100px) {
+      padding: 2px 16px;
+    }
+    .PlayersIcon {
+      width: 14px;
+      height: 14px;
+      margin-right: 4px;
+      //@media (min-width: 1100px) {
+      //  width: 1.7rem;
+      //  height: 1.7rem;
+      //}
+      svg {
+        fill: var(--emfe-w-color-white, #FFFFFF);
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .ClosedGame {
+    opacity: 1;
+    z-index: 10;
+    padding: 8px 10px;
+    color: var(--emfe-w-color-white, #FFFFFF);
+    font-size: 18px;
+    @media (min-width: 1100px) {
+      padding: 8px 16px;
+    }
+    span {
+      font-size: 18px;
+    }
+  }
+  .LiveLimits {
+    opacity: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 2px 20px 5px 20px;
+    background: var(--emfe-w-color-black, #000000);
+    color: var(--emfe-w-color-white, #FFFFFF);
+    font-weight: normal;
+    font-size: 12px;
+    @media (min-width: 1100px) {
+      padding: 2px 18px 5px 18px;
+    }
+    span {
+      font-size: 12px;
+    }
+  }
+  .Players {
+    display: inline-block;
+    width: 19px;
+    height: 19px;
+  }
+}
+</style>