Disable buttons when action is performed

jetbrains-academy · Aug 28, 2024 · 01b4de1 · 01b4de1
1 parent 28e33fd
commit 01b4de1
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/culinaryFrontend/src/components/screens/MainActionsScreen.tsx b/culinaryFrontend/src/components/screens/MainActionsScreen.tsx
@@ -109,6 +109,7 @@ export default function MainActionsScreen({gameStateSetter}: MainActionsScreenPr
     let [saladBowlOptions, setSaladBowlOptions] = useState<SaladBowlOptions>(initialSaladBowlOptions);
     let [berryBasketOptions, setBerryBasketOptions] = useState<BasketOptions>(initialBerryBasketOptions);
     let [citrusBasketOptions, setCitrusBasketOptions] = useState<BasketOptions>(initialCitrusBasketOptions);
+    let [buttonBlocker, setButtonBlocker] = useState<String>("");
 
     function berryBasketVisSetter(value: boolean){
         setBerryBasketOptions(prevOptions => ({
@@ -519,6 +520,7 @@ export default function MainActionsScreen({gameStateSetter}: MainActionsScreenPr
         setBerryBasketOptions(initialBerryBasketOptions)
         spicesShelfVisSetter(false)
         counterProductsSetter([])
+        setButtonBlocker("cook")
 
         const delay = (ms: number) => new Promise(res => setTimeout(res, ms));
 
@@ -528,6 +530,7 @@ export default function MainActionsScreen({gameStateSetter}: MainActionsScreenPr
             console.log("GOT: " + actions)
             if (actions.length == 0){
                 infoTextSetter("Not enough vegetables to make soup!")
+                setButtonBlocker("")
                 return
             }
             infoTextSetter("Let's go!")
@@ -543,10 +546,12 @@ export default function MainActionsScreen({gameStateSetter}: MainActionsScreenPr
                 await delay(1500);
             }
             infoTextSetter("Cooking is done!")
+            setButtonBlocker("")
         })
     }
 
     function spice() {
+        setButtonBlocker("spice")
         const delay = (ms: number) => new Promise(res => setTimeout(res, ms));
 
         let actions = Array<JsAction>()
@@ -555,6 +560,7 @@ export default function MainActionsScreen({gameStateSetter}: MainActionsScreenPr
             console.log("GOT: " + actions)
             if (actions.length == 0){
                 infoTextSetter("You need to cook the soup first!")
+                setButtonBlocker("")
                 return
             }
             infoTextSetter("Let's add some spices!")
@@ -570,6 +576,7 @@ export default function MainActionsScreen({gameStateSetter}: MainActionsScreenPr
                 await delay(1500);
             }
             infoTextSetter("Adding the spices is done!")
+            setButtonBlocker("")
         })
     }
 
@@ -585,6 +592,10 @@ export default function MainActionsScreen({gameStateSetter}: MainActionsScreenPr
         })
     }
 
+    function shouldShow(buttonName: string){
+        return !buttonBlocker;
+    }
+
     return (
         <div className="App-main-container">
             <div className="App-buttons-container">
@@ -620,19 +631,19 @@ export default function MainActionsScreen({gameStateSetter}: MainActionsScreenPr
             }
             <div className="App-buttons-container">
                 <button
-                    className={"App-button-base App-button-action "}
+                    className={"App-button-base App-button-action " + (shouldShow("refill") ? "" : "App-button-disable")}
                     onClick={() => refill()}>Refill!
                 </button>
                 <button
-                    className={"App-button-base App-button-action " + (fridgeProducts.length > 0 ? "" : "App-button-disable")}
+                    className={"App-button-base App-button-action " + (fridgeProducts.length > 0 && shouldShow("cook") ? "" : "App-button-disable")}
                     onClick={() => cook()}>Soup!
                 </button>
                 <button
-                    className={"App-button-base App-button-action " + (potOptions.soup ? "" : "App-button-disable")}
+                    className={"App-button-base App-button-action " + (potOptions.soup && shouldShow("spice") ? "" : "App-button-disable")}
                     onClick={() => spice()}>Spice!
                 </button>
                 <button
-                    className={"App-button-base App-button-action " + (potOptions.soup ? "" : "App-button-disable")}
+                    className={"App-button-base App-button-action " + (potOptions.soup && shouldShow("taste") ? "" : "App-button-disable")}
                     onClick={() => taste()}>Taste!
                 </button>