@everymatrix/casino-footer-v2 0.0.358 → 0.0.359

package/index.html

@@ -90,9 +90,28 @@
       </div>
       <h1 class="header__name"><span>WEBCOMPONENT:</span> casino-footer-v2</h1>
     </header>
+<casino-footer-v2
+    endpoint="https://bahcom-stage.everymatrix.com/apijson/en/footer-raw-data?env=stage"
+    userendpoint="https://betathome-de-stage-api.stage.norway.everymatrix.com/v1"
+    session="d919449f-5f5a-4c6f-92c2-29fb947c3f33"
+    userid="4229869"
+    env="local"
+    languageselectorenabled="true"
+    languagelist="de, en, sl, pl, hr, hu, it, sr, pt"
+    languagedisplaytype="name"
+    sessiontimerenabled="true"
+    panicbuttonenabled="true"
+    clockenabled="true"
+    clocksecondsenabled="true"
+    clockcustomformat="LTS"
+    lang="de"
+  ></casino-footer-v2>
 
     <casino-footer-v2
-      endpoint="https://bahcom-stage.everymatrix.com/apijson"
+      endpoint="https://bahcom-stage.everymatrix.com/apijson/en/footer-raw-data?env=stage"
+      userendpoint="https://betathome-de-stage-api.stage.norway.everymatrix.com/v1"
+      session="d919449f-5f5a-4c6f-92c2-29fb947c3f33"
+      userid="4229869"
       lang="en"
       env="stage"
       clocktext="Time"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-footer-v2",
-  "version": "0.0.358",
+  "version": "0.0.359",
   "main": "dist/casino-footer-v2.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "42389554d44d6e92badedce5312dc15f620f1568"
+  "gitHead": "42c2b777ac00a1d72d7ceb43a0b9029e0b024180"
 }

package/src/CasinoFooterV2.svelte

@@ -4,6 +4,7 @@
   import '@everymatrix/casino-footer-section';
   import '@everymatrix/panic-button';
 
+  import { onMount } from 'svelte';
   import moment from 'moment';
   import { checkSession } from 'rvhelper';
   import { _, addNewMessages, setLocale } from './i18n';
@@ -30,7 +31,7 @@
   export let userendpoint:string = '';
   export let panicbuttonenabled:string = 'true';
   export let sessiontimerenabled = 'true'; // 'true' to enable, anything to disable
-    
+
   let gameVendorsLinksTitle:string = '';
   let gameVendorsRepeater:Array<Object> = [];
   let paymentLinksTitle:string = '';
@@ -68,54 +69,56 @@
   let languagePackLoaded:boolean = false;
 
   let timeString:string = '';
+  let clockInterval:any;
+  let timerInterval:any;
 
   let customStylingContainer:HTMLElement;
 
   Object.keys(CasinoFooterTranslations).forEach((item:any) => {
     addNewMessages(item, CasinoFooterTranslations[item]);
   });
-  
+
   // needed for session timer
   const setSession = ():void => {
     checkSession(userendpoint, session).then((res:any) => {
       sessionID = res.Guid;
       playerID = res.UserID;
       isLoggedIn = true;
+      setSessionTimer(res);
     }, (err:any) => {
       isLoggedIn = false;
       console.error('Error while checking the session - ', err)
     });
   }
 
-  const setSessionTimer = ():void => {
+  const setSessionTimer = (sessionData):void => {
     // using Date instead of moment because they recommend in their docs to stop using it for new projects
-      const sessionData = JSON.parse(localStorage.session);
-      const loginTime = new Date(sessionData.Login);
-      const timezoneOffsetHours = new Date().getTimezoneOffset() / 60;
-      let currentTime = new Date();
-      let milisecondDifference = currentTime.getTime() - loginTime.getTime();
+    const loginTime = new Date(sessionData.Login);
+    const timezoneOffsetHours = new Date().getTimezoneOffset() / 60;
+    let currentTime = new Date();
+    let milisecondDifference = currentTime.getTime() - loginTime.getTime();
 
-      let hours = Math.floor(milisecondDifference / 3600000) + timezoneOffsetHours;
-      let minutes = Math.floor(milisecondDifference % 3600000 / 60000);
-      let seconds = Math.floor(milisecondDifference % 60000 / 1000);
+    let hours = Math.floor(milisecondDifference / 3600000) + timezoneOffsetHours;
+    let minutes = Math.floor(milisecondDifference % 3600000 / 60000);
+    let seconds = Math.floor(milisecondDifference % 60000 / 1000);
 
-      setInterval(() => {
-        hours = Math.floor(milisecondDifference / 3600000) + timezoneOffsetHours;
-        minutes = Math.floor(milisecondDifference % 3600000 / 60000);
-        seconds = Math.floor(milisecondDifference % 60000 / 1000);
+    timerInterval = setInterval(() => {
+      hours = Math.floor(milisecondDifference / 3600000) + timezoneOffsetHours;
+      minutes = Math.floor(milisecondDifference % 3600000 / 60000);
+      seconds = Math.floor(milisecondDifference % 60000 / 1000);
 
-        timeString = `${hours > 9 ? hours : '0' + hours}:${minutes > 9 ? minutes : '0' + minutes}:${seconds > 9 ? seconds : '0' + seconds}`;
+      timeString = `${hours > 9 ? hours : '0' + hours}:${minutes > 9 ? minutes : '0' + minutes}:${seconds > 9 ? seconds : '0' + seconds}`;
 
-        milisecondDifference += 1000;
-      },1000);
+      milisecondDifference += 1000;
+    }, 1000);
   }
 
   const refreshClock = ():void => {
-    setInterval(() => {
+    clockInterval = setInterval(() => {
       clockDisplay();
-    }, refreshRate); 
+    }, refreshRate);
   }
-  
+
   const clockDisplay = ():void => {
     const format = clockcustomformat != 'false' ? clockcustomformat : `hh:mm${clocksecondsenabled === "true" ? ':ss' : ''} (UTC Z)`;
     time = moment().format(format);
@@ -134,20 +137,20 @@
         let licenseHeadScriptSrc,
             licenseScriptBody,
             licenseEvent;
-        ({ 
-          gameVendorsLinksTitle, 
-          gameVendorsRepeater, 
-          paymentLinksTitle, 
-          paymentMethodsRepeater, 
-          sponsorsLinksTitle, 
-          sponsorsRepeater, 
-          helpLinksTitle, 
-          helpLinksRepeater, 
-          licensesLinksTitle, 
-          licensesRepeater, 
-          socialLinksTitle, 
-          socialLinksRepeater, 
-          copyright, 
+        ({
+          gameVendorsLinksTitle,
+          gameVendorsRepeater,
+          paymentLinksTitle,
+          paymentMethodsRepeater,
+          sponsorsLinksTitle,
+          sponsorsRepeater,
+          helpLinksTitle,
+          helpLinksRepeater,
+          licensesLinksTitle,
+          licensesRepeater,
+          socialLinksTitle,
+          socialLinksRepeater,
+          copyright,
           licenseDesc,
           licenseHeadScriptSrc,
           licenseScriptBody,
@@ -155,29 +158,29 @@
           language : languages
         } = receivedFooterData);
 
-        if (languages) { 
+        if (languages) {
           languagePackLoaded = true;
           updateLanguageDisplayName();
         }
-      
+
         if (licenseHeadScriptSrc?.length > 0) {
           headScript = true;
           licenseScriptSrc = licenseHeadScriptSrc;
         }
-        
+
         if (licenseScriptBody?.length > 0) {
           licenseScript = licenseScriptBody;
         }
 
         window.postMessage({ type: licenseEvent }, window.location.href);
 
-        window.postMessage({ 
-          type: 'FooterData', 
-          gameVendorsRepeater, 
-          paymentMethodsRepeater, 
-          sponsorsRepeater, 
-          helpLinksRepeater, 
-          licensesRepeater, 
+        window.postMessage({
+          type: 'FooterData',
+          gameVendorsRepeater,
+          paymentMethodsRepeater,
+          sponsorsRepeater,
+          helpLinksRepeater,
+          licensesRepeater,
           socialLinksRepeater
         }, window.location.href);
       }).catch((err:any) => {
@@ -224,12 +227,15 @@
   const toggleLanguageDrawer = ():void => {
     languageDrawer.classList.toggle('hidden');
   }
-  
-  const overlayOptionTrigger = (e):void => {
+
+  const overlayOptionTrigger = (e:any):void => {
     let option = e.target.closest('.overlayLanguageOption');
+
     selectedLanguage = option.getAttribute('data-lang');
+
     changeLanguage();
     updateLanguageDisplayName();
+
     languageDrawer.classList.toggle('hidden');
   };
 
@@ -238,9 +244,11 @@
 
     languages.forEach((l:any, i:number) => {
       if (l.code == selectedLanguage.toLowerCase()) {
-        matchFound = true;
         let langName:string = '';
+
+        matchFound = true;
         currentLanguageFlag = l.flag_icon_editable;
+
         switch (languagedisplaytype) {
           case 'name':
             langName = l.name;
@@ -254,6 +262,7 @@
             langName = l.code;
             break;
         }
+        
         languageDisplayName = langName;
       }
     });
@@ -268,14 +277,20 @@
     languagesArray = languagesArray.map((language:string) => language.toUpperCase());
   }
 
+  onMount(() => {
+    return () => {
+      clearInterval(clockInterval);
+      clearInterval(timerInterval)
+    };
+  });
+
   $: lang && setLocale(lang);
   $: languageslist && setLanguagesArray();
-  $: session && userid && endpoint && setSession();
-  $: isLoggedIn && lang && setSessionTimer();
+  $: session && userid && userendpoint && setSession();
   $: endpoint && lang && env && getCmsData();
   $: clockenabled !== 'false' && clocksecondsenabled && clockcustomformat && clockDisplay();
   $: clockenabled !== 'false' && clocksecondsenabled && (refreshRate = clocksecondsenabled == "true" ? 1000 : 60000) && refreshClock();
-  $: lang && (selectedLanguage = lang) && languages && (languages.length > 0) && updateLanguageDisplayName(); 
+  $: lang && (selectedLanguage = lang) && languages && (languages.length > 0) && updateLanguageDisplayName();
   $: clientstyling && setClientStyling();
   $: clientstylingurl && setClientStylingURL();
 
@@ -317,7 +332,7 @@
             </div>
           </div>
         {/if}
-      <!-- end vendors section --> 
+      <!-- end vendors section -->
       <!-- start payments section -->
       {#if paymentMethodsRepeater}
         <div class="GridRow">
@@ -330,10 +345,10 @@
         </div>
       {/if}
       <!-- end payments section -->
-      
+
       <!-- start panic button -->
-      {#if panicbuttonenabled === "true"}
-        <panic-button 
+      {#if panicbuttonenabled === "true" && isLoggedIn}
+        <panic-button
         customtext = "Hold the button for 3 seconds to take 24 hours instant lock"
         alternativestyling="true"
         {lang}
@@ -353,7 +368,7 @@
           <!-- start detailed licenses section -->
           <div class="LicenseDesc">
             {#if licenseDesc}
-              <div class="DetailedLicenses" use:setContent={licenseDesc}></div> 
+              <div class="DetailedLicenses" use:setContent={licenseDesc}></div>
               <div class="DetailedCustomLicenses" use:setContent={licenseScript}></div>
               <div>
                 <!-- start clock section -->
@@ -365,8 +380,8 @@
                 {/if}
                 <!-- end clock section -->
                 <!-- start session timer section -->
-                
-                {#if sessiontimerenabled && localStorage.session}
+
+                {#if sessiontimerenabled}
                 <div class="sessionTimerContainer">
                   <span class="SessionText">{$_('casinoFooter.sessionTimer')} {timeString}</span>
                 </div>
@@ -379,7 +394,7 @@
         </div>
       {/if}
       <!-- end license section -->
-   
+
       <!-- start sponsors section -->
       {#if sponsorsRepeater}
         <div class="GridRow">
@@ -394,7 +409,7 @@
         </div>
       {/if}
         <!-- end sponsors section -->
-          
+
         <!-- start social section -->
         {#if socialLinksRepeater}
          <div class="GridRow">
@@ -405,18 +420,18 @@
           </div>
         {/if}
         <!-- end social section -->
-       
+
         <!-- start language selector -->
-      {#if (languageselectorenabled==="true" && languagePackLoaded && selectedLanguage)} 
+      {#if (languageselectorenabled==="true" && languagePackLoaded && selectedLanguage)}
         <div class="GridRow">
-          <div class="languageSelectorContainer"> 
+          <div class="languageSelectorContainer">
             <!-- traditional dropdown option for screenreader users. Works the same way as the old language selector. Display: none -->
-            <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>changeLanguage()}> 
-              {#each languagesArray as operatorLanguage} 
-                <option value={operatorLanguage} selected>{operatorLanguage}</option> 
-              {/each} 
-            </select> 
-            
+            <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>changeLanguage()}>
+              {#each languagesArray as operatorLanguage}
+                <option value={operatorLanguage} selected>{operatorLanguage}</option>
+              {/each}
+            </select>
+
             <!-- Custom dropdown in order to be able to display country flags -->
             <div class="languageSelectorOverlay">
               <button class="drawerButton" value="{selectedLanguage}" on:click={toggleLanguageDrawer}><img class="languageFlag" src={currentLanguageFlag}>{languageDisplayName}
@@ -433,16 +448,16 @@
                 </div>
             </div>
           </div>
-        </div> 
+        </div>
         {/if}
       <!-- end language selector -->
-       
+
       {#if copyright}
       <!-- start copyright section -->
       <div class="CopyrightAreaRights CopyrightArea" use:setContent={copyright}></div>
       <!-- end copyright section -->
      {/if}
-   
+
     </div>
   </div>
   {/if}
@@ -466,7 +481,7 @@
    position: relative;
   }
 
-  .FooterSide { 
+  .FooterSide {
     display: flex;
     flex-direction: column;
     position: absolute;
@@ -515,7 +530,7 @@
       .DetailedLicenses {
         font-size: 10px;
         color: var(--emfe-w-color-gray-150, #828282);
-       
+
         div {
           text-align: left;
           white-space: pre-line;
@@ -608,7 +623,7 @@
     top: 30px;
     padding: 6px 0;
     left: 3.9px;
-    
+
     &.hidden {
        display: none;
     }