@everymatrix/casino-lobby 0.0.25-6.2

package/src/CasinoLobby.svelte

@@ -0,0 +1,316 @@
+<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';
+  import '@everymatrix/casino-filter-modal';
+  import '@everymatrix/casino-filter-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 = 'EUR';
+
+  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';
+
+  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) {
+              window.scrollTo({ top: headerPlaceholderSize });
+            }
+          }
+          break;
+
+        case 'UserSessionID':
+          sessionID = e.data.session;
+          playerID = e.data.userID;
+          break;
+
+        case 'CategoryChange':
+          activecategory = e.data.item.id;
+          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;
+      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={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}
+          visiblegames="10"
+          {activecategory}
+          {alternativesearch}
+          {favorites}
+          {mostplayedrounds}
+          {mostplayed}
+          {clientstyling}
+          {clientstylingurl}
+          {lobbyid}
+          {containermaxwidth}
+          {haspanicbutton}
+          {livecasino}
+          {currency}
+        ></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}
+            {playforfun}
+            {favorites}
+            {clientstyling}
+            {clientstylingurl}
+            {clockformat}
+            {haspanicbutton}
+            {currency}
+          />
+        </casino-modal>
+        <casino-filter-modal
+          {clientstylingurl}
+          session={session}
+          userid={userid}
+          endpoint={endpointURL}
+          datasource={DS}
+          lang={language}
+          {clientstyling}>
+          <casino-filter-page
+            session={session}
+            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>

package/src/i18n.js

@@ -0,0 +1,25 @@
+import {
+  dictionary,
+  locale,
+  addMessages,
+  _,
+} from 'svelte-i18n';
+
+function setupI18n({ withLocale: _locale, translations }) {
+  locale.subscribe((data) => {
+    if (data == null) {
+      dictionary.set(translations);
+      locale.set(_locale);
+    }
+  });
+}
+
+function addNewMessages(lang, dict) {
+  addMessages(lang, dict);
+}
+
+function setLocale(_locale) {
+  locale.set(_locale);
+}
+
+export { _, setupI18n, addNewMessages, setLocale };

package/src/index.ts

@@ -0,0 +1,4 @@
+import CasinoLobby from './CasinoLobby.svelte';
+
+!customElements.get('casino-lobby') && customElements.define('casino-lobby', CasinoLobby);
+export default CasinoLobby;

package/stories/CasinoLobby.stories.js

@@ -0,0 +1,13 @@
+import { html } from 'lit-element';
+
+import CasinoLobby from '../src/CasinoLobby';
+
+// This default export determines where your story goes in the story list
+export default {
+  title: 'CasinoLobby',
+};
+
+// 👇 We create a “template” of how args map to rendering
+const CasinoLobby = ({ aProperty }) => html`<casino-lobby></casino-lobby>`;
+
+export const FirstStory = CasinoLobby.bind({});

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}