@everymatrix/player-active-bonuses 1.0.16 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/player-active-bonuses",
3
- "version": "1.0.16",
3
+ "version": "1.1.1",
4
4
  "main": "dist/player-active-bonuses",
5
5
  "svelte": "src/index.ts",
6
6
  "scripts": {
@@ -36,5 +36,5 @@
36
36
  "publishConfig": {
37
37
  "access": "public"
38
38
  },
39
- "gitHead": "526e9d4877d11a6372af0e39b2c9db7c8b640737"
39
+ "gitHead": "4324ea4b38266eb153f1ab89685cdf0f9bcade16"
40
40
  }
@@ -11,9 +11,12 @@
11
11
  export let session:string = '';
12
12
  export let playerid:string = '';
13
13
  export let lang:string = 'en';
14
+ export let clientstyling:string = '';
15
+ export let clientstylingurl:string = '';
14
16
  export let translationUrl:string = '';
15
17
 
16
18
  let isLoading:boolean = false;
19
+ let customStylingContainer:HTMLElement;
17
20
  let userAgent:string = window.navigator.userAgent;
18
21
  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
19
22
 
@@ -196,6 +199,29 @@
196
199
  });
197
200
  }
198
201
 
202
+ const initialLoad = () => {
203
+ setLocale(lang);
204
+ }
205
+
206
+ const setClientStyling = ():void => {
207
+ let sheet:HTMLElement = document.createElement('style');
208
+ sheet.innerHTML = clientstyling;
209
+ customStylingContainer.appendChild(sheet);
210
+ }
211
+
212
+ const setClientStylingURL = ():void => {
213
+ let url:URL = new URL(clientstylingurl);
214
+ let cssFile:HTMLElement = document.createElement('style');
215
+
216
+ fetch(url.href)
217
+ .then((res:any) => res.text())
218
+ .then((data:any) => {
219
+ cssFile.innerHTML = data
220
+
221
+ setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
222
+ });
223
+ }
224
+
199
225
  onMount(() => {
200
226
  window.addEventListener('message', messageHandler, false);
201
227
 
@@ -204,98 +230,101 @@
204
230
  }
205
231
  });
206
232
 
207
- const initialLoad = () => {
208
- setLocale(lang);
209
- }
210
-
211
233
  $: lang && initialLoad();
212
234
  $: session && playerid && endpoint && getActiveBonuses(0);
235
+ $: clientstylingurl && customStylingContainer && setClientStylingURL();
236
+ $: clientstyling && customStylingContainer && setClientStyling();
213
237
  $: translationUrl && setTranslationUrl();
214
238
  </script>
215
-
216
- {#if isLoading}
217
- <div class="ModalLoader" part="ModalLoader"></div>
218
- {:else}
219
- <div class="ActiveBonusesWrapper {isMobile ? 'ActiveBonusesWrapperMobile' : ''}" part="ActiveBonusesWrapper {isMobile ? 'ActiveBonusesWrapperMobile' : ''}">
220
- {#if isMobile}
221
- <div class="MenuReturnButton" part="MenuReturnButton" on:click={() => toggleScreen()}>
222
- <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-color-primary, #D0046C);}</style></defs><g transform="translate(-20 -158)">
223
- <g transform="translate(20 158)">
224
- <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
225
- </g></g>
226
- </svg>
227
- <h2 class="ActiveBonusesTitleMobile" part="ActiveBonusesTitleMobile">{$_('activeBonuses.title')}</h2>
239
+ <div bind:this={customStylingContainer}>
240
+ {#if isLoading}
241
+ <div class="ModalLoader" part="ModalLoader"></div>
242
+ {:else}
243
+ <div class="ActiveBonusesWrapper {isMobile ? 'ActiveBonusesWrapperMobile' : ''}" part="ActiveBonusesWrapper {isMobile ? 'ActiveBonusesWrapperMobile' : ''}">
244
+ {#if isMobile}
245
+ <div class="MenuReturnButton" part="MenuReturnButton" on:click={() => toggleScreen()}>
246
+ <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-color-primary, #D0046C);}</style></defs><g transform="translate(-20 -158)">
247
+ <g transform="translate(20 158)">
248
+ <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
249
+ </g></g>
250
+ </svg>
251
+ <h2 class="ActiveBonusesTitleMobile" part="ActiveBonusesTitleMobile">{$_('activeBonuses.title')}</h2>
252
+ </div>
253
+ {/if}
254
+ <h2 class="ActiveBonusesTitle {isMobile ? 'ActiveBonusesTitleNone' : ''}" part="ActiveBonusesTitle {isMobile ? 'ActiveBonusesTitleNone' : ''}">{$_('activeBonuses.title')}</h2>
255
+ <div class="BonusCodeContainer {isMobile ? 'BonusCodeContainerMobile' : ''}" part="BonusCodeContainer {isMobile ? 'BonusCodeContainerMobile' : ''}">
256
+ <label for="BonusCode">{$_('activeBonuses.bonusCode')}</label>
257
+ <div class="BonusCodeWrapper {isMobile ? 'BonusCodeWrapperMobile' : ''}" part="BonusCodeWrapper {isMobile ? 'BonusCodeWrapperMobile' : ''}">
258
+ <input class="BonusCodeInput {isMobile ? 'BonusCodeInputMobile' : ''}" part="BonusCodeInput {isMobile ? 'BonusCodeInputMobile' : ''}" bind:value={bonusCode} on:keyup={validateBonusCode} type="text" id="BonusCode" />
259
+ <button class="SubmitBonusCode {isMobile ? 'SubmitBonusCodeMobile' : ''}" part="SubmitBonusCode {isMobile ? 'SubmitBonusCodeMobile' : ''}" disabled={invalidBonusField} on:click={claimBonus}>{$_('activeBonuses.getBonus')}</button>
260
+ </div>
261
+ {#if invalidBonusCode}
262
+ <p class="InvalidBonusCodeMessage" part="InvalidBonusCodeMessage">{$_('activeBonuses.invalidBonusCode')}</p>
263
+ {/if}
228
264
  </div>
229
- {/if}
230
- <h2 class="ActiveBonusesTitle {isMobile ? 'ActiveBonusesTitleNone' : ''}" part="ActiveBonusesTitle {isMobile ? 'ActiveBonusesTitleNone' : ''}">{$_('activeBonuses.title')}</h2>
231
- <div class="BonusCodeContainer {isMobile ? 'BonusCodeContainerMobile' : ''}" part="BonusCodeContainer {isMobile ? 'BonusCodeContainerMobile' : ''}">
232
- <label for="BonusCode">{$_('activeBonuses.bonusCode')}</label>
233
- <div class="BonusCodeWrapper {isMobile ? 'BonusCodeWrapperMobile' : ''}" part="BonusCodeWrapper {isMobile ? 'BonusCodeWrapperMobile' : ''}">
234
- <input class="BonusCodeInput {isMobile ? 'BonusCodeInputMobile' : ''}" part="BonusCodeInput {isMobile ? 'BonusCodeInputMobile' : ''}" bind:value={bonusCode} on:keyup={validateBonusCode} type="text" id="BonusCode" />
235
- <button class="SubmitBonusCode {isMobile ? 'SubmitBonusCodeMobile' : ''}" part="SubmitBonusCode {isMobile ? 'SubmitBonusCodeMobile' : ''}" disabled={invalidBonusField} on:click={claimBonus}>{$_('activeBonuses.getBonus')}</button>
265
+ <div class="ActiveBonusesGrid {isMobile ? 'ActiveBonusesGridMobile' : ''}" part="ActiveBonusesGrid {isMobile ? 'ActiveBonusesGridMobile' : ''}">
266
+ {#if activeBonusesList.length === 0}
267
+ <p>{$_('activeBonuses.noActiveBonuses')}</p>
268
+ {:else}
269
+ {#each activeBonusesList as activeBonus}
270
+ {#if activeBonus.type === 'freeRound'}
271
+ <player-bonus-card
272
+ bonuswalletid={activeBonus.walletId}
273
+ bonusdate={activeBonus.granted}
274
+ bonusstatus={activeBonus.status}
275
+ bonusname={activeBonus.name}
276
+ bonustype={activeBonus.type}
277
+ bonuscurrency={activeBonus.currency}
278
+ {lang}
279
+ {clientstyling}
280
+ {clientstylingurl}
281
+ ></player-bonus-card>
282
+ {:else}
283
+ <player-bonus-card
284
+ bonuswalletid={activeBonus.walletId}
285
+ bonusdate={activeBonus.granted}
286
+ bonusstatus={activeBonus.status}
287
+ bonusname={activeBonus.name}
288
+ bonustype={activeBonus.type}
289
+ bonusamount={activeBonus.grantedAmount}
290
+ bonuswageringamount={activeBonus.totalWR}
291
+ bonusremainingamount={activeBonus.currentAmount}
292
+ bonuscurrency={activeBonus.currency}
293
+ {lang}
294
+ {clientstyling}
295
+ {clientstylingurl}
296
+ ></player-bonus-card>
297
+ {/if}
298
+ {/each}
299
+ {/if}
236
300
  </div>
237
- {#if invalidBonusCode}
238
- <p class="InvalidBonusCodeMessage" part="InvalidBonusCodeMessage">{$_('activeBonuses.invalidBonusCode')}</p>
239
- {/if}
240
- </div>
241
- <div class="ActiveBonusesGrid {isMobile ? 'ActiveBonusesGridMobile' : ''}" part="ActiveBonusesGrid {isMobile ? 'ActiveBonusesGridMobile' : ''}">
242
- {#if activeBonusesList.length === 0}
243
- <p>{$_('activeBonuses.noActiveBonuses')}</p>
244
- {:else}
245
- {#each activeBonusesList as activeBonus}
246
- {#if activeBonus.type === 'freeRound'}
247
- <player-bonus-card
248
- bonuswalletid={activeBonus.walletId}
249
- bonusdate={activeBonus.granted}
250
- bonusstatus={activeBonus.status}
251
- bonusname={activeBonus.name}
252
- bonustype={activeBonus.type}
253
- bonuscurrency={activeBonus.currency}
254
- {lang}
255
- ></player-bonus-card>
256
- {:else}
257
- <player-bonus-card
258
- bonuswalletid={activeBonus.walletId}
259
- bonusdate={activeBonus.granted}
260
- bonusstatus={activeBonus.status}
261
- bonusname={activeBonus.name}
262
- bonustype={activeBonus.type}
263
- bonusamount={activeBonus.grantedAmount}
264
- bonuswageringamount={activeBonus.totalWR}
265
- bonusremainingamount={activeBonus.currentAmount}
266
- bonuscurrency={activeBonus.currency}
267
- {lang}
268
- ></player-bonus-card>
269
- {/if}
270
- {/each}
301
+ {#if activeBonusesList.length !== 0}
302
+ <div class="BonusesPaginationWrapper {isMobile ? 'BonusesPaginationWrapperMobile' : ''}" part="BonusesPaginationWrapper {isMobile ? 'BonusesPaginationWrapperMobile' : ''}">
303
+ <span class="BonusesFirst {currentPage === 0 ? 'Inactive' : ''}" part="BonusesFirst {currentPage === 0 ? 'Inactive' : ''}" on:click={() => getActiveBonuses(0)}>&vert;&lt;</span>
304
+ <span class="BonusesPrev {currentPage === 0 ? 'Inactive' : ''}" part="BonusesPrev {currentPage === 0 ? 'Inactive' : ''}" on:click={() => getActiveBonuses(bonusesPrevPage)}>&lt;</span>
305
+ {#each Array(numberOfPages) as _, i}
306
+ <span class="BonusesPage {i === currentPage ? 'BonusPageActive' : ''}" part="BonusesPage {i === currentPage ? 'BonusPageActive' : ''}" on:click={() => getActiveBonuses(i*bonusesPerPage)}>{i+1}</span>
307
+ {/each}
308
+ <span class="BonusesNext {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" part="BonusesNext {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getActiveBonuses(bonusesNextPage)}>&gt;</span>
309
+ <span class="BonusesLast {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" part="BonusesLast {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getActiveBonuses(bonusesLastPage)}>&gt;&vert;</span>
310
+ </div>
271
311
  {/if}
272
312
  </div>
273
- {#if activeBonusesList.length !== 0}
274
- <div class="BonusesPaginationWrapper {isMobile ? 'BonusesPaginationWrapperMobile' : ''}" part="BonusesPaginationWrapper {isMobile ? 'BonusesPaginationWrapperMobile' : ''}">
275
- <span class="BonusesFirst {currentPage === 0 ? 'Inactive' : ''}" part="BonusesFirst {currentPage === 0 ? 'Inactive' : ''}" on:click={() => getActiveBonuses(0)}>&vert;&lt;</span>
276
- <span class="BonusesPrev {currentPage === 0 ? 'Inactive' : ''}" part="BonusesPrev {currentPage === 0 ? 'Inactive' : ''}" on:click={() => getActiveBonuses(bonusesPrevPage)}>&lt;</span>
277
- {#each Array(numberOfPages) as _, i}
278
- <span class="BonusesPage {i === currentPage ? 'BonusPageActive' : ''}" part="BonusesPage {i === currentPage ? 'BonusPageActive' : ''}" on:click={() => getActiveBonuses(i*bonusesPerPage)}>{i+1}</span>
279
- {/each}
280
- <span class="BonusesNext {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" part="BonusesNext {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getActiveBonuses(bonusesNextPage)}>&gt;</span>
281
- <span class="BonusesLast {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" part="BonusesLast {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getActiveBonuses(bonusesLastPage)}>&gt;&vert;</span>
282
- </div>
283
- {/if}
284
- </div>
285
- {#if bonusModal}
286
- <div class="ModalWrapper {isMobile ? 'ModalWrapperMobile' : ''}" part="ModalWrapper {isMobile ? 'ModalWrapperMobile' : ''}">
287
- <div class="ModalContent" part="ModalContent">
288
- <div class="ModalBody" part="ModalBody">
289
- <p class="ModalText" part="ModalText">{$_('activeBonuses.forfeitBonus')}</p>
290
- <div class="ModalButtons" part="ModalButtons">
291
- <button class="ModalCancel" part="ModalCancel" on:click={closeBonusModal}>{$_('activeBonuses.forfeitBonusCancel')}</button>
292
- <button class="ModalConfirm" part="ModalConfirm" on:click={deleteBonus}>{$_('activeBonuses.forfeitBonusConfirm')}</button>
313
+ {#if bonusModal}
314
+ <div class="ModalWrapper {isMobile ? 'ModalWrapperMobile' : ''}" part="ModalWrapper {isMobile ? 'ModalWrapperMobile' : ''}">
315
+ <div class="ModalContent" part="ModalContent">
316
+ <div class="ModalBody" part="ModalBody">
317
+ <p class="ModalText" part="ModalText">{$_('activeBonuses.forfeitBonus')}</p>
318
+ <div class="ModalButtons" part="ModalButtons">
319
+ <button class="ModalCancel" part="ModalCancel" on:click={closeBonusModal}>{$_('activeBonuses.forfeitBonusCancel')}</button>
320
+ <button class="ModalConfirm" part="ModalConfirm" on:click={deleteBonus}>{$_('activeBonuses.forfeitBonusConfirm')}</button>
321
+ </div>
293
322
  </div>
294
323
  </div>
295
324
  </div>
296
- </div>
325
+ {/if}
297
326
  {/if}
298
- {/if}
327
+ </div>
299
328
 
300
329
  <style lang="scss">
301
330