@everymatrix/casino-integrated-game-page 0.0.272

package/src/CasinoIntegratedGamePage.svelte

@@ -0,0 +1,710 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { isMobile, checkSession, getDevice } from 'rvhelper';
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { IntegratedGamePageTranslations } 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 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 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 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 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 customStylingContainer:HTMLElement;
+  let buttonsContainer:HTMLElement;
+  let timeContainer:HTMLElement;
+  let isOnNative:boolean = false;
+
+  setupI18n({ withLocale: 'en', translations: {}});
+
+  Object.keys(IntegratedGamePageTranslations).forEach((item) => {
+    addNewMessages(item, IntegratedGamePageTranslations[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?):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 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':
+        setTimeout(() => {  // the timeout is necessary in order to sync with the closing of the modal frame and provide a smoother transition
+          detailsObtained = false;
+        }, 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 goBack = () => {
+    window.postMessage({ type: 'GoToPreviousRoute' }, window.location.href);
+  }
+
+  const maximizeGameFrame = ():void => {
+    modalFrameWidth = game.width;
+    modalFrameHeight = game.height;
+
+    definitiveIframeWidth = game.width;
+    definitiveIframeHeight = game.height;
+
+    gameFrameWidth = game.width;
+    gameFrameHeight = game.height;
+  }
+
+  // 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(gameFrame.width);
+    gameFrameHeight = parseInt(gameFrame.height);
+    // resize logic for maintaining game ratio when resizing
+    if ((gameContainerWidth / iframeRatio) > (gameContainerHeight - buttonsContainer.clientHeight - timeContainer.clientHeight)){
+      gameFrameHeight = gameContainerHeight - buttonsContainer.clientHeight - timeContainer.clientHeight;
+      gameFrameWidth = gameContainerHeight * iframeRatio;
+    } else {
+      gameFrameWidth = gameContainerWidth;
+      gameFrameHeight = gameContainerWidth / iframeRatio;
+    }
+
+    definitiveIframeWidth = gameFrameWidth ? Math.floor(gameFrameWidth) + "px" : "1280px";
+    definitiveIframeHeight = gameFrameHeight ? Math.floor(gameFrameHeight) + "px" : "720px";
+  }
+
+  const openGameWindow = (game:any):void => {
+    if (isOnNative) {
+      let data = {
+        url: game.launchUrl,
+        id: game.id,
+        vendor: game.vendor.name
+      }
+
+      callNative('OPEN_GAME', data);
+    } else if(integratedgameframe == 'false') {
+      window.open(game.launchUrl, '_blank');
+    } else if(integratedgameframe == 'true') {
+      console.log("gameid here ", gameid);
+      window.postMessage({ type: 'OpenIntegratedGameFrame' }, 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;
+    }
+  }
+
+  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;
+    }
+  }
+
+  const toggleDeposit = ():void => {
+    if (depositevent) {
+      window.postMessage({ type: depositevent }, window.location.href);
+      window.postMessage({ type: 'ModalClosed' }, window.location.href);
+    }
+
+    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 panicAction = ():void => {
+    window.postMessage({ type: 'PanicButtonClicked' }, window.location.href);
+  }
+
+  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);
+
+    isLoading = false;
+    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;
+      playerID = userid;
+    }
+  }
+
+  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);
+          }
+        });
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('resize', resizeHandler, false);
+    window.addEventListener('message', messageHandler, false);
+
+    isOnNative = !!isNative(userAgent);
+
+    return () => {
+      window.removeEventListener('resize', resizeHandler);
+      window.removeEventListener('message', messageHandler);
+
+      clearInterval(timeInterval);
+    }
+  });
+
+  $: lang && setActiveLanguage();
+  $: endpoint && gameid && lang && createGameURL(gameid);
+  $: session && userid && endpoint && setSession();
+  $: clientstyling && setClientStyling();
+  $: clientstylingurl && setClientStylingURL();
+
+</script>
+
+{#if isLoading}
+  <p class="SearchLoading" part="SearchLoading">Loading, please wait ...</p>
+{:else}
+  {#if hasErrors}
+    <p class="SearchLoading" part="SearchLoading">500 Error - Internal Server Error.</p>
+  {:else}
+    <div class="CasinoIntegratedGamePage" part="CasinoIntegratedGamePage" bind:this={customStylingContainer}>
+      {#if detailsObtained}
+        {#if mobileView}
+          {#if isLoggedIn}
+              <div class="GamePageIntegratedTopSection" part="GamePageIntegratedTopSection">
+                <button class="backButton" part="backButton" on:click={() => goBack()}>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:var(--emfe-w-color-primary, #D0046C);}</style></defs><path class="a" d="M12,0,9.818,2.182l8.26,8.26H0v3.117H18.078l-8.26,8.26L12,24,24,12Z" transform="translate(24 24) rotate(180)"/></svg>
+                </button>
+                <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
+                <button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
+              </div>
+              <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="width: {isFullscreen ? '100%' : definitiveIframeWidth}; height: {isFullscreen ? '100%' : definitiveIframeHeight}; max-width: {isFullscreen ? 'none' : (game.width ? game.width + 'px' : '1280px')}; max-height: {isFullscreen ? 'none' : (game.height ? (Math.floor(game.height) + 100) + 'px' : '720px')}">
+                  <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}>
+                    <button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
+                    {#if haspanicbutton === "true"}
+                      <div class="PanicSection" part="PanicSection">
+                        <svg class="w-1 h-1" part="w-1 h-1" fill="none" stroke="white" width="34px" height="34px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                        <p>{$_('gamePage.break')}</p>
+                        <button class="Button" part="Button" on:click={() => panicAction()}>{$_('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 class="BannerSection" part="BannerSection"></div>
+                </div>
+              </div>
+          {:else}
+            {#if funMode}
+              <div class="GamePageIntegratedTopSection" part="GamePageIntegratedTopSection">
+                <button class="backButton" part="backButton" on:click={() => goBack()}>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:var(--emfe-w-color-primary, #D0046C);}</style></defs><path class="a" d="M12,0,9.818,2.182l8.26,8.26H0v3.117H18.078l-8.26,8.26L12,24,24,12Z" transform="translate(24 24) rotate(180)"/></svg>
+                </button>
+                <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
+                <button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
+              </div>
+              <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="width: {isFullscreen ? '100%' : definitiveIframeWidth}; height: {isFullscreen ? '100%' : definitiveIframeHeight}; max-width: {isFullscreen || !isModal ? 'none' : (game.width ? Math.floor(game.width) + 'px' : '1280px')}; max-height: {isFullscreen || !isModal ? 'none' : (game.height ? (Math.floor(game.height) + 100) + 'px' : '720px')}">
+                  <iframe title="Games" 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>
+                    {#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 class="BannerSection" part="BannerSection"></div>
+                </div>
+              </div>
+            {/if}
+          {/if}
+        {/if}
+      {/if}
+    </div>
+  {/if}
+{/if}
+
+
+<style lang="scss">
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+  .CasinoIntegratedGamePage {
+    height: 100%;
+  }
+  .GamePageIntegratedTopSection {
+
+  }
+
+  .BottomGame {
+    padding-left: 60px;
+    padding-right: 60px;
+    min-height: 85px;
+    background-color: var(--emfe-w-color-contrast, #07072A);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .DepositButton, .PlayNowButton {
+    border: none;
+    width: 130px;
+    height: 60px;
+    background-color: var(--emfe-w-color-green, #48952a);
+    color: var(--emfe-w-color-white, #FFFFFF);
+    border-radius: 2px;
+    cursor: pointer;
+  }
+  .PlayNowButton {
+    background-color: var(--emfe-w-color-primary, #D0046C);
+  }
+  .GameThumbnail {
+    border-radius: 2px;
+    width: 270px;
+    height: 180px;
+  }
+  .FullscreenButton {
+    border-radius: 5px;
+    border: none;
+    width: 60px;
+    height: 60px;
+    background-color: var(--emfe-w-color-primary, #D0046C);
+    float: right;
+  }
+  .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 {
+    width: 275px;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .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;
+    margin-top: 20px;
+  }
+  .GamesContainer {
+    width: 100%;
+    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%;
+    width:100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  #IframeGame {
+    width: 100%;
+    height: 100%;
+  }
+  .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;
+  }
+  .PanicSectionMobile {
+    flex-direction: column;
+    margin: 20px 0;
+  }
+  .PanicText {
+    display: flex;
+    align-items: center;
+  }
+  .PanicSection {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 20px 0;
+
+    svg {
+      fill: none;
+    }
+    p {
+      font-size: 16px;
+      color: var(--emfe-w-color-white, #FFFFFF);
+    }
+    .Button {
+      border-radius: 5px;
+      border: 1px solid var(--emfe-w-color-primary, #D0046C);
+      background-color: var(--emfe-w-color-primary, #D0046C);
+      width: 240px;
+      height: 60px;
+      color: var(--emfe-w-color-white, #FFFFFF);
+      cursor: pointer;
+    }
+  }
+  .BannerSection {
+    height: 150px;
+  }
+</style>