@everymatrix/casino-games-category-section 1.3.4 → 1.4.0

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.
Files changed (4) hide show
  1. package/dist/casino-games-category-section.js +3 -3
  2. package/dist/casino-games-category-section.js.map +1 -1
  3. package/package.json +2 -2
  4. package/src/CasinoGamesCategorySection.svelte +277 -220
package/src/CasinoGamesCategorySection.svelte CHANGED
@@ -31,6 +31,7 @@
31
31
  export let gamepagemodalurl:string = 'false';
32
32
  export let integratedgameframedesktop:string = 'false';
33
33
  export let integratedgameframemobile:string = 'false';
34
+ export let casinomygames:string = 'false';
34
35
 
35
36
  export let once = true;
36
37
  export let top = 0;
@@ -42,7 +43,7 @@
42
43
  // let livelobbyendpoint = `${endpoint}/lobby/tables`;
43
44
 
44
45
  // CasinoPage loading state
45
- let isLoading:boolean = false;
46
+ let isLoading:boolean = true;
46
47
  let hasErrors:boolean = false;
47
48
  let sessionID:string;
48
49
  let playerID:string;
@@ -72,13 +73,8 @@
72
73
  let categoryName:HTMLElement;
73
74
  let favoriteGames:Array<Object>;
74
75
  let showFavGamesCategory:boolean = false;
75
- let receivedFavoriteResults:Object;
76
- let sessionId:string = '';
77
- let userId:string = '';
78
- let mostPlayedScreen:Boolean = false;
79
76
  let customStylingContainer:HTMLElement;
80
77
  let validObservers:boolean = false;
81
- let lastPlayedScreen:boolean = false;
82
78
 
83
79
  let thumbnailContainer:Array<HTMLElement> = new Array(10000);
84
80
  let intersectingIndexes:Object = {};
@@ -140,7 +136,8 @@
140
136
  });
141
137
 
142
138
  // Start favored games section
143
- const getFavoredGames = (url:string, sessionId:string, userId:string) => {
139
+ const getFavoredGames = (url:string, sessionId:string) => {
140
+ isLoading = true;
144
141
  let options = {
145
142
  method: "GET",
146
143
  headers: {
@@ -152,6 +149,8 @@
152
149
  fetch(url, options)
153
150
  .then((res:any) => res.json())
154
151
  .then((updatedArray:any) => {
152
+ isLoading = false;
153
+
155
154
  if (updatedArray) {
156
155
  favoriteGames = updatedArray.items;
157
156
  } else {
@@ -163,11 +162,11 @@
163
162
  });
164
163
 
165
164
  let aux:any = shownCategoryData;
166
-
167
165
  shownCategoryData = undefined;
168
166
  shownCategoryData = aux;
169
167
 
170
168
  resolve(favoriteGames);
169
+
171
170
  }).catch((err:any) => {
172
171
  console.error(err);
173
172
 
@@ -180,7 +179,7 @@
180
179
  const getData = (categoryId:any, offset:number, limit:number, filterArray:Array<Object> = []) => {
181
180
  let categoryidparsed = '';
182
181
  let url:any = '';
183
-
182
+ isLoading = true;
184
183
  if((categoryid.match(/\$/g) || []).length > 1) {
185
184
  categoryidparsed = categoryid.split('$').slice(0, 2).join('$');
186
185
  url = new URL(`${endpoint}/casino/groups/${datasource}/${categoryidparsed}/subGroups`);
@@ -221,6 +220,7 @@
221
220
  fetch(url)
222
221
  .then((res:any) => res.json())
223
222
  .then((categoryData:any) => {
223
+ isLoading = false;
224
224
 
225
225
  if((categoryid.match(/\$/g) || []).length > 1) {
226
226
  categoryData = categoryData.items.filter(subcategory => {
@@ -231,7 +231,7 @@
231
231
  dataloaded = true;
232
232
  hasErrors = false;
233
233
  maxTotal = categoryData.games.total;
234
-
234
+
235
235
  resolve(categoryData);
236
236
  }, (err:any) => {
237
237
  hasErrors = true;
@@ -247,38 +247,41 @@
247
247
  if (e.data) {
248
248
  switch(e.data.type) {
249
249
  case 'MostPlayedData':
250
- searched = false;
251
- lobbyView = false;
252
- showLoadCategory = false;
253
- mostPlayedScreen = true;
254
- shownCategoryData = e.data.mostPlayedGames;
255
- categoryData = {
256
- id: 'MOSTPLAYED',
257
- name: 'Most Played Games',
258
- games: {
259
- count: e.data.mostPlayedGames.length,
260
- total: e.data.mostPlayedGames.length,
261
- items: e.data.mostPlayedGames
262
- }
263
- };
250
+ if(categoryid == 'MOSTPLAYED') {
251
+ searched = false;
252
+ lobbyView = false;
253
+ showLoadCategory = false;
254
+ shownCategoryData = e.data.mostPlayedGames;
255
+ categoryData = {
256
+ id: 'MOSTPLAYED',
257
+ name: 'Most Played Games',
258
+ games: {
259
+ count: e.data.mostPlayedGames.length,
260
+ total: e.data.mostPlayedGames.length,
261
+ items: e.data.mostPlayedGames
262
+ }
263
+ };
264
+ }
265
+ isLoading = false;
264
266
  break;
265
267
 
266
268
  case 'LastPlayedData':
267
- searched = false;
268
- lobbyView = false;
269
- showLoadCategory = false;
270
- mostPlayedScreen = false;
271
- lastPlayedScreen = true;
272
- shownCategoryData = e.data.lastPlayedGames;
273
- categoryData = {
274
- id: 'LASTPLAYED',
275
- name: 'Last Played Games',
276
- games: {
277
- count: e.data.lastPlayedGames.length,
278
- total: e.data.lastPlayedGames.length,
279
- items: e.data.lastPlayedGames
280
- }
281
- };
269
+ if (categoryid == 'LASTPLAYED') {
270
+ searched = false;
271
+ lobbyView = false;
272
+ showLoadCategory = false;
273
+ shownCategoryData = e.data.lastPlayedGames;
274
+ categoryData = {
275
+ id: 'LASTPLAYED',
276
+ name: 'Last Played Games',
277
+ games: {
278
+ count: e.data.lastPlayedGames.length,
279
+ total: e.data.lastPlayedGames.length,
280
+ items: e.data.lastPlayedGames
281
+ }
282
+ };
283
+ }
284
+ isLoading = false;
282
285
  break;
283
286
 
284
287
  case 'CustomOperatorData':
@@ -287,7 +290,6 @@
287
290
 
288
291
  case "RecentSearchData":
289
292
  searched = true;
290
- mostPlayedScreen = false;
291
293
  recentSearched = true;
292
294
  if (e.data.searchData.length > 0) {
293
295
  shownCategoryData = e.data.searchData;
@@ -310,7 +312,6 @@
310
312
 
311
313
  case "SearchData":
312
314
  searched = true;
313
- mostPlayedScreen = false;
314
315
  recentSearched = false;
315
316
  shownCategoryData = e.data.searchData.items || [];
316
317
  searchItem = true;
@@ -329,12 +330,10 @@
329
330
  lobbyView = true;
330
331
  showLoadCategory = true;
331
332
  searchItem = false;
332
- mostPlayedScreen = false;
333
333
  validObservers = false;
334
334
  if (e.data.receivedFavoriteResults) {
335
335
  favoriteGames = e.data.receivedFavoriteResults.items;
336
336
  }
337
-
338
337
  getData(e.data.categoryId, 0, e.data.visiblegames).then((res:any) => {
339
338
  categoryData = res;
340
339
  shownCategoryData = categoryData.games.items;
@@ -355,32 +354,31 @@
355
354
  searched = false;
356
355
  lobbyView = false;
357
356
  searchItem = false;
358
- mostPlayedScreen = false;
359
357
  validObservers = true;
360
358
  categoryid = e.data.itemId;
361
359
  if (categoryid !== 'MOSTPLAYED') {
362
360
  showLoadCategory = false;
363
361
  }
364
-
365
- getData(categoryid, 0, limit).then((res:any) => {
366
- categoryData = res;
367
- categoryData.games.items.forEach((item:any) => {
368
- item.isFavorite = checkFavorite(item.id);
362
+ if(casinomygames !== 'true') {
363
+ getData(categoryid, 0, limit).then((res:any) => {
364
+ categoryData = res;
365
+ categoryData.games.items.forEach((item:any) => {
366
+ item.isFavorite = checkFavorite(item.id);
367
+ });
368
+ shownCategoryData = categoryData.games.items;
369
+ showLoadCategory = false;
370
+ // @TODO: replace this quick fix - when there are only a few category games, the view scrolls to the footer
371
+ if(shownCategoryData.length < 10) {
372
+ scrollTop = true;
373
+ setTimeout(() => {
374
+ window.postMessage({ type: 'WidgetTopReference', scrollTop }, window.location.href);
375
+ }, 500);
376
+ }
369
377
  });
370
- shownCategoryData = categoryData.games.items;
371
- showLoadCategory = false;
372
- // @TODO: replace this quick fix - when there are only a few category games, the view scrolls to the footer
373
- if(shownCategoryData.length < 10) {
374
- scrollTop = true;
375
- setTimeout(() => {
376
- window.postMessage({ type: 'WidgetTopReference', scrollTop }, window.location.href);
377
- }, 500);
378
- }
379
- });
378
+ }
380
379
  break;
381
380
 
382
381
  case 'FavoriteUpdate':
383
- mostPlayedScreen = false;
384
382
  lobbyView = true;
385
383
  shownCategoryData = categoryData.games.items;
386
384
  shownCategoryData.forEach((item:any) => {
@@ -396,7 +394,7 @@
396
394
  favoriteGames = e.data.receivedFavoriteResults.items;
397
395
  if(e.data.favStadalone) return;
398
396
  if(showFavGamesCategory) {
399
- if(!lobbyView && !mostPlayedScreen) {
397
+ if(!lobbyView) {
400
398
  window.postMessage({ type: 'CategoryUpdate', itemId: categoryid }, window.location.href);
401
399
  }
402
400
  } else {
@@ -420,6 +418,7 @@
420
418
  favoriteGamesData.items = platformFavorite(favGameArray, favoriteGamesData.items);
421
419
  favoriteGamesData.name = "Favorites";
422
420
  showFavGamesCategory = true;
421
+ isLoading = false;
423
422
  }
424
423
  break;
425
424
  // End favorite category section
@@ -429,7 +428,7 @@
429
428
  playerID = e.data.userID;
430
429
  if (favorites == 'true') {
431
430
  if (playerID && playerID.length && sessionID && sessionID.length > 0) {
432
- getFavoredGames(`${endpoint}/player/${playerID}/favorites/`, sessionID, playerID);
431
+ getFavoredGames(`${endpoint}/player/${playerID}/favorites/`, sessionID);
433
432
  }
434
433
  }
435
434
 
@@ -473,7 +472,6 @@
473
472
  return false;
474
473
  }
475
474
  }
476
-
477
475
  return false;
478
476
  }
479
477
 
@@ -503,12 +501,31 @@
503
501
  }
504
502
 
505
503
  // @TODO categoryId type fix
506
- const showCategory = (categoryId:any, categoryData:Object) => {
504
+ const showCategory = (categoryId:any) => {
507
505
  window.postMessage({ type: "CategoryChange", itemId: categoryId }, window.location.href);
508
506
  }
509
507
 
510
508
  const initialSetup = () => {
511
- // Nothing to do here
509
+ // showFavGamesCategory vs categoryData
510
+ // favoriteGamesData vs shownCategoryData
511
+
512
+ switch(categoryid) {
513
+ case 'FAVORITES':
514
+ showFavGamesCategory = true;
515
+ break;
516
+ case 'MOSTPLAYED':
517
+ if(casinomygames === 'false') {
518
+ showFavGamesCategory = false;
519
+ }
520
+ break;
521
+ case 'LASTPLAYED':
522
+ if(casinomygames === 'false') {
523
+ showFavGamesCategory = false;
524
+ }
525
+ break;
526
+ default:
527
+ break;
528
+ }
512
529
  }
513
530
 
514
531
  const handleVisibilityChange = () => {
@@ -553,7 +570,9 @@
553
570
  onMount(() => {
554
571
  window.addEventListener('visibilitychange', (e) => handleVisibilityChange())
555
572
  window.addEventListener('message', messageHandler, false);
556
- window.postMessage({ type: 'GetFavoredGame' }, window.location.href);
573
+ if(categoryid === 'FAVORITES') {
574
+ window.postMessage({ type: 'GetFavoredGame' }, window.location.href);
575
+ }
557
576
 
558
577
  return () => {
559
578
  window.removeEventListener('message', messageHandler);
@@ -562,12 +581,12 @@
562
581
  });
563
582
 
564
583
  $: dataloaded && thumbnailContainer && setupObserver();
565
- $: lang && initialSetup();
584
+ $: lang && categoryid && initialSetup();
566
585
  $: translationurl && setTranslationUrl();
567
586
  $: clientstyling && customStylingContainer && setClientStyling();
568
587
  $: clientstylingurl && customStylingContainer && setClientStylingURL();
569
-
570
588
  </script>
589
+
571
590
  <div class="CasinoGamesCategorySectionContainer" part="CasinoGamesCategorySectionContainer" bind:this={customStylingContainer}>
572
591
  {#if hasErrors}
573
592
  <!-- @TODO diversify error handling -->
@@ -586,9 +605,9 @@
586
605
  </h3>
587
606
  {:else}
588
607
  {#if !shownCategoryData.length}
589
- <h3 class="StatusText" part="StatusText">
590
- {$_('gamesCategorySection.noResults')}
591
- </h3>
608
+ <h3 class="StatusText" part="StatusText">
609
+ {$_('gamesCategorySection.noResults')}
610
+ </h3>
592
611
  {:else}
593
612
  <h3 class="StatusText" part="StatusText">
594
613
  {$_('gamesCategorySection.searchedItems')}
@@ -639,166 +658,178 @@
639
658
  <div>
640
659
  {#if categoryData}
641
660
  <div class="CasinoGamesContainer" part="CasinoGamesContainer">
642
- <div class="CasinoGamesHeader" part="CasinoGamesHeader">
643
- <h3 class="CategoryName" part="CategoryName" bind:this={categoryName}>
644
- {categoryData.name}
645
- </h3>
646
-
661
+ {#if casinomygames !== 'true'}
662
+ <div class="CasinoGamesHeader" part="CasinoGamesHeader">
663
+ <h3 class="CategoryName" part="CategoryName" bind:this={categoryName}>
664
+ {categoryData.name}
665
+ </h3>
647
666
  {#if showLoadCategory}
648
- <!-- svelte-ignore a11y-missing-attribute -->
649
- <a class="CategoryNameLink" part="CategoryNameLink" on:click="{e => showCategory(categoryData.id, categoryData)}">
650
- <span class="CategoryLoadMore" part="CategoryLoadMore">
651
- {$_('gamesCategorySection.viewAll')} ({categoryData.games.total})
652
- </span>
653
- </a>
667
+ <!-- svelte-ignore a11y-missing-attribute -->
668
+ <a class="CategoryNameLink" part="CategoryNameLink" on:click="{e => showCategory(categoryData.id, categoryData)}">
669
+ <span class="CategoryLoadMore" part="CategoryLoadMore">
670
+ {$_('gamesCategorySection.viewAll')} ({categoryData.games.total})
671
+ </span>
672
+ </a>
654
673
  {/if}
655
674
  </div>
656
- {#if shownCategoryData.length !== 0}
657
- <ul class="{(favoriteGamesData.items.length === 0 && showFavGamesCategory) ? '' : 'CasinoGamesGrid'} GamesListIncreasedGap" part="{(favoriteGamesData.items.length === 0 && showFavGamesCategory) ? '' : 'CasinoGamesGrid'} GamesListIncreasedGap" bind:this={container}>
658
- {#each shownCategoryData as gameprops, index}
659
- {#if intersecting || nativeLoading}
660
- <casino-game-thumbnail
661
- session={session}
662
- userid={userid}
663
- lang={lang}
664
- class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
665
- part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
666
- favorites={favorites}
667
- gamethumbnail={gameprops.thumbnail}
668
- gamename={gameprops.name}
669
- gamevendor={gameprops.vendor.name}
670
- gameisnew={gameprops.isNew}
671
- gametag={gameprops.advancedTags?.length > 0 && addGameTag(gameprops.advancedTags)}
672
- gamecellsize={gameprops.cellSize}
673
- gameid={gameprops.id}
674
- gamefunmode={gameprops.hasFunMode}
675
- gamefavorite={gameprops.isFavorite}
676
- bind:this={thumbnailContainer[index]}
677
- connectlive={intersectingIndexes[gameprops.id] == 1 ? 'connect' : 'disconnect'}
678
- visibilityconnect={visibilityconnect}
679
- {currency}
680
- livelobbyendpoint={gameprops.details ? gameprops.href : ''}
681
- {clientstyling}
682
- {clientstylingurl}
683
- {endpoint}
684
- {livecasino}
685
- {gamepagemodalurl}
686
- {integratedgameframedesktop}
687
- {integratedgameframemobile}
688
- ></casino-game-thumbnail>
689
- {/if}
690
- {/each}
691
- </ul>
675
+ {/if}
676
+ {#if isLoading}
677
+ <div class="lds-dual-ring" part="lds-dual-ring"></div>
692
678
  {:else}
693
- <p class="NoSearchResults" part="NoSearchResults">You don't have any games in this category.</p>
679
+ {#if shownCategoryData.length !== 0}
680
+ <ul class="{(favoriteGamesData.items.length === 0 && showFavGamesCategory) ? '' : 'CasinoGamesGrid'} GamesListIncreasedGap" part="{(favoriteGamesData.items.length === 0 && showFavGamesCategory) ? '' : 'CasinoGamesGrid'} GamesListIncreasedGap" bind:this={container}>
681
+ {#each shownCategoryData as gameprops, index}
682
+ {#if intersecting || nativeLoading}
683
+ <casino-game-thumbnail
684
+ session={session}
685
+ userid={userid}
686
+ lang={lang}
687
+ class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
688
+ part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
689
+ favorites={favorites}
690
+ gamethumbnail={gameprops.thumbnail}
691
+ gamename={gameprops.name}
692
+ gamevendor={gameprops.vendor.name}
693
+ gameisnew={gameprops.isNew}
694
+ gametag={gameprops.advancedTags?.length > 0 && addGameTag(gameprops.advancedTags)}
695
+ gamecellsize={gameprops.cellSize}
696
+ gameid={gameprops.id}
697
+ gamefunmode={gameprops.hasFunMode}
698
+ gamefavorite={gameprops.isFavorite}
699
+ bind:this={thumbnailContainer[index]}
700
+ connectlive={intersectingIndexes[gameprops.id] == 1 ? 'connect' : 'disconnect'}
701
+ visibilityconnect={visibilityconnect}
702
+ {currency}
703
+ livelobbyendpoint={gameprops.details ? gameprops.href : ''}
704
+ {clientstyling}
705
+ {clientstylingurl}
706
+ {endpoint}
707
+ {livecasino}
708
+ {gamepagemodalurl}
709
+ {integratedgameframedesktop}
710
+ {integratedgameframemobile}
711
+ ></casino-game-thumbnail>
712
+ {/if}
713
+ {/each}
714
+ </ul>
715
+ {:else}
716
+ <p class="NoSearchResults" part="NoSearchResults">You don't have any games in this category.</p>
717
+ {/if}
694
718
  {/if}
695
719
  </div>
696
720
  {:else if showFavGamesCategory}
697
- <div class="CasinoGamesContainer" part="CasinoGamesContainer">
698
- <div class="CasinoGamesHeader" part="CasinoGamesHeader">
699
- <h3 class="CategoryName" part="CategoryName" bind:this={categoryName}>
700
- {$_('gamesCategorySection.favorites')}
701
- <span class="CategoryFavName">({favoriteGamesData.items.length})</span>
702
- </h3>
703
- </div>
704
- <ul class="{(favoriteGamesData.items.length != 0) ? 'CasinoGamesGrid' : ''} 'GamesListIncreasedGap'}" part="{(favoriteGamesData.items.length != 0) ? 'CasinoGamesGrid' : ''} 'GamesListIncreasedGap'}" bind:this={container}>
705
- {#if favoriteGamesData}
706
- {#each favoriteGamesData.items as gameprops, index}
707
- {#if gameprops.gameModel}
708
- {#if gameprops.gameModel.isFavorite}
709
- {#if intersecting || nativeLoading}
710
- {#if isMobile(userAgent)}
711
- {#if (gameprops.gameModel.platform.includes("iPad") || gameprops.gameModel.platform.includes("iPhone") || gameprops.gameModel.platform.includes("Android"))}
712
- <casino-game-thumbnail
713
- class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
714
- part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
715
- session={session}
716
- userid={userid}
717
- lang={lang}
718
- favorites={favorites}
719
- gamethumbnail={gameprops.gameModel.thumbnail}
720
- gamename={gameprops.gameModel.name}
721
- gamevendor={gameprops.gameModel.vendor.name}
722
- gameisnew={gameprops.gameModel.isNew}
723
- gametag={gameprops.gameModel.advancedTags?.length > 0 && addGameTag(gameprops.advancedTags)}
724
- gamecellsize={gameprops.cellSize}
725
- gameid={gameprops.gameModel.id}
726
- gamefunmode={gameprops.gameModel.hasFunMode}
727
- gamefavorite={gameprops.gameModel.isFavorite}
728
- showfavoredcategory={showFavGamesCategory}
729
- connectlive={intersectingIndexes[gameprops.id] == 1 ? 'connect' : 'disconnect'}
730
- visibilityconnect={visibilityconnect}
731
- {currency}
732
- livelobbyendpoint={gameprops.gameModel.details ? gameprops.gameModel.launchUrl : ''}
733
- {clientstyling}
734
- {clientstylingurl}
735
- {endpoint}
736
- {livecasino}
737
- {gamepagemodalurl}
738
- {integratedgameframedesktop}
739
- {integratedgameframemobile}
740
- ></casino-game-thumbnail>
721
+ <div class="CasinoGamesContainer" part="CasinoGamesContainer">
722
+ {#if casinomygames !== 'true'}
723
+ <div class="CasinoGamesHeader" part="CasinoGamesHeader">
724
+ <h3 class="CategoryName" part="CategoryName" bind:this={categoryName}>
725
+ {$_('gamesCategorySection.favorites')}
726
+ <span class="CategoryFavName">({favoriteGamesData.items.length})</span>
727
+ </h3>
728
+ </div>
729
+ {/if}
730
+
731
+ <ul class="{(favoriteGamesData.items.length != 0) ? 'CasinoGamesGrid' : ''} 'GamesListIncreasedGap'}" part="{(favoriteGamesData.items.length != 0) ? 'CasinoGamesGrid' : ''} 'GamesListIncreasedGap'}" bind:this={container}>
732
+ {#if isLoading}
733
+ <div class="lds-dual-ring" part="lds-dual-ring"></div>
734
+ {:else}
735
+ {#if favoriteGamesData}
736
+ {#each favoriteGamesData.items as gameprops, index}
737
+ {#if gameprops.gameModel}
738
+ {#if gameprops.gameModel.isFavorite}
739
+ {#if intersecting || nativeLoading}
740
+ {#if isMobile(userAgent)}
741
+ {#if (gameprops.gameModel.platform.includes("iPad") || gameprops.gameModel.platform.includes("iPhone") || gameprops.gameModel.platform.includes("Android"))}
742
+ <casino-game-thumbnail
743
+ class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
744
+ part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
745
+ session={session}
746
+ userid={userid}
747
+ lang={lang}
748
+ favorites={favorites}
749
+ gamethumbnail={gameprops.gameModel.thumbnail}
750
+ gamename={gameprops.gameModel.name}
751
+ gamevendor={gameprops.gameModel.vendor.name}
752
+ gameisnew={gameprops.gameModel.isNew}
753
+ gametag={gameprops.gameModel.advancedTags?.length > 0 && addGameTag(gameprops.advancedTags)}
754
+ gamecellsize={gameprops.cellSize}
755
+ gameid={gameprops.gameModel.id}
756
+ gamefunmode={gameprops.gameModel.hasFunMode}
757
+ gamefavorite={gameprops.gameModel.isFavorite}
758
+ showfavoredcategory={showFavGamesCategory}
759
+ connectlive={intersectingIndexes[gameprops.id] == 1 ? 'connect' : 'disconnect'}
760
+ visibilityconnect={visibilityconnect}
761
+ {currency}
762
+ livelobbyendpoint={gameprops.gameModel.details ? gameprops.gameModel.launchUrl : ''}
763
+ {clientstyling}
764
+ {clientstylingurl}
765
+ {endpoint}
766
+ {livecasino}
767
+ {gamepagemodalurl}
768
+ {integratedgameframedesktop}
769
+ {integratedgameframemobile}
770
+ ></casino-game-thumbnail>
771
+ {/if}
772
+ {:else if gameprops.gameModel.platform.includes("PC")}
773
+ <casino-game-thumbnail
774
+ class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
775
+ part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
776
+ session={session}
777
+ userid={userid}
778
+ lang={lang}
779
+ favorites={favorites}
780
+ gamethumbnail={gameprops.gameModel.thumbnail}
781
+ gamename={gameprops.gameModel.name}
782
+ gamevendor={gameprops.gameModel.vendor.name}
783
+ gameisnew={gameprops.gameModel.isNew}
784
+ gametag={gameprops.gameModel.advancedTags?.length > 0 && addGameTag(gameprops.advancedTags)}
785
+ gamecellsize={gameprops.cellSize}
786
+ gameid={gameprops.gameModel.id}
787
+ gamefunmode={gameprops.gameModel.hasFunMode}
788
+ gamefavorite={gameprops.gameModel.isFavorite}
789
+ showfavoredcategory={showFavGamesCategory}
790
+ connectlive={intersectingIndexes[gameprops.id] == 1 ? 'connect' : 'disconnect'}
791
+ visibilityconnect={visibilityconnect}
792
+ {currency}
793
+ livelobbyendpoint={gameprops.gameModel.details ? gameprops.gameModel.launchUrl : ''}
794
+ {clientstyling}
795
+ {clientstylingurl}
796
+ {endpoint}
797
+ {livecasino}
798
+ {gamepagemodalurl}
799
+ {integratedgameframedesktop}
800
+ {integratedgameframemobile}
801
+ ></casino-game-thumbnail>
802
+ {/if}
741
803
  {/if}
742
- {:else if gameprops.gameModel.platform.includes("PC")}
743
- <casino-game-thumbnail
744
- class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
745
- part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
746
- session={session}
747
- userid={userid}
748
- lang={lang}
749
- favorites={favorites}
750
- gamethumbnail={gameprops.gameModel.thumbnail}
751
- gamename={gameprops.gameModel.name}
752
- gamevendor={gameprops.gameModel.vendor.name}
753
- gameisnew={gameprops.gameModel.isNew}
754
- gametag={gameprops.gameModel.advancedTags?.length > 0 && addGameTag(gameprops.advancedTags)}
755
- gamecellsize={gameprops.cellSize}
756
- gameid={gameprops.gameModel.id}
757
- gamefunmode={gameprops.gameModel.hasFunMode}
758
- gamefavorite={gameprops.gameModel.isFavorite}
759
- showfavoredcategory={showFavGamesCategory}
760
- connectlive={intersectingIndexes[gameprops.id] == 1 ? 'connect' : 'disconnect'}
761
- visibilityconnect={visibilityconnect}
762
- {currency}
763
- livelobbyendpoint={gameprops.gameModel.details ? gameprops.gameModel.launchUrl : ''}
764
- {clientstyling}
765
- {clientstylingurl}
766
- {endpoint}
767
- {livecasino}
768
- {gamepagemodalurl}
769
- {integratedgameframedesktop}
770
- {integratedgameframemobile}
771
- ></casino-game-thumbnail>
772
804
  {/if}
773
805
  {/if}
774
- {/if}
775
- {/if}
776
- {:else}
777
- <p class="NoFavoriteGames {isMobile(userAgent) ? 'NoFavoriteGamesMobile' : ''}" part="NoFavoriteGames {isMobile(userAgent) ? 'NoFavoriteGamesMobile' : ''}">
778
- <svg version="1.1" class="UnfavoredIcon" part="UnfavoredIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="50px" y="50px"
779
- viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"><path style="fill: white" d="M511.266,197.256c-1.764-5.431-6.458-9.388-12.108-10.209l-158.722-23.065L269.452,20.155
780
- c-2.527-5.12-7.741-8.361-13.451-8.361c-5.709,0-10.924,3.242-13.451,8.361l-70.988,143.828L12.843,187.047
781
- c-5.65,0.821-10.344,4.779-12.108,10.209c-1.765,5.43-0.293,11.391,3.795,15.376l114.848,111.955L92.27,482.67
782
- c-0.965,5.627,1.349,11.315,5.968,14.67c4.618,3.355,10.74,3.798,15.797,1.142L256,423.846l141.961,74.637
783
- c2.195,1.154,4.591,1.723,6.979,1.723c3.11,0,6.206-0.966,8.818-2.865c4.619-3.356,6.933-9.043,5.968-14.671L392.61,324.587
784
- l114.86-111.954C511.559,208.647,513.031,202.686,511.266,197.256z M366.023,308.608c-3.536,3.446-5.15,8.412-4.314,13.278
785
- l23.311,135.898l-122.038-64.162c-4.37-2.297-9.591-2.297-13.961,0l-122.045,64.163l23.304-135.9
786
- c0.834-4.866-0.779-9.83-4.313-13.276l-98.731-96.244l136.445-19.829c4.886-0.71,9.108-3.778,11.294-8.205L256,60.685
787
- l61.023,123.645c2.186,4.427,6.408,7.496,11.294,8.206l136.447,19.828L366.023,308.608z"/></svg>
788
- <span class="NoFavoriteText NoFavoriteTextHighlight" part="NoFavoriteText NoFavoriteTextHighlight">{$_('gamesCategorySection.noFavoritesTitle')}</span>
789
- {#if isMobile(userAgent)}
790
- <span class="NoFavoriteText" part="NoFavoriteText">{$_('gamesCategorySection.noFavoritesMobile')}</span>
791
806
  {:else}
792
- <span class="NoFavoriteText" part="NoFavoriteText">{$_('gamesCategorySection.noFavorites')}</span>
793
- {/if}
794
- </p>
795
- {/each}
796
- {:else}
797
- <p>{$_('gamesCategorySection.waiting')}</p>
798
- {/if}
799
- </ul>
800
- </div>
801
- {/if}
807
+ <p class="NoFavoriteGames {isMobile(userAgent) ? 'NoFavoriteGamesMobile' : ''}" part="NoFavoriteGames {isMobile(userAgent) ? 'NoFavoriteGamesMobile' : ''}">
808
+ <svg version="1.1" class="UnfavoredIcon" part="UnfavoredIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="50px" y="50px"
809
+ viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"><path style="fill: white" d="M511.266,197.256c-1.764-5.431-6.458-9.388-12.108-10.209l-158.722-23.065L269.452,20.155
810
+ c-2.527-5.12-7.741-8.361-13.451-8.361c-5.709,0-10.924,3.242-13.451,8.361l-70.988,143.828L12.843,187.047
811
+ c-5.65,0.821-10.344,4.779-12.108,10.209c-1.765,5.43-0.293,11.391,3.795,15.376l114.848,111.955L92.27,482.67
812
+ c-0.965,5.627,1.349,11.315,5.968,14.67c4.618,3.355,10.74,3.798,15.797,1.142L256,423.846l141.961,74.637
813
+ c2.195,1.154,4.591,1.723,6.979,1.723c3.11,0,6.206-0.966,8.818-2.865c4.619-3.356,6.933-9.043,5.968-14.671L392.61,324.587
814
+ l114.86-111.954C511.559,208.647,513.031,202.686,511.266,197.256z M366.023,308.608c-3.536,3.446-5.15,8.412-4.314,13.278
815
+ l23.311,135.898l-122.038-64.162c-4.37-2.297-9.591-2.297-13.961,0l-122.045,64.163l23.304-135.9
816
+ c0.834-4.866-0.779-9.83-4.313-13.276l-98.731-96.244l136.445-19.829c4.886-0.71,9.108-3.778,11.294-8.205L256,60.685
817
+ l61.023,123.645c2.186,4.427,6.408,7.496,11.294,8.206l136.447,19.828L366.023,308.608z"/></svg>
818
+ <span class="NoFavoriteText NoFavoriteTextHighlight" part="NoFavoriteText NoFavoriteTextHighlight">{$_('gamesCategorySection.noFavoritesTitle')}</span>
819
+ {#if isMobile(userAgent)}
820
+ <span class="NoFavoriteText" part="NoFavoriteText">{$_('gamesCategorySection.noFavoritesMobile')}</span>
821
+ {:else}
822
+ <span class="NoFavoriteText" part="NoFavoriteText">{$_('gamesCategorySection.noFavorites')}</span>
823
+ {/if}
824
+ </p>
825
+ {/each}
826
+ {:else}
827
+ <p>{$_('gamesCategorySection.waiting')}</p>
828
+ {/if}
829
+ {/if}
830
+ </ul>
831
+ </div>
832
+ {/if}
802
833
  </div>
803
834
  {/if}
804
835
  {/if}
@@ -993,4 +1024,30 @@
993
1024
  padding: 50px;
994
1025
  color: var(--emfe-w-color-white, #FFFFFF);
995
1026
  }
1027
+
1028
+ .lds-dual-ring {
1029
+ display: block;
1030
+ width: 80px;
1031
+ height: 80px;
1032
+ margin: 0 auto
1033
+ }
1034
+ .lds-dual-ring:after {
1035
+ content: " ";
1036
+ display: block;
1037
+ width: 64px;
1038
+ height: 64px;
1039
+ margin: 8px;
1040
+ border-radius: 50%;
1041
+ border: 6px solid var(--emfe-w-color-primary, #D0046C);
1042
+ border-color: var(--emfe-w-color-primary, #D0046C) transparent var(--emfe-w-color-primary, #D0046C) transparent;
1043
+ animation: lds-dual-ring 1.2s linear infinite;
1044
+ }
1045
+ @keyframes lds-dual-ring {
1046
+ 0% {
1047
+ transform: rotate(0deg);
1048
+ }
1049
+ 100% {
1050
+ transform: rotate(360deg);
1051
+ }
1052
+ }
996
1053
  </style>