Skip to content

Commit

Permalink
many improvements to game page
Browse files Browse the repository at this point in the history 
and bug fixes
  • Loading branch information
@zaydinani
zaydinani committed Jul 27, 2023
1 parent 842bab5 commit c9b64c0
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 69 deletions.
Binary file added public/pngwing.com.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/star.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 10 additions & 1 deletion src/api/api.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,20 @@ export function useGameData() {
console.log(error);
}
};

//! fetch one specific game data from ID
const fetchGameData = async (gameId) => {
try {
const response = await axios.get(`https://api.rawg.io/api/games/${gameId}?key=${key}`);
setGameData(response.data);
const gameData = response.data;

// Fetch screenshots for the specific game
const screenshotsResponse = await axios.get(`https://api.rawg.io/api/games/${gameId}/screenshots?key=${key}`);
const screenshots = screenshotsResponse.data.results;

// Add the screenshots data to the gameData object
gameData.screenshots = screenshots;
setGameData(gameData);
} catch (error) {
console.log(error);
}
Expand Down
114 changes: 77 additions & 37 deletions src/pages/gamePage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,33 @@
import '../styles/gamePage.scss'
import React, { useEffect } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { useParams } from 'react-router-dom';

import { useGameData } from '../api/api';

function game() {

// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';
// import required modules
import { Pagination } from 'swiper/modules';

function Game() {
const { id } = useParams();
const { gameData, fetchGameData } = useGameData();

useEffect(() => {
const gameId = id;

fetchGameData(gameId);
console.log('Fetched game');

}, [id]);

if (!gameData) {
return <div>Loading...</div>;
return <div>Loading...</div>;
}

console.log(gameData);

return (
Expand All @@ -38,23 +48,35 @@ function game() {
<div className="game-reviews">
<div className="review">
<h3>beaten</h3>
<p>1000</p>
</div>
<div className="review">
<h3>dropped</h3>
<p>1000</p>
<p>{gameData.added_by_status.beaten}</p>
</div>
<div className="review">
<h3>owned</h3>
<p>1000</p>
<p>{gameData.added_by_status.owned}</p>
</div>
<div className="review">
<h3>playing</h3>
<p>1000</p>
<p>{gameData.added_by_status.playing}</p>
</div>
<div className="review">
<h3>to play</h3>
<p>1000</p>
<p>{gameData.added_by_status.toplay}</p>
</div>
</div>
<div className='critic-reviews'>
<div className="critic-review">
<img src="/star.png" alt="" />
<div>
<h3>rawg rating</h3>
<p>{gameData.rating}</p>
</div>
</div>
<div className="critic-review">
<img src="/pngwing.com.png" alt="" />
<div>
<h3>metacritic rating</h3>
<p>{gameData.metacritic}</p>
</div>
</div>
</div>
<div className='actions'>
Expand All @@ -71,42 +93,60 @@ function game() {
<div className='summary'>
<h2>summary</h2>
<p className='summary-para'>{gameData.description_raw}</p>
<h2>story </h2>
<p className='summary-para'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, magnam rem voluptatibus quaerat alias modi nostrum iste, officiis corrupti molestiae nisi porro quod ipsum. Sit quae ducimus minima cumque ea.</p>
{gameData && gameData.platforms && gameData.platforms.some(platform => platform.platform.name === 'PC' && platform.requirements) && (
<div>
{gameData.platforms.map(platform => {
if (platform.platform.name === 'PC' && platform.requirements) {
return (
<React.Fragment key={platform.platform.slug}>
{platform.requirements.minimum && platform.requirements.recommended && (
<h2>PC Requirements</h2>
)}
{platform.requirements.minimum && (
<p className='summary-para'>{platform.requirements.minimum}</p>
)}
{platform.requirements.recommended && (
<p className='summary-para'>{platform.requirements.recommended}</p>
)}
</React.Fragment>
);
}
return null;
})}
</div>
)}
<div className='dev'>
<div>
<h3>developer</h3>
<p>rockstar games</p>
<p>{gameData.developers[0].name}</p>
</div>
{gameData.publishers[0]?.name && (
<div>
<h3>publisher</h3>
<p>Take-Two Interactive</p>
<p>{gameData.publishers[0].name}</p>
</div>
)}
<div>
<h3>genre</h3>
<p>shooter</p>
<p>adventure</p>
{gameData.genres.map(genre => (
<p key={genre.id}>{genre.name}</p>
))}
</div>
</div>
<div className="screenshots">
<div>
<img src="/GTA-5-cheats-550x309.jpg" alt="" />
</div>
<div>
<img src="/GTA-5-cheats-550x309.jpg" alt="" />
</div>
<div>
<img src="/GTA-5-cheats-550x309.jpg" alt="" />
</div>
<div>
<img src="/GTA-5-cheats-550x309.jpg" alt="" />
</div>
<div>
<img src="/GTA-5-cheats-550x309.jpg" alt="" />
</div>
<div>
<img src="/GTA-5-cheats-550x309.jpg" alt="" />
</div>
<Swiper
pagination={{
dynamicBullets: true,
}}
modules={[Pagination]}
className="mySwiper"
>
{gameData.screenshots.map(screenshot => (
<SwiperSlide key={screenshot.id}>
<img src={screenshot.image} alt="" />
</SwiperSlide>
))}
</Swiper>
</div>
</div>
</div>
Expand All @@ -116,4 +156,4 @@ function game() {
)
}

export default game
export default Game
71 changes: 40 additions & 31 deletions src/styles/gamePage.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
@import '_variables';

.game-page-container{
padding: 6rem 5rem;
padding: 4.5rem 5rem;
@include flex(center, flex-start);
.game-img{
width: 40%;
margin-right: 2rem;
height: 750px;
height: 85vh;
img {
width: 100%;
height: 100%;
Expand All @@ -32,6 +32,7 @@
display: flex;
gap: 0.5rem;
margin: 1rem 0;
flex-wrap: wrap;
p{
padding: 0.2rem 0.5rem;
border-radius: 10px;
Expand All @@ -48,7 +49,7 @@
.review{
border: 1px solid $accents;
text-align: center;
max-width: 18%;
max-width: 23.5%;
height: 90%;
display: flex;
flex-direction: column;
Expand All @@ -59,10 +60,29 @@
letter-spacing: .1rem;
font-weight: 600;
}
&:hover{
scale: 1.1;
border-radius: 15px;
background-color: #795f913a;
}
}
.critic-reviews{
height: 5rem;
@include flex(space-between, flex-start);
.critic-review{
border: 1px solid $accents;
border-radius: 5px;
display: flex;
justify-content: space-around;
align-items: center;
width: 49%;
height: 100%;
padding: 0.5rem;
div{
width: 73%;
h3{
font-size: 18px;
}
}
img{
height: 2rem;
width: 2rem;
}
}
}
Expand Down Expand Up @@ -111,20 +131,16 @@
}
}
.screenshots{
@include flex(space-between, center);
border-radius: 10px;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1rem;
background-color: #795f913a;
padding: 1rem;
div{
width: 10rem;
.mySwiper{
border-radius: 10px;
img{

border-radius: 10px;
padding: 1rem;
}
}

}
}
}
Expand All @@ -133,17 +149,17 @@

@media(max-width: 768px) {
.game-page-container{
padding: 6rem 0rem;
padding: 4rem 1.4rem;
@include flex(center, flex-start);
}
}
@media(max-width: 425px) {
.game-page-container{
@include flex(center, center);
padding: 5rem 0rem;
padding: 4rem 0rem;
flex-direction: column;
.game-img{
height: 70vh;
height: 75vh;
width: 90%;
margin: 0 0 1rem 0;
}
Expand Down Expand Up @@ -187,27 +203,20 @@
}
}
}
}
}
}
@media(max-width: 375px) {
.game-page-container{
.game-info{
div{
.screenshots{
gap: 1rem;
.critic-reviews{
.critic-review{
div{
margin: 0 auto;
width: 90%;
img{
border-radius: 10px;
width: 73%;
h3{
font-size: 16px;
}
}
}
}
}
}
}

@media(max-width: 320px) {
.game-page-container{
.game-info{
Expand Down

0 comments on commit c9b64c0

Please sign in to comment.