Merge pull request #739 from bounswe/feature/FE/652/entity-page-revision

added entitites to game page and entity page revised
bounswe · Dec 17, 2023 · 8cd2a18 · 8cd2a18
2 parents 01e330f + e95a2ee
commit 8cd2a18
Show file tree

Hide file tree

Showing 3 changed files with 208 additions and 76 deletions.
diff --git a/ludos/frontend/src/components/EntityTab.js b/ludos/frontend/src/components/EntityTab.js
@@ -1,7 +1,70 @@
-import React from "react";
-import { Typography, Grid } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { Typography, Grid, Button } from "@mui/material";
+import axios from "axios";
+import { Link, useNavigate } from "react-router-dom";
+
+function EntityTab(data) {
+  const [characters, setCharacters] = useState([]);
+  const [items, setItems] = useState([]);
+  const [areas, setAreas] = useState([]);
+  const [packages, setPackages] = useState([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const link = `http://${process.env.REACT_APP_API_URL}/entity/game/${data.gameId}`;
+
+    axios
+      .get(link, {
+        headers: {
+          Authorization: "Bearer " + localStorage.getItem("accessToken"),
+        },
+      })
+      .then((response) => {
+        let chars = [];
+        let its = [];
+        let ars = [];
+        let pcks = [];
+        response.data.map((entity, index) => {
+          if (entity.type === "character") {
+            chars.push(entity);
+          } else if (entity.type === "item") {
+            its.push(entity);
+          } else if (entity.type === "area") {
+            ars.push(entity);
+          } else if (entity.type === "package") {
+            pcks.push(entity);
+          }
+        });
+        setCharacters(chars);
+        setItems(its);
+        setAreas(ars);
+        setPackages(pcks);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }, []);
+
+  const handleAddEntityClick = () => {
+    if (data.auth) {
+      // If the user is logged in, redirect to the create game page
+      navigate("/create-entity");
+    } else {
+      // If the user is not logged in, redirect to the login page
+      navigate("/signup");
+    }
+  };
+
+  const entityButtonStyle = {
+    backgroundColor: "rgb(125, 165, 0)",
+    color: "rgb(255, 255, 255)",
+    height: "20px",
+    width: "15%",
+    marginLeft: "0%",
+    textTransform: "none",
+    fontFamily: "Trebuchet MS, sans-serif",
+  };
 
-function Description(data) {
   const headerStyle = {
     marginBottom: "8px",
     marginTop: "8px",
@@ -20,7 +83,7 @@ function Description(data) {
         align="left"
         style={{ marginBottom: "8px", fontFamily: "Trebuchet MS, sans-serif" }}
       >
-        {data.characters.map((character, index1) => (
+        {characters.map((character, index1) => (
           <Typography
             variant="body1"
             color="white"
@@ -30,7 +93,12 @@ function Description(data) {
             }}
             key={index1}
           >
-            {character}
+            <Link
+              style={{ color: "white", textDecoration: "none" }}
+              to={`/entity/${character.id}`}
+            >
+              {character.name}
+            </Link>
           </Typography>
         ))}
       </Typography>
@@ -43,7 +111,7 @@ function Description(data) {
         align="left"
         style={{ marginBottom: "8px", fontFamily: "Trebuchet MS, sans-serif" }}
       >
-        {data.items.map((item, index1) => (
+        {items.map((item, index1) => (
           <Typography
             variant="body1"
             color="white"
@@ -53,7 +121,12 @@ function Description(data) {
             }}
             key={index1}
           >
-            {item}
+            <Link
+              style={{ color: "white", textDecoration: "none" }}
+              to={`/entity/${item.id}`}
+            >
+              {item.name}
+            </Link>
           </Typography>
         ))}
       </Typography>
@@ -66,7 +139,7 @@ function Description(data) {
         align="left"
         style={{ marginBottom: "8px", fontFamily: "Trebuchet MS, sans-serif" }}
       >
-        {data.areas.map((area, index1) => (
+        {areas.map((area, index1) => (
           <Typography
             variant="body1"
             color="white"
@@ -76,7 +149,12 @@ function Description(data) {
             }}
             key={index1}
           >
-            {area}
+            <Link
+              style={{ color: "white", textDecoration: "none" }}
+              to={`/entity/${area.id}`}
+            >
+              {area.name}
+            </Link>
           </Typography>
         ))}
       </Typography>
@@ -89,7 +167,7 @@ function Description(data) {
         align="left"
         style={{ marginBottom: "8px", fontFamily: "Trebuchet MS, sans-serif" }}
       >
-        {data.packages.map((dlc, index1) => (
+        {packages.map((dlc, index1) => (
           <Typography
             variant="body1"
             color="white"
@@ -99,12 +177,30 @@ function Description(data) {
             }}
             key={index1}
           >
-            {dlc}
+            <Link
+              style={{ color: "white", textDecoration: "none" }}
+              to={`/entity/${dlc.id}`}
+            >
+              {dlc.name}
+            </Link>
           </Typography>
         ))}
       </Typography>
+      <Typography
+        variant="h5"
+        color="gray"
+        align="left"
+        style={headerStyle}
+      ></Typography>
+      <Button
+        variant="contained"
+        style={entityButtonStyle}
+        onClick={handleAddEntityClick}
+      >
+        Add an Entity
+      </Button>
     </Grid>
   );
 }
 
-export default Description;
+export default EntityTab;
diff --git a/ludos/frontend/src/pages/EntityPage.js b/ludos/frontend/src/pages/EntityPage.js
@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { Container, Grid, Box, Typography } from "@mui/material";
 import axios from "axios";
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 
 function EntityPage() {
+  const [shortEntityFeatures, setShortEntityFeatures] = useState({});
+  const [longEntityFeatures, setLongEntityFeatures] = useState({});
   const [entity, setEntity] = useState({});
   let { entityId } = useParams();
-  console.log(entity);
 
   useEffect(() => {
     const link = `http://${process.env.REACT_APP_API_URL}/entity/${entityId}`;
@@ -19,13 +20,43 @@ function EntityPage() {
       })
       .then((response) => {
         setEntity(response.data);
-        console.log(response.data);
+        let shorts = {};
+        let longs = {};
+        Object.keys(response.data?.content).map((keyName, i) => {
+          if (
+            response.data.content[keyName].length < 50 &&
+            keyName !== "Image Link"
+          ) {
+            shorts = {
+              ...shorts,
+              [keyName]: response.data?.content[keyName],
+            };
+          } else if (keyName !== "Image Link") {
+            longs = {
+              ...longs,
+              [keyName]: response.data?.content[keyName],
+            };
+          }
+          setShortEntityFeatures(shorts);
+          setLongEntityFeatures(longs);
+          setEntity(response.data);
+        });
       })
       .catch((error) => {
         console.log(error);
       });
   }, []);
 
+  const convertToSlug = (text) => {
+    return text
+      ?.toString()
+      ?.toLowerCase()
+      ?.trim()
+      ?.replace(/[\s_]/g, "-") // Replace spaces or underscores with dashes
+      ?.replace(/[^\w-]+/g, "") // Remove non-word characters except dashes
+      ?.replace(/--+/g, "-"); // Replace multiple dashes with single dash
+  };
+
   const headerStyle = {
     marginBottom: "8px",
     fontFamily: "Trebuchet MS, sans-serif",
@@ -88,66 +119,69 @@ function EntityPage() {
         </Box>
         <Grid item xs={12} sm={3} md={3} lg={3} style={imageBoxStyle}>
           <img
-            src={entity?.content?.image}
+            src={entity?.content?.["Image Link"]}
             alt={entity?.name}
             style={{ height: 350, width: 250 }}
           />
-          {entity?.content &&
-            Object.keys(entity?.content).map((keyName, i) =>
-              keyName === "image" ? null : (
-                <Box style={smallBoxStyle} key={i}>
-                  <Typography
-                    component="legend"
-                    style={{ fontFamily: "Trebuchet MS, sans-serif" }}
-                  >
-                    {keyName}: {entity?.content[keyName]}
-                  </Typography>
-                </Box>
-              ),
-            )}
+          <Box style={smallBoxStyle}>
+            <Typography
+              component="legend"
+              style={{ fontFamily: "Trebuchet MS, sans-serif" }}
+            >
+              <Link
+                style={{ color: smallBoxStyle.color, textDecoration: "none" }}
+                to={`/game/${convertToSlug(entity.game?.title)}`}
+              >
+                Game: {entity.game?.title}
+              </Link>
+            </Typography>
+          </Box>
+          <Box style={smallBoxStyle}>
+            <Typography
+              component="legend"
+              style={{ fontFamily: "Trebuchet MS, sans-serif" }}
+            >
+              Entity Type:{" "}
+              {entity.type?.charAt(0).toUpperCase() + entity.type?.slice(1)}
+            </Typography>
+          </Box>
+          {Object.keys(shortEntityFeatures).map((keyName, i) => (
+            <Box style={smallBoxStyle} key={i}>
+              <Typography
+                component="legend"
+                style={{ fontFamily: "Trebuchet MS, sans-serif" }}
+              >
+                {keyName}: {shortEntityFeatures[keyName]}
+              </Typography>
+            </Box>
+          ))}
         </Grid>
         <Grid item xs={12} sm={8} md={8} lg={8} style={{ width: "100%" }}>
-          <Typography
-            variant="body1"
-            color="white"
-            align="left"
-            style={{
-              marginBottom: "8px",
-              fontFamily: "Trebuchet MS, sans-serif",
-              marginLeft: "2%",
-            }}
-          >
-            {entity.bio}
-            {
-              "Nina Williams (ニーナ・ウィリアムズ Nīna Wiriamuzu?) is a cold-blooded Irish assassin that made her first appearance in the original Tekken game and has appeared in every Tekken game since. Nina has a lethal fighting style, consisting of throws, grapples, and holds. She has an infamous rivalry with her younger sister, Anna Williams."
-            }
-          </Typography>
-          <Typography
-            variant="h5"
-            color="gray"
-            align="left"
-            style={headerStyle}
-          >
-            STORY
-          </Typography>
-          <Typography
-            variant="body1"
-            color="white"
-            align="left"
-            style={{
-              marginBottom: "8px",
-              fontFamily: "Trebuchet MS, sans-serif",
-              marginLeft: "2%",
-            }}
-          >
-            Nina and her younger sister are from a family of assassins hailing
-            from the Republic of Ireland. Nina was trained in assassination arts
-            by her father and in aikido by her mother. Anna was trained
-            alongside Nina, and the two developed a deadly rivalry, often
-            attempting to humiliate or kill one another.
-          </Typography>
+          {Object.keys(longEntityFeatures).map((keyName, i) => (
+            <>
+              <Typography
+                variant="h5"
+                color="gray"
+                align="left"
+                style={headerStyle}
+              >
+                {keyName}
+              </Typography>
+              <Typography
+                variant="body1"
+                color="white"
+                align="left"
+                style={{
+                  marginBottom: "8px",
+                  fontFamily: "Trebuchet MS, sans-serif",
+                  marginLeft: "2%",
+                }}
+              >
+                {longEntityFeatures[keyName]}
+              </Typography>
+            </>
+          ))}
         </Grid>
-        <Grid style={{ width: "100%" }}></Grid>
       </Grid>
     </Container>
   );

diff --git a/ludos/frontend/src/pages/GamePage.js b/ludos/frontend/src/pages/GamePage.js
@@ -679,7 +679,14 @@ function GamePage(id) {
                 </Typography>
               </TabPanel>
               <TabPanel value="3">
-                <Typography style={{ fontSize: "15px", color: "white", display: 'flex', justifyContent: 'center' }}>
+                <Typography
+                  style={{
+                    fontSize: "15px",
+                    color: "white",
+                    display: "flex",
+                    justifyContent: "center",
+                  }}
+                >
                   <RelatedGames
                     predecessors={game.predecessors}
                     successors={game.successors}
@@ -689,12 +696,7 @@ function GamePage(id) {
               </TabPanel>
               <TabPanel value="4">
                 <Typography style={{ fontSize: "15px", color: "white" }}>
-                  <EntityTab
-                    characters={game.characters}
-                    areas={game.areas}
-                    items={game.items}
-                    packages={game.packages}
-                  />
+                  <EntityTab gameId={game.id} auth={auth} />
                 </Typography>
               </TabPanel>
               <TabPanel value="5">