@everymatrix/casino-game-page 0.0.300 → 0.0.303
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@everymatrix/casino-game-page",
|
3
|
-
"version": "0.0.
|
3
|
+
"version": "0.0.303",
|
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": "
|
39
|
+
"gitHead": "2e4012fec1bb6695caae9c8d4877c56b4dc427a3"
|
40
40
|
}
|
@@ -76,6 +76,8 @@
|
|
76
76
|
let isOnNative:boolean = false;
|
77
77
|
let showModal:string = 'false';
|
78
78
|
|
79
|
+
let gameStyle = '';
|
80
|
+
|
79
81
|
setupI18n({ withLocale: 'en', translations: {}});
|
80
82
|
|
81
83
|
Object.keys(GamePageTranslations).forEach((item) => {
|
@@ -84,25 +86,28 @@
|
|
84
86
|
|
85
87
|
// @TODO game typescript model type
|
86
88
|
const formatGameLaunchUrl = (game:any):void => {
|
89
|
+
isLoggedIn = true;
|
87
90
|
let url:URL = new URL(game.launchUrl);
|
88
91
|
|
89
92
|
url.searchParams.append('language', lang);
|
90
93
|
// @TODO wtf? session check or go home
|
91
94
|
// Maybe we should check if the session is valid, somehow?
|
95
|
+
isLoading = false;
|
96
|
+
|
92
97
|
if (sessionID && sessionID.length > 0) {
|
93
98
|
isLoggedIn = true;
|
94
|
-
isLoading = false;
|
95
99
|
|
96
100
|
url.searchParams.append('_sid', sessionID)
|
97
101
|
url.searchParams.append('funMode', 'false')
|
98
102
|
}
|
103
|
+
|
99
104
|
game.launchUrl = url;
|
105
|
+
isLoading = false;
|
100
106
|
|
101
107
|
return game;
|
102
108
|
}
|
103
109
|
|
104
110
|
const createGameURL = (gameId:string, modal?):void => {
|
105
|
-
|
106
111
|
let url:URL = new URL(`${endpoint}/casino/games/${gameId}`);
|
107
112
|
|
108
113
|
url.searchParams.append('language', lang);
|
@@ -249,6 +254,7 @@
|
|
249
254
|
detailsObtained = true;
|
250
255
|
return checkFavorite(game.id);
|
251
256
|
}
|
257
|
+
|
252
258
|
const openGameFrame = (gameId:string, gameFunMode:boolean):void => {
|
253
259
|
let url:URL = new URL(`${endpoint}/casino/games/${gameId}`);
|
254
260
|
|
@@ -263,15 +269,18 @@
|
|
263
269
|
}
|
264
270
|
});
|
265
271
|
}
|
272
|
+
|
266
273
|
const maximizeGameFrame = ():void => {
|
267
274
|
modalFrameWidth = game.width;
|
268
275
|
modalFrameHeight = game.height;
|
269
276
|
|
270
|
-
definitiveIframeWidth = game.width
|
271
|
-
definitiveIframeHeight = game.height
|
277
|
+
definitiveIframeWidth = `${game.width}px`;
|
278
|
+
definitiveIframeHeight = `${game.height}px`;
|
272
279
|
|
273
280
|
gameFrameWidth = game.width;
|
274
281
|
gameFrameHeight = game.height;
|
282
|
+
|
283
|
+
keepIframeRatio();
|
275
284
|
}
|
276
285
|
|
277
286
|
// Start section: keep aspect ratio for iframe on resize
|
@@ -282,19 +291,17 @@
|
|
282
291
|
let gameContainerHeight = parseInt(iframeContainer.height.slice(0, -2));
|
283
292
|
const iframeRatio = game.width/(game.height + 100);
|
284
293
|
|
285
|
-
|
286
|
-
|
294
|
+
|
295
|
+
gameFrameWidth = parseInt(game.width);
|
296
|
+
gameFrameHeight = parseInt(game.height);
|
297
|
+
|
287
298
|
// resize logic for maintaining game ratio when resizing
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
}
|
292
|
-
gameFrameWidth = gameContainerWidth;
|
293
|
-
gameFrameHeight = gameContainerWidth / iframeRatio;
|
294
|
-
}
|
299
|
+
gameFrameWidth = gameContainerWidth * iframeRatio;
|
300
|
+
|
301
|
+
definitiveIframeWidth = gameFrameWidth ? `${Math.floor(gameFrameWidth)}px` : "1280px";
|
302
|
+
definitiveIframeHeight = gameFrameHeight ? `${Math.floor(gameFrameHeight)}px` : "720px";
|
295
303
|
|
296
|
-
|
297
|
-
definitiveIframeHeight = gameFrameHeight ? Math.floor(gameFrameHeight) + "px" : "720px";
|
304
|
+
calculateFrameProportions();
|
298
305
|
}
|
299
306
|
|
300
307
|
const openGameWindow = (game:any):void => {
|
@@ -485,6 +492,16 @@
|
|
485
492
|
clearInterval(timerInterval);
|
486
493
|
}
|
487
494
|
|
495
|
+
|
496
|
+
const calculateFrameProportions = (): void => {
|
497
|
+
let w = isFullscreen ? '100%' : definitiveIframeWidth;
|
498
|
+
let h = isFullscreen ? '100%' : definitiveIframeHeight;
|
499
|
+
let mW = isFullscreen || !isModal ? 'none' : (game.width ? `${Math.floor(game.width)}px`: '1280px');
|
500
|
+
let mH = isFullscreen || !isModal ? 'none' : (game.height ? `${(Math.floor(game.height) + 100)}px` : '720px');
|
501
|
+
|
502
|
+
gameStyle = `width: ${w}; height: ${h}; max-width: ${mW}; max-height: ${mH}`;
|
503
|
+
}
|
504
|
+
|
488
505
|
onMount(() => {
|
489
506
|
window.addEventListener('resize', resizeHandler, false);
|
490
507
|
window.addEventListener('message', messageHandler, false);
|
@@ -579,7 +596,7 @@
|
|
579
596
|
{:else}
|
580
597
|
{#if isLoggedIn}
|
581
598
|
<div id="IframeContainer" part="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight}">
|
582
|
-
<div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="
|
599
|
+
<div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="{gameStyle}">
|
583
600
|
<iframe title="Games" id="IframeGame" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
|
584
601
|
<div class="BottomGame {haspanicbutton == 'true' ? 'BottomGamePanicSection' : ''}" part="BottomGame {haspanicbutton == 'true' ? 'BottomGamePanicSection' : ''}" bind:this={buttonsContainer}>
|
585
602
|
<button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
|
@@ -604,8 +621,8 @@
|
|
604
621
|
{:else}
|
605
622
|
{#if funMode}
|
606
623
|
<div id="IframeContainer" part="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight}">
|
607
|
-
<div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="
|
608
|
-
<iframe title="Games" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
|
624
|
+
<div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="{gameStyle}">
|
625
|
+
<iframe title="Games" id="IframeGame" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
|
609
626
|
<div class="BottomGame" part="BottomGame" bind:this={buttonsContainer}>
|
610
627
|
<div class="ButtonsContainer" part="ButtonsContainer">
|
611
628
|
<button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
|
@@ -650,6 +667,14 @@
|
|
650
667
|
|
651
668
|
.CasinoGamePageContainer {
|
652
669
|
height: 100%;
|
670
|
+
padding: 0;
|
671
|
+
@media (min-width: 812px) {
|
672
|
+
padding: 60px 20px 20px;
|
673
|
+
}
|
674
|
+
|
675
|
+
@media (min-width: 1024px) {
|
676
|
+
padding: 60px 80px 80px;
|
677
|
+
}
|
653
678
|
}
|
654
679
|
|
655
680
|
.BottomGame {
|
@@ -713,6 +738,7 @@
|
|
713
738
|
.BottomGame .ButtonsContainer {
|
714
739
|
width: 275px;
|
715
740
|
display: flex;
|
741
|
+
justify-self: start;
|
716
742
|
flex-direction: row;
|
717
743
|
justify-content: space-between;
|
718
744
|
}
|
@@ -769,8 +795,10 @@
|
|
769
795
|
justify-content: center;
|
770
796
|
}
|
771
797
|
#IframeGame {
|
772
|
-
width:
|
773
|
-
height:
|
798
|
+
max-width: 1280px;
|
799
|
+
max-height: 820px;
|
800
|
+
width: 1245px;
|
801
|
+
height: 797px;
|
774
802
|
}
|
775
803
|
.FullsScreenLayout .GamesContainer {
|
776
804
|
// the use of !important is necessary in order to override the dynamic inline width/height, when in fullscreen mode
|