Merge pull request #28 from RedDuck-Software/feat/onunload

feat: add beforeunload handler and update textarea disabled state
RedDuck-Software · Jan 14, 2025 · 3cb1efe · 3cb1efe
2 parents ccba7c2 + 1f785c2
commit 3cb1efe
Showing 1 changed file with 22 additions and 3 deletions.
diff --git 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)
             }