gamelist and game

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

Hide file tree

Showing 10 changed files with 138 additions and 119 deletions.
diff --git a/client/src/components/card/card.js b/client/src/components/card/card.js
@@ -23,16 +23,16 @@ const Cards = ({game}) => {
             </SkeletonTheme>
         </div>
         :
-        <Link to={`/game/${game.id}`} style={{textDecoration:"none", color:"white"}}>
+        <Link to={`/game/${game.game_id}`} style={{textDecoration:"none", color:"white"}}>
             <div className="cards">
-                <img className="cards__img" src={`https://image.tmdb.org/t/p/original${game?game.poster_path:""}`} />
+                <img className="cards__img" src={game.game_image ? game.game_image : ""} alt={game.name} />
                 <div className="cards__overlay">
-                    <div className="card__title">{game?game.original_title:""}</div>
+                    <div className="card__title">{game.name}</div>
                     <div className="card__runtime">
-                        {game?game.release_date:""}
-                        <span className="card__rating">{game?game.vote_average:""}<i className="fas fa-star" /></span>
+                        {`${game.release_year}-${game.release_month}-${game.release_day}`}
+                        <span className="card__rating">{game.rating}<i className="fas fa-star" /></span>
                     </div>
-                    <div className="card__description">{game ? game.overview.slice(0,118)+"..." : ""}</div>
+                    <div className="card__description">{game.description ? game.description.slice(0,118)+"..." : ""}</div>
                 </div>
             </div>
         </Link>

diff --git a/client/src/components/gameList/gameList.js b/client/src/components/gameList/gameList.js
@@ -1,39 +1,48 @@
-import React, {useEffect, useState} from "react"
-import "./gameList.css"
-import { useParams } from "react-router-dom"
-import Cards from "../card/card"
+import React, { useEffect, useState } from "react";
+import "./gameList.css";
+import { useParams } from "react-router-dom";
+import Cards from "../card/card";
+import Papa from "papaparse";
+import gameDataCSV from "../../database/gamedb.csv";
 
 const GameList = () => {
-
-    const [gameList, setGameList] = useState([])
-    const {type} = useParams()
-
-    useEffect(() => {
-        getData()
-    }, [])
-
-    useEffect(() => {
-        getData()
-    }, [type])
+  const [gameList, setGameList] = useState([]);
+  const { type } = useParams();
 
+  useEffect(() => {
     const getData = () => {
-        fetch(`https://api.themoviedb.org/3/movie/${type ? type : "popular"}?api_key=4e44d9029b1270a757cddc766a1bcb63&language=en-US`)
-        .then(res => res.json())
-        .then(data => setGameList(data.results))
-    }
+      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);
+        },
+      });
+    };
+
+    getData();
+  }, [type]);
 
-    return (
-        <div className="game__list">
-            <h2 className="list__title">{(type ? type : "POPULAR").toUpperCase()}</h2>
-            <div className="list__cards">
-                {
-                    gameList.map(game => (
-                        <Cards game={game} />
-                    ))
-                }
-            </div>
-        </div>
-    )
-}
+  return (
+    <div className="game__list">
+      <h2 className="list__title">{(type ? type : "ALL").toUpperCase()}</h2>
+      <div className="list__cards">
+        {gameList.map((game) => (
+          <Cards key={game.game_id} game={game} />
+        ))}
+      </div>
+    </div>
+  );
+};
 
-export default GameList
+export default GameList;
diff --git a/database/game.sql → client/src/database/game.sql b/database/game.sql → client/src/database/game.sql
diff --git a/database/gamedb.csv → client/src/database/gamedb.csv b/database/gamedb.csv → client/src/database/gamedb.csv
diff --git a/database/gamedbcreate.ipynb → client/src/database/gamedbcreate.ipynb b/database/gamedbcreate.ipynb → client/src/database/gamedbcreate.ipynb
diff --git a/client/src/database/package-lock.json b/client/src/database/package-lock.json
diff --git a/database/steamdb.json → client/src/database/steamdb.json b/database/steamdb.json → client/src/database/steamdb.json
diff --git a/client/src/pages/gameDetail/game.js b/client/src/pages/gameDetail/game.js
@@ -1,90 +1,78 @@
-import React, {useEffect, useState} from "react"
-import "./game.css"
-import { useParams } from "react-router-dom"
+import React, { useEffect, useState } from "react";
+import "./game.css";
+import { useParams } from "react-router-dom";
+import Papa from "papaparse";
+import gameDataCSV from "../../database/gamedb.csv";
 
 const Game = () => {
-    const [currentGameDetail, setGame] = useState()
-    const { id } = useParams()
+  const [currentGameDetail, setGame] = useState();
+  const { id } = useParams();
 
-    useEffect(() => {
-        getData()
-        window.scrollTo(0,0)
-    }, [])
+  useEffect(() => {
+    getData();
+    window.scrollTo(0, 0);
+  }, []);
 
-    const getData = () => {
-        fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=4e44d9029b1270a757cddc766a1bcb63&language=en-US`)
-        .then(res => res.json())
-        .then(data => setGame(data))
-    }
+  const getData = () => {
+    Papa.parse(gameDataCSV, {
+      header: true,
+      download: true,
+      dynamicTyping: true,
+      complete: (results) => {
+        const game = results.data.find((game) => game.game_id === parseInt(id));
+        setGame(game);
+      },
+    });
+  };
 
-    return (
-        <div className="game">
-            <div className="game__intro">
-                <img className="game__backdrop" src={`https://image.tmdb.org/t/p/original${currentGameDetail ? currentGameDetail.backdrop_path : ""}`} />
+  return (
+    <div className="game">
+      <div className="game__intro">
+        <img
+          className="game__backdrop"
+          src={currentGameDetail ? currentGameDetail.game_image : ""}
+        />
+      </div>
+      <div className="game__detail">
+        <div className="game__detailLeft">
+          <div className="game__posterBox">
+            <img
+              className="game__poster"
+              src={currentGameDetail ? currentGameDetail.game_image : ""}
+            />
+          </div>
+        </div>
+        <div className="game__detailRight">
+          <div className="game__detailRightTop">
+            <div className="game__name">
+              {currentGameDetail ? currentGameDetail.name : ""}
+            </div>
+            <div className="game__genre">
+              {currentGameDetail ? currentGameDetail.genre : ""}
+            </div>
+            <div className="game__rating">
+              {currentGameDetail ? currentGameDetail.rating : ""}
+              <i className="fas fa-star" />
             </div>
-            <div className="game__detail">
-                <div className="game__detailLeft">
-                    <div className="game__posterBox">
-                        <img className="game__poster" src={`https://image.tmdb.org/t/p/original${currentGameDetail ? currentGameDetail.poster_path : ""}`} />
-                    </div>
-                </div>
-                <div className="game__detailRight">
-                    <div className="game__detailRightTop">
-                        <div className="game__name">{currentGameDetail ? currentGameDetail.original_title : ""}</div>
-                        <div className="game__tagline">{currentGameDetail ? currentGameDetail.tagline : ""}</div>
-                        <div className="game__rating">
-                            {currentGameDetail ? currentGameDetail.vote_average: ""} <i class="fas fa-star" />
-                            <span className="game__voteCount">{currentGameDetail ? "(" + currentGameDetail.vote_count + ") votes" : ""}</span>
-                        </div>  
-                        <div className="game__runtime">{currentGameDetail ? currentGameDetail.runtime + " mins" : ""}</div>
-                        <div className="game__releaseDate">{currentGameDetail ? "Release date: " + currentGameDetail.release_date : ""}</div>
-                        <div className="game__genres">
-                            {
-                                currentGameDetail && currentGameDetail.genres
-                                ? 
-                                currentGameDetail.genres.map(genre => (
-                                    <><span className="game__genre" id={genre.id}>{genre.name}</span></>
-                                )) 
-                                : 
-                                ""
-                            }
-                        </div>
-                    </div>
-                    <div className="game__detailRightBottom">
-                        <div className="synopsisText">Synopsis</div>
-                        <div>{currentGameDetail ? currentGameDetail.overview : ""}</div>
-                    </div>
-
-                </div>
+            <div className="game__developer">
+              {currentGameDetail ? currentGameDetail.developer : ""}
             </div>
-            <div className="game__links">
-                <div className="game__heading">Useful Links</div>
-                {
-                    currentGameDetail && currentGameDetail.homepage && <a href={currentGameDetail.homepage} target="_blank" style={{textDecoration: "none"}}><p><span className="game__homeButton game__Button">Homepage <i className="newTab fas fa-external-link-alt"></i></span></p></a>
-                }
-                {
-                    currentGameDetail && currentGameDetail.imdb_id && <a href={"https://www.imdb.com/title/" + currentGameDetail.imdb_id} target="_blank" style={{textDecoration: "none"}}><p><span className="game__steamButton game__Button">Steam<i className="newTab fas fa-external-link-alt"></i></span></p></a>
-                }
+            <div className="game__releaseDate">
+              {currentGameDetail
+                ? `Release date: ${currentGameDetail.release_year}-${currentGameDetail.release_month}-${currentGameDetail.release_day}`
+                : ""}
             </div>
-            <div className="game__heading">Production companies</div>
-            <div className="game__production">
-                {
-                    currentGameDetail && currentGameDetail.production_companies && currentGameDetail.production_companies.map(company => (
-                        <>
-                            {
-                                company.logo_path 
-                                && 
-                                <span className="productionCompanyImage">
-                                    <img className="game__productionComapany" src={"https://image.tmdb.org/t/p/original" + company.logo_path} />
-                                    <span>{company.name}</span>
-                                </span>
-                            }
-                        </>
-                    ))
-                }
+          </div>
+          <div className="game__detailRightBottom">
+            <div className="synopsisText">Synopsis</div>
+            <div>
+              {currentGameDetail ? currentGameDetail.description : ""}
             </div>
+          </div>
         </div>
-    )
-}
+      </div>
+    </div>
+  );
+};
 
-export default Game
+export default Game;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "papaparse": "^5.4.1"
+  }
+}