From 8c4b1f5dd8d486c3b802fb74622b602f14786ae0 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 18 Mar 2025 16:16:06 +0100
Subject: [PATCH] ui fix

---
 package-lock.json                             |   8 +-
 package.json                                  |   2 +-
 .../components/Table/OptionsFlowTable.svelte  |   2 +-
 src/routes/options-flow/+page.svelte          | 134 +++++++++---------
 4 files changed, 73 insertions(+), 73 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6744c5ff..d54a52f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,7 @@
         "clsx": "^2.1.1",
         "cmdk-sv": "^0.0.18",
         "compression": "^1.7.4",
-        "daisyui": "^5.0.4",
+        "daisyui": "^5.0.6",
         "date-fns": "^3.6.0",
         "date-fns-tz": "^3.1.3",
         "date-picker-svelte": "^2.12.0",
@@ -4081,9 +4081,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/daisyui": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.0.4.tgz",
-      "integrity": "sha512-9X3oX/k9hPBCslAECk8kYfvwgrz6Grs0lN7VI0/ZTM/hUfq1uFREHxCcBCCq0QROpN183N19B1hTNRWGipO2Eg==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.0.6.tgz",
+      "integrity": "sha512-/e/9Gw/2y9oawBJlWkJMSEhRXdmfOLvcPl+6q/x2rPEdIVOtebs1t3ex2vwySl9vCRs1GGNBKCiL+P60Ps/wUw==",
       "dev": true,
       "license": "MIT",
       "funding": {
diff --git a/package.json b/package.json
index 144d4789..47f29a7f 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "clsx": "^2.1.1",
     "cmdk-sv": "^0.0.18",
     "compression": "^1.7.4",
-    "daisyui": "^5.0.4",
+    "daisyui": "^5.0.6",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",
     "date-picker-svelte": "^2.12.0",
diff --git a/src/lib/components/Table/OptionsFlowTable.svelte b/src/lib/components/Table/OptionsFlowTable.svelte
index acf1293a..45e2d1ba 100644
--- a/src/lib/components/Table/OptionsFlowTable.svelte
+++ b/src/lib/components/Table/OptionsFlowTable.svelte
@@ -596,7 +596,7 @@
         class:opacity-30={index + 1 === rawData?.length &&
           data?.user?.tier !== "Pro"}
       >
-        <div class="p-2 text-center text-sm sm:text-[1rem] whitespace-nowrap">
+        <div class="p-2 text-center text-sm whitespace-nowrap">
           {formatTime(displayedData[index]?.time)}
         </div>
         <div
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index a889acf5..96e1f2d0 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -500,6 +500,8 @@
   let previousVolume = 0; //This is needed to play the sound only if it changes.
   let notFound = false;
   let isLoaded = false;
+  let reconnectAttempts = 0;
+
   $: modeStatus = $isOpen === true ? true : false;
 
   function toggleMode() {
@@ -512,82 +514,80 @@
         shouldLoadWorker.set(true);
       }
     } else {
-      toast.error(`Market is closed`, {
+      toast?.error(`Market is closed`, {
         style: `border-radius: 5px; background: #fff; color: #000; border-color: ${$mode === "light" ? "#F9FAFB" : "#4B5563"}; font-size: 15px;`,
       });
     }
   }
 
   async function websocketRealtimeData() {
-    if (data?.user?.tier === "Pro") {
-      newData = [];
-      try {
-        socket = new WebSocket(data?.wsURL + "/options-flow-reader");
+    if (data?.user?.tier !== "Pro") return;
 
-        socket.addEventListener("message", (event) => {
-          const totalVolume = displayCallVolume + displayPutVolume;
-          if (modeStatus === true) {
-            try {
-              newData = JSON?.parse(event.data) ?? [];
-              if (newData?.length > 0) {
-                newData?.forEach((item) => {
-                  item.dte = daysLeft(item?.date_expiration);
-                });
-
-                //calculateStats(newData);
-                //console.log(previousVolume);
-                if (
-                  newData?.length > rawData?.length &&
-                  previousVolume !== totalVolume
-                ) {
-                  //console.log(previousVolume,totalVolume,);
-                  rawData = newData;
-                  shouldLoadWorker.set(true);
-                  //console.log('loading worker')
-                  //displayedData = rawData;
-
-                  if (!muted) {
-                    audio?.play();
-                  }
-                }
-              }
-
-              /*
-          if (previousCallVolume !== displayCallVolume && !muted && audio) {
-            audio?.play();
-          }
-          */
-            } catch (e) {
-              console.error("Error processing WebSocket message:", e);
-            }
-            newData = [];
-            previousVolume = totalVolume;
-          }
-        });
-
-        socket.addEventListener("close", (event) => {
-          console.log("WebSocket connection closed:", event.reason);
-
-          // Explicitly nullify the socket and remove all event listeners
-          if (socket) {
-            socket.onmessage = null;
-            socket.onopen = null;
-            socket.onclose = null;
-            socket.onerror = null;
-            socket = null;
-          }
-        });
-
-        socket.addEventListener("error", (error) => {
-          console.error("WebSocket error:", error);
-          // Handle WebSocket errors here
-        });
-      } catch (error) {
-        console.error("WebSocket connection error:", error);
-        // Handle connection errors here
-        setTimeout(() => websocketRealtimeData(), 400);
+    // Cleanup previous connection
+    if (socket) {
+      socket.onmessage = null;
+      socket.onclose = null;
+      socket.onerror = null;
+      if (socket.readyState === WebSocket.OPEN) {
+        socket.close();
       }
     }
+
+    try {
+      socket = new WebSocket(`${data.wsURL}/options-flow-reader`);
+
+      socket.onopen = () => {
+        console.log("WebSocket connected");
+        reconnectAttempts = 0;
+      };
+
+      socket.onmessage = (event) => {
+        const totalVolume = displayCallVolume + displayPutVolume;
+        if (!modeStatus) return;
+
+        try {
+          const newData = JSON.parse(event.data) ?? [];
+
+          if (newData.length > 0) {
+            newData.forEach((item) => {
+              item.dte = daysLeft(item?.date_expiration);
+            });
+
+            if (
+              newData.length > rawData.length &&
+              previousVolume !== totalVolume
+            ) {
+              rawData = newData;
+              shouldLoadWorker.set(true);
+
+              if (!muted && audio) {
+                audio.play().catch((error) => {
+                  console.log("Audio play failed:", error);
+                });
+              }
+            }
+          }
+          previousVolume = totalVolume;
+        } catch (e) {
+          console.error("Message processing error:", e);
+        }
+      };
+
+      socket.onclose = (event) => {
+        console.log(`WebSocket closed (${event.code}), reconnecting...`);
+        const delay = Math.min(5000, reconnectAttempts ** 2 * 500);
+        setTimeout(websocketRealtimeData, delay);
+        reconnectAttempts++;
+      };
+
+      socket.onerror = (error) => {
+        console.error("WebSocket error:", error);
+        socket.close();
+      };
+    } catch (error) {
+      console.error("WebSocket connection error:", error);
+      setTimeout(websocketRealtimeData, 1000);
+    }
   }
 
   function daysLeft(targetDate) {