From b8c4d49e48dde28553e0deecaf68c741fb9c474b Mon Sep 17 00:00:00 2001
From: mthomas41 <mthomas41@huskers.unl.edu>
Date: Tue, 4 Jan 2022 23:07:44 -0600
Subject: [PATCH] stat bar now change color
---
my-pokedex/src/features/dex.js | 39 +++++++++++++++++++++++++---------
1 file changed, 29 insertions(+), 10 deletions(-)
diff --git a/my-pokedex/src/features/dex.js b/my-pokedex/src/features/dex.js
index 821474e..3935213 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>
--
GitLab