Change from name to humanName

client/src/components/Council.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 function Council({ options }) {
-  const { name, topic, foods } = options;
+  const { humanName, topic, foods } = options;
   const councilStyle = {
     zIndex: 10,
     color: "white",
@@ -46,8 +46,8 @@ function Council({ options }) {
       top: "5px",
       left: `${leftPosition}px`,
       filter:
-        "blur(3px) brightness(0%) saturate(100%) invert(0%) sepia(100%) hue-rotate(180deg) contrast(100%)",
-      opacity: 0.6,
+        "blur(6px) brightness(0%) saturate(100%) invert(0%) sepia(100%) hue-rotate(180deg) contrast(100%)",
+      opacity: 0.3,
       transformOrigin: "bottom center", // Set the origin to the bottom center
       transform: `rotate(${rotationAngle}deg)`, // Apply rotation transformation
     };
@@ -89,14 +89,8 @@ function Council({ options }) {
       ></textarea>
       <div style={foodsContainerStyle}>
         {foods.map((food, index) => (
-          <div
-            key={index}
-            style={foodItemStyle(index, foods.length)}
-          >
-            <img
-              src={`/images/foods/${food}.png`}
-              style={foodImageStyle}
-            />
+          <div key={index} style={foodItemStyle(index, foods.length)}>
+            <img src={`/images/foods/${food}.png`} style={foodImageStyle} />
             <img
               src={`/images/foods/${food}.png`}
               style={{

client/src/components/FoodInfo.jsx

@@ -1,13 +1,16 @@
 import React from "react";
+import { capitalizeFirstLetter } from "../utils.js";
 
 function FoodInfo({ foodName }) {
+  const capitalizedFoodName = capitalizeFirstLetter(foodName);
+
   return (
     <div>
-      <h2>{foodName}</h2>
+      <h2>{capitalizedFoodName}</h2>
       <div>
-        <h4 className="italic">H2O</h4>
-        <h4 className="italic">variety: ground water</h4>
-        <h4 className="italic">origin: Brussels</h4>
+        <h4 className="italic">Lorem</h4>
+        <h4 className="italic">Variety: Lorem ipsum</h4>
+        <h4 className="italic">Origin: Lorem</h4>
       </div>
       <h4>
         Lorem ipsum dolor, sit amet consectetur adipisicing elit.

client/src/components/Foods.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import FoodButton from "./FoodButton";
 import FoodInfo from "./FoodInfo";
+import { capitalizeFirstLetter } from "../utils";
 
 function Foods({ topic, onContinueForward }) {
   const [selectedFoods, setSelectedFoods] = useState([]);
@@ -62,7 +63,7 @@ function Foods({ topic, onContinueForward }) {
                 Please select 2-5 foods
                 <br /> to participate in the discussion about:
               </h4>
-              <h4>{topic}</h4>
+              <h4>{capitalizeFirstLetter(topic)}</h4>
             </div>
             <div
               style={{

client/src/components/HumanNameInput.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
+import { capitalizeFirstLetter } from "../utils";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 
@@ -14,15 +15,16 @@ function HumanNameInput(props) {
 
   function handleChange(e) {
     const inputValue = e.target.value;
-    // Immediately transform the first character to uppercase if it's a letter
-    const updatedValue =
-      inputValue.length === 1
-        ? inputValue.toUpperCase()
-        : inputValue.charAt(0) + inputValue.slice(1);
+    const trimmedValue = inputValue.trim();
 
-    setHumanName(updatedValue);
-    if (updatedValue) {
+    setHumanName(inputValue);
+
+    if (!trimmedValue) {
+      setIsHumanNameMissing(true);
+    } else {
       setIsHumanNameMissing(false);
+      const capitalizedHumanName = capitalizeFirstLetter(trimmedValue);
+      setHumanName(capitalizedHumanName);
     }
   }
 

client/src/components/Topics.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef } from "react";
+import { capitalizeFirstLetter } from "../utils";
 
 function Topics(props) {
   const [selectedTopic, setSelectedTopic] = useState("");
@@ -11,6 +12,7 @@ function Topics(props) {
     "modern agriculture & biodiversity loss",
     "local & global food chains",
     "nature - culture: traditions and progress",
+    "choose your own",
   ];
 
   const shouldShowNextButton =
@@ -39,8 +41,7 @@ function Topics(props) {
   function handleInputTopic(e) {
     const newTopic = e.target.value;
 
-    const capitalizedTopic =
-      newTopic.charAt(0).toUpperCase() + newTopic.slice(1);
+    const capitalizedTopic = capitalizeFirstLetter(newTopic);
 
     setCustomTopic(capitalizedTopic);
   }
@@ -74,16 +75,6 @@ function Topics(props) {
               {topic}
             </button>
           ))}
-          <button
-            className="outline-button wide-button"
-            onClick={() => selectTopic("choose your own")}
-            style={{
-              ...topicButtonStyle("choose your own"),
-              opacity: selectedTopic === "choose your own" ? "1" : "0.5",
-            }}
-          >
-            choose your own
-          </button>
           <h4>please select an issue for the discussion</h4>
         </div>
         <textarea

client/src/components/Welcome.jsx

@@ -3,28 +3,31 @@ function Welcome({ humanName, onContinueForward }) {
   return (
     <div className="wrapper">
       <div className="text-container">
-        <h4>Dear {humanName}</h4>
-        <br />
-        <h4>
-          Welcome to the Council of Foods! Here you can listen to foods
-          <br /> discussing the broken food system, and even take part in the
-          <br /> conversation. You will hear, from the foods themselves, what
-          <br /> their eco-social influence and guiding ethical principles are
-          and
-          <br /> discuss together what actions need to be taken to form a
-          locally
-          <br /> and globally sustainable food system.
-        </h4>
-        <h4>
-          Each food has a different background the mass produced, the
-          <br /> locally grown, the genetically modified, the processed, the
-          fair
-          <br /> trade, the affordable and the biological. All the foods are
-          <br /> assigned an AI language model, each prompted on different
-          <br /> knowledges and ethical guidelines. Therefore, the members have
-          <br /> divergent ethical positions and agendas, voicing a variety of
-          <br /> perspectives in the Council of Foods.
-        </h4>
+        <div>
+          <h4>Dear {humanName},</h4>
+          <br />
+          <h4>
+            Welcome to the Council of Foods! Here you can listen to foods
+            <br /> discussing the broken food system, and even take part in the
+            <br /> conversation. You will hear, from the foods themselves, what
+            <br /> their eco-social influence and guiding ethical principles are
+            and
+            <br /> discuss together what actions need to be taken to form a
+            locally
+            <br /> and globally sustainable food system.
+          </h4>
+          <h4>
+            Each food has a different background the mass produced, the
+            <br /> locally grown, the genetically modified, the processed, the
+            fair
+            <br /> trade, the affordable and the biological. All the foods are
+            <br /> assigned an AI language model, each prompted on different
+            <br /> knowledges and ethical guidelines. Therefore, the members
+            have
+            <br /> divergent ethical positions and agendas, voicing a variety of
+            <br /> perspectives in the Council of Foods.
+          </h4>
+        </div>
         <button className="outline-button" onClick={() => onContinueForward()}>
           Next
         </button>

client/src/foods.json

@@ -0,0 +1,9 @@
+{
+  "foods": [
+    {
+      "name": "banana",
+      "latin_name": "musa acuminata",
+      "origin": ""
+    }
+  ]
+}

client/src/utils.js

@@ -0,0 +1,3 @@
+export function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}