@everymatrix/casino-page-nd 1.37.5

package/src/CasinoPage.svelte

@@ -0,0 +1,857 @@
+<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-favorites-section';
+  import '@everymatrix/casino-last-played-section';
+  import '@everymatrix/casino-most-played-section';
+  import '@everymatrix/casino-my-games';
+  import '@everymatrix/casino-search';
+  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;
+        //@TODO: if we remove the settimeout, the postmessage does not execute, at all - weird behaviour
+        setTimeout(() => {
+          window.postMessage({ type: 'CategoryUpdate', itemId: activeCategory}, window.location.href);
+        }, 2000);
+        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
+        {endpoint} {datasource} {showgamename} {lang} {clientstyling} {clientstylingurl} {integratedgameframedesktop} {integratedgameframemobile} {translationurl} showfavorites = {favorites}
+      ></casino-search>
+
+      {#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
+            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>