From 1f785c20a0e5d519694a8f7652843bc0f4488a08 Mon Sep 17 00:00:00 2001
From: Yarre <yaroslav.syvukha@gmail.com>
Date: Tue, 14 Jan 2025 11:47:17 +0100
Subject: [PATCH] feat: add beforeunload handler and update textarea disabled
 state

---
 src/components/pages/game/game.tsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/game/game.tsx b/src/components/pages/game/game.tsx
index ae9b7e5..e2e7765 100644
--- a/src/components/pages/game/game.tsx
+++ b/src/components/pages/game/game.tsx
@@ -132,6 +132,22 @@ export const GameSection = () => {
     };
   }, [isPending, currentPendingImage]);
 
+  useEffect(() => {
+    if (!showTip) {
+      return;
+    }
+
+    const handler = (event: BeforeUnloadEvent) => {
+      event.preventDefault();
+    };
+
+    window.addEventListener('beforeunload', handler);
+
+    return () => {
+      window.removeEventListener('beforeunload', handler);
+    };
+  }, [showTip]);
+
   return (
     <div className="container flex flex-col gap-[20px] py-[20px] font-inknut">
       <div className="text-center font-bona-nova-sc text-[30px] sm:text-[50px]">Your Future In One Forecast</div>
@@ -174,13 +190,13 @@ export const GameSection = () => {
         </BaseTooltip>
       </div>
 
-      <div className="grid">
+      <div className="grid overflow-hidden">
         <div className="text-red-700"> {errors.question?.message ? errors.question.message : '⠀'} </div>
         <textarea
           {...register('question')}
           className="min-h-[150px] rounded-[8px] border border-[#3A3939] bg-transparent p-4 placeholder-[#3A3939] outline-none"
           placeholder="Type your question here"
-          disabled={isPending}
+          disabled={isPending || showTip}
           rows={7}
         />
       </div>
@@ -198,7 +214,10 @@ export const GameSection = () => {
             onClick={
               isRetry
                 ? () => {
-                    window.location.reload();
+                    toast.info('To make a new forecast, please reload the page');
+                    setTimeout(() => {
+                      window.location.reload();
+                    }, 10);
                   }
                 : handleSubmit(onSubmit)
             }