@everymatrix/casino-game-page 0.0.361 → 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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/casino-game-page",
3
- "version": "0.0.361",
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": "0fe9249cd4a3ea07ecc6ea0f11bee32a4d259c7b"
39
+ "gitHead": "154d1b620474e61bee3507cc52d40bfd33236024"
40
40
  }
@@ -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,7 +574,7 @@
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
580
  {#if mobileView}
@@ -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;