@everymatrix/casino-footer-v2 0.0.370 → 0.0.372

package/index.html

@@ -43,22 +43,23 @@
         padding: 10px 20px;
       }
     </style>
-<casino-footer-v2
-    endpoint="https://bahcom-stage.everymatrix.com/apijson"
-    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="en"
-  ></casino-footer-v2>
+
+    <casino-footer-v2 
+      endpoint="http://localhost:3005/apijson" 
+      env="local" 
+      languageselectorenabled="true" 
+      languagelist="de, en, sl, pl, hr, hu, it, sr, pt" 
+      languagedisplaytype="name" 
+      sessiontimerenabled="false" 
+      session="false" 
+      userid="" 
+      panicbuttonenabled="false" 
+      clockenabled="true" 
+      clocksecondsenabled="true" 
+      clockcustomformat="false" 
+      userendpoint="https://betathome-com-stage-api.stage.norway.everymatrix.com/v1" 
+      lang="en"
+    ></casino-footer-v2>
 
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-footer-v2",
-  "version": "0.0.370",
+  "version": "0.0.372",
   "main": "dist/casino-footer-v2.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0a7c511332ea6be9685fb8191900cb92f310daba"
+  "gitHead": "5612b26ae9b59681de1e96fae53e69e4dd94f3cf"
 }

package/src/CasinoFooterV2.svelte

@@ -23,7 +23,7 @@
   export let clockcustomformat:string = ''; // "false" for defaulting to our format
   export let clocktext:string = 'Time:'; // string preceding clock
 
-  export let languageselectorenabled = 'true';
+  export let languageselectorenabled:string = 'true';
   export let languageslist:string = 'en, ro';
   export let languagedisplaytype = 'name';
   export let session:string = '';
@@ -32,9 +32,10 @@
   export let panicbuttonenabled:string = 'true';
   export let sessiontimerenabled:string = 'true'; // 'true' to enable, anything to disable
   export let grouplink:string = 'true';
+  export let baseurl:string = '';
 
   let userAgent:string = window.navigator.userAgent;
-  let isOnMobile = isMobile(userAgent);
+  let isOnMobile:boolean = isMobile(userAgent);
   let gameVendorsLinksTitle:string = '';
   let gameVendorsRepeater:Array<Object> = [];
   let paymentLinksTitle:string = '';
@@ -63,10 +64,10 @@
   let languages:Array<object> = [];
 
   let time:string;
-  let refreshRate: number;
+  let refreshRate:number;
 
   let languagesArray:Array<string> = [];
-  let languageDrawer: HTMLElement;
+  let languageDrawer:HTMLElement;
   let languageDisplayName:string = '';
   let currentLanguageFlag:string = '';
   let languagePackLoaded:boolean = false;
@@ -77,6 +78,7 @@
 
   let customStylingContainer:HTMLElement;
   let sessionTimerElement:HTMLElement = document.createElement('p');
+  let clockElement:HTMLElement = document.createElement('p');
 
   setupI18n({ withLocale: 'en', translations: {}});
 
@@ -84,8 +86,6 @@
     addNewMessages(item, CasinoFooterTranslations[item]);
   });
 
-
-  // needed for session timer
   const setSession = ():void => {
     checkSession(userendpoint, session).then((res:any) => {
       sessionID = res.Guid;
@@ -98,7 +98,7 @@
     });
   }
 
-  const setSessionTimer = (sessionData):void => {
+  const setSessionTimer = (sessionData:any):void => {
     // using Date instead of moment because they recommend in their docs to stop using it for new projects
     const loginTime = new Date(sessionData.Login);
     const timezoneOffsetHours = new Date().getTimezoneOffset() / 60;
@@ -131,6 +131,8 @@
   const clockDisplay = ():void => {
     const format = clockcustomformat != 'false' ? clockcustomformat : `hh:mm${clocksecondsenabled === "true" ? ':ss' : ''} (UTC Z)`;
     time = moment().format(format);
+
+    clockElement.innerHTML = ` ${clocktext} ${time}`
   }
 
   const getCmsData = ():void => {
@@ -213,10 +215,8 @@
     
     //Add clock 
     if (clockenabled === 'true' && element.classList.contains('DetailedLicenses')) {
-      const clockHtml = document.createElement('p');
-      clockHtml.innerHTML = ` ${clocktext} ${time}`
         
-      element.children[0].children[0].append(clockHtml);
+      element.children[0].children[0].append(clockElement);
     }
     //Add session timer
       if (sessiontimerenabled == 'true' && element.classList.contains('DetailedLicenses')) {
@@ -225,7 +225,6 @@
     }   
   }
 
-
   const setClientStyling = ():void => {
     let sheet = document.createElement('style');
     sheet.innerHTML = clientstyling;
@@ -347,7 +346,7 @@
             {#if category.key}
             <p class="FooterTitle">{category.key}</p>
             {/if}
-            <casino-footer-section helperflag="1" clientstyling={customStyling} category={category.key} target={target} displaycolumn="true"></casino-footer-section>
+            <casino-footer-section helperflag="1" clientstyling={customStyling} category={category.key} target={target} displaycolumn="true" {baseurl}></casino-footer-section>
           {/each}
         {/if}
     </div>
@@ -360,7 +359,7 @@
               {#if gameVendorsLinksTitle}
               <p class="FooterTitle">{gameVendorsLinksTitle}</p>
               {/if}
-              <casino-footer-section vendorflag="1" clientstyling={customStyling} target={target}></casino-footer-section>
+              <casino-footer-section vendorflag="1" clientstyling={customStyling} target={target} {baseurl}></casino-footer-section>
             </div>
           </div>
         {/if}
@@ -372,7 +371,7 @@
             {#if paymentLinksTitle}
               <p class="FooterTitle">{paymentLinksTitle}</p>
             {/if}
-            <casino-footer-section paymentflag="1" clientstyling={customStyling} target={target}></casino-footer-section>
+            <casino-footer-section paymentflag="1" clientstyling={customStyling} target={target} {baseurl}></casino-footer-section>
           </div>
         </div>
       {/if}
@@ -395,7 +394,7 @@
             {#if licensesLinksTitle}
             <p class="FooterTitle">{licensesLinksTitle}</p>
             {/if}
-            <casino-footer-section licenseFlag="1" clientstyling={customStyling} target={target}></casino-footer-section>
+            <casino-footer-section licenseFlag="1" clientstyling={customStyling} target={target} {baseurl}></casino-footer-section>
           </div>
           <!-- start detailed licenses section -->
           <div class="LicenseDesc">
@@ -417,7 +416,7 @@
             {#if sponsorsLinksTitle}
               <p class="FooterTitle">{sponsorsLinksTitle}</p>
             {/if}
-            <casino-footer-section sponsorflag="1" clientstyling={customStyling} target={target}></casino-footer-section>
+            <casino-footer-section sponsorflag="1" clientstyling={customStyling} target={target} {baseurl}></casino-footer-section>
           </div>
           {/if}
         </div>
@@ -430,7 +429,7 @@
             {#if socialLinksTitle}
               <p class="FooterTitle">{socialLinksTitle}</p>
             {/if}
-            <casino-footer-section socialflag="1" clientstyling={customStyling} target={target}></casino-footer-section>
+            <casino-footer-section socialflag="1" clientstyling={customStyling} target={target} {baseurl}></casino-footer-section>
           </div>
         {/if}
         <!-- end social section -->
@@ -448,18 +447,18 @@
 
             <!-- Custom dropdown in order to be able to display country flags -->
             <div class="LanguageSelectorOverlay">
+              <div bind:this={languageDrawer} class="LanguageDrawer hidden">
+                <ul id="LanguageList">
+                  {#each languages as language}
+                    <li class="OverlayLanguageOption" data-lang={language.code} on:click={overlayOptionTrigger}><img class="LanguageFlag" src={language.flag_icon_editable}><a href="javascript:void(0)"><span>{language.name}</span></a></li>
+                  {/each}
+                </ul>
+              </div>
               <button class="DrawerButton" value="{selectedLanguage}" on:click={toggleLanguageDrawer}><img class="LanguageFlag" src={currentLanguageFlag}>{languageDisplayName}
                 <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path opacity="0.4" d="M0.94 0L4.00067 3.05467L7.06 0L8 0.940667L4.00067 4.94133L0 0.940667L0.94 0Z" fill="black"/>
-                  </svg>
+                </svg>
               </button>
-                <div bind:this={languageDrawer} class="LanguageDrawer hidden">
-                  <ul id="LanguageList">
-                    {#each languages as language}
-                      <li class="OverlayLanguageOption" data-lang={language.code} on:click={overlayOptionTrigger}><img class="LanguageFlag" src={language.flag_icon_editable}><a href="javascript:void(0)"><span>{language.name}</span></a></li>
-                    {/each}
-                  </ul>
-                </div>
             </div>
           </div>
         </div>
@@ -491,8 +490,9 @@
   }
 
   .Footer {
-   background-color: $color-white;
-   position: relative;
+    background-color: $color-white;
+    display: flex;
+    flex-direction: row;
   }
 
   .FooterSideMobile {
@@ -504,7 +504,6 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    position: absolute;
     background-color: $color-white;
     .FooterTitle {
       font-family: 'Roboto Condensed';
@@ -601,6 +600,7 @@
 
   .LanguageSelectorOverlay {
     position: relative;
+    font-size: 12px;
   }
 
   .DrawerButton {
@@ -620,19 +620,20 @@
 
     border-radius: 0px;
     border: 0;
+    position: relative;
   }
 
   .LanguageDrawer {
-      position:absolute;
-      background: $color-white;
-      width: 150px;
-      top: 30px;
-      padding: 6px 0;
-      left: 3.9px;
+    position:absolute;
+    background: $color-white;
+    width: 150px;
+    bottom: 30px;
+    padding: 6px 0;
+    left: 3.9px;
 
-      &.hidden {
-        display: none;
-      }
+    &.hidden {
+      display: none;
+    }
   }
 
   .LanguageFlag {
@@ -644,11 +645,14 @@
     }
 
   .OverlayLanguageOption {
+    justify-content: center;
     list-style: none;
-    width: 24px;
     position: relative;
+    height: 35px;
     padding: 0;
-    justify-content: center;
+    justify-content: space-between;
+    display: flex;
+    flex-direction: row;
 
     img {
       position: absolute;