Load games to the web

Edward-J-Xu · Mar 27, 2023 · c5f7f78 · c5f7f78
1 parent 0f6c5d3
commit c5f7f78
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 32 deletions.
diff --git a/client/src/components/card/card.css b/client/src/components/card/card.css
@@ -4,32 +4,39 @@
     position: relative;
     border-radius: 10px;
     overflow: hidden;
-    margin: 0.19rem;
+    margin: 1.19rem;
     cursor:pointer;
     min-width:200px;
-    height:300px;
+    /*border-color: blue;*/
+    /*border-style: solid;*/
+    /*border-width: 1px;*/
+    width: 320px;
+    height:150px;
     z-index:0;
     border: 1px solid rgb(99, 99, 99);
 }
 
 .cards:hover {
-    transform: scale(1.2);
+    transform: scale(1.15);
     z-index: 1000;
     box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
 }
 
 .cards__img {
-    height: 300px;
+    height: 150px;
 }
 
 .cards__overlay {
     position: absolute;
+    /*border-color: blue;*/
+    /*border-style: solid;*/
+    /*border-width: 10px;*/
     padding: 0 1rem 1rem 1rem;
     bottom: 0px;
-    height: 290px;
+    height: 100%;
     display: flex;
     flex-direction: column;
-    width: 85%;
+    width: 290px;
     justify-content: flex-end;
     background-image: linear-gradient(rgb(0,0,0,0), rgb(0,0,0,1));
     opacity: 0;
@@ -59,4 +66,5 @@
     font-style: italic;
     font-size: .75rem;
     margin-bottom: 0.25rem;
+    width: 100%;
 }
diff --git a/client/src/components/card/card.js b/client/src/components/card/card.js
@@ -10,16 +10,16 @@ const Cards = ({game}) => {
     useEffect(() => {
         setTimeout(() => {
             setIsLoading(false)
-        }, 1500)
-    }, []) 
+        }, 300)
+    }, [])
 
     return <>
     {
         isLoading
         ?
         <div className="cards">
             <SkeletonTheme color="#202020" highlightColor="#444">
-                <Skeleton height={300} duration={2} />
+                <Skeleton height={150}  />
             </SkeletonTheme>
         </div>
         :

diff --git a/client/src/components/gameList/gameList.js b/client/src/components/gameList/gameList.js
@@ -9,28 +9,41 @@ const GameList = () => {
   const [gameList, setGameList] = useState([]);
   const { type } = useParams();
 
-  useEffect(() => {
-    const getData = () => {
-      Papa.parse(gameDataCSV, {
-        header: true,
-        download: true,
-        dynamicTyping: true,
-        complete: (results) => {
-          let data = results.data;
-          if (type) {
-            if (type.toLowerCase() === "popular" || type.toLowerCase() === "top_rated") {
-              data.sort((a, b) => b.rating - a.rating);
-              data = data.slice(0, 50); // Show top 50 games
-            } else {
-              data = data.filter((game) => game.genre.toLowerCase() === type.toLowerCase());
-            }
+  const getData = () => {
+    Papa.parse(gameDataCSV, {
+      header: true,
+      download: true,
+      dynamicTyping: true,
+      complete: (results) => {
+        let data = results.data;
+        if (type) {
+          if (type.toLowerCase() === "popular" || type.toLowerCase() === "top_rated") {
+            data.sort((a, b) => b.rating - a.rating);
+            data = data.slice(0, 50); // Show top 50 games
+          } else {
+            data = data.filter((game) => game.genre.toLowerCase() === type.toLowerCase());
           }
-          setGameList(data);
-        },
-      });
-    };
+        }
+        setGameList(data);
+      },
+    });
+  };
+
+  const getData2 = () => {
+    fetch(`http://localhost:3001/games`)
+        .then(res => {
+            console.log(res)
+            return res.json()
+        })
+        .then(data => {
+          console.log("data: ", data)
+          setGameList(data)
+        })
+  }
 
-    getData();
+
+  useEffect(() => {
+    getData2();
   }, [type]);
 
   return (

diff --git a/client/src/pages/gameDetail/game.js b/client/src/pages/gameDetail/game.js
@@ -9,7 +9,7 @@ const Game = () => {
   const { id } = useParams();
 
   useEffect(() => {
-    getData();
+    getData2();
     window.scrollTo(0, 0);
   }, []);
 
@@ -25,6 +25,14 @@ const Game = () => {
     });
   };
 
+
+  const getData2 = () => {
+    fetch(`http://localhost:3001/games/${id}`)
+        .then(res => res.json())
+        .then(data => setGame(data))
+  }
+
+
   return (
     <div className="game">
       <div className="game__intro">

diff --git a/client/src/pages/posts/Post.js b/client/src/pages/posts/Post.js
@@ -41,6 +41,7 @@ function Post() {
     useEffect(() => {
         // Get Posts
         axios.get(`http://localhost:3001/posts/byId/${id}`).then((response) => {
+            console.log("posts: ", response)
             setPostObject(response.data);
         });
 
@@ -86,7 +87,7 @@ function Post() {
             .then(() => {
                 setComments(
                     comments.filter((val) => {
-                        return val.id != id;
+                        return val.id !== id;
                     })
                 );
             });

diff --git a/client/src/pages/posts/postApp.js b/client/src/pages/posts/postApp.js
@@ -28,6 +28,7 @@ const PostApp = () => {
                     },
                 })
                 .then((response) => {
+                    console.log("posts: ", response)
                     setListOfPosts(response.data.listOfPosts);
                     setLikedPosts(
                         response.data.likedPosts.map((like) => {

diff --git a/server/routes/Games.js b/server/routes/Games.js
@@ -7,6 +7,7 @@ router.get("/", async (req, res) => {
     const [data, metaData] = await db.pool.query(
         "select * from game"
     )
+    console.log("call get game api: ", data[0])
     res.json(data)
 })
 
@@ -17,7 +18,7 @@ router.get("/:id", async (req, res) => {
         "select * from game where game_id = (?)", [
         id,
     ]);
-    console.log("viewing a post: ", JSON.stringify(data[0]));
+    console.log("getting a game: ", data[0]);
     res.json(data[0]);
 });