@everymatrix/casino-page-nd 1.43.4 → 1.45.0

package/src/CasinoPage.svelte

@@ -1,850 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { isMobile, getDevice } from 'rvhelper';
-  import { _, addNewMessages, setupI18n, setLocale } from './i18n';
-  import { TRANSLATIONS } from './translations';
-  import type {
-    CategoriesData,
-    CategoriesItems,
-  } from './CasinoPage.types';
-
-  import '@everymatrix/casino-games-category-section-nd';
-  import '@everymatrix/casino-random-game';
-  import '@everymatrix/casino-winners';
-  import '@everymatrix/casino-jackpot-banner';
-  import '@everymatrix/casino-collections-providers';
-  import '@everymatrix/casino-my-games-nd';
-  import '@everymatrix/casino-search-nd';
-  import '@everymatrix/casino-calendar';
-
-  export let endpoint:string = '';
-  export let env:string = '';
-  export let datasource:string = '';
-  export let currency: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 userroles:string = '';
-  export let clientstylingurl:string = '';
-  export let translationurl:string = '';
-  export let cmsendpoint:string = '';
-
-  export let categorybackground:string = '';
-  export let visiblegames:string;
-  export let favorites:string = '';
-  export let haspanicbutton:string = 'false';
-  export let filteredcategories:string = '';
-  export let activecategory:string = '';
-  export let showgamename:string = '';
-  export let livecasino:string = 'false';
-  export let playrandomgame:string = 'false';
-  export let randomgameslider:string = 'false';
-  export let filteredrandomgamecategories:string = '';
-  export let gamepagemodalurl:string = 'false';
-  export let casinogamesgridslider: string = 'false';
-  //Casino Winners
-  export let positionwinnerswidget:string ='';
-  export let tabsorder:string = '';
-  export let enableautoscroll:string = '';
-  export let istopavailable:string = '';
-  export let isrecentavailable:string = '';
-  export let integratedgameframedesktop:string = 'false';
-  export let integratedgameframemobile:string = 'false';
-  export let periodrecent:string = '';
-  export let periodtop:string = '';
-  export let numberusersrecent:string = '';
-  export let numberuserstop:string = '';
-  export let amountlimit:string = '';
-  export let defaultcurrency:string = '';
-  export let showsubgroups:string = '';
-  //Jackpot Banners
-  export let positionjackpotbanners:string = '';
-  export let caticon0:string = '';
-  export let caticon1:string = '';
-  export let caticon2:string = '';
-  export let caticon3:string = '';
-  export let backgroundsrc:string='';
-  export let backgroundsrcmobile:string='';
-  export let titlelogopath = '';
-  export let iconlabels:string = '';
-  export let visualstructure:string = '';
-  //Casino Collections Providers
-  export let positioncollections:string = '';
-  export let type:string = '';
-  export let titletype:string = '';
-  export let collectionprovidersgamenames:string = '';
-  export let addfilterselector:string = 'false';
-  export let addsortingselector:string = 'false';
-  export let filterbylogo:string = '';
-  //Casino Calendar
-  export let positioncasinocalendar = '';
-  //Casino My Games
-  export let casinomygames:string = 'false';
-  export let mostplayed:string = '';
-  export let lastplayed:string = '';
-  export let lastplayedperiod:string = 'Last30Days';
-  export let mostplayedperiod:string = 'Last30Days';
-  export let lastplayedorder:string = '';
-  export let lastplayedlimit:string = '';
-  export let lastplayedunique: string = 'true';
-  export let mostplayedrounds:string = '';
-  export let winnersdatasources:string = '';
-  export let fetchviaevent:string = 'true';
-  //Je lobby widget
-  export let positionjelobbywidget:string = '';
-  //Casino Random Game Slider
-  export let specificcategory:string = '';
-  export let launchbygamecard:string = '';
-  export let iconvisible:string = '';
-  export let iconvisibleonanim:string = '';
-
-  // Button icon for random game widget
-  export let randombuttonicon:string = '';
-
-  let userAgent:any = window.navigator.userAgent;
-  let gameevent:string;
-
-  if (!isMobile(userAgent)) {
-    gameevent = 'ShowGameModal';
-  } else {
-    gameevent = 'OpenGameFrame';
-  }
-
-  // CasinoPage loading state
-  let isLoading:boolean = false;
-  let hasErrors:boolean = false;
-  let isLoggedIn:boolean = false;
-  let error:string = '';
-  let playerID:string;
-  let sessionID:string;
-  let panicButton:HTMLElement;
-  let panicLoading:boolean = false;
-  let timer: number = 0;
-  let timerInterval:any;
-
-  // CasinoPage state
-  let myGamesSection:boolean = false;
-  let searchFocus:boolean = false;
-  let lobbyScreen:boolean = true;
-  let adjustingScroll:boolean = false;
-  let searchIsOn:boolean = false;
-
-  // Needs to be checked if there are relevant
-  let shownCategories:Array<CategoriesItems> = [];
-  let activeCategory:string;
-  let allCategoriesIds:string[] = [];
-  let searchWrapper:HTMLElement;
-  let searchElementWrapper:HTMLElement;
-  let searchPositionTop:number;
-  let searchedGamesCache:Object = {};
-
-  const scrollOffset:number = 0;
-
-  let scrollTop:boolean = false;
-  let activeRecentSearches:boolean = false;
-  let categoriesData;
-  let receivedFavoriteResults:Object;
-  let currentCategoryId:string = '';
-  let customStylingContainer:HTMLElement;
-  let firstLoad:boolean = false;
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  const setTranslationUrl = ():void => {
-    let url:URL = new URL(translationurl);
-
-    fetch(url.href).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):void => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  const CategoryChangeHandler = (categoryEvent:any):void => {
-    scrollTop = true;
-    casinomygames = 'false';
-
-    // needs to be executed after the page has been populated
-    setTimeout(() => {
-      window.postMessage({ type: 'WidgetTopReference', scrollTop }, window.location.href);
-    });
-
-    switch(categoryEvent.data.itemId) {
-      case 'LOBBY':
-        lobbyScreen = true;
-        myGamesSection = false;
-        activeCategory = '';
-        break;
-
-      case 'MYGAMES':
-        casinomygames = 'true';
-        lobbyScreen = false;
-        myGamesSection = true;
-        activeCategory = '';
-        break;
-
-      case 'FAVORITES':
-        lobbyScreen = false;
-        myGamesSection = true;
-        activeCategory = '';
-        break;
-
-      case 'MOSTPLAYED':
-        if (mostplayed == 'true') {
-          activeCategory = '';
-          lobbyScreen = false;
-          myGamesSection = true;
-        }
-        break;
-
-      case 'LASTPLAYED':
-        if (lastplayed == 'true') {
-          activeCategory = '';
-          lobbyScreen = false;
-          myGamesSection = true;
-        }
-        break;
-
-      default:
-        lobbyScreen = false;
-        myGamesSection = false;
-        activeCategory = categoryEvent.data.itemId;
-        break;
-    }
-  }
-
-  const messageHandler = (e:any):void => {
-    if (e.data) {
-      switch(e.data.type) {
-        // @TODO: removed and tested, but kept in case unforeseen issues occur - reason: multiple calls on category change
-        case 'CategoryChange':
-          CategoryChangeHandler(e);
-          break;
-
-        case 'UserSessionID':
-          sessionID = e.data.session;
-          playerID = e.data.userID;
-
-        break;
-
-        case 'ApplyFilters':
-          window.postMessage({ type: 'CategoryUpdate', itemId: currentCategoryId, origin: e.data.origin }, window.location.href);
-          break;
-
-        case 'CategoryVendors':
-          currentCategoryId = e.data.categoryid;
-          break;
-
-        case "searchCancelled":
-          searchIsOn = false;
-          if(activeCategory){
-            CategoryChangeHandler({ data: { itemId: activeCategory }});
-          }
-          break;
-
-        case "searchActive":
-          searchIsOn = true;
-          break;
-
-        case 'ModalClosed':
-          if(activeRecentSearches){
-            activeRecentSearches = false;
-          }
-          break;
-
-        case 'SubgroupsIds':
-          //Add subgroups ids fetched in the slider to the list of categories ids
-          if(!allCategoriesIds.some(categoryId => e.data.subGroupsIds.includes(categoryId))) {
-            allCategoriesIds.push(...e.data.subGroupsIds);
-          }
-        break;
-      }
-    }
-  }
-
-  const getCategories = (url:any):Promise<any> => {
-    return new Promise((resolve, reject) => {
-      isLoading = true;
-
-      fetch(url)
-        .then((res:any) => res.json())
-        .then((data:CategoriesData) => {
-          isLoading = false;
-
-          resolve(data);
-        }).catch((err:any) => {
-          hasErrors = true;
-          isLoading = false;
-
-          console.error(err);
-
-          reject(err);
-        });
-    });
-  }
-
-  //
-  // --- START of communication with other widgets
-  //
-
-  const sendCategoryData = (node:any, categoryId:string):void => {
-    currentCategoryId = categoryId;
-    window.postMessage({ type: `CategoryData_${categoryId}`, categoryId, visiblegames, receivedFavoriteResults }, window.location.href);
-  }
-
-  //
-  // --- END of communication with other widgets
-  //
-
-  /* Listen for scroll */
-  const scrollHandler = ():void => {
-    if (searchElementWrapper) {
-      searchPositionTop = searchElementWrapper.getBoundingClientRect().top + document.body.getBoundingClientRect().top;
-    }
-
-    if (document.documentElement.scrollTop > searchPositionTop || searchPositionTop > 130) {
-      adjustingScroll = true;
-    } else {
-      adjustingScroll = false;
-    }
-  }
-
-  const checkAttrs = ():boolean => {
-    if (!endpoint) {
-      error = "Endpoint is missing! Please provide a valid endpointURL.";
-      hasErrors = true;
-      isLoading = false;
-
-      console.error(error);
-    }
-
-    if (!datasource) {
-      error = "Datasource is missing! Please provide a valid datasource.";
-      hasErrors = true;
-      isLoading = false;
-
-      console.error(error);
-    }
-
-    if (!lang || lang.length < 2) {
-      error = "Language is missing! Please provide a valid language (alpha2code)";
-      hasErrors = true;
-      isLoading = false;
-
-      console.error(error);
-    }
-
-    return hasErrors;
-  }
-
-  const updateCategoriesLanguage = ():void => {
-    if (firstLoad) {
-      setTimeout(() => {
-        window.postMessage({ type: 'CategoryUpdate', itemId: activeCategory}, window.location.href);
-      }, 500);
-    }
-
-    firstLoad = false;
-  }
-
-  const initialSetup = ():void => {
-    if (!checkAttrs()) {
-      isLoading = true;
-
-      setLocale(lang);
-
-      let categoriesUrl:URL = new URL(`${endpoint}/v1/casino/groups/${datasource}`);
-
-      categoriesUrl.searchParams.append('language', lang);
-      categoriesUrl.searchParams.append('platform', getDevice(userAgent));
-
-      getCategories(categoriesUrl).then((data:CategoriesData) => {
-        // create an array of filtered categories
-        let arrayFilteredCategories = filteredcategories.split(',');
-
-        if (data) {
-          categoriesData = data.items.filter((item:any) => {
-            let filtered:boolean;
-            if( item.games.total > 0 ) {
-              filtered = true;
-
-              // exclude filtered categories
-              if( filteredcategories ){
-                for (let element of arrayFilteredCategories){
-                      if( item.flags == element ) filtered = false;
-                }
-              }
-            };
-            return filtered;
-          });
-
-          shownCategories = categoriesData.filter(category => {
-            if (category?.subGroups?.count > 0 && showsubgroups == 'true') {
-              return false;
-            }
-
-            return true;
-          }).map((category) => category.id);
-          // Create a list of all categories to check the activecategory against.
-          allCategoriesIds = data.items.map(category => category.id.toString());
-          isLoading = false;
-        }
-      });
-
-      searchElementWrapper = searchWrapper;
-
-      if (searchElementWrapper) {
-        searchPositionTop = searchElementWrapper.getBoundingClientRect().top - document.body.getBoundingClientRect().top;
-      }
-    }
-  }
-
-  const setActiveCategory = ():void => {
-    activeCategory = activecategory;
-    CategoryChangeHandler({ data: { itemId: activeCategory }});
-  }
-
-  const checkExistentCategory = ():void => {
-    // Check if the active category is found in the list of available categories. IF not send event to the state manager.
-    if (allCategoriesIds && !allCategoriesIds.includes(decodeURI(activeCategory)) && activeCategory != '') {
-      window.postMessage({type: 'NonExistentCategory'}, window.location.href);
-    }
-  }
-
-  const setSession = ():void => {
-    isLoggedIn = true;
-    sessionID = session;
-    playerID = userid;
-  }
-
-  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 addEventsToDisplayedElements = ():void => {
-    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 setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(new URL(clientstylingurl))
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
-      });
-  }
-
-  onMount(() => {
-    window.addEventListener('scroll', scrollHandler, false);
-    window.addEventListener('message', messageHandler, false);
-
-    return () => {
-      window.removeEventListener('scroll', scrollHandler);
-      window.removeEventListener('message', messageHandler);
-
-      removeEventsToDisplayedElements();
-    }
-  });
-
-  $: lang && activecategory && setActiveCategory();
-  $: session && userid && endpoint && setSession();
-  $: activeCategory && allCategoriesIds && checkExistentCategory();
-  $: endpoint && datasource && lang && initialSetup();
-  $: lang && updateCategoriesLanguage();
-  $: translationurl && setTranslationUrl();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: panicButton && addEventsToDisplayedElements();
-</script>
-
-<svelte:head>
-  <script type="module" src="https://unpkg.com/@everymatrix/casino-play-random-game"></script>
-</svelte:head>
-
-<div bind:this={customStylingContainer}>
-  {#if hasErrors}
-    <p class="SearchLoading">{$_('500')}</p>
-  {:else}
-    <section class="CategoriesLobby">
-
-      <casino-search-nd
-        {endpoint} {datasource} {showgamename} {lang} {clientstyling} {clientstylingurl} {integratedgameframedesktop} {integratedgameframemobile} {translationurl} showfavorites = {favorites}
-      ></casino-search-nd>
-
-      {#if playrandomgame == 'true' && searchFocus == false && !searchIsOn}
-        <casino-random-game {datasource} {filteredrandomgamecategories} {endpoint} {lang} {gameevent} {randombuttonicon} {clientstyling} {clientstylingurl}>
-        </casino-random-game>
-      {/if}
-
-      {#if randomgameslider == 'true' && searchFocus == false && !searchIsOn}
-        <casino-play-random-game {datasource} {endpoint} language={lang} specific-category={specificcategory} icon-visible={iconvisible} icon-visible-on-anim={iconvisibleonanim}  launch-by-game-card={launchbygamecard} client-styling={clientstyling} client-styling-url={clientstylingurl} translation-url={translationurl}></casino-play-random-game>
-      {/if}
-
-      {#if isLoading}
-        <p class="SearchLoading">{$_('loading')}</p>
-      {:else if !searchIsOn}
-        {#if lobbyScreen}
-          {#each shownCategories as category, index}
-            {#if positionwinnerswidget && index == +positionwinnerswidget}
-              <div class="CasinoWinners">
-                <casino-winners
-                {session}
-                {userid}
-                {periodrecent}
-                {periodtop}
-                {numberusersrecent}
-                {numberuserstop}
-                {amountlimit}
-                {isrecentavailable}
-                {istopavailable}
-                {defaultcurrency}
-                usercurrency={currency}
-                {enableautoscroll}
-                {tabsorder}
-                {lang}
-                {clientstyling}
-                {clientstylingurl}
-                {endpoint}
-                {winnersdatasources}
-                />
-              </div>
-            {/if}
-            {#if positioncasinocalendar && index == +positioncasinocalendar}
-              <br>
-              <casino-calendar
-                {userroles}
-                {cmsendpoint}
-                {env}
-                {lang}
-                {clientstyling}
-                {clientstylingurl}
-              />
-            {/if}
-            {#if positionjelobbywidget && index == +positionjelobbywidget}
-              <br>
-              <slot name="je-jackpots-widget" class="{isMobile(userAgent) ? '' : 'JackpotsContainer'}"></slot>
-            {/if}
-            {#if positionjackpotbanners && index == (positionjackpotbanners.split(',')[0] == '' ? shownCategories.length : +positionjackpotbanners.split(',')[0])}
-              <br>
-              <casino-jackpot-banner
-                title="Egypt Quest"
-                currency = {currency || 'RON'}
-                gameid = "998"
-                {endpoint}
-                {lang}
-                {backgroundsrc}
-                {backgroundsrcmobile}
-                {titlelogopath}
-                {caticon0}
-                {caticon1}
-                {caticon2}
-                {caticon3}
-                {iconlabels}
-                {visualstructure}
-                {clientstyling}
-                {clientstylingurl}
-              />
-            {:else if positionjackpotbanners && index == (positionjackpotbanners.split(',')[1] == '' ? shownCategories.length : +positionjackpotbanners.split(',')[1])}
-              <br>
-              <casino-jackpot-banner
-                title="Jackpot Cards"
-                currency = {currency || 'RON'}
-                gameid = "999"
-                {endpoint}
-                {lang}
-                backgroundsrc="/assets/background0.jpg"
-                backgroundsrcmobile="/assets/background0.jpg"
-                titlelogopath = "/assets/jackpots_logo.svg"
-                caticon0="/assets/icon0.svg"
-                caticon1="/assets/icon1.svg"
-                caticon2="/assets/icon2.svg"
-                caticon3="/assets/icon3.svg"
-                visualstructure="typeSpread"
-                {clientstyling}
-                {clientstylingurl}
-              />
-            {/if}
-            {#if positioncollections && index ==(positioncollections.split(',')[0] == '' ? shownCategories.length : +positioncollections.split(',')[0])}
-              <casino-collections-providers
-                {endpoint}
-                {datasource}
-                {lang}
-                {type}
-                {collectionprovidersgamenames}
-                {titletype}
-                {clientstyling}
-                {clientstylingurl}>
-              </casino-collections-providers>
-            {:else if positioncollections && index == (positioncollections.split(',')[1] == '' ? shownCategories.length : +positioncollections.split(',')[1])}
-              <casino-collections-providers
-                {endpoint}
-                {datasource}
-                {lang}
-                type='vendor'
-                titletype="logo"
-                {collectionprovidersgamenames}
-                {clientstyling}
-                {clientstylingurl}>
-              </casino-collections-providers>
-            {/if}
-            <casino-games-category-section-nd
-              session={session}
-              userid={userid}
-              endpoint={endpoint}
-              datasource={datasource}
-              lang={lang}
-              currency={currency}
-              use:sendCategoryData={category}
-              categoryid={category}
-              categoryindex={index}
-              categorygames="9"
-              fetchviaevent={fetchviaevent}
-              favorites={favorites}
-              {showgamename}
-              {translationurl}
-              class="CategoryContainer"
-              style="background-color: {(index % 2 !== 0) ? categorybackground : 'transparent'}"
-              {clientstyling}
-              {clientstylingurl}
-              {livecasino}
-              {visiblegames}
-              {gamepagemodalurl}
-              {integratedgameframedesktop}
-              {integratedgameframemobile}
-              {casinomygames}
-              {filterbylogo}
-              {addfilterselector}
-              {addsortingselector}
-              {casinogamesgridslider}
-            />
-          {/each}
-        {:else if myGamesSection}
-          <casino-my-games-nd
-            userid={userid}
-            session={session}
-            endpoint={endpoint}
-            datasource={datasource}
-            lang={lang}
-            currency={currency}
-            favorites={favorites}
-            {clientstyling}
-            {clientstylingurl}
-            {livecasino}
-            {visiblegames}
-            {gamepagemodalurl}
-            {showgamename}
-            {integratedgameframedesktop}
-            {integratedgameframemobile}
-            {translationurl}
-            {mostplayed}
-            {lastplayed}
-            {filteredcategories}
-            {activecategory}
-            {lastplayedunique}
-            categoryindex="0"
-            categoryid="MYGAMES"
-            {casinomygames}
-            {lastplayedperiod}
-            {mostplayedperiod}
-            {lastplayedorder}
-            {lastplayedlimit}
-            {mostplayedrounds}/>
-        {:else}
-          <casino-games-category-section-nd
-            userid={userid}
-            endpoint={endpoint}
-            datasource={datasource}
-            favorites={favorites}
-            lang={lang}
-            currency={currency}
-            session={session}
-            categoryid={activeCategory}
-            categorygames="9"
-            fetchviaevent={fetchviaevent}
-            class="CategoryContainer"
-            {showgamename}
-            {translationurl}
-            {clientstyling}
-            {clientstylingurl}
-            {livecasino}
-            {visiblegames}
-            {gamepagemodalurl}
-            {integratedgameframedesktop}
-            {integratedgameframemobile}
-            {casinomygames}
-            {filterbylogo}
-            {addfilterselector}
-            {addsortingselector}
-            {casinogamesgridslider}/>
-        {/if}
-      {/if}
-      {#if isLoggedIn && 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}
-    </section>
-  {/if}
-</div>
-<style lang="scss">
-
-
-
-  *, *::before, *::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  .CategoriesLobby {
-    margin: 0 auto;
-    max-width: 1300px;
-    position: relative;
-  }
-
-  .CasinoWinners {
-    background: transparent;
-    width: 100%;
-    min-height: 200px;
-  }
-
-  .PanicSectionMobile {
-    flex-direction: column;
-    margin: 20px 0;
-  }
-
-  .PanicSection {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    margin-top: 20px;
-  }
-
-  .PanicButton {
-    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: 48px;
-    line-height: 18px;
-    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
-    cursor: pointer;
-  }
-
-  .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;
-  }
-
-  .PanicButtonMobile {
-    width: 280px;
-    padding: 0 5px;
-
-    // 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
-  }
-
-  @-webkit-keyframes bar-animation {
-    0% {
-      background-position: 0;
-    }
-    100% {
-      background-position: 280px;
-    }
-  }
-
-
-  [type="search"] {
-    appearance: none;
-  }
-
-  .CategoryContainer, .JackpotsContainer {
-    display: block;
-
-    @media screen and (max-width: 1300px) {
-      padding: 0 2.4%
-    }
-  }
-
-  .SearchLoading {
-    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
-    font-size: 14px;
-    margin-top: 16px;
-    text-align: center;
-  }
-</style>