@everymatrix/casino-game-page 0.0.282 → 0.0.283

package/package.json

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

package/src/CasinoGamePage.svelte

@@ -48,8 +48,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;
 
   let game:any;
   let detailsObtained:boolean = false;
@@ -373,14 +375,8 @@
     }
   }
 
-  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);
   }
 
   const refreshTime = ():void => {
@@ -442,17 +438,52 @@
     }
   }
 
+  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('resize', resizeHandler, false);
     window.addEventListener('message', messageHandler, false);
 
     isOnNative = !!isNative(userAgent);
 
-    return () => {
-      window.removeEventListener('resize', resizeHandler);
-      window.removeEventListener('message', messageHandler);
+      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('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);
 
-      clearInterval(timeInterval);
     }
   });
 
@@ -508,7 +539,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>{$_('gamePage.break')}</p>
                   </div>
-                  <button class="Button" class:PanicButtonAnimation={panicLoading} part="Button" on:click={() => panicAction()}>{$_('gamePage.breakButton')}</button>
+                  <button class="PanicButton" class:PanicButtonAnimation={panicLoading} part="PanicButton" bind:this={panicButton}  on:click={() => panicAction()}>{$_('casinoPage.breakButton')}</button>
                 </div>
               {/if}
               <p>{time}</p>