@everymatrix/casino-game-thumbnail 0.0.232 → 0.0.236

package/src/CasinoGameThumbnail.svelte

@@ -1,10 +1,12 @@
 <svelte:options tag={null} />
 
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { isMobile, checkSession } from 'rvhelper';
+  import moment from 'moment';
+  import { onMount, tick } from "svelte";
+  import { isMobile, checkSession, getDevice } from 'rvhelper';
   import { _, addNewMessages } from './i18n';
   import { GameThumbnailTranslations } from './translations';
+  import { currenciesSymbols } from './currency-symbols';
 
   export let session:string = '';
   export let userid:string = '';
@@ -26,20 +28,121 @@
   export let showgamename:boolean = false;
   export let endpoint:string = '';
 
+  export let livelobbyendpoint:String = '';
+  export let currency:string='EUR';
+  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='TRY';
+  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;
@@ -113,6 +216,24 @@
     }
   }
 
+  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');
 
@@ -121,7 +242,6 @@
     setTimeout(() => { customStylingContainer.appendChild(sheet);});
   }
 
-
   const setFavorites = ():void => {
     if (favorites == 'true') {
       fav = true;
@@ -142,27 +262,295 @@
       });
   }
 
+  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 (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();
   $: clientstylingurl && setClientStylingURL();
+  $: endpoint && livelobbyendpoint && setLiveLobbyData();
+  $: livegamedata && updateComponent();
+  $: roulletteref && roulleteresults && attachAnimations();
 </script>
 
-<div class="GameContainer" bind:this={customStylingContainer}>
+<div class={`GameContainer ${extraclassname}`} bind:this={customStylingContainer}>
   <div class="GameInnerContainer" on:mouseenter={gameHover} on:mouseleave={gameBlur} on:touchstart={gameTouch} on:touchleave={gameTouchLeave}>
-    <img src={gamethumbnail} class="GameBg {loaded ? 'Loaded' : ''}"  alt="" bind:this={image} loading="lazy" />
+    <img src={gamethumbnail} class="GameBg {hover ? 'GameContainerHovered' : ''} {loaded ? 'Loaded' : ''}"  alt="" bind:this={image} loading="lazy" />
     <div class="GameInfoWrapper">
-      <div class="GameInfo">
+      <div class="GameInfo {hover ? 'GameHovered' : ''}">
         {#if fav}
           {#if !isMobile(userAgent) && !gamefavorite && isLoggedIn}
             <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
@@ -206,6 +594,61 @@
       {#if (parseInt(gamepopularity) > 0)}
         <span class="GameExtraInfoLabel PopularGameTag">{$_('gameThumbnail.hot')}</span>
       {/if}
+      {#if livegamedata}
+        {#if !isopen && starttime && timeformat}
+          <div class="GameProp LiveProps">
+            <div class="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">
+            <div class="LiveIcons">
+              {#if istablefull}
+                <span class="FullTable">
+                  {$_('gameThumbnail.full')}
+                </span>
+              {:else}
+                {#each seats as seatData}
+                  <span class={contains(currentoccupiedseats, seatData.toString()) ? 'ClosedSeat' : 'OpenSeat'}>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14">
+                      <path d="M11.58 6c-1.17 0-2.13.95-2.13 2.12v.4a8.82 8.82 0 00-2.92-.4c-1.54 0-2.45.22-2.92.4v-.4A2.136 2.136 0 001.48 6a1.33 1.33 0 00-.5 2.55c.14.07.24.21.24.37l.26 1.06c0 .96.73 1.75 1.65 1.85a.65.65 0 00.28 1.23.65.65 0 00.3-1.22h5.64a.65.65 0 00.3 1.22.65.65 0 00.28-1.23c.93-.1 1.65-.9 1.65-1.85l.27-1.06c0-.16.1-.3.24-.37A1.33 1.33 0 0011.58 6z"/>
+                      <path d="M4.34 7.5c.55-.1 1.27-.17 2.2-.17.91 0 1.63.07 2.18.17.21-.96.9-1.74 1.8-2.1V4a3.99 3.99 0 00-7.97 0v1.4c.9.36 1.58 1.14 1.79 2.1z"/>
+                    </svg>
+                  </span>
+                {/each}
+              {/if}
+            </div>
+            {@html renderDealerName(dealername)}
+            {@html renderBetLimits(min, max, currencySymbol)}
+          </div>
+        {:else if isopen && displaytype && displaytype === ROULETTE}
+          <div class="{roulettecontainerclassname}">
+            <div class="LiveIcons"  bind:this={roulletteref}>
+              {#each new Array(numberofdisplayedresults) as garbage, i}
+                {#if roulleteresults && roulleteresults[i]}
+                  {#if isdouble}
+                    <div class="Double">
+                      {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, `first${i}${roulleteresults[i][0]}`, roulleteresults[i][0], colorsourcearray[roulleteresults[i][0]])}
+                      {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, `second${i}${roulleteresults[i][1]}`, roulleteresults[i][1], colorsourcearray[roulleteresults[i][1]])}
+                    </div>
+                  {:else}
+                    {@html renderSpan(`LatestResult ${i === 0 ? 'First' : ''}`, i, roulleteresults[i], colorsourcearray[roulleteresults[i]])}
+                  {/if}
+                {/if}
+              {/each}
+            </div>
+            {@html renderDealerName(dealername)}
+            {@html renderBetLimits(min, max, currencySymbol)}
+          </div>
+        {/if}
+      {/if}
     </div>
   </div>
   {#if showgamename}
@@ -236,6 +679,7 @@
   .GameContainer {
     width: 100%;
     height: 100%;
+    position: relative;
   }
 
   .GameInnerContainer {
@@ -261,6 +705,7 @@
       bottom: 0;
       left: 0;
       background: rgba(0, 0, 0, .65);
+      z-index: 15;
 
       .GameInfo {
         display: flex;
@@ -320,9 +765,11 @@
     .GameExtraInfo {
       display: block;
       position: absolute;
+      width: 100%;
+      height: 100%;
       top: ttp(.5);
       left: ttp(.5);
-
+      z-index: 0;
       &Label {
         font-size: ttp(.7);
         padding: ttp(.2);
@@ -354,4 +801,546 @@
     right: 10px;
     cursor: pointer;
   }
+
+  // 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;
+    }
+  }
+
+  .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;
+      background: linear-gradient(0deg, rgba(0,0,0,1) 15%, rgba(0,0,0,0) 100%);
+    }
+
+    .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: ttp(.25);
+    }
+
+    .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: ttp(.25);
+    }
+
+    .LiveProps {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      bottom: ttp(.5);
+      left: ttp(-.5);
+      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: ttp(.875);
+    }
+
+    .ListGame:hover .LiveProps,
+    .ListGameLink:hover .LiveProps {
+      opacity: 0;
+    }
+    //--------------------------------------LIVE LOBBY ANIMATIONS------------------------------------------
+    // Pulsating animations
+    @keyframes red-pulse {
+      0% {
+        box-shadow: 0 0 ttp(.125) 0 rgba(red, 0.75);
+      }
+
+      15% {
+        box-shadow: 0 0 ttp(.625) ttp(.125) rgba(red, 0.75);
+      }
+
+      30% {
+        box-shadow: 0 0 ttp(.125) 0 rgba(red, 0.75);
+      }
+
+      50% {
+        box-shadow: 0 0 ttp(.625) ttp(.125) rgba(red, 0.75);
+      }
+
+      65% {
+        box-shadow: 0 0 ttp(.125) 0 rgba(red, 0.75);
+      }
+
+      80% {
+        box-shadow: 0 0 ttp(.625) ttp(.125) rgba(red, 0.75);
+      }
+
+      100% {
+        box-shadow: 0 0 0 0 rgba(red, 0.75);
+      }
+    }
+
+    @keyframes green-pulse {
+      0% {
+        box-shadow: 0 0 ttp(.125) 0 rgba(#56A80A, 0.75);
+      }
+
+      15% {
+        box-shadow: 0 0 ttp(.625) ttp(.125) rgba(#56A80A, 0.75);
+      }
+
+      30% {
+        box-shadow: 0 0 ttp(.125) 0 rgba(#56A80A, 0.75);
+      }
+
+      50% {
+        box-shadow: 0 0 ttp(.625) ttp(.125) rgba(#56A80A, 0.75);
+      }
+
+      65% {
+        box-shadow: 0 0 ttp(.125) 0 rgba(#56A80A, 0.75);
+      }
+
+      80% {
+        box-shadow: 0 0 ttp(.625) ttp(.125) 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 ttp(1);
+      // flex-wrap: wrap;
+      box-sizing: border-box;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      min-height: auto;
+      margin-bottom: ttp(.3125);
+      @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: ttp(.0625) solid var(--emfe-w-color-white, #FFFFFF);
+      }
+
+      .LatestResult {
+        min-width: ttp(.75);
+        padding: ttp(.1);
+        margin: 0 ttp(.0625);
+        margin-right: ttp(.4);
+        font-size: ttp(.875);
+        text-align: center;
+        @media (min-width: 1100px) {
+          min-width: ttp(.75);
+          font-size: ttp(.875);
+          margin: 0 ttp(.125);
+          margin-right: ttp(.3);
+          padding: ttp(.1);
+        }
+
+        &.FirstElementAnimated {
+          animation: flip-open 2s both;
+          -webkit-animation: flip-open 2s both;
+          -webkit-backface-visibility: visible;
+          backface-visibility: visible;
+        }
+
+        &.First {
+          min-width: ttp(1.5);
+          &.Black, &.Red, &.Green {
+            color: var(--emfe-w-color-white, #FFFFFF);
+            border: ttp(.0625) solid var(--emfe-w-color-white, #FFFFFF);
+          }
+          &.Black {
+            background: var(--emfe-w-color-black, #000000)
+          }
+          &.Red {
+            background: red;
+          }
+          &.Green {
+            background: #56A80A;
+          }
+          padding: ttp(.25);
+          @media (min-width: 1100px) {
+            padding: ttp(.25);
+          }
+        }
+      }
+
+      .Double {
+        display: flex;
+        flex-direction: column;
+
+        .LatestResult {
+          &:first-child {
+            margin-bottom: ttp(.625);
+          }
+        }
+
+        &: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: ttp(1);
+    height: ttp(1);
+    margin-right: ttp(.25);
+    @media (min-width: 768px) {
+      width: ttp(1);
+      height: ttp(1);
+    }
+    @media (min-width: 1100px) {
+      width: ttp(1);
+      height: ttp(1);
+    }
+    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: ttp(1.25);
+    padding: ttp(.0625) ttp(.25) ttp(.0625) 0;
+    align-items: center;
+    border-radius: ttp(.1875);
+    font-size: ttp(.625);
+    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: ttp(-.1875);
+    }
+  }
+  .PlayersDisplay {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: ttp(.125) ttp(.625);
+    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: ttp(.125) ttp(1);
+    }
+    .PlayersIcon {
+      width: ttp(.875);
+      height: ttp(.875);
+      margin-right: ttp(.25);
+      //@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: ttp(.5) ttp(.625);
+    color: var(--emfe-w-color-white, #FFFFFF);
+    font-size: ttp(1.125);
+    @media (min-width: 1100px) {
+      padding: ttp(.5) ttp(1);
+    }
+    span {
+      font-size: ttp(1.125);
+    }
+  }
+  .LiveLimits {
+    opacity: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: ttp(.125) ttp(1.25) ttp(.3125) ttp(1.25);
+    background: var(--emfe-w-color-black, #000000);
+    color: var(--emfe-w-color-white, #FFFFFF);
+    font-weight: normal;
+    font-size: ttp(.75);
+    @media (min-width: 1100px) {
+      padding: ttp(.125) ttp(1.25) ttp(.3125) ttp(1.25);
+    }
+    span {
+      font-size: ttp(.75);
+    }
+  }
+  .Players {
+    display: inline-block;
+    width: ttp(1.1875);
+    height: ttp(1.1875);
+  }
+}
 </style>