@everymatrix/casino-game-page 0.0.360 → 0.0.362

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 +128 -116
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/casino-game-page",
3
- "version": "0.0.360",
3
+ "version": "0.0.362",
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": "bc9e5f5d2238b8300f8d4cb70890b2c1f0414b21"
39
+ "gitHead": "154d1b620474e61bee3507cc52d40bfd33236024"
40
40
  }
package/src/CasinoGamePage.svelte CHANGED
@@ -34,7 +34,8 @@
34
34
  export let haspanicbutton:string = 'false';
35
35
  export let playforfun:string = 'true';
36
36
  export let checksession:string = 'true';
37
- export let integratedgameframe:string = 'false';
37
+ export let integratedgameframedesktop:string = 'false';
38
+ export let integratedgameframemobile:string = 'false';
38
39
  export let gameid:string = '';
39
40
 
40
41
  let time:Object;
@@ -60,6 +61,7 @@
60
61
 
61
62
  let gameFrameContainer:HTMLElement;
62
63
  let gameInnerContainer:HTMLElement;
64
+ let gamePageBackground:HTMLElement;
63
65
  let isFullscreen:boolean = false;
64
66
  let modalFrameWidth:number;
65
67
  let modalFrameHeight:number;
@@ -182,7 +184,11 @@
182
184
  // the timeout is necessary in order to sync with the closing of the modal frame and provide a smoother transition
183
185
  showModal = 'false';
184
186
  removeEventsToDisplayedElements();
185
- setTimeout(() => { detailsObtained = integratedgameframe === "true";}, 500);
187
+ if(isMobile(userAgent)) {
188
+ setTimeout(() => { detailsObtained = integratedgameframemobile === "true";}, 500);
189
+ } else {
190
+ setTimeout(() => { detailsObtained = integratedgameframedesktop === "true";}, 500);
191
+ }
186
192
  break;
187
193
 
188
194
  case 'UserSessionID':
@@ -276,6 +282,7 @@
276
282
  const resizeCallback = (entries, observer): void => {
277
283
  const maxIntersectionRatio = 0.5;
278
284
  const intersectionRatio = entries[0].intersectionRatio;
285
+ const isIntersecting = entries[0].isIntersecting;
279
286
 
280
287
  const gameFrameContainerHeight = parseInt(
281
288
  getComputedStyle(gameFrameContainer).height
@@ -289,6 +296,10 @@
289
296
  gameFrameContainer.style.height = `${gameRationedHeight}px`;
290
297
  gameInnerContainer.style.height = `${gameRationedHeight}px`;
291
298
 
299
+ if(isIntersecting){
300
+ gamePageBackground.style.height = `${gameFrameContainer.style.height}px`;
301
+ }
302
+
292
303
  observer.unobserve(gameFrameContainer);
293
304
  };
294
305
 
@@ -335,17 +346,19 @@
335
346
  }
336
347
 
337
348
  const openGameWindow = (game:any):void => {
338
- if (isOnNative) {
339
- let data = {
340
- url: game.launchUrl,
341
- id: game.id,
342
- vendor: game.vendor.name
343
- }
349
+ if (!isOnNative) return isMobile(userAgent) ? determineGameFrameState(integratedgameframemobile) : determineGameFrameState(integratedgameframedesktop);
350
+ let data = {
351
+ url: game.launchUrl,
352
+ id: game.id,
353
+ vendor: game.vendor.name
354
+ }
355
+ callNative('OPEN_GAME', data);
356
+ }
344
357
 
345
- callNative('OPEN_GAME', data);
346
- } else if(integratedgameframe == 'false') {
358
+ const determineGameFrameState = (gameState:string):void => {
359
+ if(gameState == 'false') {
347
360
  window.open(game.launchUrl, '_blank');
348
- } else if(integratedgameframe == 'true') {
361
+ } else if(gameState == 'true') {
349
362
  window.postMessage({ type: 'OpenIntegratedGameFrame', gameId: game.id, }, window.location.href);
350
363
  }
351
364
  }
@@ -561,108 +574,85 @@
561
574
  {#if hasErrors}
562
575
  <p class="SearchLoading" part="SearchLoading">500 Error - Internal Server Error.</p>
563
576
  {:else}
564
- <div class="GamePageBackground" style="background: {!isModal? `url(${game.backgroundImageUrl})`: ''}; background-size: cover">
577
+ <div class="GamePageBackground" style="background: {!isModal? `url(${game.backgroundImageUrl})`: ''}; background-size: cover" bind:this={gamePageBackground}>
565
578
  <div class="CasinoGamePageContainer" part="CasinoGamePageContainer" bind:this={customStylingContainer} style="background: rgba(0, 0, 0, 0.5)">
566
579
  {#if detailsObtained}
567
- {#if mobileView}
568
- {#if isLoggedIn}
569
- {#if favorites == 'true'}
570
- {#if game.isFavored}
571
- <div class="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" part="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" on:click="{() => toggleFavoriteGame(game.id)}">
572
- <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">
573
- <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"/>
574
- </svg>
575
- </div>
576
- {:else}
577
- <div class="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" part="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" on:click="{() => toggleFavoriteGame(game.id)}">
578
- <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"
579
- 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
580
- 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
581
- 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
582
- 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
583
- 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
584
- 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
585
- 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
586
- 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
587
- l61.023,123.645c2.186,4.427,6.408,7.496,11.294,8.206l136.447,19.828L366.023,308.608z"/></svg>
588
- </div>
589
- {/if}
590
- {/if}
591
- <div class="GameDetails" part="GameDetails">
592
- <h3>{game.name}</h3>
593
- <img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
594
- <div class="ButtonsContainer" part="ButtonsContainer">
595
- <button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
596
- <button class="PlayNowButton" part="PlayNowButton" on:click='{() => {openGameWindow(game)}}'>{$_('gamePage.playNow')}</button>
597
- </div>
598
- {#if haspanicbutton === "true"}
599
- <div class="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}" part="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}">
600
- <button class="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}" class:PanicButtonAnimation={panicLoading} part="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}" bind:this={panicButton}>{$_('gamePage.breakButton')}</button>
601
- </div>
602
- {/if}
603
- <p>{time}</p>
604
- </div>
605
- {:else if anonymousFunMode}
606
- <div class="GameDetails" part="GameDetails">
607
- <h3>{game.name}</h3>
608
- <img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
609
- <div class="ButtonsContainer" part="ButtonsContainer">
610
- <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
611
- <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
612
- <button class="FullWidthButton" part="FullWidthButton" on:click='{() => {openGameWindow(game)}}'>{$_('gamePage.playForFun')}</button>
580
+ {#if mobileView}
581
+ {#if isLoggedIn}
582
+ {#if favorites == 'true'}
583
+ {#if game.isFavored}
584
+ <div class="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" part="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" on:click="{() => toggleFavoriteGame(game.id)}">
585
+ <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">
586
+ <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"/>
587
+ </svg>
588
+ </div>
589
+ {:else}
590
+ <div class="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" part="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" on:click="{() => toggleFavoriteGame(game.id)}">
591
+ <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"
592
+ 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
593
+ 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
594
+ 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
595
+ 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
596
+ 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
597
+ 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
598
+ 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
599
+ 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
600
+ l61.023,123.645c2.186,4.427,6.408,7.496,11.294,8.206l136.447,19.828L366.023,308.608z"/></svg>
601
+ </div>
602
+ {/if}
603
+ {/if}
604
+ <div class="GameDetails" part="GameDetails">
605
+ <h3>{game.name}</h3>
606
+ <img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
607
+ <div class="ButtonsContainer" part="ButtonsContainer">
608
+ <button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
609
+ <button class="PlayNowButton" part="PlayNowButton" on:click='{() => {openGameWindow(game)}}'>{$_('gamePage.playNow')}</button>
610
+ </div>
611
+ {#if haspanicbutton === "true"}
612
+ <div class="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}" part="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}">
613
+ <button class="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}" class:PanicButtonAnimation={panicLoading} part="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}" bind:this={panicButton}>{$_('gamePage.breakButton')}</button>
614
+ </div>
615
+ {/if}
616
+ <p>{time}</p>
613
617
  </div>
614
- <p>{time}</p>
615
- </div>
616
- {:else}
617
- <div class="GameDetails" part="GameDetails">
618
- <h3>{game.name}</h3>
619
- <img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
620
- <div class="ButtonsContainer" part="ButtonsContainer">
621
- <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
622
- <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
618
+ {:else if anonymousFunMode}
619
+ <div class="GameDetails" part="GameDetails">
620
+ <h3>{game.name}</h3>
621
+ <img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
622
+ <div class="ButtonsContainer" part="ButtonsContainer">
623
+ <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
624
+ <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
625
+ <button class="FullWidthButton" part="FullWidthButton" on:click='{() => {openGameWindow(game)}}'>{$_('gamePage.playForFun')}</button>
626
+ </div>
627
+ <p>{time}</p>
623
628
  </div>
624
- <p>{time}</p>
625
- </div>
626
- {/if}
627
- {:else}
628
- {#if isLoggedIn}
629
- <div id="IframeContainer" part="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight}">
630
- <div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="{gameStyle}">
631
- <iframe title="Games" id="IframeGame" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
632
- <div class="BottomGame {haspanicbutton == 'true' ? 'BottomGamePanicSection' : ''}" part="BottomGame {haspanicbutton == 'true' ? 'BottomGamePanicSection' : ''}" bind:this={buttonsContainer}>
633
- <button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
634
- <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
635
- {#if haspanicbutton === "true"}
636
- <div class="PanicSection" part="PanicSection">
637
- <button class="Button" class:PanicButtonAnimation={panicLoading} part="Button" bind:this={panicButton}>{$_('gamePage.breakButton')}</button>
638
- </div>
639
- {/if}
640
- {#if isFullscreen}
641
- <button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
642
- <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>
643
- </button>
644
- {:else}
645
- <button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
646
- <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>
647
- </button>
648
- {/if}
629
+ {:else}
630
+ <div class="GameDetails" part="GameDetails">
631
+ <h3>{game.name}</h3>
632
+ <img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
633
+ <div class="ButtonsContainer" part="ButtonsContainer">
634
+ <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
635
+ <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
649
636
  </div>
637
+ <p>{time}</p>
650
638
  </div>
651
- </div>
639
+ {/if}
652
640
  {:else}
653
- {#if funMode}
654
- <div id="IframeContainer" part="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight};">
641
+ {#if isLoggedIn}
642
+ <div id="IframeContainer" part="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight}">
655
643
  <div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="{gameStyle}">
656
644
  <iframe title="Games" id="IframeGame" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
657
- <div class="BottomGame" part="BottomGame" bind:this={buttonsContainer}>
658
- <div class="ButtonsContainer" part="ButtonsContainer">
659
- <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
660
- <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
661
- </div>
645
+ <div class="BottomGame {haspanicbutton == 'true' ? 'BottomGamePanicSection' : ''}" part="BottomGame {haspanicbutton == 'true' ? 'BottomGamePanicSection' : ''}" bind:this={buttonsContainer}>
646
+ <button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
662
647
  <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
648
+ {#if haspanicbutton === "true"}
649
+ <div class="PanicSection" part="PanicSection">
650
+ <button class="Button" class:PanicButtonAnimation={panicLoading} part="Button" bind:this={panicButton}>{$_('gamePage.breakButton')}</button>
651
+ </div>
652
+ {/if}
663
653
  {#if isFullscreen}
664
654
  <button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
665
- <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>
655
+ <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>
666
656
  </button>
667
657
  {:else}
668
658
  <button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
@@ -673,21 +663,44 @@
673
663
  </div>
674
664
  </div>
675
665
  {:else}
676
- <div class="GameDetails" part="GameDetails">
677
- <h3>{game.name}</h3>
678
- <img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
679
- <div class="ButtonsContainer" part="ButtonsContainer">
680
- <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
681
- <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
666
+ {#if funMode}
667
+ <div id="IframeContainer" part="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight};">
668
+ <div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="{gameStyle}">
669
+ <iframe title="Games" id="IframeGame" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
670
+ <div class="BottomGame" part="BottomGame" bind:this={buttonsContainer}>
671
+ <div class="ButtonsContainer" part="ButtonsContainer">
672
+ <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
673
+ <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
674
+ </div>
675
+ <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
676
+ {#if isFullscreen}
677
+ <button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
678
+ <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>
679
+ </button>
680
+ {:else}
681
+ <button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
682
+ <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>
683
+ </button>
684
+ {/if}
685
+ </div>
686
+ </div>
682
687
  </div>
683
- <p>{time}</p>
684
- </div>
688
+ {:else}
689
+ <div class="GameDetails" part="GameDetails">
690
+ <h3>{game.name}</h3>
691
+ <img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
692
+ <div class="ButtonsContainer" part="ButtonsContainer">
693
+ <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
694
+ <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
695
+ </div>
696
+ <p>{time}</p>
697
+ </div>
698
+ {/if}
685
699
  {/if}
686
700
  {/if}
687
701
  {/if}
688
- {/if}
702
+ </div>
689
703
  </div>
690
- </div>
691
704
  {/if}
692
705
  {/if}
693
706
 
@@ -698,13 +711,11 @@
698
711
  }
699
712
 
700
713
  .CasinoGamePageContainer {
714
+ background: var(--emfe-w-color-contrast, #07072A);
715
+ margin: 0 auto;
701
716
  height: 100%;
702
- padding: 0;
703
-
704
- height: 1000px;
705
717
  max-width: 1300px;
706
- margin: 0 auto;
707
- background: var(--emfe-w-color-contrast, #07072A);
718
+ padding: 0;
708
719
 
709
720
  display: flex;
710
721
  flex-direction: column;
@@ -831,6 +842,7 @@
831
842
  #IframeContainer {
832
843
  height:100%;
833
844
  max-width:1300px;
845
+ margin: 10px;
834
846
  display: flex;
835
847
  align-items: center;
836
848
  justify-content: center;