Change from name to human name where applicable

Nonhuman-Nonsense · Mar 26, 2024 · 27d81cb · 27d81cb
1 parent 0450c61
commit 27d81cb
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 56 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -79,6 +79,10 @@ h4 {
   text-decoration: none;
 }
 
+.italic {
+  font-style: italic;
+}
+
 .input-icon-wrapper {
   position: relative;
   display: inline-flex;

diff --git a/client/src/App.js b/client/src/App.js
@@ -9,7 +9,7 @@ import Navbar from "./components/Navbar";
 import Council from "./components/Council";
 
 function App() {
-  const [name, setName] = useState("");
+  const [humanName, setHumanName] = useState("");
   const [topic, setTopic] = useState("");
   const [foods, setFoods] = useState([]);
   const pages = ["landing", "welcome", "topics", "foods", "council"];
@@ -29,8 +29,8 @@ function App() {
   const isActive = currentView !== "council";
 
   function continueForward(props) {
-    if (props && props.hasOwnProperty("name")) {
-      setName(props.name);
+    if (props && props.hasOwnProperty("humanName")) {
+      setHumanName(props.humanName);
     } else if (props && props.hasOwnProperty("topic")) {
       setTopic(props.topic);
     } else if (props && props.hasOwnProperty("foods")) {
@@ -51,15 +51,15 @@ function App() {
         {currentView === pages[0] ? (
           <Landing onContinueForward={continueForward} />
         ) : currentView === pages[1] ? (
-          <Welcome name={name} onContinueForward={continueForward} />
+          <Welcome humanName={humanName} onContinueForward={continueForward} />
         ) : currentView === pages[2] ? (
           <Topics onContinueForward={continueForward} />
         ) : currentView === pages[3] ? (
           <Foods topic={topic} onContinueForward={continueForward} />
         ) : (
           <div>
             <Navbar topic={topic} />
-            <Council options={{ name, topic, foods }} />
+            <Council options={{ humanName, topic, foods }} />
           </div>
         )}
       </Overlay>

diff --git a/client/src/components/ContentSection.jsx b/client/src/components/ContentSection.jsx
diff --git a/client/src/components/FoodButton.jsx b/client/src/components/FoodButton.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 function FoodButton({
-  name,
+  foodName,
   onSelectFood,
   onDeselectFood,
   onMouseEnter,
@@ -11,14 +11,14 @@ function FoodButton({
 }) {
   const isModerator = onSelectFood === undefined;
 
-  const imageUrl = `/images/foods/${name}.png`;
+  const imageUrl = `/images/foods/${foodName}.png`;
 
   function handleClickFood() {
     if (!isModerator && (!selectLimitReached || isSelected)) {
       if (!isSelected) {
-        onSelectFood?.(name);
+        onSelectFood?.(foodName);
       } else {
-        onDeselectFood?.(name);
+        onDeselectFood?.(foodName);
       }
     }
   }
@@ -56,12 +56,12 @@ function FoodButton({
   return (
     <div
       className="food-button"
-      onMouseEnter={() => onMouseEnter(name)}
+      onMouseEnter={() => onMouseEnter(foodName)}
       onMouseLeave={onMouseLeave}
       style={buttonStyle}
       onClick={handleClickFood}
     >
-      <img src={imageUrl} alt={name} style={imageStyle} />
+      <img src={imageUrl} alt={foodName} style={imageStyle} />
     </div>
   );
 }

diff --git a/client/src/components/FoodInfo.jsx b/client/src/components/FoodInfo.jsx
@@ -1,7 +1,23 @@
 import React from "react";
 
-function FoodInfo() {
-  return <div></div>;
+function FoodInfo({ foodName }) {
+  return (
+    <div>
+      <h2>{foodName}</h2>
+      <div>
+        <h4 className="italic">H2O</h4>
+        <h4 className="italic">variety: ground water</h4>
+        <h4 className="italic">origin: Brussels</h4>
+      </div>
+      <h4>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+        <br />
+        Consequuntur laboriosam necessitatibus dolor nemo nihil similique
+        <br />
+        laudantium quisquam vitae esse animi!
+      </h4>
+    </div>
+  );
 }
 
 export default FoodInfo;
diff --git a/client/src/components/Foods.jsx b/client/src/components/Foods.jsx
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import ContentSection from "./ContentSection";
 import FoodButton from "./FoodButton";
 import FoodInfo from "./FoodInfo";
 
@@ -43,30 +42,54 @@ function Foods({ topic, onContinueForward }) {
       <div className="text-container">
         <div>
           <h1>THE FOODS:</h1>
-          <div style={{ position: "relative" }}>
-            <ContentSection isVisible={currentFood === ""}>
+          <div
+            style={{
+              position: "relative",
+            }}
+          >
+            <div
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                transition: "opacity 0.5s ease",
+                opacity: currentFood === "" ? 1 : 0,
+                pointerEvents: currentFood === "" ? "all" : "none",
+              }}
+            >
               <h4>
                 Please select 2-5 foods
                 <br /> to participate in the discussion about:
               </h4>
               <h4>{topic}</h4>
-            </ContentSection>
-            <ContentSection isVisible={currentFood !== ""}>
-              <FoodInfo food={currentFood} />
-            </ContentSection>
+            </div>
+            <div
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                transition: "opacity 0.5s ease",
+                opacity: currentFood !== "" ? 1 : 0,
+                pointerEvents: currentFood !== "" ? "all" : "none",
+              }}
+            >
+              <FoodInfo foodName={currentFood} />
+            </div>
           </div>
         </div>
         <div>
           <div className="food-buttons">
             <FoodButton
-              name={moderator}
+              foodName={moderator}
               onMouseEnter={handleOnMouseEnter}
               onMouseLeave={handleOnMouseLeave}
             />
             {foods.map((food) => (
               <FoodButton
                 key={food}
-                name={food}
+                foodName={food}
                 onSelectFood={selectFood}
                 onDeselectFood={deselectFood}
                 onMouseEnter={handleOnMouseEnter}

diff --git a/client/src/components/NameInput.jsx → client/src/components/HumanNameInput.jsx b/client/src/components/NameInput.jsx → client/src/components/HumanNameInput.jsx
@@ -2,9 +2,9 @@ import React, { useState, useRef, useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 
-function NameInput(props) {
-  const [name, setName] = useState("");
-  const [isNameMissing, setIsNameMissing] = useState(false);
+function HumanNameInput(props) {
+  const [humanName, setHumanName] = useState("");
+  const [isHumanNameMissing, setIsHumanNameMissing] = useState(false);
   const inputRef = useRef(null);
 
   useEffect(() => {
@@ -20,17 +20,17 @@ function NameInput(props) {
         ? inputValue.toUpperCase()
         : inputValue.charAt(0) + inputValue.slice(1);
 
-    setName(updatedValue);
+    setHumanName(updatedValue);
     if (updatedValue) {
-      setIsNameMissing(false);
+      setIsHumanNameMissing(false);
     }
   }
 
   function continueForward() {
-    if (name) {
-      props.onContinueForward({ name: name });
+    if (humanName) {
+      props.onContinueForward({ humanName: humanName });
     } else {
-      setIsNameMissing(true);
+      setIsHumanNameMissing(true);
     }
   }
 
@@ -50,7 +50,7 @@ function NameInput(props) {
           ref={inputRef}
           className="text-input name-input"
           type="text"
-          value={name}
+          value={humanName}
           placeholder="your name"
           onChange={handleChange}
           onKeyDown={handleKeyDown}
@@ -62,11 +62,11 @@ function NameInput(props) {
           style={{ cursor: "pointer" }}
         />
       </div>
-      <h3 className={`${!isNameMissing ? "hidden" : ""}`}>
+      <h3 className={`${!isHumanNameMissing ? "hidden" : ""}`}>
         please enter your name to proceed
       </h3>
     </div>
   );
 }
 
-export default NameInput;
+export default HumanNameInput;
diff --git a/client/src/components/Landing.jsx b/client/src/components/Landing.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import NameInput from "./NameInput";
+import HumanNameInput from "./HumanNameInput";
 
 function Welcome({ onContinueForward }) {
   return (
@@ -9,7 +9,7 @@ function Welcome({ onContinueForward }) {
           <h2>welcome to</h2>
           <h1>COUNCIL OF FOODS</h1>
         </div>
-        <NameInput onContinueForward={onContinueForward} />
+        <HumanNameInput onContinueForward={onContinueForward} />
       </div>
     </div>
   );

diff --git a/client/src/components/Welcome.jsx b/client/src/components/Welcome.jsx
@@ -1,9 +1,9 @@
 import React from "react";
-function Welcome({ name, onContinueForward }) {
+function Welcome({ humanName, onContinueForward }) {
   return (
     <div className="wrapper">
       <div className="text-container">
-        <h4>Dear {name}</h4>
+        <h4>Dear {humanName}</h4>
         <br />
         <h4>
           Welcome to the Council of Foods! Here you can listen to foods