@everymatrix/casino-game-page 0.0.289 → 0.0.292

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-game-page",
-  "version": "0.0.289",
+  "version": "0.0.292",
   "main": "dist/casino-game-page.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8d2b48830088db6de1cb354e113bf3a2a09f325b"
+  "gitHead": "c69fc04487b15c7c69d2a7c8943340d2a8b78c4f"
 }

package/src/CasinoGamePage.svelte

@@ -35,7 +35,6 @@
   export let playforfun:string = 'true';
   export let checksession:string = 'true';
   export let integratedgameframe:string = 'false';
-
   export let gameid:string = '';
 
   let time:Object;
@@ -75,6 +74,7 @@
   let buttonsContainer:HTMLElement;
   let timeContainer:HTMLElement;
   let isOnNative:boolean = false;
+  let showModal:string = 'false';
 
   setupI18n({ withLocale: 'en', translations: {}});
 
@@ -91,6 +91,7 @@
     // Maybe we should check if the session is valid, somehow?
     if (sessionID && sessionID.length > 0) {
       isLoggedIn = true;
+      isLoading = false;
 
       url.searchParams.append('_sid', sessionID)
       url.searchParams.append('funMode', 'false')
@@ -101,6 +102,7 @@
   }
 
   const createGameURL = (gameId:string, modal?):void => {
+
     let url:URL = new URL(`${endpoint}/casino/games/${gameId}`);
 
     url.searchParams.append('language', lang);
@@ -131,22 +133,50 @@
           }
         }
       });
-
     window.postMessage({ type: 'RequestModalSize' }, window.location.href);
   }
 
+  const addEventsToDisplayedElements = () => {
+      panicButton?.addEventListener("mousedown", startInterval, false);
+      panicButton?.addEventListener('touchstart', startInterval, false)
+
+      // on mouseup stop interval count
+      panicButton?.addEventListener("mouseup", endInterval, false);
+      panicButton?.addEventListener("touchend", endInterval, false);
+  }
+
+  const removeEventsToDisplayedElements = ():void => {
+    panicLoading = false;
+    panicButton?.removeEventListener("mousedown", startInterval);
+    panicButton?.removeEventListener('touchstart', startInterval)
+
+    // on mouseup stop interval count
+    panicButton?.removeEventListener("mouseup", endInterval);
+    panicButton?.removeEventListener("touchend", endInterval);
+  }
+
   const messageHandler = (e:any):void => {
     switch (e.data.type) {
       case 'GameLaunchID':
         createGameURL(e.data.gameId, true);
         break;
 
+      case 'ShowGameModal':
+        showModal = 'true';
+        break;
+
+      case 'OpenGameFrame':
+        showModal = 'true';
+        break;
+
       case 'LaunchGameFrame':
         openGameFrame(e.data.gameId, e.data.gameFunMode);
         break;
 
       case 'ModalClosed':
         // the timeout is necessary in order to sync with the closing of the modal frame and provide a smoother transition
+        showModal = 'false';
+        removeEventsToDisplayedElements();
         setTimeout(() => { detailsObtained = integratedgameframe === "true";}, 500);
         break;
 
@@ -375,10 +405,6 @@
     }
   }
 
-  const panicAction = ():void => {
-    window.postMessage({type: 'PanicButtonClicked'}, window.location.href);
-  }
-
   const refreshTime = ():void => {
     if (clockformat) {
       time = moment().format(clockformat);
@@ -394,7 +420,6 @@
   const setActiveLanguage = ():void => {
     setLocale(lang);
 
-    isLoading = false;
     mobileView = isMobile(userAgent);
   }
 
@@ -412,6 +437,7 @@
       sessionID = session;
       isLoggedIn = true;
     }
+
   }
 
   const setClientStyling = ():void => {
@@ -446,6 +472,7 @@
       panicLoading = true;
 
       if (timer >= 3) {
+        window.postMessage({type: 'PanicButtonClicked'}, window.location.href);
         clearInterval(timerInterval)
       }
     }, 1000);
@@ -461,29 +488,12 @@
   onMount(() => {
     window.addEventListener('resize', resizeHandler, false);
     window.addEventListener('message', messageHandler, false);
-
     isOnNative = !!isNative(userAgent);
 
-      panicButton?.addEventListener("mousedown", startInterval, false);
-      panicButton?.addEventListener('touchstart', startInterval, false)
-
-      // on mouseup stop interval count
-      panicButton?.addEventListener("mouseup", endInterval, false);
-      panicButton?.addEventListener("touchend", endInterval, false);
-
       return () => {
+        removeEventsToDisplayedElements();
         window.removeEventListener('resize', resizeHandler);
         window.removeEventListener('message', messageHandler);
-
-        clearInterval(timeInterval);
-
-        panicButton?.removeEventListener("mousedown", startInterval);
-        panicButton?.removeEventListener('touchstart', startInterval)
-
-        // on mouseup stop interval count
-        panicButton?.removeEventListener("mouseup", endInterval);
-        panicButton?.removeEventListener("touchend", endInterval);
-
     }
   });
 
@@ -493,8 +503,10 @@
   $: checksession == 'false' && session && endpoint && setSession();
   $: clientstyling && setClientStyling();
   $: clientstylingurl && setClientStylingURL();
+  $: (showModal == 'true') && panicButton && addEventsToDisplayedElements();
 </script>
 
+
 {#if isLoading}
   <p class="SearchLoading" part="SearchLoading">Loading, please wait ...</p>
 {:else}
@@ -507,13 +519,13 @@
           {#if isLoggedIn}
             {#if favorites == 'true'}
               {#if game.isFavored}
-                <div class="FavIconContainer" part="FavIconContainer" on:click="{() => toggleFavoriteGame(game.id)}">
+                <div class="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" part="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" on:click="{() => toggleFavoriteGame(game.id)}">
                   <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">
                     <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"/>
                   </svg>
                 </div>
               {:else}
-                <div class="FavIconContainer" part="FavIconContainer" on:click="{() => toggleFavoriteGame(game.id)}">
+                <div class="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" part="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" on:click="{() => toggleFavoriteGame(game.id)}">
                   <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"
               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
                   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
@@ -536,11 +548,7 @@
               </div>
               {#if haspanicbutton === "true"}
                 <div class="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}" part="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}">
-                  <div class="PanicText" part="PanicText">
-                    <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>
-                    <p>{$_('gamePage.break')}</p>
-                  </div>
-                  <button class="PanicButton" class:PanicButtonAnimation={panicLoading} part="PanicButton" bind:this={panicButton}  on:click={() => panicAction()}>{$_('casinoPage.breakButton')}</button>
+                  <button class="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}" class:PanicButtonAnimation={panicLoading} part="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}" bind:this={panicButton}>{$_('gamePage.breakButton')}</button>
                 </div>
               {/if}
               <p>{time}</p>
@@ -556,7 +564,6 @@
               <button class="FullWidthButton" part="FullWidthButton" on:click='{() => {openGameWindow(game)}}'>{$_('gamePage.playForFun')}</button>
               <p>{time}</p>
             </div>
-
           {:else}
             <div class="GameDetails" part="GameDetails">
               <h3>{game.name}</h3>
@@ -578,9 +585,7 @@
                   <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
                   {#if haspanicbutton === "true"}
                     <div class="PanicSection" part="PanicSection">
-                      <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>
-                      <p>{$_('gamePage.break')}</p>
-                      <button class="Button" part="Button" on:click={() => panicAction()}>{$_('gamePage.breakButton')}</button>
+                      <button class="Button" class:PanicButtonAnimation={panicLoading} part="Button" bind:this={panicButton}>{$_('gamePage.breakButton')}</button>
                     </div>
                   {/if}
                   {#if isFullscreen}
@@ -781,41 +786,78 @@
     left: 15px;
     cursor: pointer;
   }
-  .PanicSectionMobile {
-    flex-direction: column;
-    margin: 20px 0;
-  }
-  .PanicText {
-    display: flex;
-    align-items: center;
+
+  .FavIconPanicButton {
+    margin-top: 45px;
   }
+
   .PanicSection {
     display: flex;
     align-items: center;
     gap: 10px;
     margin: 20px 0;
 
-    svg {
-      fill: none;
-    }
-    p {
-      font-size: 16px;
-      color: var(--emfe-w-color-white, #FFFFFF);
-    }
     .Button {
       border-radius: 5px;
       border: 1px solid var(--emfe-w-color-primary, #D0046C);
       background-color: var(--emfe-w-color-primary, #D0046C);
-      width: 240px;
+      width: 280px;
       height: 60px;
       color: var(--emfe-w-color-white, #FFFFFF);
       cursor: pointer;
     }
   }
 
+  // the use of !important is necessary in order to override margin from .PanicSection
+  .PanicSectionMobile {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    margin: 10px 0 0 0 !important;
+  }
+
+  .PanicButtonMobile {
+    border-radius: 5px;
+    margin: 0 10px;
+    border: 1px solid var(--emfe-w-color-primary, #D0046C);
+    background-color: var(--emfe-w-color-primary, #D0046C);
+    width: 100% !important;
+    height: 30px;
+    color: var(--emfe-w-color-white, #FFFFFF);
+    cursor: pointer;
+  }
+
   .PanicButtonAnimation {
-    transition: all 3000ms ease-in;
-    background-color: var(--emfe-w-color-gray-300, #58586B);
-    border: 1px solid var(--emfe-w-color-white, #FFFFFF);
+    background: -webkit-linear-gradient(
+        135deg,
+        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
+    );
+
+    background: -moz-linear-gradient(
+        135deg,
+        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
+    );
+
+    background: -o-linear-gradient(
+        135deg,
+        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
+    );
+
+    background-color: var(--emfe-w-color-primary, #D0046C);
+    width: 280px;
+    color: #fff;
+
+    -webkit-animation: bar-animation 2s linear;
+  }
+
+  @-webkit-keyframes bar-animation {
+    0% {
+      background-position: 0;
+    }
+    100% {
+      background-position: 280px;
+    }
   }
-</style>
+  </style>

package/src/translations.js

@@ -6,8 +6,7 @@ export const GamePageTranslations = {
       deposit: 'Deposit',
       playForFun: 'Play for fun',
       playNow: 'Start now!',
-      break: 'Take 1 day break from playing',
-      breakButton: '24-hour Cool Off',
+      breakButton: 'Hold button for 3 seconds to take 24-hours instant lock',
     }
   },
   de: {
@@ -17,8 +16,7 @@ export const GamePageTranslations = {
       deposit: 'Einzahlung',
       playForFun: 'Play for fun',
       playNow: 'Jetzt starten!',
-      break: 'Mach mal einen Tag Pause!',
-      breakButton: '24 Stunden Auszeit',
+      breakButton: 'Für 24 Std. Games Sofortpause, 3 Sekunden drücken',
     }
   },
   it: {
@@ -28,8 +26,7 @@ export const GamePageTranslations = {
       deposit: 'Deposito',
       playForFun: 'Play for fun',
       playNow: 'Inizia ora!',
-      break: 'Take 1 day break from playing',
-      breakButton: '24-hour Cool Off',
+      breakButton: 'Prenditi 1 giorno di pausa dal gioco - 24-hour Cool Off',
     }
   },
   fr: {
@@ -50,8 +47,7 @@ export const GamePageTranslations = {
       deposit: 'Depósito',
       playForFun: 'Juega por diversión',
       playNow: 'Empezar ahora!',
-      break: 'Tómate un descanso de 1 día del juego.',
-      breakButton: 'Tómese un descanso de 24 horas del juego',
+      breakButton: 'Tómese 1 día de descanso de jugar - Tómese un descanso de 24 horas del juego',
     }
   },
   tr: {
@@ -61,8 +57,7 @@ export const GamePageTranslations = {
       deposit: 'DEPOZİTO',
       playForFun: 'EĞLENCE İÇİN OYNA',
       playNow: 'ŞİMDİ OYNA',
-      break: 'Take 1 day break from playing',
-      breakButton: '24-hour Cool Off',
+      breakButton: 'Oyuna 1 gün ara verin - 24-hour Cool Off',
     }
   },
   ru: {
@@ -72,8 +67,7 @@ export const GamePageTranslations = {
       deposit: 'ДЕПОЗИТ',
       playForFun: 'ИГРАЙТЕ ДЛЯ УДОВОЛЬСТВИЯ',
       playNow: 'ИГРАТЬ СЕЙЧАС',
-      break: 'Take 1 day break from playing',
-      breakButton: '24-hour Cool Off',
+      breakButton: 'Сделайте 1 день перерыва в игре - 24-hour Cool Off',
     }
   },
   ro: {
@@ -83,8 +77,7 @@ export const GamePageTranslations = {
       deposit: 'DEPOZITEAZA',
       playForFun: 'JOACĂ PENTRU DISTRACTIE',
       playNow: 'JOACĂ ACUM',
-      break: 'Take 1 day break from playing',
-      breakButton: '24-hour Cool Off',
+      breakButton: 'Luați o pauză de la joc - 24-hour Cool Off',
     }
   },
   hr: {
@@ -94,8 +87,7 @@ export const GamePageTranslations = {
       deposit: 'Uplata',
       playForFun: 'Igraj za zabavu',
       playNow: 'Započnite sada!',
-      break: 'Take 1 day break from playing',
-      breakButton: '24-hour Cool Off',
+      breakButton: 'Hold button for 3 seconds to take 24-hours instant lock',
     }
   },
   hu: {
@@ -105,8 +97,7 @@ export const GamePageTranslations = {
       deposit: 'Befizetés',
       playForFun: 'Play for fun',
       playNow: 'Játsszon most!',
-      break: 'Take 1 day break from playing',
-      breakButton: '24-hour Cool Off',
+      breakButton: 'Hold button for 3 seconds to take 24-hours instant lock',
     }
   },
   pl: {
@@ -116,8 +107,7 @@ export const GamePageTranslations = {
       deposit: 'Wpłata',
       playForFun: 'Graj dla zabawy',
       playNow: 'Rozpocznij teraz!',
-      break: 'Take 1 day break from playing',
-      breakButton: '24-hour Cool Off',
+      breakButton: 'Hold button for 3 seconds to take 24-hours instant lock',
     }
   },
   pt: {
@@ -127,8 +117,7 @@ export const GamePageTranslations = {
       deposit: 'Depósito',
       playForFun: 'Jogue por diversão',
       playNow: 'Comece agora!',
-      break: 'Faça uma pausa de 1 dia no jogo',
-      breakButton: 'Faça uma pausa de 24 horas no jogo',
+      breakButton: 'Faça uma pausa de 1 dia no jogo - Faça uma pausa de 24 horas no jogo',
     }
   },
   sl: {
@@ -138,8 +127,7 @@ export const GamePageTranslations = {
       deposit: 'Vplačilo',
       playForFun: 'Igrajte za zabavo',
       playNow: 'Začnite zdaj!',
-      break: 'Take 1 day break from playing',
-      breakButton: '24-hour Cool Off',
+      breakButton: 'Hold button for 3 seconds to take 24-hours instant lock',
     }
   },
   sr: {
@@ -149,8 +137,7 @@ export const GamePageTranslations = {
       deposit: 'Uplata',
       playForFun: 'Igraj za zabavu',
       playNow: 'Započnite sada!',
-      break: 'Take 1 day break from playing',
-      breakButton: '24-hour Cool Off',
+      breakButton: 'Hold button for 3 seconds to take 24-hours instant lock',
     }
   }
 };