diff --git a/my-pokedex/src/features/dex.js b/my-pokedex/src/features/dex.js index 821474e3ba3c6c3621fb68d5f907f9698367b3f6..39352131a4572c4fa2c5bdadea79bec88e1b053e 100644 --- a/my-pokedex/src/features/dex.js +++ b/my-pokedex/src/features/dex.js @@ -21,7 +21,7 @@ export default function Dex() { const [listofpokemon, setlistofpokemon] = useState([]); const [disable, setDisable] = useState(false); - const colors = { + const COLORS = { normal: 'cornsilk', grass: 'green', fire: 'red', @@ -43,13 +43,26 @@ export default function Dex() { } function getTyping(types){ if( types.length === 1) { - return colors[types[0].type.name]; + return COLORS[types[0].type.name]; }else { - return 'linear-gradient(to left,'+types.map(type=> colors[type.type.name]).join()+')'; + return 'linear-gradient(to left,'+types.map(type=> COLORS[type.type.name]).join()+')'; } } - + function statLevel(stat) { + + if( stat > 120) { + return 'info'; + }else if( stat > 90) { + return 'success'; + }else if( stat > 40) { + return 'warning'; + }else { + return 'danger'; + } + + + } // useEffect ( () => { // pokemonFetcher(); @@ -96,17 +109,23 @@ export default function Dex() { </Card.Title> <Card.Text> { `health points:` } - <ProgressBar now={pokemon.stats[0].base_stat} max={200} label={`${pokemon.stats[0].base_stat}`}/> <br/> + <ProgressBar variant={statLevel(pokemon.stats[0].base_stat)} + now={pokemon.stats[0].base_stat} max={255} label={`${pokemon.stats[0].base_stat}`}/> <br/> {`attack:`} - <ProgressBar now={pokemon.stats[1].base_stat} max={200} label={`${pokemon.stats[1].base_stat}`}/> <br/> + <ProgressBar variant={statLevel(pokemon.stats[1].base_stat)} + now={pokemon.stats[1].base_stat} max={190} label={`${pokemon.stats[1].base_stat}`}/> <br/> {` defense:`} - <ProgressBar now={pokemon.stats[2].base_stat} max={200} label={`${pokemon.stats[2].base_stat}`}/> <br/> + <ProgressBar variant={statLevel(pokemon.stats[2].base_stat)} + now={pokemon.stats[2].base_stat} max={230} label={`${pokemon.stats[2].base_stat}`}/> <br/> { `special-attack:`} - <ProgressBar now={pokemon.stats[3].base_stat} max={200} label={`${pokemon.stats[3].base_stat}`}/> <br/> + <ProgressBar variant={statLevel(pokemon.stats[3].base_stat)} + now={pokemon.stats[3].base_stat} max={194} label={`${pokemon.stats[3].base_stat}`}/> <br/> { `special-defense:`} - <ProgressBar now={pokemon.stats[4].base_stat} max={200} label={`${pokemon.stats[4].base_stat}`}/> <br/> + <ProgressBar variant={statLevel(pokemon.stats[4].base_stat)} + now={pokemon.stats[4].base_stat} max={230} label={`${pokemon.stats[4].base_stat}`}/> <br/> {`speed:`} - <ProgressBar now={pokemon.stats[5].base_stat} max={200} label={`${pokemon.stats[5].base_stat}`}/> <br/> + <ProgressBar variant={statLevel(pokemon.stats[5].base_stat)} + now={pokemon.stats[5].base_stat} max={180} label={`${pokemon.stats[5].base_stat}`}/> <br/> </Card.Text>