Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d89481e

Browse files
committed
additions for game, little fix GameItem
1 parent bc4a127 commit d89481e

File tree

20 files changed

+443
-182
lines changed

20 files changed

+443
-182
lines changed

‎src/API/GamesAPI.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,9 @@ export default class GamesAPI {
3535
const response = await axios.get(`https://api.rawg.io/api/games/${id}/reddit?key=2e30963c61f74dac97f2c89f3b62186e`);
3636
return response;
3737
}
38+
39+
static async getGameAdditionsById(id) {
40+
const response = await axios.get(`https://api.rawg.io/api/games/${id}/additions?key=2e30963c61f74dac97f2c89f3b62186e`);
41+
return response;
42+
}
3843
}

‎src/components/GameAchievements/GameAchievements.jsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const GameAchievements = ({id}) => {
1212

1313
useEffect(() => {
1414
getAchieves();
15-
}, []);
15+
}, [id]);
1616

1717
const getAchieves = async () => {
1818
const response = await GamesAPI.getGameAchiviementsById(id);
@@ -22,18 +22,21 @@ const GameAchievements = ({id}) => {
2222

2323
return (
2424
<div className="game-achievements__inner">
25-
{achievs.map(achieve => {
26-
return <div key={achieve.id} className="game-achieve">
27-
<div className="game-achieve__photo">
28-
<img src={achieve.image} alt="" />
29-
</div>
30-
<div className="game-achieve__text">
31-
<div className="game-achieve__name">{achieve.name}</div>
32-
<div className="game-achieve__percent">{achieve.percent}%</div>
33-
<div className="game-achieve__descr">{achieve.description}</div>
34-
</div>
35-
</div>
36-
})}
25+
{achievs.length !== 0
26+
? achievs.map(achieve => {
27+
return <div key={achieve.id} className="game-achieve">
28+
<div className="game-achieve__photo">
29+
<img src={achieve.image} alt="" />
30+
</div>
31+
<div className="game-achieve__text">
32+
<div className="game-achieve__name">{achieve.name}</div>
33+
<div className="game-achieve__percent">{achieve.percent}%</div>
34+
<div className="game-achieve__descr">{achieve.description}</div>
35+
</div>
36+
</div>
37+
})
38+
: <div>There is no achievements for this game</div>
39+
}
3740
</div>
3841
);
3942
};
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { useState, useEffect } from "react";
2+
import { useNavigate } from "react-router-dom";
3+
4+
import GamesAPI from "../../API/GamesAPI";
5+
6+
import Loader from "../../components/UI/Loader/Loader";
7+
import GameItem from "../GameItem/GameItem";
8+
9+
import './gameAdditions.scss';
10+
11+
const GameAdditions = ({id}) => {
12+
const [additions, setAdditions] = useState([]);
13+
const [isLoading, setIsLoading] = useState(true);
14+
15+
useEffect(() => {
16+
getAdditions();
17+
}, [id]);
18+
19+
const getAdditions = async () => {
20+
const response = await GamesAPI.getGameAdditionsById(id);
21+
setAdditions(response.data.results);
22+
setIsLoading(false);
23+
}
24+
25+
const router = useNavigate();
26+
27+
const showLoader = isLoading;
28+
const showNoAdditionsMessage = !isLoading && additions.length === 0;
29+
const showLimitedAdditions = !isLoading && additions.length > 0 && additions.length > 3;
30+
const showAllAdditions = !isLoading && additions.length > 0 && additions.length <= 3;
31+
32+
const limitedAdditions = additions.slice(0, 3).map((addition) => (
33+
<div className="game-addition" key={addition.id}>
34+
<GameItem game={addition} />
35+
</div>
36+
));
37+
38+
const allAdditions = additions.map((addition) => (
39+
<div className="game-addition" key={addition.id}>
40+
<GameItem game={addition} />
41+
</div>
42+
));
43+
44+
console.log(additions);
45+
46+
return (
47+
<div className="game-additions__inner">
48+
{showLoader && <Loader />}
49+
{showNoAdditionsMessage && <div>There are no additions for this game</div>}
50+
{showLimitedAdditions && (
51+
<>
52+
{limitedAdditions}
53+
<div>More</div>
54+
</>
55+
)}
56+
{showAllAdditions && allAdditions}
57+
</div>
58+
);
59+
};
60+
61+
export default GameAdditions;
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.game-additions__inner {
2+
display: flex;
3+
flex-wrap: wrap;
4+
margin-top: 10px;
5+
width: 1200px;
6+
}
7+
8+
.game-addition {
9+
max-width: 290px;
10+
width: 100%;
11+
margin-bottom: 10px;
12+
margin-right: 10px;
13+
}

‎src/components/GameDevs/GameDevs.jsx‎

Lines changed: 67 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -18,76 +18,84 @@ const GameDevs = ({id}) => {
1818

1919
useEffect(() => {
2020
getDevs();
21-
}, []);
21+
}, [id]);
2222

2323
const getDevs = async () => {
2424
const response = await GamesAPI.getDevelopersGameById(id);
2525
setDevs(response.data.results);
2626
setIsLoading(false);
2727
}
2828

29+
const swiperParams = {
30+
modules: [Navigation, Pagination],
31+
spaceBetween: 12,
32+
slidesPerView: 3,
33+
navigation: true,
34+
wrapperClass: 'devs-slider',
35+
};
36+
37+
const swiperContent = devs.length !== 0
38+
? <Swiper
39+
{...swiperParams}
40+
>
41+
{
42+
devs.slice(0, 5).map(dev => {
43+
return <SwiperSlide key={dev.id}>
44+
<div className="game-developer" style={{backgroundImage: `linear-gradient(rgba(32, 32, 32, 0.5), rgb(32, 32, 32) 70%), url(${dev.image_background})`}}>
45+
<div className="game-developer__head">
46+
<div className="game-developer__head-photo">
47+
<img src={
48+
dev.image === null ? 'https://w7.pngwing.com/pngs/336/946/png-transparent-avatar-user-medicine-surgery-patient-avatar-face-heroes-head.png' : dev.image
49+
} alt="developer" />
50+
</div>
51+
<div className="game-developer__head-name">
52+
<a href="#">{dev.name}</a></div>
53+
<div className="game-developer__head-positions">
54+
{dev.positions.map((position, index, array) => {
55+
if ((index + 1) !== array.length) {
56+
return <div key={position.id}
57+
className="game-developer__head-position">
58+
{position.name.charAt(0).toUpperCase() + position.name.slice(1)},
59+
</div>
60+
} else {
61+
return <div key={position.id}
62+
className="game-developer__head-position">
63+
{position.name.charAt(0).toUpperCase() + position.name.slice(1)}
64+
</div>
65+
}
66+
})}
67+
</div>
68+
</div>
69+
<div className="game-developer__content">
70+
<div className="game-developer__content-title">Known for {dev.games_count} games</div>
71+
<ul className="game-developer__content-items">
72+
{dev.games.map(game => {
73+
return <li key={game.id} className="game-developer__content-game">
74+
<a href="#" className="game-developer__content-name">{game.name}</a>
75+
<span className="game-developer__content-added">{game.added}</span>
76+
</li>
77+
})}
78+
</ul>
79+
</div>
80+
</div>
81+
</SwiperSlide>
82+
})
83+
}
84+
<SwiperSlide>
85+
<div className="game-developer">
86+
<a href="#" className="game-developer__button-more">
87+
<button>More</button>
88+
</a>
89+
</div>
90+
</SwiperSlide>
91+
</Swiper>
92+
: <div>There is no creators for this game</div>
93+
2994
return (
3095
<div className="game-devs__inner">
3196
{isLoading
3297
? <Loader/>
33-
: <Swiper
34-
modules={[Navigation, Pagination]}
35-
spaceBetween={12}
36-
slidesPerView={3}
37-
navigation
38-
wrapperClass={'devs-slider'}
39-
>
40-
{
41-
devs.slice(0, 5).map(dev => {
42-
return <SwiperSlide key={dev.id}>
43-
<div className="game-developer" style={{backgroundImage: `linear-gradient(rgba(32, 32, 32, 0.5), rgb(32, 32, 32) 70%), url(${dev.image_background})`}}>
44-
<div className="game-developer__head">
45-
<div className="game-developer__head-photo">
46-
<img src={
47-
dev.image === null ? 'https://w7.pngwing.com/pngs/336/946/png-transparent-avatar-user-medicine-surgery-patient-avatar-face-heroes-head.png' : dev.image
48-
} alt="developer" />
49-
</div>
50-
<div className="game-developer__head-name">
51-
<a href="#">{dev.name}</a></div>
52-
<div className="game-developer__head-positions">
53-
{dev.positions.map((position, index, array) => {
54-
if ((index + 1) !== array.length) {
55-
return <div key={position.id}
56-
className="game-developer__head-position">
57-
{position.name.charAt(0).toUpperCase() + position.name.slice(1)},
58-
</div>
59-
} else {
60-
return <div key={position.id}
61-
className="game-developer__head-position">
62-
{position.name.charAt(0).toUpperCase() + position.name.slice(1)}
63-
</div>
64-
}
65-
})}
66-
</div>
67-
</div>
68-
<div className="game-developer__content">
69-
<div className="game-developer__content-title">Known for {dev.games_count} games</div>
70-
<ul className="game-developer__content-items">
71-
{dev.games.map(game => {
72-
return <li key={game.id} className="game-developer__content-game">
73-
<a href="#" className="game-developer__content-name">{game.name}</a>
74-
<span className="game-developer__content-added">{game.added}</span>
75-
</li>
76-
})}
77-
</ul>
78-
</div>
79-
</div>
80-
</SwiperSlide>
81-
})
82-
}
83-
<SwiperSlide>
84-
<div className="game-developer">
85-
<a href="#" className="game-developer__button-more">
86-
<button>More</button>
87-
</a>
88-
</div>
89-
</SwiperSlide>
90-
</Swiper>
98+
: swiperContent
9199
}
92100
</div>
93101
);

‎src/components/GameItem/GameItem.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ const GameItem = ({game}) => {
1313
return (
1414
<div className="game-item">
1515
<div className="game-item__photo">
16-
<img src={game.background_image} alt="" />
16+
{game.background_image === null
17+
? <img src="http://dummyimage.com/290x180.png/99cccc&text=No+Image" alt="game" />
18+
: <img src={game.background_image} alt="game" />
19+
}
1720
</div>
1821
<div className="game-item__content">
1922
<Platforms platforms={game.platforms}/>

‎src/components/GameItem/gameItem.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@
3434
&__name {
3535
font-size: 18px;
3636
font-weight: 700;
37+
display: -webkit-box;
38+
-webkit-line-clamp: 1;
39+
-webkit-box-orient: vertical;
40+
overflow: hidden;
41+
text-overflow: ellipsis;
3742
}
3843

3944

‎src/components/GameRedditPosts/GameRedditPosts.jsx‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,37 +14,40 @@ const GameRedditPosts = ({id}) => {
1414

1515
useEffect(() => {
1616
getPosts();
17-
}, []);
17+
}, [id]);
1818

1919
const getPosts = async () => {
2020
const response = await GamesAPI.getRedditPostsById(id);
2121
setPosts(response.data.results);
2222
setIsLoading(false);
2323
}
24+
25+
const postsContent = posts.length !== 0
26+
? posts.map(post => {
27+
return <div key={post.id} className="game-reddit__post">
28+
<a href={post.url} className="game-reddit__post-head">
29+
{post.image === null
30+
? null
31+
: <div className="game-reddit__post-photo">
32+
<img src={post.image} alt="reddit-post" />
33+
</div>
34+
}
35+
<div className="game-reddit__post-name">{post.name}</div>
36+
</a>
37+
<div className="game-reddit__post-meta">
38+
<div className="game-reddit__post-date">{formatDate(post.created)}</div>
39+
<div className="game-reddit__post-separator">|</div>
40+
<a href={post.username_url} target="_blank" rel="noreferrer" className="game-reddit__post-username">{post.username}</a>
41+
</div>
42+
</div>
43+
})
44+
: <div>There is no Reddit posts</div>
2445

25-
console.log(posts);
2646
return (
2747
<div className="game-reddit__inner">
2848
{isLoading
2949
? <Loader/>
30-
: posts.map(post => {
31-
return <div key={post.id} className="game-reddit__post">
32-
<a href={post.url} className="game-reddit__post-head">
33-
{post.image === null
34-
? null
35-
: <div className="game-reddit__post-photo">
36-
<img src={post.image} alt="reddit-post" />
37-
</div>
38-
}
39-
<div className="game-reddit__post-name">{post.name}</div>
40-
</a>
41-
<div className="game-reddit__post-meta">
42-
<div className="game-reddit__post-date">{formatDate(post.created)}</div>
43-
<div className="game-reddit__post-separator">|</div>
44-
<a href={post.username_url} target="_blank" rel="noreferrer" className="game-reddit__post-username">{post.username}</a>
45-
</div>
46-
</div>
47-
})
50+
: postsContent
4851
}
4952
</div>
5053
);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /