@everymatrix/casino-game-page 1.43.4 → 1.45.0

package/src/CasinoGamePage.svelte

@@ -1,1120 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { beforeUpdate, onMount } from "svelte";
-  import { isMobile, checkSession, getDevice } from 'rvhelper';
-  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import { TRANSLATIONS } from './translations';
-
-  import moment from 'moment';
-
-  export let endpoint:string = '';
-  export let lang:string = ''; // Language
-  export let session:string = ''; // Value for sessionID
-  export let userid:string = ''; // Value for UserID;
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  export let translationurl:string = '';
-  export let favorites:string = '';
-
-  export let loginurl:string = '';
-  export let registerurl:string = '';
-  export let depositurl:string = '';
-  export let loginevent:string = '';
-  export let registerevent:string = '';
-  export let depositevent:string = '';
-  export let shortcashierenabled: string = '';
-
-  export let clockformat:string = '';
-  export let haspanicbutton:string = 'false';
-  export let playforfun:string = 'true';
-  export let checksession:string = 'true';
-  export let integratedgameframedesktop:string = 'false';
-  export let integratedgameframemobile:string = 'false';
-  export let gameid:string = '';
-
-  let time:Object;
-  let iframe:any;
-
-  let isLoggedIn:boolean = false;
-  // should be true while we have userid/session props, but the async events which set isLoggedIn haven't completed
-  let determiningIsLoggedIn:boolean = false;
-  let isFavLoading:boolean = false;
-  let hasErrors:boolean = false;
-  let isLoading:boolean = true;
-
-  let playerID:string;
-  let sessionID:string;
-
-  let panicButton:HTMLElement;
-  let panicLoading:boolean = false;
-  let timer: number = 0;
-  let timerInterval:any;
-
-  let game:any;
-  let detailsObtained:boolean = false;
-  let funMode:boolean = false;
-  let anonymousFunMode:boolean = false;
-  let isModal:boolean = true;
-
-  let gameFrameContainer:HTMLElement;
-  let gameInnerContainer:HTMLElement;
-  let gamePageBackground:HTMLElement;
-  let isFullscreen:boolean = false;
-  let modalFrameWidth:number;
-  let modalFrameHeight:number;
-  let gameFrameWidth:number;
-  let gameFrameHeight:number;
-  let definitiveIframeWidth:string;
-  let definitiveIframeHeight:string;
-  let userAgent:any = window.navigator.userAgent;
-  let mobileView:boolean = false;
-  let favoriteGames: Array<Object> = [];
-  let listOfGamesIDs:Array<string> = [];
-  let customStylingContainer:HTMLElement;
-  let buttonsContainer:HTMLElement;
-  let timeContainer:HTMLElement;
-  let showModal:string = 'false';
-
-  let gameStyle = '';
-  let gameRationedHeight: number;
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  const setTranslationUrl = ():void => {
-    let url:string = translationurl;
-
-    fetch(url).then((res:any) => res.json())
-    .then((res) => {
-      Object.keys(res).forEach((item:any):void => {
-        addNewMessages(item, res[item]);
-      });
-    }).catch((err:any) => {
-      console.log(err);
-    });
-  }
-
-  Object.keys(TRANSLATIONS).forEach((item) => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  // @TODO game typescript model type
-  const formatGameLaunchUrl = (game:any):void => {
-    let url:URL = new URL(game.launchUrl);
-
-    url.searchParams.append('language', lang);
-    // @TODO wtf? session check or go home
-    // Maybe we should check if the session is valid, somehow?
-
-    if (sessionID && sessionID.length > 0) {
-      isLoggedIn = true;
-
-      url.searchParams.append('_sid', sessionID)
-      url.searchParams.append('funMode', 'false')
-    }
-
-    game.launchUrl = url;
-
-    return game;
-  }
-
-  const createGameURL = (gameId:string, modal?:boolean):void => {
-    let url:URL = new URL(`${endpoint}/v1/casino/games/${gameId}`);
-
-    url.searchParams.append('language', lang);
-    url.searchParams.append('expand', 'vendor');
-
-    isModal = modal || false;
-
-    fetch(url.href)
-      .then((res:any) => res.json())
-      .then((data:any) => {
-        game = formatGameLaunchUrl(data[0]);
-        isLoading = false;
-        if (game.launchUrl) {
-          game.isFavorite = setGameData(game, game.hasFunMode);
-          isFavLoading = false;
-        }
-      }, (err:any) => {
-        console.error('There was an error', err);
-        hasErrors = true;
-      }).then(() => {
-        if (gameFrameContainer) {
-          if (isModal) {
-            keepIframeRatio();
-          } else {
-            maximizeGameFrame();
-          }
-        }
-      }).finally(() => {
-        isLoading = false;
-      });
-    window.postMessage({ type: 'RequestModalSize' }, window.location.href);
-    getFavoritesGames(session, userid)
-  }
-
-  const addEventsToDisplayedElements = () => {
-      panicButton?.addEventListener("mousedown", startInterval, false);
-      panicButton?.addEventListener('touchstart', startInterval, false)
-
-      // on mouseup stop interval count
-      panicButton?.addEventListener("mouseup", endInterval, false);
-      panicButton?.addEventListener("touchend", endInterval, false);
-  }
-
-  const removeEventsToDisplayedElements = ():void => {
-    panicLoading = false;
-    panicButton?.removeEventListener("mousedown", startInterval);
-    panicButton?.removeEventListener('touchstart', startInterval)
-
-    // on mouseup stop interval count
-    panicButton?.removeEventListener("mouseup", endInterval);
-    panicButton?.removeEventListener("touchend", endInterval);
-  }
-
-  const messageHandler = (e:any):void => {
-    switch (e.data.type) {
-      case 'GameLaunchID':
-        createGameURL(e.data.gameId, true);
-        break;
-
-      case 'LaunchGameFrame':
-        openGameFrame(e.data.gameId, e.data.gameFunMode);
-      break;
-
-      case 'ModalClosed':
-        if (integratedgameframedesktop === 'true' || isMobile(userAgent)) {
-          // the timeout is necessary in order to sync with the closing of the modal frame and provide a smoother transition
-          showModal = 'false';
-
-          removeEventsToDisplayedElements();
-          if(isMobile(userAgent)) {
-            setTimeout(() => { detailsObtained = integratedgameframemobile === "true";}, 500);
-          } else {
-            setTimeout(() => { detailsObtained = integratedgameframedesktop === "true";}, 500);
-          }
-        }
-        else if (integratedgameframedesktop === 'false' && e.data?.closeIntegratedGameFrameDesktop !== true) {
-          window.postMessage({ type: 'DisableScroll'}, window.location.href);
-        }
-
-        break;
-
-      case 'UserSessionID':
-        if (e.data.session.length > 0) {
-          sessionID = e.data.session;
-          playerID = e.data.userID;
-          isLoggedIn = true;
-
-          let interval = setInterval(() => {
-            if (game) {
-              let url:any = new URL(game.launchUrl);
-
-              if (!url.searchParams.get('_sid')) {
-                url.searchParams.append('_sid', sessionID);
-              }
-
-              if (!url.searchParams.get('funMode')) {
-                url.searchParams.append('funMode', false);
-              }
-
-              if (!url.searchParams.get('_sid')) {
-                url.searchParams.append('language', lang);
-              }
-
-              game.launchUrl = url;
-
-              clearInterval(interval);
-            }
-          }, 250);
-        }
-        break;
-
-      case 'ModalSize':
-        modalFrameWidth = e.data.modalContainerSize.modalWidth;
-        modalFrameHeight = e.data.modalContainerSize.modalHeight;
-        break;
-    }
-  }
-
-  //Get favorites games list and update the favorites category
-  const getFavoritesGames = (sessionID:string, playerID:string) => {
-    let url = `${endpoint}/v1/player/${playerID}/favorites/`;
-
-    isLoading = true;
-    let options = {
-      method: "GET",
-      headers: {
-        'X-SessionID': sessionID,
-      }
-    };
-
-    return new Promise((resolve, reject) => {
-      fetch(url, options)
-        .then((res:any) => res.json())
-        .then((updatedArray:any) => {
-          isLoading = false;
-          favoriteGames = updatedArray.items;
-          if (favoriteGames) {
-            if (game && game.id) game.isFavorite = checkFavorite(game.id); isFavLoading = false;
-            favoriteGames.forEach((fav:any) => {
-              if (!listOfGamesIDs.includes(fav.id)) listOfGamesIDs.push(fav.id);
-            });
-          } else {
-            favoriteGames = [];
-          }
-        
-          resolve(favoriteGames);
-
-      }).catch((err:any) => {
-        console.error(err);
-
-        reject(err);
-      });
-    });
-  }
-
-  //Add / Remove favorites games
-  const toggleFavoriteGame = (id:any):void => {
-    if (game.isFavorite) {
-      removeFavoredGame(`${endpoint}/v1/player/${userid}/favorites`, session, game.id);
-    } else {
-      addFavoredGame(`${endpoint}/v1/player/${userid}/favorites`, session, game);
-    }
-  }
-
-  let addFavoredGame = async (url, sessionID, game) => {
-    // When adding new favored games, the api requires an array with all the current favored games due to the fact that it overwrites the old ones with the ones found in the body of the POST request
-    if (!listOfGamesIDs.includes(game.id)) listOfGamesIDs.push(game.id);
-
-    let data = {items: listOfGamesIDs};
-
-    let options = {
-      method: "POST",
-      headers: {
-        'X-SessionID': sessionID,
-        'Content-Type': 'application/json',
-        'Accept': 'application/json',
-      },
-      body: JSON.stringify(data)
-    };
-    
-    fetch(url, options)
-      .then((res:any) => res.json())
-      .then((res) => {
-        window.postMessage({ type: `AddFavoriteThumbnail_${game.id}` }, window.location.href);
-        //Make a get for a new list to update the view
-        window.postMessage({ type: 'UpdateFavoredList', url, sessionID});
-        if( res.items ) favoriteGames = res.items; game.isFavorite = checkFavorite(game.id);
-      })
-      .catch((err:any) => {
-        console.error('Err', err);
-    });
-  }
-
-  const removeFavoredGame = (url, sessionID, gameID) => {
-    let options = {
-        method: "DELETE",
-        headers: {
-          'X-SessionID': sessionID,
-        }
-    };
-
-    fetch(`${url}/${gameID}`, options)
-      .then((res:any) => res.json())
-      .then((res) => {
-        window.postMessage({ type: `RemoveFavoriteThumbnail_${gameID}` }, window.location.href);
-        //Make a get for a new list to update the view
-        window.postMessage({ type: 'UpdateFavoredList', url, sessionID});
-        if(res.items) favoriteGames = res.items; game.isFavorite = checkFavorite(game.id);
-      });
-
-    if (listOfGamesIDs.includes(gameID)) {
-      listOfGamesIDs =  listOfGamesIDs.filter(x => {
-        return x != gameID;
-      });
-    }
-  }
-
-  const checkFavorite = (gameId:string):boolean => {
-    return favoriteGames.findIndex(obj => obj.id == gameId) !== -1;
-  }
-
-  const setGameData = (game, gameFunMode) => {
-    anonymousFunMode = playforfun == 'true' ? game.hasAnonymousFunMode : false;
-    funMode = playforfun == 'true' ? gameFunMode : false;
-    detailsObtained = true;
-    return checkFavorite(game.id);
-  }
-
-  const openGameFrame = (gameId:string, gameFunMode:boolean):void => {
-    let url:URL = new URL(`${endpoint}/v1/casino/games/${gameId}`);
-    url.searchParams.append('language', lang);
-    fetch(url.href)
-      .then((res:any) => res.json())
-      .then((data:any) => {
-        game = formatGameLaunchUrl(data[0]);
-        isLoading = false;
-        if (game.launchUrl) {
-          game.isFavorite = setGameData(game, gameFunMode);
-          isFavLoading = false;
-        }
-      }).finally(() => {
-        isLoading = false;
-      });;
-  }
-
-  const resizeIframeIfNotVisible = (): void => {
-    if (isFullscreen) return;
-
-    const resizeCallback = (entries, observer): void => {
-      const maxIntersectionRatio = 0.5;
-      const intersectionRatio = entries[0].intersectionRatio;
-      const isIntersecting = entries[0].isIntersecting;
-      const gameFrameContainerHeight = parseInt(
-        getComputedStyle(gameFrameContainer).height
-      );
-
-      if (!gameRationedHeight)
-        gameRationedHeight =
-          gameFrameContainerHeight *
-          Math.max(intersectionRatio, maxIntersectionRatio);
-
-      gameFrameContainer.style.height = `${gameRationedHeight}px`;
-      gameInnerContainer.style.height = `${gameRationedHeight}px`;
-
-      if(isIntersecting){
-        gamePageBackground.style.height = `${gameFrameContainer.style.height}px`;
-      }
-
-      observer.unobserve(gameFrameContainer);
-    };
-
-    const options = {
-      threshold: 0,
-    };
-
-    const observer = new IntersectionObserver(resizeCallback, options);
-    observer.observe(gameFrameContainer);
-  };
-
-  const maximizeGameFrame = ():void => {
-    modalFrameWidth = game.width;
-    modalFrameHeight = game.height;
-
-    definitiveIframeWidth = `${game.width}px`;
-    definitiveIframeHeight = `${game.height}px`;
-
-    gameFrameWidth = game.width;
-    gameFrameHeight = game.height;
-
-    keepIframeRatio();
-  }
-
-  // Start section: keep aspect ratio for iframe on resize
-  const keepIframeRatio = ():void => {
-    let iframeContainer = getComputedStyle(gameFrameContainer);
-    let gameFrame = getComputedStyle(gameInnerContainer);
-    let gameContainerWidth = parseInt(iframeContainer.width.slice(0, -2));
-    let gameContainerHeight = parseInt(iframeContainer.height.slice(0, -2));
-    const iframeRatio = game.width/(game.height + 100);
-
-
-    gameFrameWidth = parseInt(game.width) * iframeRatio;
-    gameFrameHeight = parseInt(game.height);
-
-    definitiveIframeWidth = gameFrameWidth ? `${Math.floor(gameFrameWidth)}px` : "1280px";
-    definitiveIframeHeight = gameFrameHeight ? `${Math.floor(gameFrameHeight)}px` : "720px";
-
-    calculateFrameProportions();
-  }
-
-  const openGameWindow = (game:any):void => {
-    isMobile(userAgent) ? determineGameFrameState(integratedgameframemobile) : determineGameFrameState(integratedgameframedesktop);
-  }
-
-  const determineGameFrameState = (gameState:string):void => {
-    if(gameState == 'false') {
-      window.open(game.launchUrl, '_blank');
-    } else if(gameState == 'true') {
-      window.postMessage({ type: 'OpenIntegratedGameFrame', subVendor: game.subVendor, gameId: game.id, launchUrl: game.launchUrl?.href }, window.location.href);
-    }
-  }
-
-  const resizeHandler = ():void => {
-    // sent to modal component a flag (detailsObtained) by witch to determine if a game is open
-    window.postMessage({ type: 'GameStateOnResize', detailsObtained }, window.location.href);
-    // make sure that a game is open before trying to get the element properties
-    if (detailsObtained) {
-      if (gameFrameContainer) {
-        keepIframeRatio();
-      }
-      window.addEventListener('ModalSize', messageHandler, false);
-    }
-  }
-
-  // End section: keep aspect ratio for iframe on resize
-  const toggleLogin = ():void => {
-    if (loginevent) {
-      if (isMobile(userAgent)) {
-        window.postMessage({ type: 'ModalClosed' }, window.location.href);
-      }
-      window.postMessage({ type: loginevent, transition: 'Login' }, window.location.href);
-    }
-
-    if (loginurl) {
-      // @ts-ignore
-      window.location = loginurl;
-    }
-
-    //Analytics event
-    if(typeof gtag == 'function'){
-      gtag('event', 'OpenLoginModal', {
-        'context': 'GeneralPlayerRegisterForm'
-      });
-    }
-  }
-
-  const toggleRegister = ():void => {
-    if (registerevent) {
-      if (isMobile(userAgent)) {
-        window.postMessage({ type: 'ModalClosed' }, window.location.href);
-      } 
-      window.postMessage({ type: registerevent, transition: 'Register' }, window.location.href);
-    }
-
-    if (registerurl) {
-      // @ts-ignore
-      window.location = registerurl;
-    }
-
-    //Analytics event
-    if(typeof gtag == 'function'){
-      gtag('event', 'OpenRegisterModal', {
-        'context': 'GeneralPlayerRegisterForm'
-      });
-    }
-  }
-
-  const toggleDeposit = (mobileView:boolean):void => {
-
-    if (isShortCashierEnabled && !mobileView) {
-      window.postMessage({ type: 'OpenShortCashier' }, window.location.href);
-    } else if (depositevent) {
-      window.postMessage({ type: depositevent }, window.location.href);
-      window.postMessage({ type: 'ModalClosed' }, window.location.href);
-    }
-
-    //Analytics event
-    if(typeof gtag == 'function'){
-      gtag('event', 'GoToDeposit', {
-        'context': 'IntegratedGamePage'
-      });
-    } 
-
-    if (depositurl && !isShortCashierEnabled) {
-      // @ts-ignore
-      window.location = depositurl;
-    }
-  }
-
-  if (document.addEventListener) {
-    document.addEventListener('webkitfullscreenchange', exitHandler, false);
-    document.addEventListener('mozfullscreenchange', exitHandler, false);
-    document.addEventListener('fullscreenchange', exitHandler, false);
-    document.addEventListener('MSFullscreenChange', exitHandler, false);
-  }
-
-  function exitHandler() {
-    if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement && isFullscreen) {
-      handleIframeSize();
-    }
-  }
-
-  const handleIframeSize = () => {
-    if ((document as any).fullscreenEnabled ||
-        (document as any).webkitFullscreenEnabled ||
-        (document as any).mozFullScreenEnabled ||
-        (document as any).msFullscreenEnabled) {
-      if (isFullscreen) {
-        if (document.exitFullscreen) {
-          document.exitFullscreen(); // firefox uses the same exit function
-        } else if ( document.webkitExitFullscreen) {
-          document.webkitExitFullscreen();
-        } else if ( document.msExitFullscreen) {
-          document.msExitFullscreen();
-        }
-        isFullscreen = false;
-      } else {
-        if (gameFrameContainer.requestFullscreen) {
-          gameFrameContainer.requestFullscreen();
-        } else if (gameFrameContainer.webkitRequestFullscreen) {
-          gameFrameContainer.webkitRequestFullscreen();
-        } else if (gameFrameContainer.mozRequestFullScreen) {
-          gameFrameContainer.mozRequestFullScreen();
-        } else if (gameFrameContainer.msRequestFullscreen) {
-          gameFrameContainer.msRequestFullscreen();
-        }
-        isFullscreen = true;
-      }
-    }
-  }
-
-  const refreshTime = ():void => {
-    if (clockformat) {
-      time = moment().format(clockformat);
-    } else {
-      time = moment().format('LTS');
-    }
-  }
-
-  const timeInterval = setInterval(():void => {
-    refreshTime();
-  }, 100);
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-
-    mobileView = isMobile(userAgent);
-  }
-
-  const setSession = ():void => {
-    if (checksession == 'true') {
-      checkSession(endpoint, session).then((res:any) => {
-        sessionID = res.Guid;
-        playerID = res.UserID;
-        isLoggedIn = true;
-      }, (err:any) => {
-        isLoggedIn = false;
-        console.error('err on session', err);
-      });
-    } else {
-      sessionID = session;
-      isLoggedIn = true;
-    }
-  }
-
-  const startInterval = (e:any):void => {
-    timer = 0;
-
-    timerInterval = setInterval(() => {
-      timer += 1;
-      panicLoading = true;
-
-      if (timer >= 3) {
-        window.postMessage({type: 'PanicButtonClicked'}, window.location.href);
-        clearInterval(timerInterval)
-      }
-    }, 1000);
-  }
-
-  const endInterval = (e:any):void => {
-    if (timer < 3) {
-      panicLoading = false;
-    }
-    clearInterval(timerInterval);
-  }
-
-
-  const calculateFrameProportions = (): void => {
-    let w = isFullscreen ? '100%' : definitiveIframeWidth;
-    let h = isFullscreen ? '100%' : definitiveIframeHeight;
-    let mW = isFullscreen || !isModal ? 'none' : (game.width ? `${Math.floor(game.width)}px`: '1280px');
-    let mH = isFullscreen || !isModal ? 'none' : (game.height ? `${(Math.floor(game.height) + 100)}px` : '720px');
-
-    gameStyle = `width: ${w}; height: ${h}; max-width: ${mW}; max-height: ${mH}`;
-    resizeIframeIfNotVisible();
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    let cssFile:HTMLElement = document.createElement('style');
-
-    if (clientstylingurl) {
-      let url:URL = new URL(clientstylingurl);
-
-      fetch(url.href)
-        .then((res:any) => res.text())
-        .then((data:any) => {
-          cssFile.innerHTML = data
-
-          setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
-        });
-    }
-  }
-
-  beforeUpdate(() => {
-    determiningIsLoggedIn = (session || userid) && !isLoggedIn;
-  })
-
-  onMount(() => {
-    window.addEventListener('resize', resizeHandler, false);
-    window.addEventListener('message', messageHandler, false);
-
-    return () => {
-        removeEventsToDisplayedElements();
-        window.removeEventListener('resize', resizeHandler);
-        window.removeEventListener('message', messageHandler);
-    }
-  });
-
-
-  const setFavLoading = ():void => {
-    isFavLoading = true;
-  }
-
-  $: lang && setActiveLanguage();
-  $: isShortCashierEnabled = shortcashierenabled.toLocaleLowerCase() === 'true';
-  $: endpoint && gameid && lang && createGameURL(gameid, true);
-  $: session && userid && endpoint && setSession();
-  $: checksession == 'false' && session && endpoint && setSession();
-  $: translationurl && setTranslationUrl();
-  $: favorites && setFavLoading();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: (showModal == 'true') && panicButton && addEventsToDisplayedElements();
-  $: panicButton && addEventsToDisplayedElements();
-</script>
-
-<div bind:this={customStylingContainer}>
-  {#if isLoading}
-    <p class="SearchLoading">{$_('loading')}</p>
-  {:else}
-    {#if hasErrors}
-      <p class="SearchLoading">500 Error - Internal Server Error.</p>
-    {:else}
-      <div class="GamePageBackground" style="background:{!mobileView? `url(${game?.backgroundImageUrl})`: ''}; background-size: cover" bind:this={gamePageBackground}>
-        <div class="CasinoGamePageContainer" style="background: rgba(0, 0, 0, 0.5)">
-          {#if detailsObtained}
-            {#if mobileView}
-              {#if isLoggedIn}
-                {#if favorites == 'true'}
-                  {#if !isFavLoading}
-                    {#if game.isFavorite}
-                      <div class="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" on:click="{() => toggleFavoriteGame(game.id)}">
-                        <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: var(--emfe-w-color-white, #FFFFFF);" d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>
-                        </svg>
-                      </div>
-                    {:else}
-                      <div class="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" on:click="{() => toggleFavoriteGame(game.id)}">
-                        <svg version="1.1" class="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: var(--emfe-w-color-white, #FFFFFF);" 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}
-                  {:else}
-                    <div class="LoaderRipple {haspanicbutton == 'true' ? 'LoaderWithPanicButton' : ''}"><div></div><div></div></div>
-                  {/if}
-                {/if}
-                <div class="GameDetails">
-                  <h3>{game.name}</h3>
-                  <img src={game.thumbnail} class="GameThumbnail" alt="game thumbnail" loading="lazy" />
-                  <div class="ButtonsContainer">
-                    <button class="DepositButton" on:click='{() => toggleDeposit(mobileView)}'>{$_('deposit')}</button>
-                    <button class="PlayNowButton" on:click='{() => {openGameWindow(game)}}'>{$_('playNow')}</button>
-                  </div>
-                  {#if haspanicbutton === "true"}
-                  <div class="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}">
-                    <button class="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}" class:PanicButtonAnimation={panicLoading} bind:this={panicButton}>{$_('breakButton')}</button>
-                  </div>
-                  {/if}
-                  <p>{time}</p>
-                </div>
-              {:else if anonymousFunMode && !determiningIsLoggedIn}
-                <div class="GameDetails">
-                  <h3>{game.name}</h3>
-                  <img src={game.thumbnail} class="GameThumbnail" alt="game thumbnail" loading="lazy" />
-                  <div class="ButtonsContainer">
-                    <button class="LoginButton" on:click='{() => toggleLogin()}'>{$_('signIn')}</button>
-                    <button class="RegisterButton" on:click='{() => toggleRegister()}'>{$_('register')}</button>
-                    <button class="FullWidthButton" on:click='{() => {openGameWindow(game)}}'>{$_('playForFun')}</button>
-                  </div>
-                  <p>{time}</p>
-                </div>
-              {:else if !determiningIsLoggedIn}
-                <div class="GameDetails" part="GameDetails">
-                  <h3>{game.name}</h3>
-                  <img src={game.thumbnail} class="GameThumbnail" alt="game thumbnail" loading="lazy" />
-                  <div class="ButtonsContainer">
-                    <button class="LoginButton" on:click='{() => toggleLogin()}'>{$_('signIn')}</button>
-                    <button class="RegisterButton" on:click='{() => toggleRegister()}'>{$_('register')}</button>
-                  </div>
-                  <p>{time}</p>
-                </div>
-              {/if}
-            {:else}
-              {#if isLoggedIn}
-                <div id="IframeContainer"  bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight}">
-                  <div id="IframeGame" bind:this={gameInnerContainer} style="{gameStyle}">
-                    <iframe title="Games" id="IframeGame" class="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
-                    <div class="BottomGame {haspanicbutton == 'true' ? 'BottomGamePanicSection' : ''}" bind:this={buttonsContainer}>
-                      <button class="DepositButton" on:click='{() => toggleDeposit(mobileView)}'>{$_('deposit')}</button>
-                      <p class="Time" bind:this={timeContainer}><span>{time}</span></p>
-                      {#if haspanicbutton === "true"}
-                        <div class="PanicSection">
-                          <button class="Button" class:PanicButtonAnimation={panicLoading} bind:this={panicButton}>{$_('breakButton')}</button>
-                        </div>
-                      {/if}
-                      {#if isFullscreen}
-                        <button class="FullscreenButton" on:click='{() => handleIframeSize()}'>
-                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 31 31"><polygon style="fill:var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));" points="24.586,27.414 29.172,32 32,29.172 27.414,24.586 32,20 20,20 20,32 			"/><polygon style="fill:var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));" points="0,12 12,12 12,0 7.414,4.586 2.875,0.043 0.047,2.871 4.586,7.414 			"/><polygon style="fill:var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));" points="0,29.172 2.828,32 7.414,27.414 12,32 12,20 0,20 4.586,24.586 			"/><polygon style="fill:var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));" points="20,12 32,12 27.414,7.414 31.961,2.871 29.133,0.043 24.586,4.586 20,0 			"/></svg>
-                        </button>
-                      {:else}
-                        <button class="FullscreenButton" on:click='{() => handleIframeSize()}'>
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21.414 18.586l2.586-2.586v8h-8l2.586-2.586-5.172-5.172 2.828-2.828 5.172 5.172zm-13.656-8l2.828-2.828-5.172-5.172 2.586-2.586h-8v8l2.586-2.586 5.172 5.172zm10.828-8l-2.586-2.586h8v8l-2.586-2.586-5.172 5.172-2.828-2.828 5.172-5.172zm-8 13.656l-2.828-2.828-5.172 5.172-2.586-2.586v8h8l-2.586-2.586 5.172-5.172z"/></svg>
-                        </button>
-                      {/if}
-                    </div>
-                  </div>
-                </div>
-              {:else if !determiningIsLoggedIn}
-                {#if funMode}
-                  <div id="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight};">
-                    <div id="IframeGame" bind:this={gameInnerContainer} style="{gameStyle}">
-                      <iframe title="Games" id="IframeGame" class="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
-                      <div class="BottomGame" bind:this={buttonsContainer}>
-                        <div class="ButtonsContainer">
-                          <button class="LoginButton" on:click='{() => toggleLogin()}'>{$_('signIn')}</button>
-                          <button class="RegisterButton" on:click='{() => toggleRegister()}'>{$_('register')}</button>
-                        </div>
-                        <p class="Time" bind:this={timeContainer}><span>{time}</span></p>
-                        {#if isFullscreen}
-                          <button class="FullscreenButton" on:click='{() => handleIframeSize()}'>
-                            <svg width="24" height="24" viewBox="0 0 31 31"><polygon style="fill:#fff;" points="24.586,27.414 29.172,32 32,29.172 27.414,24.586 32,20 20,20 20,32 			"/><polygon style="fill: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));" points="0,12 12,12 12,0 7.414,4.586 2.875,0.043 0.047,2.871 4.586,7.414 			"/><polygon style="fill:var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));" points="0,29.172 2.828,32 7.414,27.414 12,32 12,20 0,20 4.586,24.586 			"/><polygon style="fill:var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));" points="20,12 32,12 27.414,7.414 31.961,2.871 29.133,0.043 24.586,4.586 20,0 			"/></svg>
-                          </button>
-                        {:else}
-                          <button class="FullscreenButton"  on:click='{() => handleIframeSize()}'>
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21.414 18.586l2.586-2.586v8h-8l2.586-2.586-5.172-5.172 2.828-2.828 5.172 5.172zm-13.656-8l2.828-2.828-5.172-5.172 2.586-2.586h-8v8l2.586-2.586 5.172 5.172zm10.828-8l-2.586-2.586h8v8l-2.586-2.586-5.172 5.172-2.828-2.828 5.172-5.172zm-8 13.656l-2.828-2.828-5.172 5.172-2.586-2.586v8h8l-2.586-2.586 5.172-5.172z"/></svg>
-                          </button>
-                        {/if}
-                      </div>
-                    </div>
-                  </div>
-                {:else}
-                  <div class="GameDetails" part="GameDetails">
-                    <h3>{game.name}</h3>
-                    <img src={game.thumbnail} class="GameThumbnail" alt="game thumbnail" loading="lazy" />
-                    <div class="ButtonsContainer">
-                      <button class="LoginButton" on:click='{() => toggleLogin()}'>{$_('signIn')}</button>
-                      <button class="RegisterButton" on:click='{() => toggleRegister()}'>{$_('register')}</button>
-                    </div>
-                    <p>{time}</p>
-                  </div>
-                {/if}
-              {/if}
-            {/if}
-          {/if}
-        </div>
-      </div>
-    {/if}
-  {/if}
-</div>
-
-<style lang="scss">
-  .CasinoGamePageContainer {
-    background: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));
-    margin: 0 auto;
-    height: 100%;
-    max-width: 100%;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .BottomGame {
-    padding: 4px 16px;
-    min-height: 85px;
-    background-color: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));
-    align-items: center;
-    display: grid;
-    grid-auto-columns: 1fr;
-    grid-auto-rows: 1fr;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 1fr;
-    gap: 0px 0px;
-    justify-items: center;
-    border-radius:0 0 6px 6px;
-    button {
-      cursor: pointer;
-    }
-
-    &.BottomGamePanicSection {
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-    }
-
-  }
-
-  .DepositButton, .PlayNowButton {
-    border: none;
-    justify-self: left;
-    width: 130px;
-    height: 60px;
-    background-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
-    border-radius: 2px;
-  }
-  .GameThumbnail {
-    border-radius: 2px;
-    width: 270px;
-    height: 180px;
-    margin-bottom: 20px;
-  }
-  .FullscreenButton {
-    border-radius: 5px;
-    justify-self: end;
-    border: none;
-    width: 60px;
-    height: 60px;
-    background-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-  }
-  .GameDetails {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .GameDetails h3 {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: 18px;
-    text-align: center;
-    padding: 0 10px;
-  }
-
-  .ButtonsContainer {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: 1fr 1fr;
-  }
-  .FullWidthButton {
-    grid-column: span 2;
-  }
-
-  .BottomGame .ButtonsContainer {
-    width: 275px;
-    display: flex;
-    justify-self: start;
-    flex-direction: row;
-    justify-content: space-between;
-
-    button {
-      cursor: pointer;
-    }
-  }
-
-  .RegisterButton {
-    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
-    background-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-    border-radius: 5px;
-    border: none;
-    width: 129px;
-    height: 60px;
-  }
-  .LoginButton {
-    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));;
-    background-color: var(--emfe-w-casino-contrast, var(--emfe-w-color-background, #07072A));
-    border-radius: 5px;
-    border: 1px solid var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
-    width: 129px;
-    height: 60px;
-  }
-  .FullWidthButton {
-    color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-    background-color: var(--emfe-w-casino-contrast, var(--emfe-w-color-background, #07072A));
-    border-radius: 5px;
-    border: 1px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-    width: 100%;
-    height: 60px;
-  }
-
-  .GamesContainer {
-    width: calc(100% - 4px);
-    height: 100%;
-    max-width: calc(100% - 4px);
-    max-height: calc(100% - 100px);
-  }
-  .Time {
-    height: 20px;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  svg {
-    fill: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
-  }
-  p {
-    color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));
-  }
-  #IframeContainer {
-    height:100%;
-    max-width:1300px;
-    margin: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .FullsScreenLayout .GamesContainer {
-      // the use of !important is necessary in order to override the dynamic inline width/height, when in fullscreen mode
-      width: 100%!important;
-      height: calc(100% - 100px)!important;
-  }
-  .FavoredIcon, .UnfavoredIcon {
-    width: 35px;
-    height: 35px;
-  }
-  .FavIconContainer {
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    cursor: pointer;
-  }
-
-  .FavIconPanicButton {
-    margin-top: 45px;
-  }
-
-  .PanicSection {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin: 20px 0;
-
-    .Button {
-      border-radius: 5px;
-      border: 1px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-      background-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-      width: 280px;
-      height: 60px;
-      color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
-      cursor: pointer;
-    }
-  }
-
-  // the use of !important is necessary in order to override margin from .PanicSection
-  .PanicSectionMobile {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    text-align: center;
-    margin: 10px 0 0 0 !important;
-  }
-
-  .PanicButtonMobile {
-    border-radius: 5px;
-    margin: 0 10px;
-    border: 1px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-    background-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-    width: 100% !important;
-    height: 30px;
-    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
-    cursor: pointer;
-
-    //Remove text selection for panic button on mobile
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -moz-user-select: none; /* Old versions of Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none;
-    // End of removing selection properties
-  }
-
-  .PanicButtonAnimation {
-    background: -webkit-linear-gradient(
-        135deg,
-        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
-    );
-
-    background: -moz-linear-gradient(
-        135deg,
-        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
-    );
-
-    background: -o-linear-gradient(
-        135deg,
-        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
-    );
-
-    background-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-    width: 280px;
-    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
-
-    -webkit-animation: bar-animation 2s linear;
-  }
-
-  @-webkit-keyframes bar-animation {
-    0% {
-      background-position: 0;
-    }
-    100% {
-      background-position: 280px;
-    }
-  }
-
-  // Loader for favorites
-  .LoaderRipple {
-    width: 80px;
-    height: 80px;
-    position: absolute;
-    top: 0;
-    left: -8px;
-    div {
-      position: absolute;
-      border: 4px solid #fff;
-      opacity: 1;
-      border-radius: 50%;
-      animation: ripple-effect 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-      &:nth-child(2) {
-        animation-delay: -0.5s;
-      }
-    }
-    &.LoaderWithPanicButton {
-      top: 40px;
-    }
-  }
-
-  @keyframes ripple-effect {
-    0% {
-      top: 36px;
-      left: 36px;
-      width: 0;
-      height: 0;
-      opacity: 0;
-    }
-    4.9% {
-      top: 36px;
-      left: 36px;
-      width: 0;
-      height: 0;
-      opacity: 0;
-    }
-    5% {
-      top: 36px;
-      left: 36px;
-      width: 0;
-      height: 0;
-      opacity: 1;
-    }
-    100% {
-      top: 0px;
-      left: 0px;
-      width: 72px;
-      height: 72px;
-      opacity: 0;
-    }
-  }
-</style>