@everymatrix/casino-lobby 0.0.367 → 0.0.369

package/src/CasinoLobby.svelte

@@ -1,358 +1,358 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { getDevice, checkSession } from 'rvhelper';
-  import { setupI18n, setLocale } from './i18n';
-
-  import '@everymatrix/casino-categories-slider';
-  import '@everymatrix/casino-page';
-  import '@everymatrix/casino-modal';
-  // import '@everymatrix/casino-game-page-2';
-  import '@everymatrix/casino-game-page';
-  import '@everymatrix/casino-filter-modal';
-  import '@everymatrix/casino-filter-page';
-  import '@everymatrix/casino-integrated-game-page';
-
-  export let endpoint:string = '';
-  export let datasource:string = '';
-  export let lang:string = ''; // Language
-  export let session:string = ''; // Value for sessionID
-  export let userid:string = '';
-  export let opsession:string = '';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  export let clockformat:string = '';
-  export let lobbyid:string = '';
-  export let currency: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 mostplayed:string = '';
-  export let mostplayedrounds:string = '';
-  export let favorites:string = '';
-
-  export let desktopoffset:string = '0';
-  export let mobileoffset:string = '0';
-  export let alternativesearch:string = 'false';
-
-  export let containermaxwidth:string = '';
-  export let haspanicbutton:string = 'false';
-
-  export let activecategory:string = 'LOBBY';
-  export let actionevent:string = 'CategoryChange';
-  export let livecasino:string = 'false';
-  export let playforfun:string = 'true';
-  export let gamemodal:string = 'true';
-  export let playrandomgame:string = 'false';
-  export let visiblegames:string = '10';
-  export let integratedgameframedesktop:string = 'false';
-  export let integratedgameframemobile:string = 'false';
-  export let gamepagemodalurl:string = 'false';
-  export let enablecasinowinners:string = 'true';
-  export let enablejackpotbanner:string = 'true';
-
-  export let tabsorder:string = '';
-  export let enableautoscroll:string = '';
-  export let istopavailable:string = '';
-  export let isrecentavailable:string = '';
-
-  export let showsubgroups:string = '';
-
-  // Button icon for random game widget
-  export let randombuttonicon:string = '';
-
-  let endpointURL:string;
-  let DS:string;
-  let language:string;
-  let displayNone:boolean = false;
-  let hasErrors:boolean = false;
-  let error:string = 'Loading, please wait ...';
-  let isLoggedIn:boolean = false;
-  let sessionID:string = '';
-  let playerID:string = '';
-  let userAgent:string = window.navigator.userAgent;
-  let isLoading:boolean = true;
-
-  let headerPlaceholderSize:number = 0;
-  let scrollTop:boolean = false;
-  let customStylingContainer:HTMLElement;
-  let mostPlayed;
-  let fav;
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  const messageHandler = (e:any):void => {
-    if (e.data) {
-      switch(e.data.type) {
-        case 'WidgetTopReference':
-          scrollTop = e.data.scrollTop;
-          // check if the category has been changed and the scroll top
-          if (scrollTop) {
-            if (!headerPlaceholderSize) {
-              headerPlaceholderSize = (getDevice(userAgent) === 'PC') ? parseInt(desktopoffset) : parseInt(mobileoffset);
-            }
-            window.scrollTo({ top: headerPlaceholderSize });
-          }
-          break;
-
-        case 'UserSessionID':
-          sessionID = e.data.session;
-          playerID = e.data.userID;
-          break;
-
-        case 'CategoryChange':
-          activecategory = e.data.itemId;
-          break;
-      }
-    }
-  }
-
-  const checkAttrs = ():boolean => {
-    if (!endpoint) {
-      error = "Endpoint is missing! Please provide a valid endpointURL.";
-      hasErrors = true;
-
-      console.error(error);
-    }
-
-    if (!datasource) {
-      error = "Datasource is missing! Please provide a valid datasource.";
-      hasErrors = true;
-
-      console.error(error);
-    }
-
-    if (!lang || lang.length < 2) {
-      error = "Language is missing! Please provide a valid language (alpha2code)";
-      hasErrors = true;
-
-      console.error(error);
-    }
-
-    return hasErrors;
-  }
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  const initialSetup = ():void => {
-    checkAttrs();
-    setLocale(lang);
-    endpointURL = endpoint;
-    DS = datasource;
-    language = lang;
-
-    mostPlayed = mostplayed;
-    fav = favorites;
-
-    hasErrors = false;
-    isLoading = false;
-  }
-
-  const setSession = ():void => {
-    checkSession(endpoint, session).then((res:any) => {
-      sessionID = res.Guid;
-      playerID = res.UserID;
-      currency = res.Currency;
-      isLoggedIn = true;
-    }, (err:any) => {
-      isLoggedIn = false;
-      console.error('Error while checking the session - ', err)
-    });
-  }
-
-  const setOpSession = ():void => {
-    isLoggedIn = true;
-    sessionID = opsession;
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    displayNone = true;
-
-    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
-
-        if (customStylingContainer) {
-          setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-          setTimeout(() => { displayNone = false; }, 500);
-        }
-      });
-  }
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-
-    headerPlaceholderSize = (getDevice(userAgent) === 'PC') ? parseInt(desktopoffset) : parseInt(mobileoffset);
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  $: lang && setActiveLanguage();
-  $: session && userid && endpoint && setSession();
-  $: endpoint && datasource && lang && mostplayed && favorites && initialSetup();
-  $: opsession && setOpSession();
-  $: clientstyling && setClientStyling();
-  $: clientstylingurl && setClientStylingURL();
-</script>
-
-<div bind:this={customStylingContainer} class={displayNone ? 'DisplayNone' : ''} part="{displayNone ? 'DisplayNone' : ''}">
-  {#if hasErrors}
-    <p style="color:var(--emfe-w-color-white, #FFFFFF)">{error}</p>
-  {:else}
-    <div class="CasinoLobby" part="CasinoLobby">
-      <div class="WidgetsSection" part="WidgetsSection">
-        <div class="HeaderPlaceholder" part="HeaderPlaceholder" style="height:{headerPlaceholderSize}px"></div>
-        <div class="ScrollTop" part="ScrollTop"></div>
-        <casino-categories-slider
-          endpoint={endpointURL}
-          datasource={DS}
-          lang={language}
-          session={sessionID}
-          userid={userid}
-          sessioncheck="false"
-          {actionevent}
-          {mostplayed}
-          {mostplayedrounds}
-          {favorites}
-          {activecategory}
-          {clientstyling}
-          {clientstylingurl}
-          {containermaxwidth}
-          {showsubgroups}
-        ></casino-categories-slider>
-        <casino-page
-          session={sessionID}
-          userid={userid}
-          endpoint={endpointURL}
-          datasource={DS}
-          lang={language}
-          {visiblegames}
-          {playrandomgame}
-          {activecategory}
-          {alternativesearch}
-          {favorites}
-          {mostplayedrounds}
-          {mostplayed}
-          {clientstyling}
-          {clientstylingurl}
-          {lobbyid}
-          {containermaxwidth}
-          {haspanicbutton}
-          {livecasino}
-          {currency}
-          {gamepagemodalurl}
-          {randombuttonicon}
-          {enablecasinowinners}
-          {enablejackpotbanner}
-          {enableautoscroll}
-          {tabsorder}
-          {isrecentavailable}
-          {istopavailable}
-        ></casino-page>
-        {#if gamemodal == 'true'}
-          <casino-modal
-            session={sessionID}
-            userid={userid}
-            endpoint={endpointURL}
-            datasource={DS}
-            lang={language}
-            sessioncheck="false"
-            {clientstyling}
-            {clientstylingurl}
-            {gamepagemodalurl}
-            {haspanicbutton}
-          >
-            <casino-game-page
-              session={sessionID}
-              userid={userid}
-              endpoint={endpointURL}
-              datasource={DS}
-              lang={language}
-              loginevent={loginevent}
-              registerevent={registerevent}
-              depositevent={depositevent}
-              checksession="false"
-              {playforfun}
-              {favorites}
-              {clientstyling}
-              {clientstylingurl}
-              {clockformat}
-              {haspanicbutton}
-              {currency}
-              {integratedgameframedesktop}
-              {integratedgameframemobile}
-            />
-          </casino-modal>
-        {/if}
-        <casino-filter-modal
-          {clientstylingurl}
-          session={sessionID}
-          userid={userid}
-          endpoint={endpointURL}
-          datasource={DS}
-          lang={language}
-          sessioncheck="false"
-          {clientstyling}>
-          <casino-filter-page
-            session={sessionID}
-            userid={userid}
-            endpoint={endpointURL}
-            datasource={DS}
-            lang={language}
-            {clientstylingurl}
-            {clientstyling}>
-          </casino-filter-page>
-        </casino-filter-modal>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style lang="scss">
-  * {
-    /* Display & Box Model */
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  .CasinoLobby {
-      background-color: var(--emfe-w-color-contrast, #07072A);
-      width: 100%;
-      margin: 0 auto;
-      min-height: 100vh;
-      /*padding: 0 1em;*/
-  }
-
-  .DisplayNone {
-    display: none;
-  }
-
-  .WidgetsSection {
-    padding-bottom: 40px;
-  }
-</style>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { getDevice, checkSession } from 'rvhelper';
+  import { setupI18n, setLocale } from './i18n';
+
+  import '@everymatrix/casino-categories-slider';
+  import '@everymatrix/casino-page';
+  import '@everymatrix/casino-modal';
+  // import '@everymatrix/casino-game-page-2';
+  import '@everymatrix/casino-game-page';
+  import '@everymatrix/casino-filter-modal';
+  import '@everymatrix/casino-filter-page';
+  import '@everymatrix/casino-integrated-game-page';
+
+  export let endpoint:string = '';
+  export let datasource:string = '';
+  export let lang:string = ''; // Language
+  export let session:string = ''; // Value for sessionID
+  export let userid:string = '';
+  export let opsession:string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let clockformat:string = '';
+  export let lobbyid:string = '';
+  export let currency: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 mostplayed:string = '';
+  export let mostplayedrounds:string = '';
+  export let favorites:string = '';
+
+  export let desktopoffset:string = '0';
+  export let mobileoffset:string = '0';
+  export let alternativesearch:string = 'false';
+
+  export let containermaxwidth:string = '';
+  export let haspanicbutton:string = 'false';
+
+  export let activecategory:string = 'LOBBY';
+  export let actionevent:string = 'CategoryChange';
+  export let livecasino:string = 'false';
+  export let playforfun:string = 'true';
+  export let gamemodal:string = 'true';
+  export let playrandomgame:string = 'false';
+  export let visiblegames:string = '10';
+  export let integratedgameframedesktop:string = 'false';
+  export let integratedgameframemobile:string = 'false';
+  export let gamepagemodalurl:string = 'false';
+  export let enablecasinowinners:string = 'true';
+  export let enablejackpotbanner:string = 'true';
+
+  export let tabsorder:string = '';
+  export let enableautoscroll:string = '';
+  export let istopavailable:string = '';
+  export let isrecentavailable:string = '';
+
+  export let showsubgroups:string = '';
+
+  // Button icon for random game widget
+  export let randombuttonicon:string = '';
+
+  let endpointURL:string;
+  let DS:string;
+  let language:string;
+  let displayNone:boolean = false;
+  let hasErrors:boolean = false;
+  let error:string = 'Loading, please wait ...';
+  let isLoggedIn:boolean = false;
+  let sessionID:string = '';
+  let playerID:string = '';
+  let userAgent:string = window.navigator.userAgent;
+  let isLoading:boolean = true;
+
+  let headerPlaceholderSize:number = 0;
+  let scrollTop:boolean = false;
+  let customStylingContainer:HTMLElement;
+  let mostPlayed;
+  let fav;
+
+  setupI18n({ withLocale: 'en', translations: {}});
+
+  const messageHandler = (e:any):void => {
+    if (e.data) {
+      switch(e.data.type) {
+        case 'WidgetTopReference':
+          scrollTop = e.data.scrollTop;
+          // check if the category has been changed and the scroll top
+          if (scrollTop) {
+            if (!headerPlaceholderSize) {
+              headerPlaceholderSize = (getDevice(userAgent) === 'PC') ? parseInt(desktopoffset) : parseInt(mobileoffset);
+            }
+            window.scrollTo({ top: headerPlaceholderSize });
+          }
+          break;
+
+        case 'UserSessionID':
+          sessionID = e.data.session;
+          playerID = e.data.userID;
+          break;
+
+        case 'CategoryChange':
+          activecategory = e.data.itemId;
+          break;
+      }
+    }
+  }
+
+  const checkAttrs = ():boolean => {
+    if (!endpoint) {
+      error = "Endpoint is missing! Please provide a valid endpointURL.";
+      hasErrors = true;
+
+      console.error(error);
+    }
+
+    if (!datasource) {
+      error = "Datasource is missing! Please provide a valid datasource.";
+      hasErrors = true;
+
+      console.error(error);
+    }
+
+    if (!lang || lang.length < 2) {
+      error = "Language is missing! Please provide a valid language (alpha2code)";
+      hasErrors = true;
+
+      console.error(error);
+    }
+
+    return hasErrors;
+  }
+
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
+
+  const initialSetup = ():void => {
+    checkAttrs();
+    setLocale(lang);
+    endpointURL = endpoint;
+    DS = datasource;
+    language = lang;
+
+    mostPlayed = mostplayed;
+    fav = favorites;
+
+    hasErrors = false;
+    isLoading = false;
+  }
+
+  const setSession = ():void => {
+    checkSession(endpoint, session).then((res:any) => {
+      sessionID = res.Guid;
+      playerID = res.UserID;
+      currency = res.Currency;
+      isLoggedIn = true;
+    }, (err:any) => {
+      isLoggedIn = false;
+      console.error('Error while checking the session - ', err)
+    });
+  }
+
+  const setOpSession = ():void => {
+    isLoggedIn = true;
+    sessionID = opsession;
+  }
+
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = ():void => {
+    displayNone = true;
+
+    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
+
+        if (customStylingContainer) {
+          setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+          setTimeout(() => { displayNone = false; }, 500);
+        }
+      });
+  }
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+
+    headerPlaceholderSize = (getDevice(userAgent) === 'PC') ? parseInt(desktopoffset) : parseInt(mobileoffset);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: lang && setActiveLanguage();
+  $: session && userid && endpoint && setSession();
+  $: endpoint && datasource && lang && mostplayed && favorites && initialSetup();
+  $: opsession && setOpSession();
+  $: clientstyling && setClientStyling();
+  $: clientstylingurl && setClientStylingURL();
+</script>
+
+<div bind:this={customStylingContainer} class={displayNone ? 'DisplayNone' : ''} part="{displayNone ? 'DisplayNone' : ''}">
+  {#if hasErrors}
+    <p style="color:var(--emfe-w-color-white, #FFFFFF)">{error}</p>
+  {:else}
+    <div class="CasinoLobby" part="CasinoLobby">
+      <div class="WidgetsSection" part="WidgetsSection">
+        <div class="HeaderPlaceholder" part="HeaderPlaceholder" style="height:{headerPlaceholderSize}px"></div>
+        <div class="ScrollTop" part="ScrollTop"></div>
+        <casino-categories-slider
+          endpoint={endpointURL}
+          datasource={DS}
+          lang={language}
+          session={sessionID}
+          userid={userid}
+          sessioncheck="false"
+          {actionevent}
+          {mostplayed}
+          {mostplayedrounds}
+          {favorites}
+          {activecategory}
+          {clientstyling}
+          {clientstylingurl}
+          {containermaxwidth}
+          {showsubgroups}
+        ></casino-categories-slider>
+        <casino-page
+          session={sessionID}
+          userid={userid}
+          endpoint={endpointURL}
+          datasource={DS}
+          lang={language}
+          {visiblegames}
+          {playrandomgame}
+          {activecategory}
+          {alternativesearch}
+          {favorites}
+          {mostplayedrounds}
+          {mostplayed}
+          {clientstyling}
+          {clientstylingurl}
+          {lobbyid}
+          {containermaxwidth}
+          {haspanicbutton}
+          {livecasino}
+          {currency}
+          {gamepagemodalurl}
+          {randombuttonicon}
+          {enablecasinowinners}
+          {enablejackpotbanner}
+          {enableautoscroll}
+          {tabsorder}
+          {isrecentavailable}
+          {istopavailable}
+        ></casino-page>
+        {#if gamemodal == 'true'}
+          <casino-modal
+            session={sessionID}
+            userid={userid}
+            endpoint={endpointURL}
+            datasource={DS}
+            lang={language}
+            sessioncheck="false"
+            {clientstyling}
+            {clientstylingurl}
+            {gamepagemodalurl}
+            {haspanicbutton}
+          >
+            <casino-game-page
+              session={sessionID}
+              userid={userid}
+              endpoint={endpointURL}
+              datasource={DS}
+              lang={language}
+              loginevent={loginevent}
+              registerevent={registerevent}
+              depositevent={depositevent}
+              checksession="false"
+              {playforfun}
+              {favorites}
+              {clientstyling}
+              {clientstylingurl}
+              {clockformat}
+              {haspanicbutton}
+              {currency}
+              {integratedgameframedesktop}
+              {integratedgameframemobile}
+            />
+          </casino-modal>
+        {/if}
+        <casino-filter-modal
+          {clientstylingurl}
+          session={sessionID}
+          userid={userid}
+          endpoint={endpointURL}
+          datasource={DS}
+          lang={language}
+          sessioncheck="false"
+          {clientstyling}>
+          <casino-filter-page
+            session={sessionID}
+            userid={userid}
+            endpoint={endpointURL}
+            datasource={DS}
+            lang={language}
+            {clientstylingurl}
+            {clientstyling}>
+          </casino-filter-page>
+        </casino-filter-modal>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  * {
+    /* Display & Box Model */
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  .CasinoLobby {
+      background-color: var(--emfe-w-color-contrast, #07072A);
+      width: 100%;
+      margin: 0 auto;
+      min-height: 100vh;
+      /*padding: 0 1em;*/
+  }
+
+  .DisplayNone {
+    display: none;
+  }
+
+  .WidgetsSection {
+    padding-bottom: 40px;
+  }
+</style>