@everymatrix/casino-providers 0.0.367 → 0.0.369

package/src/CasinoProviders.svelte

@@ -1,186 +1,186 @@
-<svelte:options tag={null} />
-<script lang="ts">
-  import { Translations } from './translations';
-  import { _, addNewMessages, setLocale } from './i18n';
-
-  export let endpoint:string = '';
-  export let datasource:string = '';
-  export let lang:string = 'en';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-
-  let providers:Array<any> = [];
-  let topProviders:Array<any> = [];
-  let otherProviders:Array<any> = [];
-  let isLoading:boolean = false;
-  let customStylingContainer:HTMLElement;
-  let displayNone:boolean = false;
-
-  Object.keys(Translations).forEach((item:any):void => {
-    addNewMessages(item, Translations[item]);
-  });
-
-  const getProviders = ():void => {
-    isLoading = true;
-
-    const url:URL = new URL(`${endpoint}/casino/vendors`);
-
-    url.searchParams.append("datasource", datasource);
-    url.searchParams.append("language", lang);
-    url.searchParams.append("fields" , "id,name,displayName,subVendors,isTopVendor,logo,games");
-
-    fetch(url)
-      .then(res => res.json())
-      .then(data => {
-        isLoading = false;
-        providers = data.items.map((item => item));
-        
-        topProviders = providers.filter(provider => provider.isTopVendor === true);
-        otherProviders = providers.filter(provider => provider.isTopVendor === false);
-
-        let allSubVendors:Array<any> = [];
-        allSubVendors = providers.flatMap(item => item.subVendors); 
-
-        otherProviders.push(...allSubVendors.filter(subVendor => subVendor.games.count > 0));
-      });
-  }
-
-  const openGameProviderPage = (providerId:string, providerName:string, providerLogo:string):void => {
-      window.postMessage({ type: 'OpenGameProvider', providerId, providerName, providerLogo});
-  };
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  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);
-        }
-      });
-  }
-
-  $: endpoint && lang && datasource && getProviders();
-  $: lang && setActiveLanguage();
-  $: clientstyling && setClientStyling();
-  $: clientstylingurl && setClientStylingURL();
-</script>
-
-<div bind:this={customStylingContainer}>
-  <div class="CasinoProviders">
-    {#if isLoading === true}
-      <p class="Message"> {$_('Translations.loading')} </p>
-    {:else}
-    <h4 class="ProviderTitle">{$_('Translations.popularProviders')}</h4>
-      {#each topProviders as provider}
-      <div class="Provider" on:click={() => openGameProviderPage(provider.id, provider.name, provider.logo)}>
-        <img  src={provider.logo} alt="{provider.name}" class="ProviderImage" >
-        <div class="ProviderTextContainer">
-          <p>{provider.name}</p>
-          <p>{provider.games.count} {$_('Translations.games')}</p>
-        </div>
-      </div>
-      {/each}
-      <h4 class="ProviderTitle">{$_('Translations.otherProviders')}</h4>
-      {#each otherProviders as provider}
-        <div class="Provider" on:click={() => openGameProviderPage(provider.id, provider.name, provider.logo)}>
-          <img  src={provider.logo} alt="{provider.name}" class="ProviderImage" >
-          <div class="ProviderTextContainer">
-            <p>{provider.name}</p>
-            <p>{provider.games.count} {$_('Translations.games')}</p>
-          </div>
-        </div>
-      {/each}
-    {/if}
-  </div>
-</div>
-
-<style lang="scss">
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  $color-grey:  #828282;
-
-  *,
-  *::before,
-  *::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  .CasinoProviders {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 10px 60px;
-  }
-
-  .ProviderTitle {
-    font-weight: 500;
-    position: relative;
-    right: 30px;
-    margin: 10px 0;
-  }
-
-  .Provider{
-    border-radius: 7px;
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    max-width: 300px;
-
-    &TextContainer {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      gap: 10px;
-      font-size: 15px;
-        & p:first-child {
-          font-weight: 600;
-        }
-        & p:last-child {
-          color: $color-grey;
-          font-weight: 300;
-        }
-    }
-
-    &Image {
-      border-radius: 4px;
-      object-fit:contain;
-      height: 64px;
-      width: 64px;
-      font-weight: 100;
-      border: .5px solid #e4e2e2;
-      overflow: hidden;
-      object-fit: contain;
-    }
-
-  }
-
-  .Message { 
-   font-weight: 600;
-   position: absolute;
-   top: 50%;
-   left: 50%;
-   transform: translate(-50%, -50%);
- }
-</style>
+<svelte:options tag={null} />
+<script lang="ts">
+  import { Translations } from './translations';
+  import { _, addNewMessages, setLocale } from './i18n';
+
+  export let endpoint:string = '';
+  export let datasource:string = '';
+  export let lang:string = 'en';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+
+  let providers:Array<any> = [];
+  let topProviders:Array<any> = [];
+  let otherProviders:Array<any> = [];
+  let isLoading:boolean = false;
+  let customStylingContainer:HTMLElement;
+  let displayNone:boolean = false;
+
+  Object.keys(Translations).forEach((item:any):void => {
+    addNewMessages(item, Translations[item]);
+  });
+
+  const getProviders = ():void => {
+    isLoading = true;
+
+    const url:URL = new URL(`${endpoint}/casino/vendors`);
+
+    url.searchParams.append("datasource", datasource);
+    url.searchParams.append("language", lang);
+    url.searchParams.append("fields" , "id,name,displayName,subVendors,isTopVendor,logo,games");
+
+    fetch(url)
+      .then(res => res.json())
+      .then(data => {
+        isLoading = false;
+        providers = data.items.map((item => item));
+        
+        topProviders = providers.filter(provider => provider.isTopVendor === true);
+        otherProviders = providers.filter(provider => provider.isTopVendor === false);
+
+        let allSubVendors:Array<any> = [];
+        allSubVendors = providers.flatMap(item => item.subVendors); 
+
+        otherProviders.push(...allSubVendors.filter(subVendor => subVendor.games.count > 0));
+      });
+  }
+
+  const openGameProviderPage = (providerId:string, providerName:string, providerLogo:string):void => {
+      window.postMessage({ type: 'OpenGameProvider', providerId, providerName, providerLogo});
+  };
+
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
+
+  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);
+        }
+      });
+  }
+
+  $: endpoint && lang && datasource && getProviders();
+  $: lang && setActiveLanguage();
+  $: clientstyling && setClientStyling();
+  $: clientstylingurl && setClientStylingURL();
+</script>
+
+<div bind:this={customStylingContainer}>
+  <div class="CasinoProviders">
+    {#if isLoading === true}
+      <p class="Message"> {$_('Translations.loading')} </p>
+    {:else}
+    <h4 class="ProviderTitle">{$_('Translations.popularProviders')}</h4>
+      {#each topProviders as provider}
+      <div class="Provider" on:click={() => openGameProviderPage(provider.id, provider.name, provider.logo)}>
+        <img  src={provider.logo} alt="{provider.name}" class="ProviderImage" >
+        <div class="ProviderTextContainer">
+          <p>{provider.name}</p>
+          <p>{provider.games.count} {$_('Translations.games')}</p>
+        </div>
+      </div>
+      {/each}
+      <h4 class="ProviderTitle">{$_('Translations.otherProviders')}</h4>
+      {#each otherProviders as provider}
+        <div class="Provider" on:click={() => openGameProviderPage(provider.id, provider.name, provider.logo)}>
+          <img  src={provider.logo} alt="{provider.name}" class="ProviderImage" >
+          <div class="ProviderTextContainer">
+            <p>{provider.name}</p>
+            <p>{provider.games.count} {$_('Translations.games')}</p>
+          </div>
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  $color-grey:  #828282;
+
+  *,
+  *::before,
+  *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .CasinoProviders {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 10px 60px;
+  }
+
+  .ProviderTitle {
+    font-weight: 500;
+    position: relative;
+    right: 30px;
+    margin: 10px 0;
+  }
+
+  .Provider{
+    border-radius: 7px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    max-width: 300px;
+
+    &TextContainer {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 10px;
+      font-size: 15px;
+        & p:first-child {
+          font-weight: 600;
+        }
+        & p:last-child {
+          color: $color-grey;
+          font-weight: 300;
+        }
+    }
+
+    &Image {
+      border-radius: 4px;
+      object-fit:contain;
+      height: 64px;
+      width: 64px;
+      font-weight: 100;
+      border: .5px solid #e4e2e2;
+      overflow: hidden;
+      object-fit: contain;
+    }
+
+  }
+
+  .Message { 
+   font-weight: 600;
+   position: absolute;
+   top: 50%;
+   left: 50%;
+   transform: translate(-50%, -50%);
+ }
+</style>

package/src/i18n.js

@@ -1,27 +1,27 @@
-import {
-  dictionary,
-  locale,
-  addMessages,
-  _
-} from 'svelte-i18n';
-
-function setupI18n({ withLocale: _locale, translations }) {
-  locale.subscribe((data) => {
-    if (data == null) {
-      dictionary.set(translations);
-      locale.set(_locale);
-    }
-  }); // maybe we will need this to make sure that the i18n is set up only once
-  /*dictionary.set(translations);
-  locale.set(_locale);*/
-}
-
-function addNewMessages(lang, dict) {
-  addMessages(lang, dict);
-}
-
-function setLocale(_locale) {
-  locale.set(_locale);
-}
-
-export { _, setupI18n, addNewMessages, setLocale };
+import {
+  dictionary,
+  locale,
+  addMessages,
+  _
+} from 'svelte-i18n';
+
+function setupI18n({ withLocale: _locale, translations }) {
+  locale.subscribe((data) => {
+    if (data == null) {
+      dictionary.set(translations);
+      locale.set(_locale);
+    }
+  }); // maybe we will need this to make sure that the i18n is set up only once
+  /*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

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

package/src/translations.js

@@ -1,122 +1,122 @@
-export const Translations = {
-  en: {
-    Translations: {
-      popularProviders: "Popular Suppliers",
-      otherProviders: "Other Suppliers",
-      loading: "Loading, please wait...",
-      games: "games",
-    },
-  },
-  zh: {
-    Translations: {
-      popularProviders: "热门供应商",
-      otherProviders: "其他供应商",
-      loading: "加载请稍候...",
-      games: "游戏",
-    },
-  },
-  de: {
-    Translations: {
-      popularProviders: "Beliebte Anbieter",
-      otherProviders: "Weitere Anbieter",
-      loading: "Es lädt, bitte warten...",
-      games: "Spiele",
-    },
-  },
-  it: {
-    Translations: {
-      popularProviders: "Popular Suppliers",
-      otherProviders: "Other Suppliers",
-      loading: "Loading, please wait",
-      games: "games",
-    },
-  },
-  fr: {
-    Translations: {
-      popularProviders: "Fournisseurs populaires",
-      otherProviders: "Autres fournisseurs",
-      loading: "Chargement, veuillez patienter...",
-      games: "jeux",
-    },
-  },
-  es: {
-    Translations: {
-      popularProviders: "Popular Suppliers",
-      otherProviders: "Other Suppliers",
-      loading: "Loading, please wait",
-      games: "games",
-    },
-  },
-  tr: {
-    Translations: {
-      popularProviders: "Popular Suppliers",
-      otherProviders: "Other Suppliers",
-      loading: "Loading, please wait",
-      games: "games",
-    },
-  },
-  ru: {
-    Translations: {
-      popularProviders: "Popular Suppliers",
-      otherProviders: "Other Suppliers",
-      loading: "Loading, please wait",
-      games: "games",
-    },
-  },
-  ro: {
-    Translations: {
-      popularProviders: "Furnizori de top",
-      otherProviders: "Alti furnizori",
-      loading: "Se incarca, te rugam asteapta…",
-      games: "jocuri",
-    },
-  },
-  hr: {
-    Translations: {
-      popularProviders: "Popular Suppliers",
-      otherProviders: "Other Suppliers",
-      loading: "Loading, please wait",
-      games: "games",
-    },
-  },
-  hu: {
-    Translations: {
-      popularProviders: "Popular Suppliers",
-      otherProviders: "Other Suppliers",
-      loading: "Loading, please wait",
-      games: "games",
-    },
-  },
-  pl: {
-    Translations: {
-      popularProviders: "Popular Suppliers",
-      otherProviders: "Other Suppliers",
-      loading: "Loading, please wait",
-      games: "games",
-    },
-  },
-  pt: {
-    Translations: {
-      popularProviders: "Popular Suppliers",
-      otherProviders: "Other Suppliers",
-      loading: "Loading, please wait",
-      games: "games",
-    },
-  },
-  sl: {
-    Translations: {
-      popularProviders: "Popular Suppliers",
-      otherProviders: "Other Suppliers",
-      loading: "Loading, please wait",
-      games: "games",
-    },
-  },
-  sr: {
-    Translations: {
-      popularProviders: "Popular Suppliers",
-      otherProviders: "Other Suppliers",
-      loading: "Loading, please wait",
-      games: "games",
-    },
-  },
-};
+export const Translations = {
+  en: {
+    Translations: {
+      popularProviders: "Popular Suppliers",
+      otherProviders: "Other Suppliers",
+      loading: "Loading, please wait...",
+      games: "games",
+    },
+  },
+  zh: {
+    Translations: {
+      popularProviders: "热门供应商",
+      otherProviders: "其他供应商",
+      loading: "加载请稍候...",
+      games: "游戏",
+    },
+  },
+  de: {
+    Translations: {
+      popularProviders: "Beliebte Anbieter",
+      otherProviders: "Weitere Anbieter",
+      loading: "Es lädt, bitte warten...",
+      games: "Spiele",
+    },
+  },
+  it: {
+    Translations: {
+      popularProviders: "Popular Suppliers",
+      otherProviders: "Other Suppliers",
+      loading: "Loading, please wait",
+      games: "games",
+    },
+  },
+  fr: {
+    Translations: {
+      popularProviders: "Fournisseurs populaires",
+      otherProviders: "Autres fournisseurs",
+      loading: "Chargement, veuillez patienter...",
+      games: "jeux",
+    },
+  },
+  es: {
+    Translations: {
+      popularProviders: "Popular Suppliers",
+      otherProviders: "Other Suppliers",
+      loading: "Loading, please wait",
+      games: "games",
+    },
+  },
+  tr: {
+    Translations: {
+      popularProviders: "Popular Suppliers",
+      otherProviders: "Other Suppliers",
+      loading: "Loading, please wait",
+      games: "games",
+    },
+  },
+  ru: {
+    Translations: {
+      popularProviders: "Popular Suppliers",
+      otherProviders: "Other Suppliers",
+      loading: "Loading, please wait",
+      games: "games",
+    },
+  },
+  ro: {
+    Translations: {
+      popularProviders: "Furnizori de top",
+      otherProviders: "Alti furnizori",
+      loading: "Se incarca, te rugam asteapta…",
+      games: "jocuri",
+    },
+  },
+  hr: {
+    Translations: {
+      popularProviders: "Popular Suppliers",
+      otherProviders: "Other Suppliers",
+      loading: "Loading, please wait",
+      games: "games",
+    },
+  },
+  hu: {
+    Translations: {
+      popularProviders: "Popular Suppliers",
+      otherProviders: "Other Suppliers",
+      loading: "Loading, please wait",
+      games: "games",
+    },
+  },
+  pl: {
+    Translations: {
+      popularProviders: "Popular Suppliers",
+      otherProviders: "Other Suppliers",
+      loading: "Loading, please wait",
+      games: "games",
+    },
+  },
+  pt: {
+    Translations: {
+      popularProviders: "Popular Suppliers",
+      otherProviders: "Other Suppliers",
+      loading: "Loading, please wait",
+      games: "games",
+    },
+  },
+  sl: {
+    Translations: {
+      popularProviders: "Popular Suppliers",
+      otherProviders: "Other Suppliers",
+      loading: "Loading, please wait",
+      games: "games",
+    },
+  },
+  sr: {
+    Translations: {
+      popularProviders: "Popular Suppliers",
+      otherProviders: "Other Suppliers",
+      loading: "Loading, please wait",
+      games: "games",
+    },
+  },
+};