Skip to content

Commit

Permalink
alteracoes-na-estilizacao
Browse files Browse the repository at this point in the history
  • Loading branch information
@Muriloloures
Muriloloures committed Mar 24, 2023
1 parent 5f215d6 commit b8516ca
Show file tree
Hide file tree
Showing 20 changed files with 35,147 additions and 7,808 deletions.
27,127 changes: 27,127 additions & 0 deletions package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"aos": "^2.3.4",
"axios": "^1.3.2",
"polished": "^4.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.1",
Expand Down
Binary file added src/assets/loading.gif
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 src/assets/pokeball.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 src/assets/pokedexBall.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.
62 changes: 62 additions & 0 deletions src/assets/pokedexImg.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 12 additions & 7 deletions src/components/cardPokemonsHome/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ import { Type } from '../../helpers/Type'
import pokedex from '../../assets/pokedex.png'
import { Context } from '../../context/createContext'
import { Link } from 'react-router-dom'
import { darken } from 'polished'
import AOS from 'aos';
import 'aos/dist/aos.css';

export const CardPokedex = ({ pokemon }) => {
const [pokedexCard, setPokedexCard] = useState([])
Expand All @@ -31,26 +34,28 @@ export const CardPokedex = ({ pokemon }) => {
useEffect(() => {
buttonsHeader()
getRequestPokedexCard()
AOS.init();
}, [])


const Id = pokedexCard.id !== undefined && pokedexCard.id >= 10 ? pokedexCard.id : `0${pokedexCard.id}`



return (
<ContainerCardPokemon>
<div style={{ backgroundColor: `${Colors(pokedexCard.types !== undefined && pokedexCard.types[0].type.name)}` }}>
<ContainerCardPokemon >
<div data-aos="zoom-in-up" style={{ backgroundColor: `${Colors(pokedexCard.types !== undefined && pokedexCard.types[0].type.name)}`, border: `2px solid ${darken(0.25, Colors(pokedexCard.types !== undefined && pokedexCard.types[0].type.name))}`}}>
<div className="IdNameDetail">
<div className="infoIdNameDetail">
<span className="Id">#{Id}</span>
<span className="Name">{pokedexCard.name}</span>
<span className="Id" style={{color: `${darken(0.3, Colors(pokedexCard.types !== undefined && pokedexCard.types[0].type.name))}`}}>#{Id}</span>
<span className="Name" style={{color: `${darken(0.3, Colors(pokedexCard.types !== undefined && pokedexCard.types[0].type.name))}`}}>{pokedexCard.name}</span>
<div className='Type'>
<span >{Type(pokedexCard.types !== undefined && pokedexCard.types[0].type.name)}</span>
<span >{Type(pokedexCard.types !== undefined && pokedexCard.types[1]?.type.name)}</span>
</div>
</div>
<div className='DetailContainer' onClick={() => pokemons.includes(pokedexCard) && setDeletePokemonButton(true)}>
<Link to={`/detail/${pokedexCard.name}`} >
<Link to={`/detail/${pokedexCard.name}`} >
<span className='Detail' onClick={() => putDetails(pokedexCard)}>Detalhes</span>
</Link>

Expand All @@ -62,8 +67,8 @@ export const CardPokedex = ({ pokemon }) => {
src={pokedexCard.sprites?.other?.["official-artwork"]?.["front_default"]}
alt=""
/>
<div className='ContainerCapture' onClick={() => setShowModalCapture(true)}>
<button className='Capture' onClick={() => addPokemon(pokedexCard)}>Capturar!</button>
<div className='ContainerCapture' onClick={() => setShowModalCapture(true)}>
<button style={{color: `${darken(0.1, Colors(pokedexCard.types !== undefined && pokedexCard.types[0].type.name))}`}} className='Capture' onClick={() => addPokemon(pokedexCard)}>Capturar!</button>
</div>
</div>
</div>
Expand Down
13 changes: 8 additions & 5 deletions src/components/cardPokemonsHome/style.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,11 @@ export const ContainerCardPokemon = styled(({ children, className }) => {
margin-top: 55px;
display: flex;
&:hover {
transform: translateY(-10px);
transition: .5s;
}
Expand Down Expand Up @@ -45,11 +49,11 @@ height: 38px;
width: 146px;
height: 38px;
background: #FFFFFF;
background-color:#e3dede;
border-radius: 8px;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-weight: 700;
font-size: 16px;
line-height: 24px;
color: #0F0F0F;
Expand All @@ -62,8 +66,7 @@ cursor: pointer;
width: 250.73px;
height: 210.73px;
left: -105px;
}
}
.IdNameDetail {
Expand Down
2 changes: 1 addition & 1 deletion src/components/cardPokemonsPokedex/style.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ export const ContainerPokedex = styled(({children, className}) => {
})(() => `
width: 440px;
height: 210px;
margin-top: 55px;
display: flex;
div {
position: relative;
flex: 1;
Expand Down
83 changes: 42 additions & 41 deletions src/components/detailCard/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Bar, ContainerDetail } from './style'
import { Colors } from '../../helpers/Colors'
import pokedex from '../../assets/pokedex.png'
import { Type } from '../../helpers/Type'


Expand All @@ -18,49 +17,51 @@ export const DetailCard = ({details}) => {

return (
<ContainerDetail>
<section>
<div style={{background: Colors(details.types !== undefined && details.types[0].type.name)}} className='Details'>
<div className='PokemonPictures'>
<div><img src={details.sprites !== undefined && details.sprites['front_default']} alt="" /></div>
<div><img src={details.sprites !== undefined && details.sprites['back_default']} alt="" /></div>
</div>
<div className='BaseStats'>
<div>
<h2>Base stats</h2>
<ul className='BaseList'>
<li><span>HP</span><span>{details.stats !== undefined && details.stats[0].base_stat}</span><Bar var={details.stats !== undefined && details.stats[0].base_stat} /></li>
<li><span>Attack</span><span>{details.stats !== undefined && details.stats[1].base_stat}</span><Bar var={details.stats !== undefined && details.stats[1].base_stat} /></li>
<li><span>Defense</span><span>{details.stats !== undefined && details.stats[2].base_stat}</span><Bar var={details.stats !== undefined && details.stats[2].base_stat} /></li>
<li><span>Sp. Atk</span><span>{details.stats !== undefined && details.stats[3].base_stat}</span><Bar var={details.stats !== undefined && details.stats[3].base_stat} /></li>
<li><span>Sp. Def</span><span>{details.stats !== undefined && details.stats[4].base_stat}</span><Bar var={details.stats !== undefined && details.stats[4].base_stat} /></li>
<li><span>Speed</span><span>{details.stats !== undefined && details.stats[5].base_stat}</span><Bar var={details.stats !== undefined && details.stats[5].base_stat} /></li>
<li><span>Total</span><span>{totalBaseStat() !== undefined && totalBaseStat()}</span></li>
</ul>
<div className='ContainerDivDetail'>
<section className='FirstContainer'>
<div className='PokemonPictures'>
<div><img src={details.sprites !== undefined && details.sprites['front_default']} alt="" /></div>
<div><img src={details.sprites !== undefined && details.sprites['back_default']} alt="" /></div>
</div>
<div className='BaseStats'>
<div>
<h2>Base stats</h2>
<ul className='BaseList'>
<li><span>HP</span><span>{details.stats !== undefined && details.stats[0].base_stat}</span><Bar var={details.stats !== undefined && details.stats[0].base_stat} /></li>
<li><span>Attack</span><span>{details.stats !== undefined && details.stats[1].base_stat}</span><Bar var={details.stats !== undefined && details.stats[1].base_stat} /></li>
<li><span>Defense</span><span>{details.stats !== undefined && details.stats[2].base_stat}</span><Bar var={details.stats !== undefined && details.stats[2].base_stat} /></li>
<li><span>Sp. Atk</span><span>{details.stats !== undefined && details.stats[3].base_stat}</span><Bar var={details.stats !== undefined && details.stats[3].base_stat} /></li>
<li><span>Sp. Def</span><span>{details.stats !== undefined && details.stats[4].base_stat}</span><Bar var={details.stats !== undefined && details.stats[4].base_stat} /></li>
<li><span>Speed</span><span>{details.stats !== undefined && details.stats[5].base_stat}</span><Bar var={details.stats !== undefined && details.stats[5].base_stat} /></li>
<li><span>Total</span><span>{totalBaseStat() !== undefined && totalBaseStat()}</span></li>
</ul>
</div>
</div>
<div className='TypesAndMoves'>
<div className='Types'>
<span className='Id'>#{Id}</span>
<span className='Name'>{details.name}</span>
<div>
<span>{Type(details.types !== undefined && details.types[0].type.name)}</span>
<span>{Type(details.types !== undefined && details.types[1]?.type.name)}</span>
</div>
</div>
<div className='Moves'>
<h1>Moves:</h1>
<div>
<span>{details.moves !== undefined && details.moves[0].move.name}</span>
<span>{details.moves !== undefined && details.moves[1].move.name}</span>
<span>{details.moves !== undefined && details.moves[2].move.name}</span>
<span>{details.moves !== undefined && details.moves[3].move.name}</span>
</div>
</div>
</div>
<div className='Moves'>
<h1>Moves:</h1>
<div>
<span>{details.moves !== undefined && details.moves[0].move.name}</span>
<span>{details.moves !== undefined && details.moves[1].move.name}</span>
<span>{details.moves !== undefined && details.moves[2].move.name}</span>
<span>{details.moves !== undefined && details.moves[3].move.name}</span>
</div>
</div>
</div>

<img className='Pokedex' src={pokedex} alt="" />
<img className='PokemonImg' src={details.sprites?.other?.["official-artwork"]?.["front_default"]} alt="" />

<div className='Types'>
<span className='Id'>#{Id}</span>
<span className='Name'>{details.name}</span>
<div>
<span>{Type(details.types !== undefined && details.types[0].type.name)}</span>
<span>{Type(details.types !== undefined && details.types[1]?.type.name)}</span>
</div>
</div>
</section>
</section>
<section className='SecondContainer'>
<img className='PokemonImg' src={details.sprites?.other?.["official-artwork"]?.["front_default"]} alt="" />
</section>
</div>
</ContainerDetail>
)
}
Loading

0 comments on commit b8516ca

Please sign in to comment.