Merge pull request #151 from harish08102004/feature/play-again-button

Add 'Play Again' button to restart game after prediction

src/components/Confirm.js

@@ -5,112 +5,73 @@ import { TwitterShareButton, TwitterFollowButton } from "react-twitter-embed";
 import { Confetti } from "./Confetti";
 import { Bounce, ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { useNavigate } from 'react-router-dom';
 
 function ConfirmationCheckbox() {
-  const buttonStyle = {
-    backgroundColor: "#132a13",
-    color: "yellowgreen",
-    border: "3px solid currentcolor",
-    boxShadow: "0 0 3px currentcolor",
-    borderRadius: "20px",
-
-  };
-
   const [person, setPerson] = useState(null);
   const [isActive, setIsActive] = useState(false);
   const [isChecked, setIsChecked] = useState(false);
   const [buttonPlayed, setButtonPlayed] = useState(false);
   const [inputValue, setInputValue] = useState("");
-  const [click,setClick]=useState(false);
-  const [name, setName] = useState("");
+  const [click, setClick] = useState(false);
+  const navigate = useNavigate(); // for navigation
+
+  // Define the buttonStyle after isActive is initialized
+  const buttonStyle = {
+    backgroundColor: isActive ? "#132a13" : "transparent", // Transparent when not active
+    color: isActive ? "yellowgreen" : "grey",
+    border: "3px solid currentcolor",
+    boxShadow: isActive ? "0 0 3px currentcolor" : "none", // No shadow when not active
+    borderRadius: "20px",
+    cursor: isActive ? "pointer" : "not-allowed",
+    transition: "background-color 0.3s ease, color 0.3s ease", // Smooth transition
+  };
+
   function handleClick() {
-
-    if(inputValue===""){
-
+    if(inputValue === "") {
       toast.error("You didn't enter your name!", {
         position: "top-right",
         autoClose: 3000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
         theme: "dark",
-        color:"red",
         transition: Bounce,
-        });
-    }
-    else if (!click) {
+      });
+    } else if (!click) {
       toast.error("You didn't tick the checkbox!", {
         position: "top-right",
         autoClose: 3000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
         theme: "dark",
         transition: Bounce,
       });
-    } else{
-    setIsChecked(oldIsChecked => !oldIsChecked);
+    } else {
+      setIsChecked(true); // Move to the next step
     }
   }
 
   function checkboxon(e) {
-    setClick(true);
-    if(e.target.checked){
-      if(inputValue===""){
-
-        toast.error("You didn't enter your name!", {
-          position: "top-right",
-          autoClose: 3000,
-          hideProgressBar: false,
-          closeOnClick: true,
-          pauseOnHover: true,
-          draggable: true,
-          progress: undefined,
-          theme: "dark",
-          color:"red",
-          transition: Bounce,
-          });
-
-      }
-    setIsActive(oldIsActive => !oldIsActive);
-
-
-    }else{
-      setIsActive(oldIsActive => !oldIsActive);
-      toast.error("You did't click the Checkbox", {
-        position: "top-right",
-        autoClose: 3000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-        theme: "dark",
-        transition: Bounce,
-        });
-    }
+    setClick(e.target.checked);
+    setIsActive(e.target.checked); // Button will be enabled only if checkbox is checked
   }
- 
+
   function generatorRandomNumber() {
     return Math.floor(Math.random() * wives.length);
   }
 
-
   function handleInputChange(event) {
     setInputValue(event.target.value);
   }
 
   const playGame = () => {
-    setButtonPlayed(oldButtonPlayed => !oldButtonPlayed);
+    setButtonPlayed(true);
     const randomNum = generatorRandomNumber();
     setPerson(wives[randomNum]);
   };
 
-
+  const playAgain = () => {
+    setButtonPlayed(false); // Reset the game state
+    setIsChecked(false); // Reset the checkbox state
+    setClick(false); // Uncheck the checkbox
+    navigate("/"); // Navigate back to the main page
+  };
 
   const wifestyle2 = {
     margin: "0",
@@ -137,7 +98,7 @@ function ConfirmationCheckbox() {
             paddingBottom: "120px",
           }}
         >
-          <div className="form-group container" >
+          <div className="form-group container">
             <label htmlFor="exampleInputEmail1">
               <h4>What's your name?</h4>
             </label>
@@ -156,20 +117,23 @@ function ConfirmationCheckbox() {
                 }}
                 className="form-control"
                 id="nameid"
-                aria-describedby="emailHelp"
                 placeholder="Enter Your Name"
               />
             </div>
           </div>
-          <input className="mycheckbox" type="checkbox" id="input"  onChange={(e)=>{checkboxon(e)}} />
+          <input
+            className="mycheckbox"
+            type="checkbox"
+            id="input"
+            onChange={(e) => checkboxon(e)}
+          />
           &nbsp; Whichever wife I get, I will accept for the rest of my life.
           <p></p>
           <button
-            disabled={!isActive}
+            disabled={!isActive} // Disable if checkbox isn't checked
             style={buttonStyle}
             onClick={handleClick}
             type="button"
-
             className="btn letsgo btn-success "
           >
             Wife Me Up
@@ -184,11 +148,11 @@ function ConfirmationCheckbox() {
             Ready!
           </h1>
           <p style={{ color: "green" }}>
-            I, {inputValue}, agree to marry the woman who is about to appear as my
-            future wife. Backing away from this promise would mean that I am not a man.
+            I, {inputValue}, agree to marry the woman who is about to appear as
+            my future wife. Backing away from this promise would mean that I am
+            not a man.
           </p>
           <div
-            href="#"
             className="bestbutton"
             style={{ "--clr": "#6eff3e" }}
             onClick={playGame}
@@ -209,9 +173,11 @@ function ConfirmationCheckbox() {
             paddingTop: "20px",
           }}
         >
-          <Confetti></Confetti>
-          <h2 style={{ color: "darkgreen", padding: "10px" }}>{inputValue}, your future wife is</h2>
-          <div style={{ display: "flex", justifyContent:"center"}}>
+          <Confetti />
+          <h2 style={{ color: "darkgreen", padding: "10px" }}>
+            {inputValue}, your future wife is
+          </h2>
+          <div style={{ display: "flex", justifyContent: "center" }}>
             <div
               className="card"
               style={{ border: "3px solid #386641", color: "black" }}
@@ -286,6 +252,20 @@ function ConfirmationCheckbox() {
               <TwitterFollowButton screenName={"1Shubham7"} />
             </div>
           </div>
+
+          <button
+            onClick={playAgain}
+            style={{
+              backgroundColor: "white",
+              color: "green",
+              border: "3px solid #386641",
+              boxShadow: "0 0 3px green",
+              borderRadius: "20px",
+              padding: "10px 20px",
+            }}
+          >
+            Play Again
+          </button>
         </div>
       )}
     </>