Skip to content

Commit

Permalink
feat: adding game details with mock
Browse files Browse the repository at this point in the history
  • Loading branch information
@felipebrsk
felipebrsk committed Sep 2, 2024
1 parent 5886d3b commit 5dac0b9
Show file tree
Hide file tree
Showing 28 changed files with 1,781 additions and 149 deletions.
31 changes: 31 additions & 0 deletions TODO.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
- [x] Basic UI layout
- [x] Replace all tags by mui
- [x] Add a scroll to top button
- [ ] Format the prices for currency
- [x] Add float sidebar
- [x] Enable button to enable and disable sidebar
- [x] Add float sidebar with website socials and theme toggle
Expand All @@ -30,6 +31,36 @@
- [x] Create section for popular games
- [x] Create section for most liked games
- [x] Create section for future games
- [x] Create a game details page
- [x] Create the main details of a game
- [x] Display name, cover and release date
- [x] Display a short description of the game
- [x] Show game details
- [x] Display the real game website
- [x] Display the age rating
- [x] Display the game protection
- [x] Display the crack status
- [x] Display the game hearts quantity
- [x] Display the game platforms with a link for all platform games
- [x] Display the game genres with a link for all genre games
- [x] Display the game tags with a link for all tag games
- [x] Display the game categories with a link for all category games
- [x] Display the game publishers
- [x] Display the game developers
- [x] Display the torrent links availables for that game
- [x] Display the game availability on platforms to be purchased
- [x] Display the game detailed description
- [x] Display the game gallery
- [x] Display some game reviews
- [x] Display the game critics
- [x] Display the available DLCs for the game
- [x] Display the DLC name
- [x] Display the DLC release date
- [x] Display the DLC platforms
- [x] Display the DLC gallery
- [x] Display the DLC availability on platforms to be purchased
- [x] Display the game requirements for each OS and type (minimum, recommended or maximum)
- [x] Display the game languages availability
- [ ] Game news and reviews section
- [ ] Fetch and display the latest gaming news
- [ ] Add reviews section with filtering options
Expand Down
8 changes: 8 additions & 0 deletions src/Routes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { DefaultLayout } from './layouts'

export const Routes = () => {
const Home = L(lazy(() => import('./pages/Home')))
const GameDetails = L(lazy(() => import('./pages/Game/Details')))

return useRoutes([
{
Expand All @@ -15,6 +16,13 @@ export const Routes = () => {
path: '/',
element: <Home />,
},
{
path: '/games',
children: [
{ index: true, element: <>Games</> },
{ path: ':slug', element: <GameDetails /> },
],
},
],
},
])
Expand Down
20 changes: 10 additions & 10 deletions src/components/Header/modules/HeaderCarousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ function HeaderCarousel(props: HeaderCarouselProps) {
emulateTouch
preventMovementUntilSwipeScrollTolerance={true}
swipeScrollTolerance={50}>
{banners.map((banner) => (
<Box className="relative h-screen" key={banner.id}>
{banners.map(({ id, banner, related }) => (
<Box className="relative h-screen" key={id}>
<img
src={banner.banner}
src={banner}
alt="Game Banner"
className="w-full h-full object-cover"
/>
Expand All @@ -34,27 +34,27 @@ function HeaderCarousel(props: HeaderCarouselProps) {
<Box className="flex flex-col max-w-md">
<Typography className="text-4xl md:text-5xl font-bold mb-4">
<Tooltip
title={`Go to ${banner.title} details`}
title={`Go to ${related.title} details`}
disableInteractive>
<Link
href="#"
href={`games/${related.slug}`}
className="hover:text-yellow-400 transition duration-300">
{banner.title}
{related.title}
</Link>
</Tooltip>
</Typography>
<Typography className="text-xl mb-2">
Best Price: $59.99
Best Price: {related.best_price}
</Typography>
</Box>

<Stack className="flex flex-col max-w-xl md:text-right text-center">
<Typography className="mb-4">
{banner.description}
{related.short_description}
</Typography>
<Typography className="mb-2">Available on:</Typography>
<Box className="flex md:justify-end justify-center gap-2 mb-4">
{banner.platforms.map(({ id, name }) => (
{related.platforms.map(({ id, name }) => (
<Box
component="span"
className="bg-gray-800 px-3 py-1 rounded-full text-sm"
Expand All @@ -64,7 +64,7 @@ function HeaderCarousel(props: HeaderCarouselProps) {
))}
</Box>
<Box className="flex flex-wrap md:justify-end justify-center gap-2">
{banner.tags.map(({ id, name }) => (
{related.tags.map(({ id, name }) => (
<Box
component="span"
className="bg-gray-700 px-3 py-1 rounded-full text-sm"
Expand Down
222 changes: 126 additions & 96 deletions src/mocks/banners.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,121 +4,151 @@ export const MOCK_BANNERS: Banner[] = [
{
id: 1,
banner: 'https://images5.alphacoders.com/112/thumb-1920-1129255.jpg',
title: 'Black Myth: Wukong',
description: `Black Myth: Wukong is an action RPG that draws on Chinese
mythology. Fight through a richly detailed world inspired
by ancient Chinese literature.`,
platforms: [
{ id: 1, slug: 'pc', name: 'PC' },
{ id: 2, slug: 'ps5', name: 'PS5' },
{ id: 3, slug: 'xbox-series-x', name: 'Xbox Series X' },
],
tags: [
{ id: 3, slug: 'single-player', name: 'Single-player' },
{ id: 4, slug: 'fantasy', name: 'Fantasy' },
{ id: 5, slug: 'mythologic', name: 'Mythologic' },
{ id: 12, slug: 'uncracked', name: 'Uncracked' },
{ id: 9, slug: 'denuvo', name: 'Denuvo' },
{ id: 13, slug: 'souls', name: 'Souls' },
],
related: {
id: 1,
best_price: 22999,
slug: 'black-myth-wukong',
title: 'Black Myth: Wukong',
short_description: `Black Myth: Wukong is an action RPG that draws on Chinese
mythology. Fight through a richly detailed world inspired
by ancient Chinese literature.`,
platforms: [
{ id: 1, slug: 'pc', name: 'PC' },
{ id: 2, slug: 'ps5', name: 'PS5' },
{ id: 3, slug: 'xbox-series-x', name: 'Xbox Series X' },
],
tags: [
{ id: 3, slug: 'single-player', name: 'Single-player' },
{ id: 4, slug: 'fantasy', name: 'Fantasy' },
{ id: 5, slug: 'mythologic', name: 'Mythologic' },
{ id: 12, slug: 'uncracked', name: 'Uncracked' },
{ id: 9, slug: 'denuvo', name: 'Denuvo' },
{ id: 13, slug: 'souls', name: 'Souls' },
],
},
},
{
id: 2,
banner: 'https://images2.alphacoders.com/137/thumb-1920-1370582.jpeg',
title: 'God of War: Ragnarok',
description: `God of War: Ragnarok follows Kratos and Atreus as they
face the apocalyptic events of Ragnarok. Experience an
epic journey with intense combat and rich storytelling.`,
platforms: [
{ id: 2, slug: 'ps5', name: 'PS5' },
{ id: 4, slug: 'ps4', name: 'PS4' },
],
tags: [
{ id: 3, slug: 'single-player', name: 'Single-player' },
{ id: 5, slug: 'mythologic', name: 'Mythologic' },
{ id: 10, slug: 'action-adventure', name: 'Action-Adventure' },
],
related: {
id: 2,
best_price: 14999,
slug: 'god-of-war-ragnarok',
title: 'God of War: Ragnarok',
short_description: `God of War: Ragnarok follows Kratos and Atreus as they
face the apocalyptic events of Ragnarok. Experience an
epic journey with intense combat and rich storytelling.`,
platforms: [
{ id: 2, slug: 'ps5', name: 'PS5' },
{ id: 4, slug: 'ps4', name: 'PS4' },
],
tags: [
{ id: 3, slug: 'single-player', name: 'Single-player' },
{ id: 5, slug: 'mythologic', name: 'Mythologic' },
{ id: 10, slug: 'action-adventure', name: 'Action-Adventure' },
],
},
},
{
id: 3,
banner: 'https://images7.alphacoders.com/124/thumb-1920-1244875.jpg',
title: 'The Last of Us: Part II - Remastered',
description: `The Last of Us Part II is an action-adventure game with survival horror elements released as an exclusive for PlayStation 4 in 2020
as the sequel to the Last of Us released in 2013. The action of the game is set in the post-apocalyptic United States around five years after the
events presented in the first game where the world has been devastated by a mysterious pandemic.`,
platforms: [{ id: 2, slug: 'ps5', name: 'PS5' }],
tags: [
{ id: 7, slug: 'tps', name: 'TPS' },
{ id: 6, slug: 'thriller', name: 'Thriller' },
{ id: 3, slug: 'single-player', name: 'Single-player' },
{ id: 10, slug: 'action-adventure', name: 'Action-Adventure' },
],
related: {
id: 3,
best_price: 19900,
slug: 'the-last-of-us-part-ii-remastered',
title: 'The Last of Us: Part II - Remastered',
short_description: `The Last of Us Part II is an action-adventure game with survival horror elements released as an exclusive for PlayStation 4 in 2020
as the sequel to the Last of Us released in 2013. The action of the game is set in the post-apocalyptic United States around five years after the
events presented in the first game where the world has been devastated by a mysterious pandemic.`,
platforms: [{ id: 2, slug: 'ps5', name: 'PS5' }],
tags: [
{ id: 7, slug: 'tps', name: 'TPS' },
{ id: 6, slug: 'thriller', name: 'Thriller' },
{ id: 3, slug: 'single-player', name: 'Single-player' },
{ id: 10, slug: 'action-adventure', name: 'Action-Adventure' },
],
},
},
{
id: 4,
banner: 'https://images7.alphacoders.com/133/thumb-1920-1335668.jpeg',
title: 'Alan Wake 2',
description: `Alan Wake 2 is a survival horror game developed by Remedy Entertainment.
This is a sequel to Alan Wake, released in 2010 - a game that set the bar quite high.
This time, the developers are aiming even higher. The question is, will they succeed?`,
platforms: [
{ id: 2, slug: 'ps5', name: 'PS5' },
{ id: 4, slug: 'xbox-series-s', name: 'Xbox Series S' },
{ id: 5, slug: 'xbox-series-x', name: 'Xbox Series X' },
{ id: 3, slug: 'pc', name: 'PC' },
{ id: 6, slug: 'geforce-now', name: 'GeForce Now' },
],
tags: [
{ id: 14, slug: 'survival', name: 'Survival' },
{ id: 15, slug: 'horror', name: 'Horror' },
{ id: 6, slug: 'thriller', name: 'Thriller' },
{ id: 16, slug: 'puzzle', name: 'Puzzle' },
{ id: 7, slug: 'tps', name: 'TPS' },
{ id: 2, slug: 'adventure', name: 'Adventure' },
{ id: 3, slug: 'single-player', name: 'Single-player' },
],
related: {
id: 4,
best_price: 24999,
slug: 'alan-wake-2',
title: 'Alan Wake 2',
short_description: `Alan Wake 2 is a survival horror game developed by Remedy Entertainment.
This is a sequel to Alan Wake, released in 2010 - a game that set the bar quite high.
This time, the developers are aiming even higher. The question is, will they succeed?`,
platforms: [
{ id: 2, slug: 'ps5', name: 'PS5' },
{ id: 4, slug: 'xbox-series-s', name: 'Xbox Series S' },
{ id: 5, slug: 'xbox-series-x', name: 'Xbox Series X' },
{ id: 3, slug: 'pc', name: 'PC' },
{ id: 6, slug: 'geforce-now', name: 'GeForce Now' },
],
tags: [
{ id: 14, slug: 'survival', name: 'Survival' },
{ id: 15, slug: 'horror', name: 'Horror' },
{ id: 6, slug: 'thriller', name: 'Thriller' },
{ id: 16, slug: 'puzzle', name: 'Puzzle' },
{ id: 7, slug: 'tps', name: 'TPS' },
{ id: 2, slug: 'adventure', name: 'Adventure' },
{ id: 3, slug: 'single-player', name: 'Single-player' },
],
},
},
{
id: 5,
banner: 'https://images8.alphacoders.com/129/thumb-1920-1293291.png',
title: 'Hades II',
description: `Hades II is the sequel from the Supergiant Games studio, consisting of the most enjoyable aspects of the original indie game and developing them.
Like its predecessor, Hades 2, action-packed, roguelike RPG continues the story in the world of Greek mythology, presenting a whole new, infinitely playable
adventure where myths about the underworld twist with tales of witchcraft and magic.`,
platforms: [
{ id: 1, slug: 'ps5', name: 'PS5' },
{ id: 2, slug: 'ps4', name: 'PS4' },
{ id: 4, slug: 'xbox-series-s', name: 'Xbox Series S' },
{ id: 5, slug: 'xbox-series-x', name: 'Xbox Series X' },
{ id: 3, slug: 'pc', name: 'PC' },
{ id: 7, slug: 'xbox-one', name: 'Xbox One' },
],
tags: [
{ id: 17, slug: 'rogue', name: 'Rogue' },
{ id: 8, slug: 'rpg', name: 'RPG' },
{ id: 2, slug: 'adventure', name: 'Adventure' },
{ id: 1, slug: 'action', name: 'Action' },
{ id: 3, slug: 'single-player', name: 'Single-player' },
],
related: {
id: 5,
best_price: 19900,
slug: 'hades-ii',
title: 'Hades II',
short_description: `Hades II is the sequel from the Supergiant Games studio, consisting of the most enjoyable aspects of the original indie game and developing them.
Like its predecessor, Hades 2, action-packed, roguelike RPG continues the story in the world of Greek mythology, presenting a whole new, infinitely playable
adventure where myths about the underworld twist with tales of witchcraft and magic.`,
platforms: [
{ id: 1, slug: 'ps5', name: 'PS5' },
{ id: 2, slug: 'ps4', name: 'PS4' },
{ id: 4, slug: 'xbox-series-s', name: 'Xbox Series S' },
{ id: 5, slug: 'xbox-series-x', name: 'Xbox Series X' },
{ id: 3, slug: 'pc', name: 'PC' },
{ id: 7, slug: 'xbox-one', name: 'Xbox One' },
],
tags: [
{ id: 17, slug: 'rogue', name: 'Rogue' },
{ id: 8, slug: 'rpg', name: 'RPG' },
{ id: 2, slug: 'adventure', name: 'Adventure' },
{ id: 1, slug: 'action', name: 'Action' },
{ id: 3, slug: 'single-player', name: 'Single-player' },
],
},
},
{
id: 6,
banner: 'https://images7.alphacoders.com/132/thumb-1920-1323282.jpeg',
title: 'Star Wars: Outlaws',
description: `Star Wars: Outlaws is an action-adventure game developed by Massive Entertainment with cooperation from other Ubisoft divisions.
This highly anticipated official video game of the Star Wars franchise was published by Ubisoft under licence by Lucasfilm Games in August of 2024.`,
platforms: [
{ id: 1, slug: 'ps5', name: 'PS5' },
{ id: 4, slug: 'xbox-series-s', name: 'Xbox Series S' },
{ id: 5, slug: 'xbox-series-x', name: 'Xbox Series X' },
{ id: 3, slug: 'pc', name: 'PC' },
{ id: 6, slug: 'geforce-now', name: 'GeForce Now' },
],
tags: [
{ id: 2, slug: 'adventure', name: 'Adventure' },
{ id: 1, slug: 'action', name: 'Action' },
{ id: 3, slug: 'single-player', name: 'Single-player' },
{ id: 18, slug: 'shooting', name: 'Shooting' },
],
related: {
id: 6,
best_price: 34999,
slug: 'star-wars-outlaws',
title: 'Star Wars: Outlaws',
short_description: `Star Wars: Outlaws is an action-adventure game developed by Massive Entertainment with cooperation from other Ubisoft divisions.
This highly anticipated official video game of the Star Wars franchise was published by Ubisoft under licence by Lucasfilm Games in August of 2024.`,
platforms: [
{ id: 1, slug: 'ps5', name: 'PS5' },
{ id: 4, slug: 'xbox-series-s', name: 'Xbox Series S' },
{ id: 5, slug: 'xbox-series-x', name: 'Xbox Series X' },
{ id: 3, slug: 'pc', name: 'PC' },
{ id: 6, slug: 'geforce-now', name: 'GeForce Now' },
],
tags: [
{ id: 2, slug: 'adventure', name: 'Adventure' },
{ id: 1, slug: 'action', name: 'Action' },
{ id: 3, slug: 'single-player', name: 'Single-player' },
{ id: 18, slug: 'shooting', name: 'Shooting' },
],
},
},
]
Loading

0 comments on commit 5dac0b9

Please # to comment.