Prepare data

client/src/App.js

@@ -16,9 +16,9 @@ function App() {
     width: "100vw",
   };
 
-  const enterSetup = () => {
+  function enterSetup() {
     setCurrentView("setup");
-  };
+  }
 
   return (
     <div

client/src/components/FoodButton.jsx

@@ -1,13 +1,20 @@
 import React, { useState } from "react";
 
-function FoodButton({ name }) {
+function FoodButton({ name, onSelectFood, onDeselectFood }) {
   const [isSelected, setIsSelected] = useState(false);
 
   const imageUrl = `/images/foods/${name}.png`;
 
-  function selectFood() {
-    console.log("Food selected!");
-    setIsSelected(!isSelected); // Toggle the isSelected state
+  function handleClickFood() {
+    if (!isSelected) {
+      // Select food
+      onSelectFood(name);
+    } else {
+      // Deselect food
+      onDeselectFood(name);
+    }
+
+    setIsSelected(!isSelected);
   }
 
   const buttonStyle = {
@@ -41,7 +48,7 @@ function FoodButton({ name }) {
         src={imageUrl}
         alt={name}
         style={imageStyle}
-        onClick={selectFood}
+        onClick={handleClickFood}
       />
     </div>
   );

client/src/components/NameInput.jsx

@@ -20,9 +20,12 @@ function NameInput(props) {
     }
   }
 
-  function enterCouncil() {
+  function enterSetup() {
     if (name) {
       props.onEnterSetup();
+
+      // Save name to local storage
+      localStorage.setItem("name", name);
     } else {
       console.log("No name...");
       setIsNameMissing(true);
@@ -31,7 +34,7 @@ function NameInput(props) {
 
   function handleKeyDown(e) {
     if (e.key === "Enter") {
-      enterCouncil();
+      enterSetup();
     }
   }
 
@@ -49,7 +52,7 @@ function NameInput(props) {
         <FontAwesomeIcon
           icon={faArrowRight}
           className="input-arrow"
-          onClick={enterCouncil}
+          onClick={enterSetup}
         />
       </div>
       <h3 className={`sub-sub-header ${!isNameMissing ? "hidden" : ""}`}>

client/src/components/Setup.jsx

@@ -1,7 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import FoodButton from "./FoodButton";
 
 function Setup() {
+  const [topic, setTopic] = useState(""); // Added state for the topic
+  const [selectedFoods, setSelectedFoods] = useState([]);
+
   const foods = [
     "banana",
     "bratwurst",
@@ -25,6 +28,22 @@ function Setup() {
 
   function enterCouncil() {
     console.log("Entering council...");
+
+    console.log("Name: ", localStorage.getItem("name"));
+    console.log("Topic: ", topic);
+    console.log("Selected foods: ", selectedFoods);
+
+    // First test call socket
+
+    // let promptsAndOptions = {options: , topic: , characters: }
+
+    // socket.emit("start_conversation", promptsAndOptions);
+
+    // return {
+    //   options: promptsAndOptions.options,
+    //   topic: promptsAndOptions.rooms[currentRoom].topic,
+    //   characters: promptsAndOptions.rooms[currentRoom].characters,
+    // };
   }
 
   function handleKeyDown(e) {
@@ -33,6 +52,21 @@ function Setup() {
     }
   }
 
+  function selectFood(foodName) {
+    // Check if the foodName is already selected to prevent duplicates
+    if (!selectedFoods.includes(foodName)) {
+      setSelectedFoods([...selectedFoods, foodName]);
+      console.log(`SELECTED ${foodName}`);
+    }
+  }
+
+  function deselectFood(foodName) {
+    // Filter out the foodName from the selectedFoods array to remove it
+    const filteredFoods = selectedFoods.filter((food) => food !== foodName);
+    setSelectedFoods(filteredFoods);
+    console.log(`DESELECTED ${foodName}`);
+  }
+
   return (
     <div style={welcomeStyle}>
       <div>
@@ -52,6 +86,7 @@ function Setup() {
           rows="2"
           cols="30"
           onKeyDown={handleKeyDown}
+          onChange={(e) => setTopic(e.target.value)} // Update the state of the topic when input changes
         ></textarea>
       </div>
       <div>
@@ -61,6 +96,8 @@ function Setup() {
             <FoodButton
               key={food}
               name={food}
+              onSelectFood={selectFood}
+              onDeselectFood={deselectFood}
             />
           ))}
         </div>