@everymatrix/casino-lobby 0.0.223 → 0.0.228

package/index.html

@@ -23,6 +23,7 @@
       registerevent="OpenLoginRegisterModal"
       depositevent="OpenDepositModal"
       favorites="true"
+      activecategory="LOBBY"
       mostplayed="true"
       mostplayedrounds="50"
       lobbyid="casino"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-lobby",
-  "version": "0.0.223",
+  "version": "0.0.228",
   "main": "dist/casino-lobby.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5372f53977f5b7ba141b1afe5dc2b85d2c0bc9e7"
+  "gitHead": "29054c0e1620b86e700d983b67e48278178a239d"
 }

package/src/CasinoLobby.svelte

@@ -21,7 +21,7 @@
   export let clientstyling:string = '';
   export let clientstylingurl:string = '';
   export let clockformat:string = '';
-  export let lobbyid:string
+  export let lobbyid:string = '';
 
   export let loginurl:string = '';
   export let registerurl:string = '';
@@ -41,6 +41,9 @@
   export let containermaxwidth:string = '';
   export let haspanicbutton:string = 'false';
 
+  export let activecategory:string = 'LOBBY';
+  export let actionevent:string = '';
+
   let endpointURL:string;
   let DS:string;
   let language:string;
@@ -54,14 +57,14 @@
   let userAgent:string = window.navigator.userAgent;
   let isLoading:boolean = true;
 
-  let headerPlaceholderSize:number = 0;
+  let headerPlaceholderSize:string = '0';
   let scrollReference:HTMLElement;
   let scrollTop:boolean = false;
   let customStylingContainer:HTMLElement;
 
   setupI18n({ withLocale: 'en', translations: {}});
 
-  const messageHandler = (e:any) => {
+  const messageHandler = (e:any):void => {
     if (e.data) {
       switch(e.data.type) {
         case 'WidgetTopReference':
@@ -71,7 +74,7 @@
             if (!headerPlaceholderSize) {
               scrollReference.scrollIntoView();
             } else {
-              window.scrollTo({ top: headerPlaceholderSize });
+              window.scrollTo({ top: parseInt(headerPlaceholderSize, 10) });
             }
           }
           break;
@@ -81,14 +84,14 @@
           playerID = e.data.userID;
           break;
 
-        default:
-          // do nothing
+        case 'CategoryChange':
+          activecategory = e.data.item.id;
           break;
       }
     }
   }
 
-  const checkAttrs = () => {
+  const checkAttrs = ():boolean => {
     if (!endpoint) {
       error = "Endpoint is missing! Please provide a valid endpointURL.";
       hasErrors = true;
@@ -113,25 +116,22 @@
     return hasErrors;
   }
 
-  let mostPlayed;
-  let fav;
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
 
-  const initialSetup = () => {
+  const initialSetup = ():void => {
     checkAttrs();
 
-    setLocale(lang);
     endpointURL = endpoint;
     DS = datasource;
     language = lang;
-    mostPlayed = mostplayed;
-    fav = favorites;
 
     hasErrors = false;
-
     isLoading = false;
   }
 
-  const setSession = () => {
+  const setSession = ():void => {
     checkSession(endpoint, session).then((res:any) => {
       sessionID = res.Guid;
       playerID = res.UserID;
@@ -142,23 +142,24 @@
     });
   }
 
-  const setOpSession = () => {
+  const setOpSession = ():void => {
     isLoggedIn = true;
     sessionID = opsession;
   }
 
-  const setClientStyling = () => {
+  const setClientStyling = ():void => {
     let sheet = document.createElement('style');
     sheet.innerHTML = clientstyling;
     customStylingContainer.appendChild(sheet);
   }
 
-  const setClientStylingURL = () => {
+  const setClientStylingURL = ():void => {
     displayNone = true;
 
+    let url:URL = new URL(clientstylingurl);
     let cssFile:HTMLElement = document.createElement('style');
 
-    fetch(new URL(clientstylingurl))
+    fetch(url.href)
       .then((res:any) => res.text())
       .then((data:any) => {
         cssFile.innerHTML = data
@@ -180,6 +181,7 @@
     }
   });
 
+  $: lang && setActiveLanguage();
   $: session && userid && endpoint && setSession();
   $: endpoint && datasource && lang && mostplayed && favorites && initialSetup();
   $: opsession && setOpSession();
@@ -188,87 +190,91 @@
 </script>
 
 <div  bind:this={customStylingContainer} class={displayNone ? 'DisplayNone' : ''}>
-{#if hasErrors}
-  <p style="color:#fff">{error}</p>
-{:else}
-  <div class="CasinoLobby">
-    <div class="WidgetsSection">
-      <div class="HeaderPlaceholder" style="height:{headerPlaceholderSize}px"></div>
-      <div class="ScrollTop"></div>
-      <casino-categories-slider
-        endpoint={endpointURL}
-        datasource={DS}
-        lang={language}
-        session={session}
-        userid={userid}
-        mostplayed={mostPlayed}
-        {mostplayedrounds}
-        favorites={fav}
-        {clientstyling}
-        {clientstylingurl}
-        {containermaxwidth}
-      ></casino-categories-slider>
-      <casino-page
-        session={session}
-        userid={userid}
-        endpoint={endpointURL}
-        datasource={DS}
-        lang={language}
-        visiblegames="10"
-        {alternativesearch}
-        favorites={fav}
-        mostplayed={mostPlayed}
-        {clientstyling}
-        {clientstylingurl}
-        {lobbyid}
-        {containermaxwidth}
-        {haspanicbutton}
-      ></casino-page>
-      <casino-modal
-        session={session}
-        userid={userid}
-        endpoint={endpointURL}
-        datasource={DS}
-        lang={language}
-        {clientstyling}
-        {clientstylingurl}
-        ><casino-game-page
+  {#if hasErrors}
+    <p style="color:var(--emfe-w-color-white, #FFFFFF)">{error}</p>
+  {:else}
+    <div class="CasinoLobby">
+      <div class="WidgetsSection">
+        <div class="HeaderPlaceholder" style="height:{headerPlaceholderSize}px"></div>
+        <div class="ScrollTop"></div>
+        <casino-categories-slider
+          endpoint={endpointURL}
+          datasource={DS}
+          lang={language}
+          session={session}
+          userid={userid}
+          {actionevent}
+          {mostplayed}
+          {mostplayedrounds}
+          {favorites}
+          {activecategory}
+          {clientstyling}
+          {clientstylingurl}
+          {containermaxwidth}
+        ></casino-categories-slider>
+        <casino-page
           session={session}
           userid={userid}
           endpoint={endpointURL}
           datasource={DS}
           lang={language}
-          loginevent={loginevent}
-          favorites={fav}
-          registerevent={registerevent}
-          depositevent={depositevent}
+          visiblegames="10"
+          {activecategory}
+          {alternativesearch}
+          {favorites}
+          {mostplayedrounds}
+          {mostplayed}
           {clientstyling}
           {clientstylingurl}
-          {clockformat}
+          {lobbyid}
+          {containermaxwidth}
           {haspanicbutton}
-        />
-      </casino-modal>
-      <casino-filter-modal
-        {clientstylingurl}
-        session={session}
-        userid={userid}
-        endpoint={endpointURL}
-        datasource={DS}
-        lang={language}
-        {clientstyling}>
-        <casino-filter-page
+        ></casino-page>
+        <casino-modal
           session={session}
           userid={userid}
           endpoint={endpointURL}
           datasource={DS}
           lang={language}
+          {clientstyling}
           {clientstylingurl}
+          ><casino-game-page
+            session={session}
+            userid={userid}
+            endpoint={endpointURL}
+            datasource={DS}
+            lang={language}
+            loginevent={loginevent}
+            registerevent={registerevent}
+            depositevent={depositevent}
+            {favorites}
+            {clientstyling}
+            {clientstylingurl}
+            {clockformat}
+            {haspanicbutton}
+          />
+        </casino-modal>
+        <casino-filter-modal
+          {clientstylingurl}
+          session={session}
+          userid={userid}
+          endpoint={endpointURL}
+          datasource={DS}
+          lang={language}
           {clientstyling}>
-        </casino-filter-page>
-      </casino-filter-modal>
+          <casino-filter-page
+            session={session}
+            userid={userid}
+            endpoint={endpointURL}
+            datasource={DS}
+            lang={language}
+            {clientstylingurl}
+            {clientstyling}>
+          </casino-filter-page>
+        </casino-filter-modal>
+      </div>
     </div>
-  </div>
-{/if}
+  {/if}
 </div>
 
 <style lang="scss">
@@ -284,7 +290,7 @@
   }
 
   .CasinoLobby {
-      background-color: #07072A;
+      background-color: var(--emfe-w-color-contrast, #07072A);
       width: 100%;
       margin: 0 auto;
       min-height: 100vh;