@everymatrix/casino-game-page 0.0.245 → 0.0.249

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-game-page.js +1 -1
  2. package/dist/casino-game-page.js.map +1 -1
  3. package/package.json +2 -2
  4. package/src/CasinoGamePage.svelte +53 -53
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/casino-game-page",
3
- "version": "0.0.245",
3
+ "version": "0.0.249",
4
4
  "main": "dist/casino-game-page.js",
5
5
  "svelte": "src/index.ts",
6
6
  "scripts": {
@@ -36,5 +36,5 @@
36
36
  "publishConfig": {
37
37
  "access": "public"
38
38
  },
39
- "gitHead": "d96554d716d8c3b41f947c85c9b8cae8f03aa5bf"
39
+ "gitHead": "38af455e241b6ef7ccabb2367be2be59e6b24352"
40
40
  }
package/src/CasinoGamePage.svelte CHANGED
@@ -426,25 +426,25 @@
426
426
  </script>
427
427
 
428
428
  {#if isLoading}
429
- <p class="SearchLoading">Loading, please wait ...</p>
429
+ <p class="SearchLoading" part="SearchLoading">Loading, please wait ...</p>
430
430
  {:else}
431
431
  {#if hasErrors}
432
- <p class="SearchLoading">500 Error - Internal Server Error.</p>
432
+ <p class="SearchLoading" part="SearchLoading">500 Error - Internal Server Error.</p>
433
433
  {:else}
434
- <div class="CasinoGamePageContainer" bind:this={customStylingContainer}>
434
+ <div class="CasinoGamePageContainer" part="CasinoGamePageContainer" bind:this={customStylingContainer}>
435
435
  {#if detailsObtained}
436
436
  {#if mobileView}
437
437
  {#if isLoggedIn}
438
438
  {#if favorites == 'true'}
439
439
  {#if game.isFavored}
440
- <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(game.id)}">
441
- <svg version="1.1" class="FavoredIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.481 19.481" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 19.481 19.481">
440
+ <div class="FavIconContainer" part="FavIconContainer" on:click="{() => toggleFavoriteGame(game.id)}">
441
+ <svg version="1.1" class="FavoredIcon" part="FavoredIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.481 19.481" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 19.481 19.481">
442
442
  <path style="fill: white" d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>
443
443
  </svg>
444
444
  </div>
445
445
  {:else}
446
- <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(game.id)}">
447
- <svg version="1.1" class="UnfavoredIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
446
+ <div class="FavIconContainer" part="FavIconContainer" on:click="{() => toggleFavoriteGame(game.id)}">
447
+ <svg version="1.1" class="UnfavoredIcon" part="UnfavoredIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
448
448
  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
449
449
  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
450
450
  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
@@ -457,105 +457,105 @@
457
457
  </div>
458
458
  {/if}
459
459
  {/if}
460
- <div class="GameDetails">
460
+ <div class="GameDetails" part="GameDetails">
461
461
  <h3>{game.name}</h3>
462
- <img src={game.thumbnail} class="GameThumbnail" alt="game thumbnail" loading="lazy" />
463
- <div class="ButtonsContainer">
464
- <button class="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
465
- <button class="PlayNowButton" on:click='{() => {openGameWindow(game)}}'>{$_('gamePage.playNow')}</button>
462
+ <img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
463
+ <div class="ButtonsContainer" part="ButtonsContainer">
464
+ <button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
465
+ <button class="PlayNowButton" part="PlayNowButton" on:click='{() => {openGameWindow(game)}}'>{$_('gamePage.playNow')}</button>
466
466
  </div>
467
467
  {#if haspanicbutton === "true"}
468
- <div class="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}">
469
- <div class="PanicText">
470
- <svg class="w-1 h-1" fill="none" stroke="white" width="34px" height="34px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
468
+ <div class="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}" part="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}">
469
+ <div class="PanicText" part="PanicText">
470
+ <svg class="w-1 h-1" part="w-1 h-1" fill="none" stroke="white" width="34px" height="34px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
471
471
  <p>{$_('gamePage.break')}</p>
472
472
  </div>
473
- <button class="Button" on:click={() => panicAction()}>{$_('gamePage.breakButton')}</button>
473
+ <button class="Button" part="Button" on:click={() => panicAction()}>{$_('gamePage.breakButton')}</button>
474
474
  </div>
475
475
  {/if}
476
476
  <p>{time}</p>
477
477
  </div>
478
478
 
479
479
  {:else if anonymousFunMode}
480
- <div class="GameDetails">
480
+ <div class="GameDetails" part="GameDetails">
481
481
  <h3>{game.name}</h3>
482
- <img src={game.thumbnail} class="GameThumbnail" alt="game thumbnail" loading="lazy" />
483
- <div class="ButtonsContainer">
484
- <button class="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
485
- <button class="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
482
+ <img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
483
+ <div class="ButtonsContainer" part="ButtonsContainer">
484
+ <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
485
+ <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
486
486
  </div>
487
- <button class="FullWidthButton" on:click='{() => {openGameWindow(game)}}'>{$_('gamePage.playForFun')}</button>
487
+ <button class="FullWidthButton" part="FullWidthButton" on:click='{() => {openGameWindow(game)}}'>{$_('gamePage.playForFun')}</button>
488
488
  <p>{time}</p>
489
489
  </div>
490
490
 
491
491
  {:else}
492
- <div class="GameDetails">
492
+ <div class="GameDetails" part="GameDetails">
493
493
  <h3>{game.name}</h3>
494
- <img src={game.thumbnail} class="GameThumbnail" alt="game thumbnail" loading="lazy" />
495
- <div class="ButtonsContainer">
496
- <button class="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
497
- <button class="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
494
+ <img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
495
+ <div class="ButtonsContainer" part="ButtonsContainer">
496
+ <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
497
+ <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
498
498
  </div>
499
499
  <p>{time}</p>
500
500
  </div>
501
501
  {/if}
502
502
  {:else}
503
503
  {#if isLoggedIn}
504
- <div id="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight}">
505
- <div id="IframeGame" bind:this={gameInnerContainer} style="width: {isFullscreen ? '100%' : definitiveIframeWidth}; height: {isFullscreen ? '100%' : definitiveIframeHeight}; max-width: {isFullscreen ? 'none' : game.width + 'px'}; max-height: {isFullscreen ? 'none' : (game.height + 100) + 'px'}">
506
- <iframe title="Games" id="IframeGame" class="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
507
- <div class="BottomGame">
508
- <button class="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
504
+ <div id="IframeContainer" part="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight}">
505
+ <div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="width: {isFullscreen ? '100%' : definitiveIframeWidth}; height: {isFullscreen ? '100%' : definitiveIframeHeight}; max-width: {isFullscreen ? 'none' : game.width + 'px'}; max-height: {isFullscreen ? 'none' : (game.height + 100) + 'px'}">
506
+ <iframe title="Games" id="IframeGame" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
507
+ <div class="BottomGame" part="BottomGame">
508
+ <button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
509
509
  {#if haspanicbutton === "true"}
510
- <div class="PanicSection">
511
- <svg class="w-1 h-1" fill="none" stroke="white" width="34px" height="34px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
510
+ <div class="PanicSection" part="PanicSection">
511
+ <svg class="w-1 h-1" part="w-1 h-1" fill="none" stroke="white" width="34px" height="34px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
512
512
  <p>{$_('gamePage.break')}</p>
513
- <button class="Button" on:click={() => panicAction()}>{$_('gamePage.breakButton')}</button>
513
+ <button class="Button" part="Button" on:click={() => panicAction()}>{$_('gamePage.breakButton')}</button>
514
514
  </div>
515
515
  {/if}
516
516
  {#if isFullscreen}
517
- <button class="FullscreenButton" on:click='{() => handleIframeSize()}'>
517
+ <button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
518
518
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 31 31"><polygon style="fill:#fff;" points="24.586,27.414 29.172,32 32,29.172 27.414,24.586 32,20 20,20 20,32 "/><polygon style="fill:#fff;" points="0,12 12,12 12,0 7.414,4.586 2.875,0.043 0.047,2.871 4.586,7.414 "/><polygon style="fill:#fff;" points="0,29.172 2.828,32 7.414,27.414 12,32 12,20 0,20 4.586,24.586 "/><polygon style="fill:#fff;" points="20,12 32,12 27.414,7.414 31.961,2.871 29.133,0.043 24.586,4.586 20,0 "/></svg>
519
519
  </button>
520
520
  {:else}
521
- <button class="FullscreenButton" on:click='{() => handleIframeSize()}'>
521
+ <button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
522
522
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21.414 18.586l2.586-2.586v8h-8l2.586-2.586-5.172-5.172 2.828-2.828 5.172 5.172zm-13.656-8l2.828-2.828-5.172-5.172 2.586-2.586h-8v8l2.586-2.586 5.172 5.172zm10.828-8l-2.586-2.586h8v8l-2.586-2.586-5.172 5.172-2.828-2.828 5.172-5.172zm-8 13.656l-2.828-2.828-5.172 5.172-2.586-2.586v8h8l-2.586-2.586 5.172-5.172z"/></svg>
523
523
  </button>
524
524
  {/if}
525
525
  </div>
526
- <p class="Time"><span>{time}</span></p>
526
+ <p class="Time" part="Time"><span>{time}</span></p>
527
527
  </div>
528
528
  </div>
529
529
  {:else}
530
530
  {#if funMode}
531
- <div id="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight}">
532
- <div id="IframeGame" bind:this={gameInnerContainer} style="width: {isFullscreen ? '100%' : definitiveIframeWidth}; height: {isFullscreen ? '100%' : definitiveIframeHeight}; max-width: {isFullscreen ? 'none' : game.width + 'px'}; max-height: {isFullscreen ? 'none' : (game.height + 100) + 'px'}">
533
- <iframe title="Games" class="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
534
- <div class="BottomGame">
535
- <div class="ButtonsContainer">
536
- <button class="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
537
- <button class="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
531
+ <div id="IframeContainer" part="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight}">
532
+ <div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="width: {isFullscreen ? '100%' : definitiveIframeWidth}; height: {isFullscreen ? '100%' : definitiveIframeHeight}; max-width: {isFullscreen ? 'none' : game.width + 'px'}; max-height: {isFullscreen ? 'none' : (game.height + 100) + 'px'}">
533
+ <iframe title="Games" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
534
+ <div class="BottomGame" part="BottomGame">
535
+ <div class="ButtonsContainer" part="ButtonsContainer">
536
+ <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
537
+ <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
538
538
  </div>
539
539
  {#if isFullscreen}
540
- <button class="FullscreenButton" on:click='{() => handleIframeSize()}'>
540
+ <button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
541
541
  <svg width="24" height="24" viewBox="0 0 31 31"><polygon style="fill:#fff;" points="24.586,27.414 29.172,32 32,29.172 27.414,24.586 32,20 20,20 20,32 "/><polygon style="fill:#fff;" points="0,12 12,12 12,0 7.414,4.586 2.875,0.043 0.047,2.871 4.586,7.414 "/><polygon style="fill:#fff;" points="0,29.172 2.828,32 7.414,27.414 12,32 12,20 0,20 4.586,24.586 "/><polygon style="fill:#fff;" points="20,12 32,12 27.414,7.414 31.961,2.871 29.133,0.043 24.586,4.586 20,0 "/></svg>
542
542
  </button>
543
543
  {:else}
544
- <button class="FullscreenButton" on:click='{() => handleIframeSize()}'>
544
+ <button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
545
545
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21.414 18.586l2.586-2.586v8h-8l2.586-2.586-5.172-5.172 2.828-2.828 5.172 5.172zm-13.656-8l2.828-2.828-5.172-5.172 2.586-2.586h-8v8l2.586-2.586 5.172 5.172zm10.828-8l-2.586-2.586h8v8l-2.586-2.586-5.172 5.172-2.828-2.828 5.172-5.172zm-8 13.656l-2.828-2.828-5.172 5.172-2.586-2.586v8h8l-2.586-2.586 5.172-5.172z"/></svg>
546
546
  </button>
547
547
  {/if}
548
548
  </div>
549
- <p class="Time"><span>{time}</span></p>
549
+ <p class="Time" part="Time"><span>{time}</span></p>
550
550
  </div>
551
551
  </div>
552
552
  {:else}
553
- <div class="GameDetails">
553
+ <div class="GameDetails" part="GameDetails">
554
554
  <h3>{game.name}</h3>
555
- <img src={game.thumbnail} class="GameThumbnail" alt="game thumbnail" loading="lazy" />
556
- <div class="ButtonsContainer">
557
- <button class="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
558
- <button class="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
555
+ <img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
556
+ <div class="ButtonsContainer" part="ButtonsContainer">
557
+ <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
558
+ <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
559
559
  </div>
560
560
  <p>{time}</p>
561
561
  </div>