@everymatrix/casino-game-page 1.0.2 → 1.0.4
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/dist/casino-game-page.js +1 -1
- package/dist/casino-game-page.js.map +1 -1
- package/package.json +1 -1
- package/src/CasinoGamePage.svelte +131 -109
package/package.json
CHANGED
|
@@ -384,25 +384,45 @@
|
|
|
384
384
|
// @ts-ignore
|
|
385
385
|
window.location = loginurl;
|
|
386
386
|
}
|
|
387
|
+
|
|
388
|
+
//Analytics event
|
|
389
|
+
if(typeof gtag == 'function'){
|
|
390
|
+
gtag('event', 'OpenLoginModal', {
|
|
391
|
+
'context': 'GeneralPlayerRegisterForm'
|
|
392
|
+
});
|
|
393
|
+
}
|
|
387
394
|
}
|
|
388
395
|
|
|
389
396
|
const toggleRegister = ():void => {
|
|
390
397
|
if (registerevent) {
|
|
391
398
|
window.postMessage({ type: registerevent, transition: 'Register' }, window.location.href);
|
|
392
399
|
window.postMessage({ type: 'ModalClosed' }, window.location.href);
|
|
393
|
-
|
|
394
400
|
}
|
|
395
401
|
|
|
396
402
|
if (registerurl) {
|
|
397
403
|
// @ts-ignore
|
|
398
404
|
window.location = registerurl;
|
|
399
405
|
}
|
|
406
|
+
|
|
407
|
+
//Analytics event
|
|
408
|
+
if(typeof gtag == 'function'){
|
|
409
|
+
gtag('event', 'OpenRegisterModal', {
|
|
410
|
+
'context': 'GeneralPlayerRegisterForm'
|
|
411
|
+
});
|
|
412
|
+
}
|
|
400
413
|
}
|
|
401
414
|
|
|
402
415
|
const toggleDeposit = ():void => {
|
|
403
416
|
if (depositevent) {
|
|
404
417
|
window.postMessage({ type: depositevent }, window.location.href);
|
|
405
418
|
window.postMessage({ type: 'ModalClosed' }, window.location.href);
|
|
419
|
+
|
|
420
|
+
//Analytics event
|
|
421
|
+
if(typeof gtag == 'function'){
|
|
422
|
+
gtag('event', 'GoToDeposit', {
|
|
423
|
+
'context': 'GamePage'
|
|
424
|
+
});
|
|
425
|
+
}
|
|
406
426
|
}
|
|
407
427
|
|
|
408
428
|
if (depositurl) {
|
|
@@ -562,120 +582,98 @@
|
|
|
562
582
|
$: endpoint && gameid && lang && createGameURL(gameid, true);
|
|
563
583
|
$: session && userid && endpoint && setSession();
|
|
564
584
|
$: checksession == 'false' && session && endpoint && setSession();
|
|
565
|
-
$: clientstyling && setClientStyling();
|
|
566
|
-
$: clientstylingurl && setClientStylingURL();
|
|
585
|
+
$: clientstyling && customStylingContainer && setClientStyling();
|
|
586
|
+
$: clientstylingurl && customStylingContainer && setClientStylingURL();
|
|
567
587
|
$: (showModal == 'true') && panicButton && addEventsToDisplayedElements();
|
|
568
588
|
$: panicButton && addEventsToDisplayedElements();
|
|
569
589
|
</script>
|
|
570
590
|
|
|
571
|
-
{
|
|
572
|
-
|
|
573
|
-
{
|
|
574
|
-
{#if hasErrors}
|
|
575
|
-
<p class="SearchLoading" part="SearchLoading">500 Error - Internal Server Error.</p>
|
|
591
|
+
<div bind:this={customStylingContainer}>
|
|
592
|
+
{#if isLoading}
|
|
593
|
+
<p class="SearchLoading" part="SearchLoading">{$_('gamePage.loading')}</p>
|
|
576
594
|
{:else}
|
|
577
|
-
|
|
578
|
-
<
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
595
|
+
{#if hasErrors}
|
|
596
|
+
<p class="SearchLoading" part="SearchLoading">500 Error - Internal Server Error.</p>
|
|
597
|
+
{:else}
|
|
598
|
+
<div class="GamePageBackground" style="background:{!isModal? `url(${game.backgroundImageUrl})`: ''}; background-size: cover" bind:this={gamePageBackground}>
|
|
599
|
+
<div class="CasinoGamePageContainer" part="CasinoGamePageContainer" style="background: rgba(0, 0, 0, 0.5)">
|
|
600
|
+
{#if detailsObtained}
|
|
601
|
+
{#if mobileView}
|
|
602
|
+
{#if isLoggedIn}
|
|
603
|
+
{#if favorites == 'true'}
|
|
604
|
+
{#if game.isFavored}
|
|
605
|
+
<div class="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" part="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" on:click="{() => toggleFavoriteGame(game.id)}">
|
|
606
|
+
<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">
|
|
607
|
+
<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"/>
|
|
608
|
+
</svg>
|
|
609
|
+
</div>
|
|
610
|
+
{:else}
|
|
611
|
+
<div class="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" part="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" on:click="{() => toggleFavoriteGame(game.id)}">
|
|
612
|
+
<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"
|
|
613
|
+
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
|
|
614
|
+
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
|
|
615
|
+
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
|
|
616
|
+
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
|
|
617
|
+
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
|
|
618
|
+
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
|
|
619
|
+
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
|
|
620
|
+
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
|
|
621
|
+
l61.023,123.645c2.186,4.427,6.408,7.496,11.294,8.206l136.447,19.828L366.023,308.608z"/></svg>
|
|
622
|
+
</div>
|
|
623
|
+
{/if}
|
|
624
|
+
{/if}
|
|
625
|
+
<div class="GameDetails" part="GameDetails">
|
|
626
|
+
<h3>{game.name}</h3>
|
|
627
|
+
<img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
|
|
628
|
+
<div class="ButtonsContainer" part="ButtonsContainer">
|
|
629
|
+
<button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
|
|
630
|
+
<button class="PlayNowButton" part="PlayNowButton" on:click='{() => {openGameWindow(game)}}'>{$_('gamePage.playNow')}</button>
|
|
588
631
|
</div>
|
|
589
|
-
|
|
590
|
-
<div class="
|
|
591
|
-
<
|
|
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>
|
|
632
|
+
{#if haspanicbutton === "true"}
|
|
633
|
+
<div class="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}" part="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}">
|
|
634
|
+
<button class="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}" class:PanicButtonAnimation={panicLoading} part="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}" bind:this={panicButton}>{$_('gamePage.breakButton')}</button>
|
|
601
635
|
</div>
|
|
602
|
-
|
|
603
|
-
|
|
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>
|
|
617
|
-
</div>
|
|
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>
|
|
636
|
+
{/if}
|
|
637
|
+
<p>{time}</p>
|
|
626
638
|
</div>
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
639
|
+
{:else if anonymousFunMode}
|
|
640
|
+
<div class="GameDetails" part="GameDetails">
|
|
641
|
+
<h3>{game.name}</h3>
|
|
642
|
+
<img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
|
|
643
|
+
<div class="ButtonsContainer" part="ButtonsContainer">
|
|
644
|
+
<button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
|
|
645
|
+
<button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
|
|
646
|
+
<button class="FullWidthButton" part="FullWidthButton" on:click='{() => {openGameWindow(game)}}'>{$_('gamePage.playForFun')}</button>
|
|
647
|
+
</div>
|
|
648
|
+
<p>{time}</p>
|
|
636
649
|
</div>
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
<iframe title="Games" id="IframeGame" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
|
|
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>
|
|
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}
|
|
653
|
-
{#if isFullscreen}
|
|
654
|
-
<button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
|
|
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>
|
|
656
|
-
</button>
|
|
657
|
-
{:else}
|
|
658
|
-
<button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
|
|
659
|
-
<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>
|
|
660
|
-
</button>
|
|
661
|
-
{/if}
|
|
650
|
+
{:else}
|
|
651
|
+
<div class="GameDetails" part="GameDetails">
|
|
652
|
+
<h3>{game.name}</h3>
|
|
653
|
+
<img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
|
|
654
|
+
<div class="ButtonsContainer" part="ButtonsContainer">
|
|
655
|
+
<button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
|
|
656
|
+
<button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
|
|
662
657
|
</div>
|
|
658
|
+
<p>{time}</p>
|
|
663
659
|
</div>
|
|
664
|
-
|
|
660
|
+
{/if}
|
|
665
661
|
{:else}
|
|
666
|
-
{#if
|
|
667
|
-
<div id="IframeContainer" part="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight}
|
|
662
|
+
{#if isLoggedIn}
|
|
663
|
+
<div id="IframeContainer" part="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight}">
|
|
668
664
|
<div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="{gameStyle}">
|
|
669
665
|
<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
|
-
<
|
|
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>
|
|
666
|
+
<div class="BottomGame {haspanicbutton == 'true' ? 'BottomGamePanicSection' : ''}" part="BottomGame {haspanicbutton == 'true' ? 'BottomGamePanicSection' : ''}" bind:this={buttonsContainer}>
|
|
667
|
+
<button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
|
|
675
668
|
<p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
|
|
669
|
+
{#if haspanicbutton === "true"}
|
|
670
|
+
<div class="PanicSection" part="PanicSection">
|
|
671
|
+
<button class="Button" class:PanicButtonAnimation={panicLoading} part="Button" bind:this={panicButton}>{$_('gamePage.breakButton')}</button>
|
|
672
|
+
</div>
|
|
673
|
+
{/if}
|
|
676
674
|
{#if isFullscreen}
|
|
677
675
|
<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>
|
|
676
|
+
<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>
|
|
679
677
|
</button>
|
|
680
678
|
{:else}
|
|
681
679
|
<button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
|
|
@@ -686,23 +684,47 @@
|
|
|
686
684
|
</div>
|
|
687
685
|
</div>
|
|
688
686
|
{:else}
|
|
689
|
-
|
|
690
|
-
<
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
687
|
+
{#if funMode}
|
|
688
|
+
<div id="IframeContainer" part="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight};">
|
|
689
|
+
<div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="{gameStyle}">
|
|
690
|
+
<iframe title="Games" id="IframeGame" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
|
|
691
|
+
<div class="BottomGame" part="BottomGame" bind:this={buttonsContainer}>
|
|
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 class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
|
|
697
|
+
{#if isFullscreen}
|
|
698
|
+
<button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
|
|
699
|
+
<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>
|
|
700
|
+
</button>
|
|
701
|
+
{:else}
|
|
702
|
+
<button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
|
|
703
|
+
<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>
|
|
704
|
+
</button>
|
|
705
|
+
{/if}
|
|
706
|
+
</div>
|
|
707
|
+
</div>
|
|
695
708
|
</div>
|
|
696
|
-
|
|
697
|
-
|
|
709
|
+
{:else}
|
|
710
|
+
<div class="GameDetails" part="GameDetails">
|
|
711
|
+
<h3>{game.name}</h3>
|
|
712
|
+
<img src={game.thumbnail} class="GameThumbnail" part="GameThumbnail" alt="game thumbnail" loading="lazy" />
|
|
713
|
+
<div class="ButtonsContainer" part="ButtonsContainer">
|
|
714
|
+
<button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
|
|
715
|
+
<button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
|
|
716
|
+
</div>
|
|
717
|
+
<p>{time}</p>
|
|
718
|
+
</div>
|
|
719
|
+
{/if}
|
|
698
720
|
{/if}
|
|
699
721
|
{/if}
|
|
700
722
|
{/if}
|
|
701
|
-
|
|
723
|
+
</div>
|
|
702
724
|
</div>
|
|
703
|
-
|
|
725
|
+
{/if}
|
|
704
726
|
{/if}
|
|
705
|
-
|
|
727
|
+
</div>
|
|
706
728
|
|
|
707
729
|
<style lang="scss">
|
|
708
730
|
|