feat: add beforeunload handler and update textarea disabled state

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)
             }