@everymatrix/casino-game-page 1.0.15 → 1.0.69

package/src/CasinoGamePage.svelte

@@ -1,990 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { isMobile, checkSession, getDevice } from 'rvhelper';
-  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import { GamePageTranslations } from './translations';
-
-  // Native bridge
-  import {
-    isNative,
-    call as callNative,
-    registerEventListener as registerNativeEventListener,
-  } from 'js-native-bridge';
-
-  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 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;
-  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 customStylingContainer:HTMLElement;
-  let buttonsContainer:HTMLElement;
-  let timeContainer:HTMLElement;
-  let isOnNative:boolean = false;
-  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(GamePageTranslations).forEach((item) => {
-    addNewMessages(item, GamePageTranslations[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?
-    isLoading = false;
-
-    if (sessionID && sessionID.length > 0) {
-      isLoggedIn = true;
-      isLoading = false;
-
-      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}/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]);
-        if (game.launchUrl) {
-          detailsObtained = true;
-          funMode = playforfun == 'true' ? game.hasFunMode : false;
-          anonymousFunMode = playforfun == 'true' ? game.hasAnonymousFunMode : false;
-        }
-      }, (err:any) => {
-        console.error('There was an error', err);
-        hasErrors = true;
-      }).then(() => {
-        if (gameFrameContainer) {
-          if (isModal) {
-            keepIframeRatio();
-          } else {
-            maximizeGameFrame();
-          }
-        }
-      });
-    window.postMessage({ type: 'RequestModalSize' }, window.location.href);
-  }
-
-  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 'ShowGameModal':
-        showModal = 'true';
-        break;
-
-      case 'OpenGameFrame':
-        showModal = 'true';
-        break;
-
-      case 'LaunchGameFrame':
-        openGameFrame(e.data.gameId, e.data.gameFunMode);
-        break;
-
-      case 'ModalClosed':
-        window.postMessage({ type: 'EnableScroll'}, window.location.href);
-        // 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);
-        }
-        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;
-
-      case 'UpdateCategoryFavoriteGames':
-        if (e.data.receivedFavoriteResults) {
-          favoriteGames = e.data.receivedFavoriteResults.items;
-        }
-        break;
-    }
-  }
-
-  const checkFavorite = (gameId:string):boolean => {
-    if (favoriteGames.findIndex(obj => obj.id == gameId) !== -1) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  const toggleFavoriteGame = (id:any):void => {
-    let triggerFactor = "gamepage";
-
-    if (game.isFavored) {
-      window.postMessage({ type: 'SetUnfavoredGame', id, triggerFactor }, window.location.href);
-      game.isFavored = false;
-    } else {
-      window.postMessage({ type: 'SetFavoredGame', id, triggerFactor }, window.location.href);
-      game.isFavored = true;
-    }
-  }
-
-  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}/casino/games/${gameId}`);
-
-    url.searchParams.append('language', lang);
-
-    fetch(url.href)
-      .then((res:any) => res.json())
-      .then((data:any) => {
-        game = formatGameLaunchUrl(data[0]);
-        if (game.launchUrl) {
-          game.isFavored = setGameData(game, gameFunMode);
-        }
-      });
-  }
-
-  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);
-    gameFrameHeight = parseInt(game.height);
-
-    // resize logic for maintaining game ratio when resizing
-    gameFrameWidth = gameContainerWidth * iframeRatio;
-
-    definitiveIframeWidth = gameFrameWidth ? `${Math.floor(gameFrameWidth)}px` : "1280px";
-    definitiveIframeHeight = gameFrameHeight ? `${Math.floor(gameFrameHeight)}px` : "720px";
-
-    calculateFrameProportions();
-  }
-
-  const openGameWindow = (game:any):void => {
-    if (!isOnNative) return isMobile(userAgent) ? determineGameFrameState(integratedgameframemobile) : determineGameFrameState(integratedgameframedesktop);
-    let data = {
-      url: game.launchUrl,
-      id: game.id,
-      vendor: game.vendor.name
-    }
-    callNative('OPEN_GAME', data);
-  }
-
-  const determineGameFrameState = (gameState:string):void => {
-    if(gameState == 'false') {
-      window.open(game.launchUrl, '_blank');
-    } else if(gameState == 'true') {
-      window.postMessage({ type: 'OpenIntegratedGameFrame', gameId: game.id }, 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) {
-      window.postMessage({ type: loginevent, transition: 'Login' }, window.location.href);
-      window.postMessage({ type: 'ModalClosed' }, 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) {
-      window.postMessage({ type: registerevent, transition: 'Register' }, window.location.href);
-      window.postMessage({ type: 'ModalClosed' }, window.location.href);
-    }
-
-    if (registerurl) {
-      // @ts-ignore
-      window.location = registerurl;
-    }
-
-    //Analytics event
-    if(typeof gtag == 'function'){
-      gtag('event', 'OpenRegisterModal', {
-        'context': 'GeneralPlayerRegisterForm'
-      });
-    } 
-  }
-
-  const toggleDeposit = ():void => {
-    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': 'GamePage'
-        });
-      } 
-    }
-
-    if (depositurl) {
-      // @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 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
-
-          if (customStylingContainer) {
-            setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
-          }
-        });
-    }
-  }
-
-  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();
-  }
-
-  onMount(() => {
-    window.addEventListener('resize', resizeHandler, false);
-    window.addEventListener('message', messageHandler, false);
-    isOnNative = !!isNative(userAgent);
-
-      return () => {
-        removeEventsToDisplayedElements();
-        window.removeEventListener('resize', resizeHandler);
-        window.removeEventListener('message', messageHandler);
-    }
-  });
-
-
-
-  $: lang && setActiveLanguage();
-  $: endpoint && gameid && lang && createGameURL(gameid, true);
-  $: session && userid && endpoint && setSession();
-  $: checksession == 'false' && session && endpoint && setSession();
-  $: translationUrl && setTranslationUrl();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: (showModal == 'true') && panicButton && addEventsToDisplayedElements();
-  $: panicButton && addEventsToDisplayedElements();
-</script>
-
-<div bind:this={customStylingContainer}>
-  {#if isLoading}
-    <p class="SearchLoading" part="SearchLoading">{$_('gamePage.loading')}</p>
-  {:else}
-    {#if hasErrors}
-      <p class="SearchLoading" part="SearchLoading">500 Error - Internal Server Error.</p>
-    {:else}
-      <div class="GamePageBackground" style="background:{!isModal? `url(${game.backgroundImageUrl})`: ''}; background-size: cover" bind:this={gamePageBackground}>
-        <div class="CasinoGamePageContainer" part="CasinoGamePageContainer" style="background: rgba(0, 0, 0, 0.5)">
-          {#if detailsObtained}
-            {#if mobileView}
-              {#if isLoggedIn}
-                {#if favorites == 'true'}
-                  {#if game.isFavored}
-                    <div class="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" part="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: 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}
-                    <div class="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" part="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" on:click="{() => toggleFavoriteGame(game.id)}">
-                      <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}
-                <div class="GameDetails" part="GameDetails">
-                  <h3>{game.name}</h3>
-                  <img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
-                  <div class="ButtonsContainer" part="ButtonsContainer">
-                    <button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
-                    <button class="PlayNowButton" part="PlayNowButton" on:click='{() => {openGameWindow(game)}}'>{$_('gamePage.playNow')}</button>
-                  </div>
-                  {#if haspanicbutton === "true"}
-                  <div class="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}" part="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}">
-                    <button class="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}" class:PanicButtonAnimation={panicLoading} part="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}" bind:this={panicButton}>{$_('gamePage.breakButton')}</button>
-                  </div>
-                  {/if}
-                  <p>{time}</p>
-                </div>
-              {:else if anonymousFunMode}
-                <div class="GameDetails" part="GameDetails">
-                  <h3>{game.name}</h3>
-                  <img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
-                  <div class="ButtonsContainer" part="ButtonsContainer">
-                    <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
-                    <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
-                    <button class="FullWidthButton" part="FullWidthButton" on:click='{() => {openGameWindow(game)}}'>{$_('gamePage.playForFun')}</button>
-                  </div>
-                  <p>{time}</p>
-                </div>
-              {:else}
-                <div class="GameDetails" part="GameDetails">
-                  <h3>{game.name}</h3>
-                  <img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail"  alt="game thumbnail" loading="lazy" />
-                  <div class="ButtonsContainer" part="ButtonsContainer">
-                    <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
-                    <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
-                  </div>
-                  <p>{time}</p>
-                </div>
-              {/if}
-            {:else}
-              {#if isLoggedIn}
-                <div id="IframeContainer" part="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight}">
-                  <div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="{gameStyle}">
-                    <iframe title="Games" id="IframeGame" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
-                    <div class="BottomGame {haspanicbutton == 'true' ? 'BottomGamePanicSection' : ''}" part="BottomGame {haspanicbutton == 'true' ? 'BottomGamePanicSection' : ''}" bind:this={buttonsContainer}>
-                      <button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
-                      <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
-                      {#if haspanicbutton === "true"}
-                        <div class="PanicSection" part="PanicSection">
-                          <button class="Button" class:PanicButtonAnimation={panicLoading} part="Button" bind:this={panicButton}>{$_('gamePage.breakButton')}</button>
-                        </div>
-                      {/if}
-                      {#if isFullscreen}
-                        <button class="FullscreenButton" part="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:#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:#fff;" 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:#fff;" points="0,29.172 2.828,32 7.414,27.414 12,32 12,20 0,20 4.586,24.586 			"/><polygon style="fill:#fff;" 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" part="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 funMode}
-                  <div id="IframeContainer" part="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight};">
-                    <div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="{gameStyle}">
-                      <iframe title="Games" id="IframeGame" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
-                      <div class="BottomGame" part="BottomGame" bind:this={buttonsContainer}>
-                        <div class="ButtonsContainer" part="ButtonsContainer">
-                          <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
-                          <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
-                        </div>
-                        <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
-                        {#if isFullscreen}
-                          <button class="FullscreenButton" part="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:#fff;" 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:#fff;" points="0,29.172 2.828,32 7.414,27.414 12,32 12,20 0,20 4.586,24.586 			"/><polygon style="fill:#fff;" 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" part="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" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
-                    <div class="ButtonsContainer" part="ButtonsContainer">
-                      <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
-                      <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
-                    </div>
-                    <p>{time}</p>
-                  </div>
-                {/if}
-              {/if}
-            {/if}
-          {/if}
-        </div>
-      </div>
-    {/if}
-  {/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';
-  }
-
-  .CasinoGamePageContainer {
-    background: var(--emfe-w-color-contrast, #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-color-contrast, #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-color-primary, #D0046C);
-    color: 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-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-color-white, #FFFFFF);
-    background-color: var(--emfe-w-color-primary, #D0046C);
-    border-radius: 5px;
-    border: none;
-    width: 129px;
-    height: 60px;
-  }
-  .LoginButton {
-    color: var(--emfe-w-color-primary, #D0046C);
-    background-color: var(--emfe-w-color-contrast, #07072A);
-    border-radius: 5px;
-    border: 1px solid var(--emfe-w-color-primary, #D0046C);
-    width: 129px;
-    height: 60px;
-  }
-  .FullWidthButton {
-    color: var(--emfe-w-color-primary, #D0046C);
-    background-color: var(--emfe-w-color-contrast, #07072A);
-    border-radius: 5px;
-    border: 1px solid 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-color-white, #FFFFFF);
-  }
-  p {
-    color: var(--emfe-w-color-white, #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-color-primary, #D0046C);
-      background-color: var(--emfe-w-color-primary, #D0046C);
-      width: 280px;
-      height: 60px;
-      color: 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-color-primary, #D0046C);
-    background-color: var(--emfe-w-color-primary, #D0046C);
-    width: 100% !important;
-    height: 30px;
-    color: 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-color-primary, #D0046C);
-    width: 280px;
-    color: #fff;
-
-    -webkit-animation: bar-animation 2s linear;
-  }
-
-  @-webkit-keyframes bar-animation {
-    0% {
-      background-position: 0;
-    }
-    100% {
-      background-position: 280px;
-    }
-  }
-  </style>