Add foods json

Nonhuman-Nonsense · Apr 5, 2024 · cac43e9 · cac43e9
1 parent 508d5c3
commit cac43e9
Show file tree

Hide file tree

Showing 10 changed files with 258 additions and 57 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -12,6 +12,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "socket.io-client": "^4.7.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/client/public/index.html b/client/public/index.html
@@ -40,6 +40,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Council of Foods</title>
+    <script src="/socket.io/socket.io.js"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/client/src/App.js b/client/src/App.js
@@ -67,16 +67,25 @@ function App() {
   }
 
   return (
-    <div className="App" style={backgroundStyle}>
+    <div
+      className="App"
+      style={backgroundStyle}
+    >
       <Overlay isActive={isActiveOverlay && currentView !== "council"}>
         {currentView === "landing" ? (
           <Landing onContinueForward={continueForward} />
         ) : currentView === "welcome" ? (
-          <Welcome humanName={humanName} onContinueForward={continueForward} />
+          <Welcome
+            humanName={humanName}
+            onContinueForward={continueForward}
+          />
         ) : currentView === "topics" ? (
           <Topics onContinueForward={continueForward} />
         ) : currentView === "foods" ? (
-          <Foods topic={topic} onContinueForward={continueForward} />
+          <Foods
+            topic={topic}
+            onContinueForward={continueForward}
+          />
         ) : (
           <Council
             options={{

diff --git a/client/src/components/Council.jsx b/client/src/components/Council.jsx
@@ -1,4 +1,6 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import io from "socket.io-client";
+import foodsData from "../foods.json";
 import FoodItem from "./FoodItem";
 import Overlay from "./Overlay";
 import About from "./About";
@@ -12,6 +14,7 @@ import useWindowSize from "../hooks/useWindowSize";
 
 function Council({ options }) {
   const { foods } = options;
+  const { foodsData } = foodsData;
   const [activeOverlay, setActiveOverlay] = useState(""); // Tracks which overlay to show
   const { width: screenWidth } = useWindowSize();
 
@@ -26,6 +29,13 @@ function Council({ options }) {
     alignItems: "center",
   };
 
+  // Test socket
+  useEffect(() => {
+    const socket = io();
+
+    console.log(socket);
+  }, []);
+
   function displayResetWarning() {
     setActiveOverlay("reset");
   }
@@ -72,7 +82,10 @@ function Council({ options }) {
     <div style={{ height: "100%", width: "100%" }}>
       <div className="wrapper">
         {activeOverlay === "" && (
-          <div className="text-container" style={{ justifyContent: "end" }}>
+          <div
+            className="text-container"
+            style={{ justifyContent: "end" }}
+          >
             <TextOutput />
           </div>
         )}

diff --git a/client/src/components/FoodButton.jsx b/client/src/components/FoodButton.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 function FoodButton({
-  foodName,
+  food,
   onSelectFood,
   onDeselectFood,
   onMouseEnter,
@@ -11,14 +11,14 @@ function FoodButton({
 }) {
   const isModerator = onSelectFood === undefined;
 
-  const imageUrl = `/images/foods/${foodName}.png`;
+  const imageUrl = `/images/foods/${food.name}.png`;
 
   function handleClickFood() {
     if (!isModerator && (!selectLimitReached || isSelected)) {
       if (!isSelected) {
-        onSelectFood?.(foodName);
+        onSelectFood?.(food);
       } else {
-        onDeselectFood?.(foodName);
+        onDeselectFood?.(food);
       }
     }
   }
@@ -32,6 +32,10 @@ function FoodButton({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
+    cursor:
+      isModerator || (selectLimitReached && !isSelected)
+        ? "default"
+        : "pointer",
     border: isModerator
       ? "4px solid white"
       : isSelected
@@ -45,22 +49,22 @@ function FoodButton({
     width: "80%",
     height: "80%",
     objectFit: "cover",
-    cursor:
-      isModerator || (selectLimitReached && !isSelected)
-        ? "default"
-        : "pointer",
     borderRadius: "50%",
   };
 
   return (
     <div
       className="food-button"
-      onMouseEnter={() => onMouseEnter(foodName)}
+      onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       style={buttonStyle}
       onClick={handleClickFood}
     >
-      <img src={imageUrl} alt={foodName} style={imageStyle} />
+      <img
+        src={imageUrl}
+        alt={food.name}
+        style={imageStyle}
+      />
     </div>
   );
 }

diff --git a/client/src/components/FoodInfo.jsx b/client/src/components/FoodInfo.jsx
@@ -1,16 +1,22 @@
 import React from "react";
 import { capitalizeFirstLetter } from "../utils.js";
 
-function FoodInfo({ foodName }) {
-  const capitalizedFoodName = capitalizeFirstLetter(foodName);
+function FoodInfo({ food }) {
+  if (!food) {
+    return null;
+  }
+
+  console.log(food.name);
+
+  const capitalizedFoodName = capitalizeFirstLetter(food.name);
 
   return (
     <div>
       <h2>{capitalizedFoodName}</h2>
       <div>
         <h4 className="italic">Lorem</h4>
-        <h4 className="italic">Variety: Lorem ipsum</h4>
-        <h4 className="italic">Origin: Lorem</h4>
+        <h4 className="italic">Variety: {food.variety}</h4>
+        <h4 className="italic">Origin: {food.origin}</h4>
       </div>
       <h4>
         Lorem ipsum dolor, sit amet consectetur adipisicing elit.