Skip to content

Commit

Permalink
fixed home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@zaydinani
zaydinani committed Jul 15, 2023
1 parent b94eed7 commit 6d0eb3c
Show file tree
Hide file tree
Showing 7 changed files with 186 additions and 139 deletions.
7 changes: 5 additions & 2 deletions src/api/api.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,11 @@ export function useGameData() {
useEffect(() => {
const fetchPopularGames = async () => {
try {
const response = await axios.get(`https://api.rawg.io/api/games?ordering=-added&key=${key}&page_size=10`);
setPopularGames(response.data.results);
const response = await axios.get(`https://api.rawg.io/api/games?ordering=-added&key=${key}&page_size=10&expand=publishers`);
const sortedGames = response.data.results.sort(
(a, b) => b.metacritic - a.metacritic
);
setPopularGames(sortedGames);
} catch (error) {
console.log(error);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/carouselGameCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ function carouselGameCard(props) {
<h1>{title}</h1>
</a>
<p>{publisher}</p>
<i class="fa-regular fa-star"> {rating}</i>
<i className="fa-regular fa-star"> metacritic: {rating}</i>
</div>
</div>

Expand Down
24 changes: 12 additions & 12 deletions src/components/gameCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,23 @@ function GameCard(props) {
</div>
*/
return (
<div class="game-card">
<div class="game-card__front">
<div class="game-card__header">
<div class="game-card__cover">
<div className="game-card">
<div className="game-card__front">
<div className="game-card__header">
<div className="game-card__cover">
<img src={imageUrl}/>
</div>
<div class="game-card__title">{title}</div>
<button class="game-card__touch-target" aria-label="Expand"></button>
<div className="game-card__title">{title}</div>
<button className="game-card__touch-target" aria-label="Expand"></button>
</div>
</div>
<div class="game-card__back">
<div class="game-card__content">
<div class="game-card__metadata">
<i class="fa-regular fa-star"> {rating}</i>
<div className="game-card__back">
<div className="game-card__content">
<div className="game-card__metadata">
<i className="fa-regular fa-star"> {rating}</i>
</div>
<div class="game-card__buttons">
<button class="game-card__button -update">
<div className="game-card__buttons">
<button className="game-card__button -update">
check it
</button>
</div>
Expand Down
183 changes: 81 additions & 102 deletions src/pages/newhome.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import React, { useRef, useState } from 'react';
import React, { useRef, useState, useEffect } from 'react';

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

// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
import { FreeMode, Pagination } from 'swiper/modules';
Expand All @@ -13,13 +16,22 @@ import CarouselGameCard from '../components/carouselGameCard';
import GameCard from '../components/gameCard';

function NewHome() {
const { popularGames, latestGames, comingSoonGames, topRatedGames } = useGameData();

useEffect(() => {
//console.log('Popular Games:', popularGames);
//console.log('Latest Games:', latestGames);
//console.log('top rated Games:', topRatedGames);
//console.log('coming soon games:', comingSoonGames);

}, [popularGames, latestGames, comingSoonGames, topRatedGames]);
return (
<div className='games--container'>
<form class="search-container">
<form className="search-container">
<input type="text" id="search-bar" placeholder="search games ?"/>
<a href="#"><img class="search-icon" src="http://www.endlessicons.com/wp-content/uploads/2012/12/search-icon.png"/></a>
<a href="#"><img className="search-icon" src="http://www.endlessicons.com/wp-content/uploads/2012/12/search-icon.png"/></a>
</form>
<h1 className="line-title">trending games</h1>
<h1 className="line-title">popular games</h1>
<Swiper
slidesPerView={3}
spaceBetween={15}
Expand All @@ -29,110 +41,77 @@ function NewHome() {
}}
modules={[FreeMode, Pagination]}
className="mySwiper"
breakpoints={{
0: {
slidesPerView: 1,
spaceBetween: 10,
},
375: {
slidesPerView: 1,
spaceBetween: 10,
},
425: {
slidesPerView: 2,
spaceBetween: 10,
},
768: {
slidesPerView: 3,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 10,
},
1440: {
slidesPerView: 3,
spaceBetween: 20,
},
}}
>
<SwiperSlide>
<CarouselGameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
publisher={'woow'}
rating={2.5}
/>
</SwiperSlide>
<SwiperSlide>
<CarouselGameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
publisher={'woow'}
rating={2.5}
/>
</SwiperSlide>
<SwiperSlide>
<CarouselGameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
publisher={'woow'}
rating={2.5}
/>
</SwiperSlide>
<SwiperSlide>
<CarouselGameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
publisher={'woow'}
rating={2.5}
/>
</SwiperSlide>
<SwiperSlide>
<CarouselGameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
publisher={'woow'}
rating={2.5}
/>
</SwiperSlide>
<SwiperSlide>
<CarouselGameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
publisher={'woow'}
rating={2.5}
/>
</SwiperSlide>
{popularGames.map((game) => (
<SwiperSlide key={game.id}>
<CarouselGameCard
title={game.name}
imageUrl={game.background_image}
publisher={game.publishers}
rating={game.metacritic}
/>
</SwiperSlide>
))}
</Swiper>
<h1 className="line-title">trending games</h1>

<div class="game-cards">
<GameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
rating={2.5}
/>
<h1 className="line-title">latest games</h1>
<div className="game-cards">
{latestGames.map((game) => (
<GameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
rating={2.5}
/>
<GameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
rating={2.5}
/>
<GameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
rating={2.5}
/>
<GameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
rating={2.5}
/>
key={game.id}
title={game.name}
imageUrl={game.background_image}
rating={game.metacritic}
/>
))}
</div>
<h1 className="line-title">anticipated games</h1>
<div className="game-cards">
{comingSoonGames.map((game) => (
<GameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
rating={2.5}
/>
<GameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
rating={2.5}
/>
<GameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
rating={2.5}
/>
<GameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
rating={2.5}
/>
key={game.id}
title={game.name}
imageUrl={game.background_image}
rating={game.released}
/>
))}
</div>
<h1 className="line-title">top rated games</h1>
<div className="game-cards">
{topRatedGames.map((game) => (
<GameCard
title={'haha'}
imageUrl={'https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg'}
rating={2.5}
key={game.id}
title={game.name}
imageUrl={game.background_image}
rating={game.metacritic}
/>
</div>
))}
</div>
</div>
);
}
Expand Down
38 changes: 30 additions & 8 deletions src/styles/carouselGameCard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,23 @@

.game--card{
border-radius: 5px;
height: 22rem;
height: 20rem;
width: 25rem;
transition: 0.5s ease-in-out;
.game--card--img{
max-width: 100%;
max-height: 62%;
width: 100%;
height: 62%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px 5px 0 0;
overflow: hidden;

img {
width: 100%;
height: 100%;
object-fit: contain;
object-fit: cover;
}
}
.game--card--info{
Expand All @@ -42,8 +44,28 @@

}
}
&:hover{
scale: 1.05;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.2);
}
}

@media(max-width: 1024px) {
.game--card{
.game--card--info{
gap: 0.2rem;

a{
h1{
font-weight: 300;
font-size: 18px;
}
}
p, i{
font-size: 12px;
}
}

}
}
.game--card:hover{
scale: 1.05;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.2);
}

32 changes: 21 additions & 11 deletions src/styles/gameCard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,19 @@
margin: 0 auto;
}

.game-card {
position: relative;
z-index: 0;
display: flex;
flex-flow: column nowrap;
width: 200px;
&::before {
.game-card {
position: relative;
z-index: 0;
display: flex;
flex-flow: column nowrap;
width: 200px;
&::before {
content: "";
aspect-ratio: $ratio;
width: 100%;
margin-bottom: $bottom-gap;
}
}
}
}

.game-card__front {
position: absolute;
Expand Down Expand Up @@ -235,5 +235,15 @@
transform: scale(1);
transition-duration: $speed-in;
transition-delay: $speed-in / 6;
}
}
}
}
@media(max-width: 768px) {
.game-card {
width: 150px;
}
}
@media(max-width: 320px) {
.game-card {
width: 132px;
}
}
Loading

0 comments on commit 6d0eb3c

Please sign in to comment.