Skip to content

Commit

Permalink
FIX/REFACTOR: Massive Code Refactor for Homepage to be able to select…
Browse files Browse the repository at this point in the history 
… games by genre and platform
  • Loading branch information
@pmAdriaan
pmAdriaan committed Feb 15, 2024
1 parent b8172ec commit 22a6994
Show file tree
Hide file tree
Showing 9 changed files with 311 additions and 385 deletions.
72 changes: 0 additions & 72 deletions src/components/GamesByGenre.jsx
View file

This file was deleted.

54 changes: 0 additions & 54 deletions src/components/GamesByPlatform.jsx
View file

This file was deleted.

45 changes: 45 additions & 0 deletions src/components/MainContent.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from "react";
import GameBanner from "./GameBanner";
import RawgGamesByGenreAndPlatformId from "./RawgGamesByGenreAndPlatformId";
import Loading from "./Loading";

const MainContent = ({
allGamesByGenreIdAndPlatformId,
randomGames,
selectedGenreName,
selectedPlatformName,
currentPage,
onPrevPage,
onNextPage,
}) => (
<div className="col-span-4 md:col-span-3 bg-primary text-text">
{randomGames.length > 0 ? <GameBanner randomGames={randomGames} /> : <Loading />}

<RawgGamesByGenreAndPlatformId
gamesByGenreAndPlatformList={allGamesByGenreIdAndPlatformId}
genreName={selectedGenreName}
platformName={selectedPlatformName}
pageNumber={currentPage}
/>

{/* Pagination Controls */}
<div className="text-text flex justify-center items-center gap-5 my-20">
<button
className="bg-secondary hover:text-white hover:bg-accent px-4 py-2 rounded-lg mr-2"
onClick={onPrevPage}
disabled={currentPage === 1}
>
Previous Page
</button>
<button
className="bg-secondary hover:text-white hover:bg-accent px-4 py-2 rounded-lg"
onClick={onNextPage}
>
Next Page
</button>
</div>
{/* Other components */}
</div>
);

export default MainContent;
119 changes: 119 additions & 0 deletions src/components/NavigationSidebar.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import React, { useEffect } from "react";
import CollapsibleSection from "./CollapsibleSection";
import { Link } from "react-router-dom";

const NavigationSidebar = ({
genreList,
displayedGenres,
genreActiveIndex,
onShowMore,
onShowLess,
onGenreSelect,
platformList,
displayedPlatforms,
platformActiveIndex,
onShowMorePlatforms,
onShowLessPlatforms,
onPlatformSelect,
}) => {

useEffect(() => {
console.log("Navigation bar Genre id: " + genreActiveIndex);
console.log("Navigations bar Platform id: " + platformActiveIndex);

});

return (
<div className="bg-secondary text-text hidden md:block">
<Link to="/streams/">
<div className="p-5 hover:bg-accent hover:text-white ">
<h2 className="text-2xl font-bold">Top Streaming</h2>
</div>
</Link>

<Link to="/games/top">
<div className="p-5 hover:bg-accent hover:text-white">
<h2 className="text-2xl font-bold ">Top Rated</h2>
</div>
</Link>

<div className="bg-secondary p-5 rounded-md shadow-md">
{/* Collapsible Genres Section */}
<CollapsibleSection title="Genres">
{genreList.slice(0, displayedGenres).map((item, index) => (
<div
key={item.id}
onClick={() => {
onGenreSelect(item.id);
}}
className={`flex gap-2 items-center mb-2 mt-3 px-2 py-2 cursor-pointer hover:bg-accent hover:text-white group rounded-lg ${genreActiveIndex === item.id ? "bg-accent" : ""
}`}
>
{/* Genre image */}
<img
src={item.image_background}
alt={`Genre ${item.name} background`}
className={`w-[40px] h-[40px] object-cover rounded-lg group-hover:scale-110 transition-all ease-out duration-300 ${genreActiveIndex === index ? "scale-110" : ""
}`}
/>

{/* Genre name */}
<h3 className={`text-[18px] group-hover:font-bold transition-all ease-out duration-300 ${genreActiveIndex === index ? "font-bold text-white" : ""
}`}>{item.name}</h3>
</div>
))}

{/* Show more/less buttons */}
<div className="flex justify-between mt-4">
<button onClick={onShowMore} className="bg-primary text-text px-4 py-2 rounded-md hover:bg-success hover:opacity-90 transition duration-150 ease-in-out">
Show More
</button>
{displayedGenres > 5 && (
<button onClick={onShowLess} className="bg-primary text-text px-4 py-2 rounded-md hover:bg-error hover:opacity-90 transition duration-150 ease-in-out">
Show Less
</button>
)}
</div>
</CollapsibleSection>
</div>

{/* Collapsible Platforms Section */}
<div className="bg-secondary p-5 rounded-md shadow-md">
<CollapsibleSection title="Platforms">
{platformList.slice(0, displayedPlatforms).map((item, index) => (
<div
key={item.id}
onClick={() => {
onPlatformSelect(item.id);
}}
className={`flex gap-2 items-center mb-2 mt-3 px-2 py-2 cursor-pointer hover:bg-accent hover:text-white group rounded-lg ${platformActiveIndex === item.id ? "bg-accent" : ""
}`}
>
<img
src={item.image_background}
alt={`Platform ${item.name} background`}
className={`w-[40px] h-[40px] object-cover rounded-lg group-hover:scale-110 transition-all ease-out duration-300 ${platformActiveIndex === index ? "scale-110" : ""
}`}
/>
<h3 className={`text-[18px] group-hover:font-bold transition-all ease-out duration-300 ${platformActiveIndex === index ? "font-bold text-white" : ""
}`}>{item.name}</h3>
</div>
))}

{/* Show more/less buttons */}
<div className="flex justify-between mt-4">
<button onClick={onShowMorePlatforms} className="bg-primary text-text px-4 py-2 rounded-md hover:bg-success hover:opacity-90 transition duration-150 ease-in-out">
Show More
</button>
{displayedPlatforms > 5 && (
<button onClick={onShowLessPlatforms} className="bg-primary text-text px-4 py-2 rounded-md hover:bg-error hover:opacity-90 transition duration-150 ease-in-out">
Show Less
</button>
)}
</div>
</CollapsibleSection>
</div>
</div>
);
};
export default NavigationSidebar;
56 changes: 56 additions & 0 deletions src/components/RawgGamesByGenreAndPlatformId.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { FcRating } from "react-icons/fc";
import { MdRateReview } from "react-icons/md";
import { FaGripfire } from "react-icons/fa6";
import { FaStarHalfAlt } from "react-icons/fa";

const RawgGamesByGenreAndPlatformId = ({ gamesByGenreAndPlatformList, genreName, platformName }) => {
const [gamesList, setGamesList] = useState([]);

useEffect(() => {
setGamesList(gamesByGenreAndPlatformList);
}, [gamesByGenreAndPlatformList]);

return (
<div className="p-5">
<h2 className="text-3xl font-bold text-gray-400 my-6 cursor-pointer text-center">
{platformName ? "" : "Genre - "} {platformName} - {genreName} Games
</h2>

<div className="flex flex-wrap justify-center">
<div className="flex flex-wrap w-full justify-center">
{gamesList.map((game) => (
<div
key={game.id}
className="relative w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 bg-secondary rounded overflow-hidden shadow-lg m-4 group hover:scale-110 transition-all duration-300 ease cursor-pointer"
>
<Link to={`/games/${game.id}`}>
<img className="w-full h-40 object-cover" src={game.short_screenshots[0].image} alt={game.name} />
</Link>
<div className="absolute top-0 right-0 p-2 bg-gray-800 text-white rounded-bl">
<FcRating alt="MetaCritic Rating" /> {game.metacritic}
</div>
<div className="px-6 py-4">
<div className="font-bold text-base mb-2">{game.name}</div>
<div className="flex items-center gap-3 justify-center">
<p className="text-gray-400 text-sm flex items-center">
<FaStarHalfAlt alt="The number of ratings" /> {game.rating}
</p>
<p className="text-gray-400 text-sm flex items-center">
<MdRateReview alt="The number of reviews" /> {game.reviews_count}
</p>
<p className="text-gray-400 text-sm flex items-center">
<FaGripfire alt="Suggestions" /> {game.suggestions_count}
</p>
</div>
</div>
</div>
))}
</div>
</div>
</div>
);
};

export default RawgGamesByGenreAndPlatformId;
Loading

0 comments on commit 22a6994

Please sign in to comment.