@everymatrix/casino-bonuses-controller 1.22.5

package/src/component/CasinoBonusPagination.svelte

@@ -0,0 +1,192 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  import { isMobile } from 'rvhelper';
+  import { generateNavigationOptions } from '../pagination';
+  
+  export let totalitems = '';
+  export let pagesize = 10;
+  export let currentpage = '1';
+  export let limit = 2;
+  export let showinput = '';
+  export let clientstyling: string= '';
+  export let clientstylingurl: string = '';
+  let userAgent:String = window.navigator.userAgent;
+  let mobileView = false;
+  let customStylingContainer: HTMLElement;
+  if (isMobile(userAgent)) {
+    mobileView = true;
+  }
+  let pageForInput: number;
+  let pageToGo: number;
+  let options;
+
+  const setClientStyling = (): void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = (): void => {
+    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
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+      });
+  }
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: totalItems = Number(totalitems);
+  $: showInput = showinput;
+  $: currentPage = Number(currentpage);
+  $: pageSize = pagesize;
+  $:{
+    options = generateNavigationOptions({
+      totalItems,
+      pageSize,
+      currentPage,
+      limit
+    });
+  }
+  
+  const handleOptionClick = (option)=>{
+    window.postMessage({type:'PaginationChange', page:option.value});
+  }
+
+  const handleInput = (page)=>{
+    pageToGo = page > totalPages ? totalPages : page;
+  }
+
+  $: totalPages = Math.ceil(totalItems / pageSize);
+</script>
+
+<div class="GeneralPagination" part="GeneralPagination" bind:this={customStylingContainer}>
+  <div class="PaginationWrapper {mobileView ? 'PaginationWrapperMobile' : ''}" part="PaginationWrapper {mobileView ? 'PaginationWrapperMobile' : ''}" >
+    {#each options as option}
+    <button disabled="{
+      (option.type === 'symbol' && option.symbol === '&gt;' && currentPage >= totalPages) ||
+      (option.type === 'symbol' && option.symbol === '&lt;' && currentPage <= 1)
+    }"
+      class="option"
+      class:number="{option.type === 'number'}"
+      class:prev="{option.type === 'symbol' && option.symbol === '&lt;'}"
+      class:next="{option.type === 'symbol' && option.symbol === '&gt;'}"
+      class:disabled="{
+        (option.type === 'symbol' && option.symbol === '&gt;' && currentPage >= totalPages) ||
+        (option.type === 'symbol' && option.symbol === '&lt;' && currentPage <= 1)
+      }"
+      class:ellipsis="{option.type === 'symbol' && option.symbol === '.'}"
+      class:active="{option.type === 'number' && option.value === currentPage}"
+      role="presentation"
+      on:click="{() => handleOptionClick(option)}"
+    >
+      {#if option.type === 'number'}
+        <slot name="number" value="{option.value}">
+          <span>{option.value}</span>
+        </slot>
+      {:else if option.type === 'symbol' && option.symbol === '.'}
+        <slot name="ellipsis">
+          <span>...</span>
+        </slot>
+      {:else if option.type === 'symbol' && option.symbol === '&lt;'}
+        <slot name="prev" >
+          &lt;
+        </slot>
+      {:else if option.type === 'symbol' && option.symbol === '&gt;'}
+        <slot name="next" >
+          &gt;
+        </slot>
+      {/if}
+    </button>
+    {/each}
+  </div>
+
+  {#if showInput}
+    <div class="PaginationInputWrapper">
+      <span>Go To Page</span>
+      <input type="number" class="PaginationInput" part="PaginationInput" bind:value={pageForInput} on:change={()=>handleInput(pageForInput)}>
+      <button type="button" class="PaginationGoButton" on:click="{() => handleOptionClick({ value:pageToGo}) }">Go</button>
+    </div>
+  {/if}
+</div>
+
+
+<style lang="scss">
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  .GeneralPagination {
+    margin: 40px 0;
+    display: flex;
+  }
+
+  .PaginationWrapper {
+    flex:1;
+    display: flex;
+    justify-content: center;
+    &.PaginationWrapperMobile {
+      flex-wrap: wrap;
+      text-align: center;
+    }
+    .prev, .next,.number {
+      color: var(--emfe-w-bonus-pagination-text,var(--emfe-w-color-contrast-600, #0D0D4D));
+      font-size: 16px;
+      cursor: pointer;
+      font-weight: 700;
+      border: 1px solid var(--emfe-w-bonus-pagination-border,var(--emfe-w-color-gray-150, #828282));
+      width: 32px;
+      height: 32px;
+      line-height: 28px;
+      text-align: center;
+      margin-right: 2px;
+      border-radius: 2px;
+      &.disabled {
+        color: var(--emfe-w-bonus-pagination-disabled,var(--emfe-w-color-gray-100, #E6E6E6));
+        border-color: var(--emfe-w-bonus-pagination-disabled,var(--emfe-w-color-gray-100, #E6E6E6));
+        cursor: default;
+      }
+      &.active {
+        background-color: var(--emfe-w-bonus-pagination-bg, var(--emfe-w-color-contrast, #00AEEF)) ;
+        color: var(--emfe-w-bonus-pagination-active,var(--emfe-w-color-white, #FFFFFF));
+      }
+    }
+    .ellipsis {
+      width: 32px;
+      margin-right: 2px;
+      text-align: center;
+      line-height: 20px;
+    }
+    .Page {
+      margin: 0 5px;
+      color: var(--emfe-w-bonus-pagination-text,var(--emfe-w-color-gray-300, #58586B));
+      font-size: 16px;
+      cursor: pointer;
+      padding: 5px 10px;
+      &.active {
+        background-color: var(--emfe-w-bonus-pagination-active,var(--emfe-w-color-white, #FFFFFF));
+        font-weight: 700;
+      }
+    }
+  }
+
+  .PaginationInputWrapper {
+    flex: 1;
+    .PaginationInput {
+      padding: 7px 0 6px 0;
+      width: 32px;
+      text-align: center;
+    }
+
+    .PaginationGoButton {
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 18px;
+    }
+  }
+</style>

package/src/component/CasinoBonusProgress.svelte

@@ -0,0 +1,97 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  export let value = 0;
+  export let status = '';
+  export let clientstyling: string= '';
+  export let clientstylingurl: string = '';
+  let circle;
+  let r = 64.5;
+  let dasharray = Math.PI*(r*2);
+  let customStylingContainer: HTMLElement;
+  
+  const setClientStyling = (): void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = (): void => {
+    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
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+      });
+  }
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: calculateProgress = () => {
+    if(!r) return;
+    var c = Math.PI*(r*2);
+  
+    if (value < 0) { value = 0;}
+    if (value > 100) { value = 100;}
+
+    return ((100-value)/100)*c;
+  };
+</script>
+
+<div class="CircularProgress" part="CircularProgress" bind:this={customStylingContainer}>
+  <svg viewBox="0 0 147 147">
+  
+    <circle class="CircularProgressLineBg" cx="73.5" cy="73.5" r="64.5" fill="transparent" stroke-width="18" ></circle>
+    <circle class="CircularProgressLine" bind:this={circle} class:Completed="{status === 'completed'}"  
+      cx="73.5" cy="73.5" r="64.5" stroke-width="18"
+      stroke-dasharray={dasharray} stroke-dashoffset={calculateProgress()}>
+    </circle>
+    <circle class="CircularProgressCenter" class:Completed="{status === 'completed'}" cx="73" cy="73.5" r="50.5"></circle>
+  </svg>
+        
+  <div>
+    <slot>
+      <span class="CircularProgressText" part="CircularProgressText">{value} %</span>
+    </slot>
+  </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';
+  }
+  
+  .CircularProgress {
+    height: 100%;
+    position: relative;
+    width: 100%;
+  }
+  .CircularProgressLineBg {
+    stroke: var(--emfe-w-bonus-progress-primary,var(--emfe-w-color-gray-100, #D9D9D9));
+  }
+  .CircularProgressLine {
+    stroke: var(--emfe-w-bonus-progress-primary,var(--emfe-w-color-primary, #00AEEF));
+    transition: 0.35s stroke-dashoffset;
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+    fill: transparent;
+    &.Completed {
+      stroke: var(--emfe-w-bonus-progress-bg,var(--emfe-w-color-gray-300, #A9A9A9));
+    }
+  }
+  .CircularProgressCenter {
+    fill: var(--emfe-w-bonus-progress-primary,var(--emfe-w-color-primary, #00AEEF));
+    &.Completed {
+      fill: var(--emfe-w-bonus-progress-bg,var(--emfe-w-color-gray-100, #D9D9D9));
+    }
+  }
+  .CircularProgressText {
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--emfe-w-bonus-progress-text,var(--emfe-w-color-white, #FFFFFF));
+  }
+</style>

package/src/i18n.js

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,11 @@
+import CasinoBonusesController from './CasinoBonusesController.svelte';
+import CasinoBonusCard from './component/CasinoBonusCard.svelte';
+import CasinoBonusPagination from './component/CasinoBonusPagination.svelte';
+import CasinoBonusProgress from './component/CasinoBonusProgress.svelte';
+
+!customElements.get('casino-bonuses-controller') && customElements.define('casino-bonuses-controller', CasinoBonusesController);
+!customElements.get('casino-bonus-pagination') && customElements.define('casino-bonus-pagination', CasinoBonusPagination);
+!customElements.get('casino-bonus-card') && customElements.define('casino-bonus-card', CasinoBonusCard);
+!customElements.get('casino-bonus-progress') && customElements.define('casino-bonus-progress', CasinoBonusProgress);
+
+export default CasinoBonusesController;

package/src/pagination.js

@@ -0,0 +1,121 @@
+export function generateNavigationOptions({ totalItems, pageSize, currentPage, limit }) {
+    const totalPages = Math.ceil(totalItems / pageSize);
+    const limited = limit && totalPages > getLimitThreshold(limit);
+    const options = limited
+        ? generateLimitedOptions({ totalPages, limit, currentPage })
+        : generateUnlimitedOptions({ totalPages });
+    return [{
+        type: 'symbol',
+        symbol: '<',
+        value: currentPage <= 1 ? 1 : currentPage - 1
+    },
+    ...(options || []),
+    {
+        type: 'symbol',
+        symbol: '&gt;',
+        value: currentPage >= totalPages ? totalPages : currentPage + 1
+    }];
+}
+function generateUnlimitedOptions({ totalPages }) {
+    return new Array(totalPages).fill(null).map((_, index) => ({
+        type: 'number',
+        value: index + 1
+    }));
+}
+function generateLimitedOptions({ totalPages, limit, currentPage }) {
+    const boundarySize = limit * 2 + 2;
+    const firstBoundary = 1 + boundarySize;
+    const lastBoundary = totalPages - boundarySize;
+    const totalShownPages = firstBoundary + 2;
+    if (currentPage <= firstBoundary - limit) {
+        return Array(totalShownPages)
+            .fill(null)
+            .map((_, index) => {
+            if (index === totalShownPages - 1) {
+                return {
+                    type: 'number',
+                    value: totalPages
+                };
+            }
+            else if (index === totalShownPages - 2) {
+                return {
+                    type: 'symbol',
+                    symbol: '.',
+                    value: firstBoundary + 1
+                };
+            }
+            return {
+                type: 'number',
+                value: index + 1
+            };
+        });
+    }
+    else if (currentPage >= lastBoundary + limit) {
+        return Array(totalShownPages)
+            .fill(null)
+            .map((_, index) => {
+            if (index === 0) {
+                return {
+                    type: 'number',
+                    value: 1
+                };
+            }
+            else if (index === 1) {
+                return {
+                    type: 'symbol',
+                    symbol: '.',
+                    value: lastBoundary - 1
+                };
+            }
+            return {
+                type: 'number',
+                value: lastBoundary + index - 2
+            };
+        });
+    }
+    else if (currentPage >= firstBoundary - limit && currentPage <= lastBoundary + limit) {
+        return Array(totalShownPages)
+            .fill(null)
+            .map((_, index) => {
+            if (index === 0) {
+                return {
+                    type: 'number',
+                    value: 1
+                };
+            }
+            else if (index === 1) {
+                return {
+                    type: 'symbol',
+                    symbol: '.',
+                    value: currentPage - limit + (index - 2)
+                };
+            }
+            else if (index === totalShownPages - 1) {
+                return {
+                    type: 'number',
+                    value: totalPages
+                };
+            }
+            else if (index === totalShownPages - 2) {
+                return {
+                    type: 'symbol',
+                    symbol: '.',
+                    value: currentPage + limit + 1
+                };
+            }
+            return {
+                type: 'number',
+                value: currentPage - limit + (index - 2)
+            };
+        });
+    }
+    return [
+        
+    ];
+}
+
+function getLimitThreshold(limit) {
+    const maximumUnlimitedPages = 3; 
+    const numberOfBoundaryPages = 2; 
+    return limit * 2 + maximumUnlimitedPages + numberOfBoundaryPages;
+}

package/src/translation.js

@@ -0,0 +1,65 @@
+export const BonusControllerTranslations = {
+    en: {
+      bonus: {
+        bonusCode: 'Do you have a bonus code',
+        placeholder: 'Enter your bonus code here',
+        invalidBonusCode: 'Invalid bonus code',
+        claim: 'Claim Bonus',
+        from: 'From',
+        to: 'to',
+        noBonus: 'No bonuses found',
+        filter: 'Filter',
+        error: 'Error',
+        forfeit: 'Forfeit',
+        invalidBonusCode: `The bonus code provided is invalid.`,
+        noActiveBonuses: `You have no active bonuses at the moment.`,
+        forfeitMessage: `Are you sure want to forfeit bonus?`,
+        forfeitConfirm: `Confirm`,
+        forfeitCancel: `Cancel`,
+        claimSuccessMessage: `Bonus claimed!`,
+        canlendarTitle: `Select the period`,
+        show: 'Show'
+      },
+      bonusType: {
+        standard: 'Bonus Money',
+        freeBet: 'Free Bet',
+        freeRound: 'Free Spins',
+        wagering: 'Wagering Challenge',
+        cashBack: 'Cash Back',
+        oddsBoost: 'Odds Boost',
+        stakeBack: 'Stake Back',
+        tournamentTicket: 'Ticket'
+      },
+      bonusCard: {
+        level: 'Level',
+        current: 'Current',
+        next: 'Next',
+        first: 'First',
+        last: 'Last',
+        previous: 'Previous',
+        startChallenge: 'START CHALLENGE',
+        rewards: 'Rewards',
+        join: 'Join',
+        forfeit: 'Forfeit',
+        terms: 'Terms and Conditions',
+        bonusType: 'Bonus Type',
+        levels: 'Levels',
+        validity: 'Validity',
+        bonusStatus: 'Bonus Status',
+        bonusAmount: 'Bonus Amount',
+        wagered:'Wagered',
+        wageredAmount: 'Wagered Amount',
+        roundNumber: 'Number of freespins',
+        game: 'Game',
+        validUntil: 'Valid Until',
+        wageringType: 'Wagering Type',
+        remaining: 'Remaining',
+        money: 'Money Wagering',
+        betCount: 'Bet Count',
+        allRewards: 'All Rewards',
+        error: 'Join failed, please try again.',
+        playNow: 'Play Now'
+      }
+    },
+  };
+  

package/stories/CasinoBonusesController.stories.js

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

package/tsconfig.json

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