Skip to content

Commit

Permalink
Se modifican estilos
Browse files Browse the repository at this point in the history
  • Loading branch information
@DannitaZz
DannitaZz committed Feb 3, 2022
1 parent 5c26e7d commit 4dd60fa
Show file tree
Hide file tree
Showing 28 changed files with 381 additions and 139 deletions.
20 changes: 13 additions & 7 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,17 @@
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
.fade-in{
animation: fadeInAnimation ease 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
9 changes: 4 additions & 5 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,19 @@ import Pokemon from './components/pages/pokemon';
import Details from './components/pages/details';
import SignIn from './components/pages/login';
import {checkLogin} from './utils'
import {validUser, validPass } from './utils'

function App() {

const [state, dispatch] = useReducer(reducer, initialState);

const loggedIn = checkLogin()

return (
<div className="App">
<BrowserRouter>
<Routes>
<Route exact path='/' element={!loggedIn ? <Navigate to="/login" /> : <Pokemon favs={state.favIds} actionName={'setMainPage'} data={state.data} page={state.mainPage.page} filterState={state.filterState} dispatch={dispatch} />} />
<Route exact path='/:id' element={!loggedIn ? <Navigate to="/login" /> : <Details searchValue={state.filterState.name} pokemon={state.detailPage.pokemon} currentType={state.filterState.type} dispatch={dispatch} />} />
<Route exact path='/favorites' element={!loggedIn ? <Navigate to="/login" /> : <Pokemon favs={state.favIds} actionName={'setFavPage'} data={state.favs} page={state.favPage.page} filterState={state.filterState} dispatch={dispatch} />} />
<Route exact path='/' element={!checkLogin(validUser, validPass) ? <Navigate to="/login" /> : <Pokemon favs={state.favIds} actionName={'setMainPage'} data={state.data} page={state.mainPage.page} filterState={state.filterState} dispatch={dispatch} />} />
<Route exact path='/:id' element={!checkLogin(validUser, validPass) ? <Navigate to="/login" /> : <Details searchValue={state.filterState.name} pokemon={state.detailPage.pokemon} currentType={state.filterState.type} dispatch={dispatch} />} />
<Route exact path='/favorites' element={!checkLogin(validUser, validPass) ? <Navigate to="/login" /> : <Pokemon favs={state.favIds} actionName={'setFavPage'} data={state.favs} page={state.favPage.page} filterState={state.filterState} dispatch={dispatch} />} />
<Route exact path='/login' element={<SignIn />} />
</Routes>
</BrowserRouter>
Expand Down
7 changes: 0 additions & 7 deletions src/components/navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Menu from '@mui/material/Menu';
import MenuIcon from '@mui/icons-material/Menu';
import Container from '@mui/material/Container';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
Expand Down Expand Up @@ -108,12 +107,6 @@ const ResponsiveAppBar = ({ searchValue, currentType, dispatch }) => {
)
}
})()}
{/* <Box sx={{ flexGrow: 0, display: 'flex' }}>
<BasicMenu currentType={currentType} dispatch={dispatch} />
</Box>
<Box sx={{ flexGrow: 0, display: 'flex' }}>
<SearchAppBar searchValue={searchValue} dispatch={dispatch} />
</Box> */}
<Box sx={{ flexGrow: 0, display: { xs: 'none', lg: 'flex' } }}>
<Tooltip title="Open settings">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0, color: 'white', marginLeft: '10px' }}>
Expand Down
30 changes: 7 additions & 23 deletions src/components/pages/login.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import Link from '@mui/material/Link';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import CatchingPokemonIcon from '@mui/icons-material/CatchingPokemon';

import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import { useNavigate } from 'react-router-dom';
Expand All @@ -26,25 +25,26 @@ function Copyright(props) {
);
}

export default function SignIn({state, dispatch}) {
export default function SignIn() {

const navigateTo = useNavigate();
const handleSubmit = (event) => {
const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
// eslint-disable-next-line no-console
const user = {
email: data.get('email'),
password: data.get('password'),
}
/* dispatch({type: 'signIn', value: user}) */
/* dispatch({type: 'signIn', value: user}) */
localStorage.setItem('user', user.email)
localStorage.setItem('pass', user.password)

navigateTo('/')

};

return (
<Container component="main" maxWidth="xs">
<Container className="fade-in" component="main" maxWidth="xs">

<Box
sx={{
Expand Down Expand Up @@ -78,30 +78,14 @@ export default function SignIn({state, dispatch}) {
label="Password"
id="password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
sx={{ mt: 3, mb: 2, backgroundColor: '#161B22' }}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</Box>
</Box>
<Copyright sx={{ mt: 8, mb: 4 }} />
Expand Down
2 changes: 0 additions & 2 deletions src/components/pages/pokemon.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@ const typeFilter = (type, data) => {

function Pokemon({favs, actionName, data, page, filterState, dispatch}) {

// checkLogin(useNavigate)

const pokeCount = 898
const pageSize = 20;
let filteredData = data
Expand Down
196 changes: 162 additions & 34 deletions src/components/pokedetails.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,134 @@ import axios from 'axios';
import { Chart } from "react-google-charts";
import { Typography, Card, CardContent, CardMedia } from '@mui/material';

import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box'
import { ReactComponent as Bug } from '../img/bug.svg'
import { ReactComponent as Dark } from '../img/dark.svg'
import { ReactComponent as Dragon } from '../img/dragon.svg'
import { ReactComponent as Electric } from '../img/electric.svg'
import { ReactComponent as Fairy } from '../img/fairy.svg'
import { ReactComponent as Fighting } from '../img/fighting.svg'
import { ReactComponent as Fire } from '../img/fire.svg'
import { ReactComponent as Flying } from '../img/flying.svg'
import { ReactComponent as Ghost } from '../img/ghost.svg'
import { ReactComponent as Grass } from '../img/grass.svg'
import { ReactComponent as Ground } from '../img/ground.svg'
import { ReactComponent as Ice } from '../img/ice.svg'
import { ReactComponent as Normal } from '../img/normal.svg'
import { ReactComponent as Poison } from '../img/poison.svg'
import { ReactComponent as Psychic } from '../img/psychic.svg'
import { ReactComponent as Rock } from '../img/rock.svg'
import { ReactComponent as Steel } from '../img/steel.svg'
import { ReactComponent as Water } from '../img/water.svg'

const typeColors = {
'loading': 'white',
'undefined': 'white',
'null': 'white',
'bug': '#6c7d45',
'dark': '#595761',
'dragon': '#176cc5',
'electric': '#f1d85a',
'fairy': '#ed93e4',
'fighting': '#d14461',
'fire': '#f9a555',
'flying': '#a2bcea',
'ghost': '#606fba',
'grass': '#63bc5d',
'ground': '#d87c52',
'ice': '#79d0c1',
'normal': '#a0a29f',
'poison': '#b667cd',
'psychic': '#f88684',
'rock': '#d87c52',
'steel': '#5995a2',
'water': '#579edd'
}

const typeComponents = {
'loading': Grass,
'undefined': Grass,
'null': Grass,
'bug': Bug,
'dark': Dark,
'dragon': Dragon,
'electric': Electric,
'fairy': Fairy,
'fighting': Fighting,
'fire': Fire,
'flying': Flying,
'ghost': Ghost,
'grass': Grass,
'ground': Ground,
'ice': Ice,
'normal': Normal,
'poison': Poison,
'psychic': Psychic,
'rock': Rock,
'steel': Steel,
'water': Water
}

function Pokedetails({ pokemon, dispatch }) {

let typeOneColor
let typeTwoColor
const highestStat = Math.max(...pokemon.stats.map((item) => item.base_stat))
console.log(highestStat)

if (pokemon.types.length == 2) {
typeOneColor = typeColors[String(pokemon.types[0].type.name)]
typeTwoColor = typeColors[String(pokemon.types[1].type.name)]
} else {
typeOneColor = typeColors[String(pokemon.types[0].type.name)]
typeTwoColor = typeColors[String(pokemon.types[0].type.name)]
}

const { id } = useParams();
function upperFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
const data = [
["Stat", "Pts", {role: 'style'}],
["HP", Number(pokemon.stats[0].base_stat), 'color: #D14461'],
["Attack", Number(pokemon.stats[1].base_stat), 'color: #176CC5'],
["Defense", Number(pokemon.stats[2].base_stat), 'color: #63BC5D'],
["Special Attack", Number(pokemon.stats[3].base_stat), 'color: #F1D85A'],
["Special Defense", Number(pokemon.stats[4].base_stat), 'color: #B667CD'],
["Speed", Number(pokemon.stats[5].base_stat), 'color: #D87C52'],
["Stat", 'Pts', { role: 'style' }, {
sourceColumn: 0,
role: "annotation",
type: "string",
calc: "stringify",
}],
["HP", Number(pokemon.stats[0].base_stat), `color: ${typeOneColor}`, null],
["Att", Number(pokemon.stats[1].base_stat), `color: ${typeTwoColor}`, null],
["Deff", Number(pokemon.stats[2].base_stat), `color: ${typeOneColor}`, null],
["Sp.Att", Number(pokemon.stats[3].base_stat), `color: ${typeTwoColor}`, null],
["Sp.Deff", Number(pokemon.stats[4].base_stat), `color: ${typeOneColor}`, null],
["Spd", Number(pokemon.stats[5].base_stat), `color: ${typeTwoColor}`, null],
];
const options = {
title: "Stats",
chartArea: { width: "50%" },
chartArea: { width: "70%" },
isStacked: true,
hAxis: {
title: "Pokémon Stats",
minValue: 0,
maxValue: 100,
minValue: 0,
gridlines: { count: 0 },
textStyle: {
fontSize: 0
},
baselineColor: '#fff',
viewWindowMode: 'explicit',
viewWindow: {
max: highestStat,
min: 0
}
},
legend: { position: "none" },
vAxis: {
gridlines: { count: 0 },
textStyle: {
fontSize: 12
},
baselineColor: '#fff',
},
};
};

useEffect(() => {
async function getPokeData() {
Expand All @@ -48,34 +152,58 @@ function Pokedetails({ pokemon, dispatch }) {
return (
<>

<div style={{display: 'flex', alignContent: 'center', justifyContent: 'center', marginTop: '3%'}}>
<Card sx={{ height: '80vh', display: 'flex', justifyContent: 'center', justifySelf: 'center', alignSelf: 'center'}}>
<CardContent sx={{ align: 'center'}}>
<div className='fade-in' style={{ display: 'flex', alignContent: 'center', justifyContent: 'center', marginTop: '3%' }}>
<Card sx={{ height: '80vh', display: 'flex', justifyContent: 'center', justifySelf: 'center', alignSelf: 'center', width: '70%' }}>
<CardContent sx={{ margin: '0px', padding: '0px', border: '0px', width: '100%' }}>
<CardMedia
className='poke-background'
component="img"
sx={{ height: '40vh', align: 'center' }}
sx={{
height: '40vh',
align: 'center',
margin: '0px',
padding: '10px',
border: '0px',
objectFit: 'contain',
backgroundImage: `linear-gradient(to right, ${typeOneColor + '30'}, ${typeTwoColor + '30'})`// {typeOneColor}
}}
image={pokemon && pokemon.sprites.other["official-artwork"].front_default}
alt="pokemon"
/>
<Typography component="div" variant="h5" textAlign='center'>
{upperFirstLetter(pokemon.name)}
<br></br>
#{id}
</Typography>
<Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', margin: '10px' }}>
<Typography component="div" variant="h5" textAlign='center' sx={{ fontWeight: 'bold' }}>
{upperFirstLetter(pokemon.name)}
</Typography>
<Typography component="div" variant="h5" textAlign='center' sx={{ color: 'gray' }}>
#{id}
</Typography>
</Stack>

<Typography component="div" variant="p" textAlign='center'>

{pokemon && pokemon.types.map((type, i) => {
return (<li key={'t' + i}>{type.type.name}</li>)
})}
{pokemon && pokemon.types.map((type_, i) => {
const type_name = String(type_.type.name)
console.log('TYPE IS', type_name)
const TypeComponent = typeComponents[type_name];
return (<Chip sx={{ backgroundColor: typeColors[type_name], color: 'white', margin: '10px' }}
icon={<TypeComponent style={{ width: '15px', color: 'white' }} />}
label={type_name}
key={"type" + i}
/>)
}
)
}
</Typography>

<Chart
chartType="BarChart"
width="100%"
height="50%"
data={data}
options={options}
/>
<Chart className='chart'
chartType="BarChart"
width="60%"
height="30vh"
data={data}
options={options}
style={{
width: "fit-content",
margin: "0 auto"
}}
/>
</CardContent>
</Card>
</div>
Expand Down
Loading

0 comments on commit 4dd60fa

Please sign in to comment.