@everymatrix/casino-page 0.0.280 → 0.0.283

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-page",
-  "version": "0.0.280",
+  "version": "0.0.283",
   "main": "dist/casino-page.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1a620ac617e7ff4b6f5fe26863d6e3cb7cf4d03c"
+  "gitHead": "e19481532307b6ad83a24fda9f9b5ef7cc2a3b4c"
 }

package/src/CasinoPage.svelte

@@ -55,8 +55,10 @@
   let playerID:string;
   let sessionID:string;
 
-  let panicLoading = false;
-  let panicButtonTimeout;
+  let panicButton:HTMLElement;
+  let panicLoading:boolean = false;
+  let timer: number = 0;
+  let timerInterval:any;
 
   // CasinoPage state
   let favoritesScreen:boolean = false;
@@ -705,15 +707,10 @@
     }
   }
 
-  const PanicAction = () => {
-    panicLoading = true;
-
-    panicButtonTimeout = setTimeout(() => {
-      panicLoading = false;
-      window.postMessage({ type: 'PanicButtonClicked' }, window.location.href);
-    }, 3000);
-    clearTimeout(panicButtonTimeout);
+  const panicAction = ():void => {
+    window.postMessage({type: 'PanicButtonClicked'}, window.location.href);
   }
+
   //
   // --- END of communication with other widgets
   //
@@ -849,13 +846,48 @@
       });
   }
 
+  const startInterval = (e:any):void => {
+    timer = 0;
+
+    timerInterval = setInterval(() => {
+      timer += 1;
+      panicLoading = true;
+
+      if (timer >= 3) {
+        clearInterval(timerInterval)
+      }
+    }, 1000);
+  }
+
+  const endInterval = (e:any):void => {
+    if (timer < 3) {
+      panicLoading = false;
+    }
+    clearInterval(timerInterval);
+  }
+
   onMount(() => {
     window.addEventListener('scroll', scrollHandler, false);
     window.addEventListener('message', messageHandler, false);
 
+    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 () => {
       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);
+
     }
   });
 
@@ -1113,7 +1145,7 @@
           <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" class:PanicButtonAnimation={panicLoading} part="PanicButton" on:click={() => PanicAction()}>{$_('casinoPage.breakButton')}</button>
+        <button class="PanicButton" class:PanicButtonAnimation={panicLoading} part="PanicButton" bind:this={panicButton}  on:click={() => panicAction()}>{$_('casinoPage.breakButton')}</button>
       </div>
     {/if}
   </section>
@@ -1170,11 +1202,37 @@
   }
 
   .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,
+        #FD2839 5%, #D0046C 100%
+    );
+
+    background: -moz-linear-gradient(
+        135deg,
+        #FD2839 5%, #D0046C 100%
+    );
+
+    background: -o-linear-gradient(
+        135deg,
+        #FD2839 5%, #D0046C 100%
+    );
+
+    width: 240px;
+    color: #fff;
+
+    -webkit-animation: bar-animation 2s linear;
+  }
+
+  @-webkit-keyframes bar-animation {
+    0% {
+      background-position: 0;
+    }
+    100% {
+      background-position: 240px;
+    }
   }
 
+
   [type="search"] {
     appearance: none;
   }