From 58508fe29ef6182d17c3bcb417dc848403ca87a1 Mon Sep 17 00:00:00 2001
From: albin-karlsson <55614148+albin-karlsson@users.noreply.github.com>
Date: Sat, 23 Mar 2024 12:49:07 +0100
Subject: [PATCH] Add enter council flow

---
 ...{background.jpg => welcome-background.jpg} | Bin
 client/src/App.js                             |  30 +++++++++++++++---
 client/src/components/Council.jsx             |  15 +++++++++
 client/src/components/NameInput.jsx           |   9 ++----
 client/src/components/Overlay.jsx             |  29 +++++++++++------
 client/src/components/Setup.jsx               |   8 ++---
 6 files changed, 64 insertions(+), 27 deletions(-)
 rename client/public/images/{background.jpg => welcome-background.jpg} (100%)
 create mode 100644 client/src/components/Council.jsx

diff --git a/client/public/images/background.jpg b/client/public/images/welcome-background.jpg
similarity index 100%
rename from client/public/images/background.jpg
rename to client/public/images/welcome-background.jpg
diff --git a/client/src/App.js b/client/src/App.js
index eed6323..7d75b0a 100644
--- a/client/src/App.js
+++ b/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>
diff --git a/client/src/components/Council.jsx b/client/src/components/Council.jsx
new file mode 100644
index 0000000..564d042
--- /dev/null
+++ b/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;
diff --git a/client/src/components/NameInput.jsx b/client/src/components/NameInput.jsx
index 0780002..a7474a6 100644
--- a/client/src/components/NameInput.jsx
+++ b/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>
diff --git a/client/src/components/Overlay.jsx b/client/src/components/Overlay.jsx
index 5a4b33e..63ca8a7 100644
--- a/client/src/components/Overlay.jsx
+++ b/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>;
 }
diff --git a/client/src/components/Setup.jsx b/client/src/components/Setup.jsx
index 5a1a2db..87c9520 100644
--- a/client/src/components/Setup.jsx
+++ b/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);
     }
   }