@everymatrix/casino-page 0.0.290 → 0.0.293

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-page",
-  "version": "0.0.290",
+  "version": "0.0.293",
   "main": "dist/casino-page.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "88cef54931a3357b0ae9a20f4fa09091e1f8bb73"
+  "gitHead": "5b7aee827d2cbc67a99e15775c630c6f9ddfbf43"
 }

package/src/CasinoPage.svelte

@@ -708,10 +708,6 @@
     }
   }
 
-  const panicAction = ():void => {
-    window.postMessage({type: 'PanicButtonClicked'}, window.location.href);
-  }
-
   //
   // --- END of communication with other widgets
   //
@@ -855,6 +851,7 @@
       panicLoading = true;
 
       if (timer >= 3) {
+        window.postMessage({type: 'PanicButtonClicked'}, window.location.href);
         clearInterval(timerInterval)
       }
     }, 1000);
@@ -867,28 +864,34 @@
     clearInterval(timerInterval);
   }
 
-  onMount(() => {
-    window.addEventListener('scroll', scrollHandler, false);
-    window.addEventListener('message', messageHandler, false);
-    console.log("button here casino page ", panicButton);
+  const addEventsToDisplayedElements = () => {
     panicButton?.addEventListener("mousedown", startInterval, false);
-    panicButton?.addEventListener('touchstart', 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);
+  }
+
+  onMount(() => {
+    window.addEventListener('scroll', scrollHandler, false);
+    window.addEventListener('message', messageHandler, false);
 
     return () => {
       window.removeEventListener('scroll', scrollHandler);
       window.removeEventListener('message', messageHandler);
 
-      panicButton?.removeEventListener("mousedown", startInterval);
-      panicButton?.removeEventListener('touchstart', startInterval)
-
-      // on mouseup stop interval count
-      panicButton?.removeEventListener("mouseup", endInterval);
-      panicButton?.removeEventListener("touchend", endInterval);
-
+      removeEventsToDisplayedElements();
     }
   });
 
@@ -898,6 +901,7 @@
   $: lang && updateCategoriesLanguage();
   $: clientstyling && setClientStyling();
   $: clientstylingurl && setClientStylingURL();
+  $: panicButton && addEventsToDisplayedElements();
 </script>
 
 {#if hasErrors}
@@ -1145,13 +1149,9 @@
         {/if}
       {/if}
     {/if}
-    {#if isLoggedIn && haspanicbutton === "true"}
+    {#if isLoggedIn && 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>{$_('casinoPage.break')}</p>
-        </div>
-        <button class="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}" class:PanicButtonAnimation={panicLoading} part="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}" 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} >{$_('casinoPage.breakButton')}</button>
       </div>
     {/if}
   </section>
@@ -1175,7 +1175,7 @@
 
   .PanicSectionMobile {
     flex-direction: column;
-    margin-bottom: 40px;
+    margin: 20px 0;
   }
 
   .PanicSection {
@@ -1183,63 +1183,54 @@
     justify-content: center;
     align-items: center;
     gap: 10px;
-  }
-
-  .PanicText {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-  }
-
-  p {
-    font-size: 16px;
-    color: var(--emfe-w-color-white, #FFFFFF);
+    margin-top: 20px;
   }
 
   .PanicButton {
     border-radius: 5px;
     border: 1px solid var(--emfe-w-color-primary, #D0046C);
     background-color: var(--emfe-w-color-primary, #D0046C);
-    width: 380px;
+    width: 280px;
     height: 48px;
     line-height: 18px;
     color: var(--emfe-w-color-white, #FFFFFF);
     cursor: pointer;
   }
 
-  .PanicButtonMobile {
-    width: 240px;
-  }
-
   .PanicButtonAnimation {
     background: -webkit-linear-gradient(
         135deg,
-        #FD2839 5%, #D0046C 100%
+        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
     );
 
     background: -moz-linear-gradient(
         135deg,
-        #FD2839 5%, #D0046C 100%
+        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
     );
 
     background: -o-linear-gradient(
         135deg,
-        #FD2839 5%, #D0046C 100%
+        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
     );
 
-    width: 240px;
+    background-color: var(--emfe-w-color-primary, #D0046C);
+    width: 280px;
     color: #fff;
 
     -webkit-animation: bar-animation 2s linear;
   }
 
+  .PanicButtonMobile {
+    width: 280px;
+    padding: 0 5px;
+  }
+
   @-webkit-keyframes bar-animation {
     0% {
       background-position: 0;
     }
     100% {
-      background-position: 240px;
+      background-position: 280px;
     }
   }