@everymatrix/casino-search 1.44.0 → 1.45.2

package/src/CasinoSearch.svelte

@@ -1,732 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { _, addNewMessages, setLocale } from './i18n';
-  import { TRANSLATIONS } from './translations.js';
-  import { getDevice } from 'rvhelper';
-  import { onMount } from 'svelte';
-  
-  import '@everymatrix/casino-game-thumbnail';    
-  import moment from 'moment';
-
-  export let endpoint:string = '';
-  export let datasource:string = '';
-  export let session:string = '';
-  export let userid:string = '';
-  export let lang:string = 'en';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  export let integratedgameframedesktop:string = 'false';
-  export let integratedgameframemobile:string = 'false';
-  export let showgamename:string = '';
-  export let gamepagemodalurl:string = 'true';
-  export let translationurl:string = '';
-  export let showfavorites:string = '';
-  export let cancelbutton:string = 'true';
-  export let notfoundicon:string = 'false';
-
-  let userAgent:any = window.navigator.userAgent;
-  let searchArray:Array<any> = [];
-  let searchedValues:any = [];
-  let gamesCache:Object = {};
-
-  let searchValue:string = '';
-  let searchElement:HTMLElement;
-  let searchCancelled:boolean = true;
-  let searchActive:boolean = false;
-  let searchInputMaxLength:number = 50;
-  
-  let isLoading:boolean = false; 
-  let customStylingContainer:HTMLElement;
-
-  let isLoggedIn:boolean = false;
-  let sessionID:string;
-  let playerID:string;
-  let favoriteGamesIds: string[] = [];
-
-  const setTranslationUrl = ():void => {
-    let url:string = translationurl;
-
-    fetch(url).then((res:any) => res.json())
-    .then((res) => {
-      Object.keys(res).forEach((item:any):void => {
-        addNewMessages(item, res[item]);
-      });
-    }).catch((err:any) => {
-      console.log(err);
-    });
-  }
-
-  Object.keys(TRANSLATIONS).forEach((item:any):void => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  const messageHandler = (e:any):void => {
-
-    if (e.data && e.data.type == 'SearchedItemClicked') {
-      addSearchedItem(e.data.gameId);
-    }
-
-    if (e.data.type == 'UserSessionID') {
-      sessionID = e.data.session;
-      playerID = e.data.userid;
-      isLoggedIn = true;
-    }
-
-    if (e.data.type == 'CategoryChange') {
-      cancelSearch();
-    }
-  }
-
-  const onFocus = ():void => {
-    searchCancelled = false;
-    searchActive = true;
-
-    if (endpoint && datasource && lang) {
-      if (searchValue.length < 2) {
-        searchArray = [];
-        let recentSearchedGames = localStorage.getItem(`searchedGamesWds_casino`);
-        let recentSearchedGamesArray:Array<any> = [];
-
-        if (recentSearchedGames) {
-          recentSearchedGamesArray = recentSearchedGames.split(',');
-        }
-  
-        let promises:Array<Promise<any>> = [];
-        let index = 0;
-        let length = recentSearchedGamesArray.length;
-        
-        if (length > 0) {
-          for (index = 0; index < length; index++) {
-            let url:any = new URL(`${endpoint}/v1/casino/games/${recentSearchedGamesArray[index]}`);
-            
-            url.searchParams.append('language', lang);
-            url.searchParams.append('datasource', datasource);
-            url.searchParams.append('platform', getDevice(userAgent));
-
-            promises.push(getGame(url, recentSearchedGamesArray[index]));
-          }
-
-          Promise.all(promises).then((res:any):void => {
-            res = res.filter(function( element ) {
-              return !!element;
-            });
-            searchArray = res.map((item) => {
-                item.isFavorite = checkFavorite(item.id);
-
-                return item;
-            });
-            if(searchArray.length){
-              handleGtag('searchSuccess', 'SearchWidget');
-            } else {
-              handleGtag('searchFail', 'SearchWidget');
-            }
-          }).catch(e=>{
-            handleGtag('searchError', 'SearchWidget');
-          });
-        } 
-      }
-    }
-    sendSearchStatus(searchActive);
-
-    handleGtag('searchAttempt', 'SearchWidget');
-
-    //Analytics event
-    handleGtag('SearchInitialized', 'SearchWidget');
-  }
-
-  // function handle for google Analytics
-  const handleGtag = (event, context) => {
-    if(typeof gtag == 'function'){
-      gtag('event', event, {
-        context
-      });
-    }
-  }
-
-  // function handle for overlay onClick to cancleSearch
-  const handleOverlay = () => {
-    if(cancelbutton != 'true'){
-      cancelSearch()
-    }
-  }
-
-  const getGames = (url:URL):Promise<any> => {
-    return new Promise((resolve, reject):void => {
-      isLoading = true;
-      
-      fetch(url.href)
-        .then((res:any) => res.json())
-        .then((games:any) => {
-          isLoading = false;
-
-          resolve(games);
-        }).catch((err:any) => {
-          isLoading = false;
-          
-          console.error(err);
-          
-          reject(err);
-        });
-    });
-  }
-
-  const getGame = (url:any, gameId?:string):Promise<any> => {
-    return new Promise((resolve, reject) => {
-      isLoading = true;
-
-      if (gameId && Object.keys(gamesCache).indexOf(gameId) >= 0) {
-        isLoading = false;
-        
-        resolve(gamesCache[gameId]);
-      } else {
-        fetch(url)
-          .then(fetchRes => fetchRes.json())
-          .then(gameData => {
-            isLoading = false;
-
-            if(!gameData.error){
-              gamesCache[gameData[0].gameId] = gameData[0];
-            }
-
-            resolve(gameData[0]);
-          }).catch((err:any) => {
-            isLoading = false;
-
-            console.error(err);
-
-            reject(err);
-          });
-      }
-    });
-  }
-
-  const getFavoriteGames = ():void => {
-    
-    const url:URL = new URL(`${endpoint}/v1/player/${playerID}/favorites/`);
-   
-    isLoading = true;
-    
-    let options = {
-          method: "GET",
-          headers: {
-            'X-SessionID': sessionID,
-          }
-        };
-
-    fetch(url.href, options)
-      .then((res:any) => res.json())
-      .then((favoriteGames:any) => {
-        isLoading = false;
-
-        favoriteGamesIds = favoriteGames.items.map(favoriteGame => favoriteGame.id);
-      });
-  }
-
-  const setSession = ():void => {
-    isLoggedIn = true;
-    sessionID = session;
-    playerID = userid;
-  }
-
-  const checkFavorite = (gameId:string):boolean => {
-    if (favoriteGamesIds.findIndex((favGameId:any) => favGameId == gameId) !== -1) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  const addGameTag = (tags:any[]):string => {
-    if(tags?.length === 0) return '';
-
-    let tagName:string;
-    let differenceOfTime = 99999999999;
-    let firstToExpire:number;
-
-    const currentDate = new Date(Date.now());
-
-    tags.forEach((tag, index)=> {
-      const startDateOfTag = new Date(tag.schedules[0].startTime);
-      const endDateOfTag = new Date(tag.schedules[0].endTime);
-
-      if (moment(endDateOfTag).diff(currentDate) < differenceOfTime) {
-        differenceOfTime = moment(endDateOfTag).diff(currentDate)
-        firstToExpire = index;
-      }
-      
-      if (moment(currentDate).isAfter(startDateOfTag) && moment(currentDate).isBefore(endDateOfTag)) {
-        tagName = tags[firstToExpire].name;
-      }
-    });
-    return tagName;
-  }
-  
-  const addSearchedItem = (gameID:any):void => {
-    searchedValues = localStorage.getItem('searchedGamesWds_casino');
-
-    if (searchedValues) {
-      searchedValues = searchedValues.split(',');
-    } else {
-      searchedValues = [];
-    }
-
-    if (searchedValues.indexOf(gameID) === -1) {
-      let value;
-
-      searchedValues.unshift(gameID);
-      value = searchedValues.join(',');
-      localStorage.setItem(`searchedGamesWds_casino`, value);
-    }
-  }
-
-  const cancelSearch = ():void => {
-    searchValue = '';
-    searchCancelled = true;
-    isLoading = false;
-    searchArray = [];
-    searchActive = false;
-
-    sendSearchStatus(searchActive);
-  }
-
-  const clearSearch = ():void => {
-    searchValue = '';
-    searchElement.focus();
-  }
-
-  // --- Communication with other widgets
-
-  const sendSearchStatus = (searchStatus):void => {
-    window.postMessage({ type: searchStatus === true ? 'searchActive' : 'searchCancelled', searchStatus}, window.location.href);
-  };
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    let url:URL = new URL(clientstylingurl);
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(url.href)
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-      });
-  }
-
-  $: if (searchValue.length >= 2) {
-    const searchUrl:URL = new URL(`${endpoint}/v1/casino/games`);
-    
-    searchUrl.searchParams.append("datasource", datasource);
-    searchUrl.searchParams.append("expand", "vendor");
-    searchUrl.searchParams.append("platform", getDevice(userAgent));
-    searchUrl.searchParams.append("language", lang);
-    searchUrl.searchParams.append("pagination", "offset=0,limit=30");
-    searchUrl.searchParams.append("filter", `name=${searchValue}`);
-    
-    getGames(searchUrl).then((searchData:any) => {
-      searchArray = searchData.items.map((item) => {
-          item.isFavorite = checkFavorite(item.id);
-        return item;
-      });
-    });            
-  } else {
-    if (!searchCancelled) {
-      onFocus();
-    }
-  }
-
-  onMount(()=> {
-    window.addEventListener('message', messageHandler, false);
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-  
-  $: lang && setActiveLanguage();
-  $: translationurl && setTranslationUrl();
-  $: session && userid && setSession();
-  $: showfavorites && isLoggedIn && getFavoriteGames();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-      
-</script>
-<div class="{(getDevice(userAgent) !== 'PC') ? '' : 'Desktop'} CasinoSearch" bind:this={customStylingContainer}>
-  <div class="SearchWrap">
-    <div class="Search  {searchCancelled ? '' : 'SearchAnimation'}">
-      <div class="SearchIcon">
-        <svg width="14" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m10.48 10.985 2.21 2.373"/>
-          <circle cx="6.5" cy="6.5" r="5.75" stroke="#212121" stroke-width="1.5"/>
-        </svg>
-      </div>
-          <input class="SearchInput" type="search" placeholder="{$_('placeHolderSearchGames')}" bind:value={searchValue} on:focus={onFocus} bind:this={searchElement} maxlength={searchInputMaxLength}>
-          <span on:click={() => clearSearch()} class="SearchClearButton { cancelbutton != 'true' ? 'WithoutCancel' : ''} { searchValue.length != 0 ? '' : 'NotVisible'}">
-            <svg width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="m1.45 1.5 8.1 8M1.45 9.5l8.1-8" stroke="#717171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-          </span>
-          {#if cancelbutton === 'true'}
-          <small on:click={() => cancelSearch()} class="SearchCancelButton {searchCancelled ? 'NotVisible' : ''}">
-            {$_('cancel')}
-          </small>
-        {/if}
-    </div>
-  </div>
-  <div class="{(cancelbutton != 'true') ? 'OverlayCancel' : ''}" on:click={handleOverlay}></div>
-    {#if isLoading}
-      <p class="LoadingContent">{$_('loading')}</p>
-    {:else}
-      {#if searchActive == true && searchValue.length < 2}
-        {#if searchArray.length !== 0} 
-          <p class="SearchMessage">{$_('recentSearch')}</p> 
-          {/if}
-          {#if searchArray.length == 0}
-          <div class="ResultsContainerError {notfoundicon == 'true' ? 'WithIcon': ''}">
-            {#if notfoundicon === 'true'}
-            <div class="SearchErrorIcon">
-              <svg width="" height="" viewBox="0 0 240 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <rect x="40" width="160" height="160" rx="80" fill="var(--emfe-w-color-contrast, #E6E6E6)" fill-opacity="0.6"/>
-                <path d="M152 112L136 96" stroke="var(--emfe-w-color-contrast, #131313)" stroke-width="3" stroke-linecap="square" stroke-linejoin="round"/>
-                <path d="M116 104C131.464 104 144 91.464 144 76C144 60.536 131.464 48 116 48C100.536 48 88 60.536 88 76C88 91.464 100.536 104 116 104Z" stroke="var(--emfe-w-color-contrast, #131313)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M116.001 78.1221L121.88 84.0009L124.001 81.8796L118.122 76.0008L124.002 70.1214L121.88 68L116.001 73.8795L110.121 68L108 70.1214L113.879 76.0008L108.001 81.8796L110.122 84.0009L116.001 78.1221Z" fill="var(--emfe-w-color-contrast, #131313)"/>
-              </svg>
-            </div>
-            {/if}
-            <p class="SearchMessage">{$_('noRecentSearches')}</p>
-          </div>
-          {/if}
-      {:else if searchArray.length != 0} 
-        <p class="SearchMessage">{$_('searchResult')}</p>
-      {/if} 
-      <div class="SearchResultsContainer {searchActive == true ? '': 'NotVisible'}">
-        {#if searchCancelled === false}
-          {#each searchArray as game}
-            <casino-game-thumbnail
-              endpoint={endpoint}
-              session = {sessionID}
-              userid = {playerID}
-              favorites = {showfavorites}
-              lang={lang}
-              gamethumbnail={game.thumbnail}
-              gamename={game.name}
-              gamevendor={game.vendor.displayName}
-              gameLaunchUrl={game.launchUrl}
-              gameisnew={game.isNew}
-              gametag={game.advancedTags?.length > 0 && addGameTag(game.advancedTags)}
-              gamecellsize={game.cellSize}
-              gameid={game.id}
-              {showgamename}
-              gamefunmode={game.hasFunMode}
-              gamefavorite={game.isFavorite}
-              livelobbyendpoint={game.details ? game.launchUrl : ''}
-              {integratedgameframedesktop}
-              {integratedgameframemobile}
-              {clientstyling}
-              {clientstylingurl}
-              {gamepagemodalurl}
-            ></casino-game-thumbnail>
-          {/each}
-        {/if}
-        {#if searchValue.length >= 2 && searchArray.length == 0}
-          <div class="ResultsContainerError {notfoundicon == 'true' ? 'WithIcon': ''}">
-            {#if notfoundicon === 'true'}
-              <div class="SearchErrorIcon">
-                <svg width="" height="" viewBox="0 0 240 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <rect x="40" width="160" height="160" rx="80" fill="var(--emfe-w-color-contrast, #E6E6E6)" fill-opacity="0.6"/>
-                  <path d="M152 112L136 96" stroke="var(--emfe-w-color-contrast, #131313)" stroke-width="3" stroke-linecap="square" stroke-linejoin="round"/>
-                  <path d="M116 104C131.464 104 144 91.464 144 76C144 60.536 131.464 48 116 48C100.536 48 88 60.536 88 76C88 91.464 100.536 104 116 104Z" stroke="var(--emfe-w-color-contrast, #131313)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M116.001 78.1221L121.88 84.0009L124.001 81.8796L118.122 76.0008L124.002 70.1214L121.88 68L116.001 73.8795L110.121 68L108 70.1214L113.879 76.0008L108.001 81.8796L110.122 84.0009L116.001 78.1221Z" fill="var(--emfe-w-color-contrast, #131313)"/>
-                </svg>
-              </div>
-            {/if}
-            <p class="SearchMessage">{$_('notFound')}</p>
-            <p>{$_('notFoundText')}</p>
-          </div>
-        {/if} 
-      </div>
-    {/if}
-  </div>
-
-<style lang="scss">
-  $grid-gap: 16px;
-  $grid-cell-size: 192px;
-  $grid-cell-size-small: 110px;
-  $grid-cell-size-medium: 122px;
-
-  *,
-  *::before,
-  *::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: inherit
-  }
-
-  :host {
-    font-family: inherit;
-  }
-
-  input,
-  textarea, 
-  button {font-family: inherit}
-
-
-  .CasinoSearch {
-    margin: 30px 16px;
-    position: relative;
-  }
-
-  .SearchWrap {
-    width: 100%;
-    margin: auto;
-  }
-
-  .OverlayCancel {
-    width: 100%;
-    height: 100vh;
-    position: absolute;
-    translate: 0 -100px;
-    z-index: 2;
-  }
-
-  .LoadingContent {
-    color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
-  }
-
-  .Search {
-    display: flex;
-    align-items: center;
-    position: relative;
-    margin-bottom: 20px;
-    z-index: 5;
-
-    &Icon{
-      position: absolute;
-      left: 15px;
-      top: 50%;
-      z-index: 1;
-      transform: translateY(-50%);
-
-      svg {
-        height: 14px;
-        width: 13px;
-      } 
-    }
-
-    &Input {
-      border-radius: 4px;
-      border: 1px solid var(--emfe-w-color-gray-300, #58586B);
-      color: var(--emfe-w-color-gray-100, #E6E6E6);
-      display: block;
-      font-size: 16px;
-      font-weight: 300;
-      padding: 14px 5px 14px 46px;
-      width:100%;
-      &::placeholder {
-        color: var(--emfe-w-color-gray-150, #828282);
-        font-size: 16px;
-        font-weight: 300;
-      }
-
-      &:focus {
-       outline: 1px solid  var(--emfe-w-color-gray-300, #58586B);
-      }
-
-      &::-webkit-search-decoration,
-      &::-webkit-search-cancel-button,
-      &::-webkit-search-results-button,
-      &::-webkit-search-results-decoration {
-          -webkit-appearance:none;
-        }
-    }
-
-    &ClearButton{
-      position: absolute;
-      top: 30%;
-      right: 65px;
-      cursor: pointer;
-      &.WithoutCancel{
-        right: 18px;
-      }
-    }
-
-    &CancelButton {
-      color: var(--emfe-w-color-contrast, #E6E6E6);
-      font-weight: 300;
-      margin-left: 8px;
-      cursor: pointer;
-    }
-
-    &Message {
-      font-size: 18px;
-      font-weight: 600;
-      margin: 24px 0;
-      color: var(--emfe-w-color-contrast, #000000);
-    }
-
-    &ErrorIcon {
-      height: 170px;
-      filter: drop-shadow(1px 5px 5px rgb(0 0 0 / 0.1));
-    }
-    
-    &ResultsContainer {
-      display: grid;
-      gap: $grid-gap + 12;
-      grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size, 46%), 1fr));
-      grid-template-rows: repeat(auto-fill, $grid-cell-size);
-      grid-auto-rows: $grid-cell-size;
-      grid-auto-columns: $grid-cell-size;
-      grid-auto-flow: row dense;
-
-      @media screen and (max-width: 480px) {
-        display: grid;
-        gap: $grid-gap;
-        grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-medium, 46%), 1fr));
-        grid-template-rows: repeat(auto-fill, $grid-cell-size-medium);
-        grid-auto-rows: $grid-cell-size-medium;
-        grid-auto-columns: $grid-cell-size-medium;
-      }
-      
-      @media screen and (max-width: 385px) {
-        display: grid;
-        gap: $grid-gap;
-        grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-small, 46%), 1fr));
-        grid-template-rows: repeat(auto-fill, $grid-cell-size-small);
-        grid-auto-rows: $grid-cell-size-small;
-        grid-auto-columns: $grid-cell-size-small;
-      }
-      
-      @media screen and (min-width: 1100px) {
-        grid-template-rows: repeat(auto-fill, 142px);
-        grid-auto-rows: 142px;
-      }
-
-      @media screen and (max-width: 1300px) {
-        padding: 0 2.4%
-      }
-    }
-  }
-
-  .ResultsContainerError {
-    text-align: center;
-    width: 300px;
-    color: var(--emfe-w-color-contrast, #828282);
-    font-weight: 300;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 1;
-    margin-top: 120px;
-  }
-
-  casino-game-thumbnail-nd {
-    z-index: 5;
-  }
-
-  .NotVisible {
-    display: none;
-  }
-
-  .Desktop {
-
-    .NotVisible {
-      opacity: 0;
-      visibility: hidden;
-      display: inline;
-    }
-
-    .SearchWrap {
-      width: 50%;
-      margin: auto;
-    }
-
-    &.CasinoSearch {
-      margin: 30px auto;
-      position: relative;
-    }
-
-    .ResultsContainerError {
-      text-align: center;
-      width: 300px;
-      color: var(--emfe-w-color-contrast, #828282);
-      font-weight: 300;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      z-index: 1;
-      margin-top: 120px;
-      
-      &.WithIcon {
-        top: 60%;
-      }
-    }
-
-    .Search {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.2s cubic-bezier(1, 0, 0.46, 1.03);
-
-
-      &Icon {
-        position: relative;
-        top: 0;
-        left: 0;
-        transform: translateY(0);
-        margin-right: -28px;
-      }
-
-      &ClearButton{
-        position: relative;
-        top: 0;
-        right: 0;
-        margin-left: -23px;
-      }
-
-      &CancelButton {
-        margin-left: 20px;
-      }
-
-      &Animation {
-        transform: scaleX(110%);
-        & Input {
-          outline: none;
-          box-shadow: 0 5px 7px rgba(0,0,0,0.25);
-          background-color: rgba(255, 255, 255, 0.2);
-        }
-      }
-     
-      &Message {
-        font-size: 18px;
-        font-weight: 600;
-        margin: 24px 0;
-        margin-top:90px
-      }
-      &ErrorIcon {
-        height: 190px;
-        margin-bottom: -70px;
-      }
-    }
-
-    .OverlayCancel {
-      height: 90vh;
-      z-index: 2;
-    }
-  }
-
-
-</style>