Add enter council flow

client/src/App.js

@@ -3,33 +3,53 @@ import React, { useState } from "react";
 import Overlay from "./components/Overlay";
 import Welcome from "./components/Welcome";
 import Setup from "./components/Setup";
+import Council from "./components/Council";
 
 function App() {
+  const [name, setName] = useState("");
+  const [topic, setTopic] = useState("");
+  const [foods, setFoods] = useState([]);
   const [currentView, setCurrentView] = useState("welcome");
+  const [backgroundImageURL, setBackgroundImageURL] = useState(
+    "/images/welcome-background.jpg"
+  );
 
   const backgroundStyle = {
-    // backgroundImage: `url(${backgroundImage})`,
-    backgroundImage: `url("/images/background.jpg")`,
+    backgroundImage: `url(${backgroundImageURL})`,
     backgroundSize: "cover",
     backgroundPosition: "center",
     height: "100vh",
     width: "100vw",
   };
 
-  function enterSetup() {
+  const isActive = currentView !== "council";
+
+  function enterSetup(name) {
+    setName(name);
     setCurrentView("setup");
   }
 
+  function enterCouncil(topic, foods) {
+    setTopic(topic);
+    setFoods(foods);
+
+    setBackgroundImageURL("");
+
+    setCurrentView("council");
+  }
+
   return (
     <div
       className="App"
       style={backgroundStyle}
     >
-      <Overlay>
+      <Overlay isActive={isActive}>
         {currentView === "welcome" ? (
           <Welcome onEnterSetup={enterSetup} />
+        ) : currentView === "setup" ? (
+          <Setup onEnterCouncil={enterCouncil} />
         ) : (
-          <Setup />
+          <Council options={{ name: name, topic: topic, foods: foods }} />
         )}
       </Overlay>
     </div>

client/src/components/Council.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+function Council({ options }) {
+  const { name, topic, foods } = options;
+
+  return (
+    <div>
+      <h1>Welcome to the council {name}</h1>
+      <h1>Topic: {topic}</h1>
+      <h1>Foods: {foods.join(", ")}</h1>
+    </div>
+  );
+}
+
+export default Council;

client/src/components/NameInput.jsx

@@ -22,10 +22,7 @@ function NameInput(props) {
 
   function enterSetup() {
     if (name) {
-      props.onEnterSetup();
-
-      // Save name to local storage
-      localStorage.setItem("name", name);
+      props.onEnterSetup(name);
     } else {
       console.log("No name...");
       setIsNameMissing(true);
@@ -40,7 +37,7 @@ function NameInput(props) {
 
   return (
     <div>
-      <h3 className="sub-sub-header">please type your name to enter:</h3>
+      <h3>please type your name to enter:</h3>
       <div className="input-icon-wrapper">
         <input
           className="text-input name-input"
@@ -55,7 +52,7 @@ function NameInput(props) {
           onClick={enterSetup}
         />
       </div>
-      <h3 className={`sub-sub-header ${!isNameMissing ? "hidden" : ""}`}>
+      <h3 className={`${!isNameMissing ? "hidden" : ""}`}>
         please enter your name to proceed
       </h3>
     </div>

client/src/components/Overlay.jsx

@@ -1,14 +1,23 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 
-function Overlay({ children }) {
-  const overlayStyle = {
-    position: "absolute",
-    top: 0, // Start from the very top
-    left: 0, // Start from the very left
-    height: "100%", // Cover full parent height
-    width: "100%", // Cover full parent width
-    backgroundColor: "rgba(0, 0, 0, 0.5)", // Semi-transparent black
-  };
+function Overlay({ isActive, children }) {
+  const [overlayStyle, setOverlayStyle] = useState({});
+
+  // Update overlay styles when visible prop changes
+  useEffect(() => {
+    if (isActive) {
+      setOverlayStyle({
+        position: "absolute",
+        top: 0,
+        left: 0,
+        height: "100%",
+        width: "100%",
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+      });
+    } else {
+      setOverlayStyle({});
+    }
+  }, [isActive]);
 
   return <div style={overlayStyle}>{children}</div>;
 }

client/src/components/Setup.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import FoodButton from "./FoodButton";
 
-function Setup() {
+function Setup({ onEnterCouncil }) {
   const [topic, setTopic] = useState("");
   const [selectedFoods, setSelectedFoods] = useState([]);
   const [isTopicMissing, setIsTopicMissing] = useState(false);
@@ -45,11 +45,7 @@ function Setup() {
 
     // If both validations pass, log the values (simulate entering the council)
     if (topic && selectedFoods.length >= 2) {
-      console.log("Entering council...");
-
-      console.log("Name: ", localStorage.getItem("name"));
-      console.log("Topic: ", topic);
-      console.log("Selected foods: ", selectedFoods);
+      onEnterCouncil(topic, selectedFoods);
     }
   }