@everymatrix/casino-footer-v2 0.0.365 → 0.0.368

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-footer-v2",
-  "version": "0.0.365",
+  "version": "0.0.368",
   "main": "dist/casino-footer-v2.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f4dabfce4df55a591981f327a670cc250a2ed257"
+  "gitHead": "8de3cc787cc97aec99916dfedb01ec69ac55ba98"
 }

package/src/CasinoFooterV2.svelte

@@ -21,7 +21,7 @@
   export let clockenabled:string = ''; // "true" to enable, anything to disable
   export let clocksecondsenabled:string = ''; // "true" to display seconds in our default format and to refresh the clock every 1000ms
   export let clockcustomformat:string = ''; // "false" for defaulting to our format
-  export let clocktext:string = 'Time'; // string preceding clock
+  export let clocktext:string = 'Time:'; // string preceding clock
 
   export let languageselectorenabled = 'true';
   export let languageslist:string = 'en, ro';
@@ -76,6 +76,7 @@
   let timerInterval:any;
 
   let customStylingContainer:HTMLElement;
+  let sessionTimerElement:HTMLElement = document.createElement('p');
 
   setupI18n({ withLocale: 'en', translations: {}});
 
@@ -114,6 +115,8 @@
       seconds = Math.floor(milisecondDifference % 60000 / 1000);
 
       timeString = `${hours > 9 ? hours : '0' + hours}:${minutes > 9 ? minutes : '0' + minutes}:${seconds > 9 ? seconds : '0' + seconds}`;
+      
+      sessionTimerElement.innerHTML = ` ${$_('casinoFooter.sessionTimer')}  ${timeString}`;
 
       milisecondDifference += 1000;
     }, 1000);
@@ -207,8 +210,22 @@
     let htmlContent = document.createElement("div");
     htmlContent.innerHTML = content;
     element.append(htmlContent);
+    
+    //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);
+    }
+    //Add session timer
+      if (sessiontimerenabled == 'true' && element.classList.contains('DetailedLicenses')) {
+
+      element.children[0].children[0].append(sessionTimerElement);
+    }   
   }
 
+
   const setClientStyling = ():void => {
     let sheet = document.createElement('style');
     sheet.innerHTML = clientstyling;
@@ -241,7 +258,7 @@
   }
 
   const overlayOptionTrigger = (e:any):void => {
-    let option = e.target.closest('.overlayLanguageOption');
+    let option = e.target.closest('.OverlayLanguageOption');
 
     selectedLanguage = option.getAttribute('data-lang');
 
@@ -385,25 +402,7 @@
             {#if licenseDesc}
               <div class="DetailedLicenses" use:setContent={licenseDesc}></div>
               <div class="DetailedCustomLicenses" use:setContent={licenseScript}></div>
-              <div>
-                <!-- start clock section -->
-                {#if clockenabled==="true"}
-                <div class="ClockContainer">
-                  <span class="ClockText">{clocktext}:</span>
-                  <span class="ClockTime">{time}</span>
-                </div>
-                {/if}
-                <!-- end clock section -->
-                <!-- start session timer section -->
-
-                {#if sessiontimerenabled}
-                  <div class="sessionTimerContainer">
-                    <span class="SessionText">{$_('casinoFooter.sessionTimer')} {timeString}</span>
-                  </div>
-                {/if}
-                <!-- end session timer section -->
-              </div>
-                {/if}
+            {/if}
           </div>
           <!-- end detailed licenses section -->
         </div>
@@ -448,16 +447,16 @@
             </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}
+            <div class="LanguageSelectorOverlay">
+              <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>
               </button>
-                <div bind:this={languageDrawer} class="languageDrawer hidden">
-                  <ul id="languageList">
+                <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>
+                      <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>
@@ -535,15 +534,15 @@
       justify-content: center;
       align-items: center;
       padding: 20px 0;
-      text-align: center;
+      text-align: left;
       max-width: 1100px;
       p {
+          display: inline;
           font-family: 'Roboto'; 
           font-style: normal; 
           font-weight: 300; 
           font-size: 12px; 
           color: #111;
-          text-align: center;
       }
      .LicenseDesc {
       flex: 1;
@@ -555,11 +554,6 @@
       .DetailedLicenses {
         font-size: 10px;
         color: var(--emfe-w-color-gray-150, #828282);
-
-        div {
-          text-align: left;
-          white-space: pre-line;
-        }
       }
      }
     }
@@ -596,100 +590,88 @@
     }
   }
 
+  .ItemLanguage {
+    display: none;
+  }
 
-  .ClockContainer {
-    color: var(--emfe-w-color-gray-150, #828282);
-    font-size: 11px;
-    display: inline;
+  #LanguageList {
+    padding: 0;
+    margin: 0;
   }
-  .sessionTimerContainer {
-    color:  #828282;
-    font-size: 11px;
-    display: inline;
+
+  .LanguageSelectorOverlay {
+    position: relative;
   }
 
-.ItemLanguage {
-  display: none;
-}
-
-#languageList {
-  padding: 0;
-  margin: 0;
-}
-
-.languageSelectorOverlay {
-  position: relative;
-}
-
-.drawerButton {
-  height: 30px;
-  width: 150px;
-  background: inherit;
-	color: inherit;
-	border: none;
-	padding: 0;
-	font: inherit;
-	cursor: pointer;
-	outline: inherit;
-
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-
-  border-radius: 0px;
-  border: 0;
-}
-
-.languageDrawer {
-    position:absolute;
-    background: $color-white;
+  .DrawerButton {
+    height: 30px;
     width: 150px;
-    top: 30px;
-    padding: 6px 0;
-    left: 3.9px;
+    background: inherit;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
 
-    &.hidden {
-       display: none;
-    }
-}
-
-.languageFlag {
-  margin-right: 8px;
-  background: black;
-  border-radius: 50%;
-  width: 14px;
-  height: 14px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+
+    border-radius: 0px;
+    border: 0;
   }
 
-.overlayLanguageOption {
-  list-style: none;
-  width: 24px;
-  position: relative;
-  padding: 0;
-  justify-content: center;
+  .LanguageDrawer {
+      position:absolute;
+      background: $color-white;
+      width: 150px;
+      top: 30px;
+      padding: 6px 0;
+      left: 3.9px;
 
-  img {
-    position: absolute;
-    z-index: 0;
-    cursor: pointer;
-    top: 6px;
-    left: 12px;
+      &.hidden {
+        display: none;
+      }
   }
 
-  a {
-    text-decoration: none;
-    color: black;
-    display: inline-block;
+  .LanguageFlag {
+    margin-right: 8px;
+    background: black;
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    }
 
-    width: 150px;
+  .OverlayLanguageOption {
+    list-style: none;
+    width: 24px;
+    position: relative;
+    padding: 0;
+    justify-content: center;
 
-    span {
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      margin: 4px 0;
+    img {
+      position: absolute;
+      z-index: 0;
+      cursor: pointer;
+      top: 6px;
+      left: 12px;
+    }
+
+    a {
+      text-decoration: none;
+      color: black;
+      display: inline-block;
+
+      width: 150px;
+
+      span {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        margin: 4px 0;
+      }
     }
   }
-}
 
 </style>

package/src/translations.js

@@ -2,37 +2,37 @@ export const CasinoFooterTranslations = {
   en: {
     casinoFooter: {
       timeText: `Time`,
-      sessionTimer: 'Logged in for',
+      sessionTimer: 'logged in for',
     }
   },
   de: {
     casinoFooter: {
       timeText: `Time`,
-      sessionTimer: 'Logged in for',
+      sessionTimer: 'logged in for',
     }
   },
   fr: {
     casinoFooter: {
       timeText: `Catégories`,
-      sessionTimer: 'Logged in for',
+      sessionTimer: 'logged in for',
     }
   },
   ro: {
     casinoFooter: {
       timeText: `Ora`,
-      sessionTimer: 'Online de',
+      sessionTimer: 'online de',
     }
   },
   es: {
     casinoFooter: {
       timeText: `Categorías`,
-      sessionTimer: 'Logged in for',
+      sessionTimer: 'logged in for',
     }
   },
   pt: {
     casinoFooter: {
       timeText: `Categorias`,
-      sessionTimer: 'Logged in for',
+      sessionTimer: 'logged in for',
     }
   },
 };