Merge pull request #837 from bounswe/feature/FE/765/pred-successor-im…

…provement Feature/fe/765/pred successor improvement
bounswe · Dec 25, 2023 · 936a1da · 936a1da
2 parents 5fadc98 + 5d88b5d
commit 936a1da
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 42 deletions.
diff --git a/ludos/frontend/src/App.js b/ludos/frontend/src/App.js
@@ -23,6 +23,7 @@ import CreateEntityPage from "./pages/CreateEntityPage.js";
 import GroupPage from "./pages/GroupPage.js";
 import GroupsPage from "./pages/GroupsPage.js";
 import CreateGroupPage from "./pages/CreateGroupPage.js";
+import EmptyPage from "./pages/EmptyPage.js";
 
 function App() {
   const [games, setGames] = useState([]);
@@ -525,6 +526,14 @@ function App() {
               </Layout>
             }
           />
+          <Route
+            path="*"
+            element={
+              <Layout>
+                <EmptyPage />
+              </Layout>
+            }
+          />
         </Routes>
       </div>
     </Router>

diff --git a/ludos/frontend/src/components/GameCard.js b/ludos/frontend/src/components/GameCard.js
@@ -109,49 +109,68 @@ export default function GameCard({ game }) {
           </Box>
         </Grid>
 
-        <Grid item xs={12} sx={{ display: 'flex', flexDirection: 'row', alignItems: 'stretch', flexGrow: 1 }}>
-          <Box sx={{ marginRight: '16px', borderRadius: '20px' }}>
+        <Grid
+          item
+          xs={12}
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "stretch",
+            flexGrow: 1,
+          }}
+        >
+          <Box sx={{ marginRight: "16px", borderRadius: "20px" }}>
             <img
               src={game.coverLink}
               alt={game.title}
-              style={{ height: 150, width: 150, borderRadius: '20px' }}
+              style={{ height: 150, width: 150, borderRadius: "20px" }}
               onError={replaceImage}
             />
           </Box>
-          <Box sx={{
-            backgroundColor: '#7180B9',
-            padding: '20px',
-            borderRadius: '30px',
-            height: '150px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '100%',
-          }}>
-            <Typography sx={{ color: 'white', width: '100%' }}>
+          <Box
+            sx={{
+              backgroundColor: "#7180B9",
+              padding: "20px",
+              borderRadius: "30px",
+              height: "150px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "100%",
+            }}
+          >
+            <Typography sx={{ color: "white", width: "100%" }}>
               {game.gameBio.slice(0, 300)}...
             </Typography>
           </Box>
         </Grid>
 
-        <Grid item xs={12} sx={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}>
+        <Grid
+          item
+          xs={12}
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
           <div>
             {game?.tags.map((tag, index) => (
               <Chip
                 key={index}
                 label={tag}
                 color="primary"
-                style={{ marginRight: '4px', backgroundColor: '#F75C03', fontWeight: 'bold' }}
+                style={{
+                  marginRight: "4px",
+                  backgroundColor: "#F75C03",
+                  fontWeight: "bold",
+                }}
               />
             ))}
           </div>
         </Grid>
       </Grid>
-    </Card >
+    </Card>
   );
 }
diff --git a/ludos/frontend/src/components/RelatedGamesTab.js b/ludos/frontend/src/components/RelatedGamesTab.js
@@ -3,8 +3,18 @@ import { Typography, Grid, Box } from "@mui/material";
 import axios from "axios";
 import { useState } from "react";
 import GameCard from "./GameCard";
+import { Link } from "react-router-dom";
 
 function Description(data) {
+  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 [suggestedGames, setSuggestedGames] = useState([]);
 
   const axiosInstance = axios.create({
@@ -15,15 +25,12 @@ function Description(data) {
   });
 
   useEffect(() => {
-    axiosInstance.get(`/game/${data.gameId}/related`)
-      .then((response) => {
-        setSuggestedGames(response.data.slice(0, 5));
-        console.log(response.data)
-      })
-
+    axiosInstance.get(`/game/${data.gameId}/related`).then((response) => {
+      setSuggestedGames(response.data.slice(0, 5));
+      console.log(response.data);
+    });
   }, []);
 
-
   const headerStyle = {
     marginBottom: "8px",
     marginTop: "8px",
@@ -33,17 +40,27 @@ function Description(data) {
   };
 
   return (
-    <Grid container xs={12} style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
-
-      <Grid item xs={12} >
+    <Grid
+      container
+      xs={12}
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+      }}
+    >
+      <Grid item xs={12}>
         <Typography variant="h5" color="gray" align="left" style={headerStyle}>
           PREDECCESORS
         </Typography>
         <Typography
           variant="body1"
           color="white"
           align="left"
-          style={{ marginBottom: "8px", fontFamily: "Trebuchet MS, sans-serif" }}
+          style={{
+            marginBottom: "8px",
+            fontFamily: "Trebuchet MS, sans-serif",
+          }}
         >
           {data.predecessors.map((predecessor, index1) => (
             <Typography
@@ -55,7 +72,12 @@ function Description(data) {
               }}
               key={index1}
             >
-              {predecessor}
+              <Link
+                style={{ color: "white", textDecoration: "none" }}
+                to={`/game/${convertToSlug(predecessor)}`}
+              >
+                {predecessor}{" "}
+              </Link>
             </Typography>
           ))}
         </Typography>
@@ -69,7 +91,10 @@ function Description(data) {
           variant="body1"
           color="white"
           align="left"
-          style={{ marginBottom: "8px", fontFamily: "Trebuchet MS, sans-serif" }}
+          style={{
+            marginBottom: "8px",
+            fontFamily: "Trebuchet MS, sans-serif",
+          }}
         >
           {data.successors.map((successor, index1) => (
             <Typography
@@ -81,26 +106,35 @@ function Description(data) {
               }}
               key={index1}
             >
-              {successor}
+              <Link
+                style={{ color: "white", textDecoration: "none" }}
+                to={`/game/${convertToSlug(successor)}`}
+              >
+                {successor}{" "}
+              </Link>
             </Typography>
           ))}
         </Typography>
       </Grid>
 
       <Grid item xs={12}>
         <Box xs={4}>
-          <Typography variant="h5" color="gray" align="left" style={headerStyle}>
+          <Typography
+            variant="h5"
+            color="gray"
+            align="left"
+            style={headerStyle}
+          >
             SUGGESTED GAMES
           </Typography>
           {suggestedGames.map((game, index) => (
-            <div key={index} style={{ marginTop: '10px' }}>
+            <div key={index} style={{ marginTop: "10px" }}>
               <GameCard game={game} />
             </div>
           ))}
         </Box>
       </Grid>
-
-    </Grid >
+    </Grid>
   );
 }
 

diff --git a/ludos/frontend/src/pages/EmptyPage.js b/ludos/frontend/src/pages/EmptyPage.js
@@ -0,0 +1,45 @@
+import { Box, Container, Grid, Typography } from "@mui/material";
+import React from "react";
+
+function EmptyGamePage() {
+  return (
+    <>
+      <Container
+        style={{
+          maxWidth: "1200px",
+          margin: "162px auto",
+          maxHeight: "300px",
+        }}
+      >
+        <Grid container spacing={1}>
+          <Box
+            p={0}
+            style={{
+              width: "100%",
+              marginTop: "3%",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              display: "flex",
+              height: "10px",
+            }}
+          >
+            <Typography
+              style={{
+                fontSize: "25px",
+                color: "white",
+                fontFamily: "Trebuchet MS, sans-serif",
+              }}
+            >
+              {
+                "The content you are looking for does not exist. You can create the content by clicking on the 'Create' button on the sidebar."
+              }
+            </Typography>
+          </Box>
+        </Grid>
+      </Container>
+    </>
+  );
+}
+
+export default EmptyGamePage;
diff --git a/ludos/frontend/src/pages/GamePage.js b/ludos/frontend/src/pages/GamePage.js
@@ -576,7 +576,7 @@ function GamePage(id) {
               component="div"
               style={{ fontFamily: "Trebuchet MS, sans-serif" }}
             >
-              {game.averageRating}/5
+              {averageRating.toFixed(2)}/5
             </Typography>
           </Grid>
           <Grid item xs={12} sm={12} md={12} lg={12} style={smallBoxStyle}>
@@ -606,7 +606,7 @@ function GamePage(id) {
               component="div"
               style={{ fontFamily: "Trebuchet MS, sans-serif" }}
             >
-              {game.averageCompletionDuration}
+              {game.averageCompletionDuration.toFixed(2)} Hours
             </Typography>
           </Grid>
         </Grid>