From 3cb08f16e94a76e811660a5a9069c95155e058fe Mon Sep 17 00:00:00 2001
From: mthomas41 <mthomas41@huskers.unl.edu>
Date: Sat, 6 Aug 2022 14:57:34 -0500
Subject: [PATCH] moved Card to own folder
---
my-pokedex/.gitignore | 1 +
my-pokedex/src/component/pokecard.js | 86 +++++++++++++
.../src/{features => component}/pokenavbar.js | 9 +-
my-pokedex/src/features/dex.js | 115 +++---------------
my-pokedex/src/features/dex.module.css | 18 +++
5 files changed, 129 insertions(+), 100 deletions(-)
create mode 100644 my-pokedex/src/component/pokecard.js
rename my-pokedex/src/{features => component}/pokenavbar.js (83%)
diff --git a/my-pokedex/.gitignore b/my-pokedex/.gitignore
index 4d29575..8692cf6 100644
--- a/my-pokedex/.gitignore
+++ b/my-pokedex/.gitignore
@@ -13,6 +13,7 @@
# misc
.DS_Store
+.env
.env.local
.env.development.local
.env.test.local
diff --git a/my-pokedex/src/component/pokecard.js b/my-pokedex/src/component/pokecard.js
new file mode 100644
index 0000000..450c310
--- /dev/null
+++ b/my-pokedex/src/component/pokecard.js
@@ -0,0 +1,86 @@
+import Card from 'react-bootstrap/Card';
+import ProgressBar from 'react-bootstrap/ProgressBar';
+
+import '../features/custom.css';
+
+
+export default function PokemonCard(pokemon) {
+ const COLORS = {
+ normal: 'cornsilk',
+ grass: 'green',
+ fire: 'red',
+ water: 'blue',
+ electric: 'yellow',
+ ice: 'darkturquoise',
+ fighting: 'firebrick',
+ poison: 'darkmagenta',
+ ground: 'tan',
+ rock: 'sienna',
+ flying: 'silver',
+ steel: 'slategrey',
+ psychic: 'deeppink',
+ bug: 'yellowgreen',
+ ghost: 'darkslateblue',
+ dark: 'darkslategrey',
+ dragon: 'royalblue',
+ fairy: 'thistle'
+ }
+
+ function getTyping(types){
+ if( types.length === 1) {
+ return COLORS[types[0].type.name];
+ }else { // .join() reverses when mapping types. but .reverse() fixes it
+ return 'linear-gradient(to left,'+types.map( (type) => COLORS[type['type'].name]).reverse().join()+')';
+ }
+ }
+
+function statLevel(stat) {
+ if( stat > 120) { // think of switching order since there are lower stats normally
+ return 'info';
+ }else if( stat > 90) {
+ return 'success';
+ }else if( stat > 40) {
+ return 'warning';
+ }else {
+ return 'danger';
+ }
+}
+ return (
+ <Card style={{ width: '18rem', margin: '10px'}}
+ >
+ <Card.Header>{pokemon.name}</Card.Header>
+ <Card.Img variant="top" src={pokemon.sprites.other['official-artwork'].front_default} />
+ <Card.Body>
+ <Card.Title style={{background: getTyping(pokemon.types) }}>
+ { pokemon.types.length > 1 ?
+ `${pokemon.types[0].type.name} ${pokemon.types[1].type.name}`
+ : `${pokemon.types[0].type.name}`
+ }
+ </Card.Title>
+ <Card.Text>
+
+
+ </Card.Text>
+ { `Health Points:` }
+ <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 variant={statLevel(pokemon.stats[1].base_stat)}
+ now={pokemon.stats[1].base_stat} max={255} label={`${pokemon.stats[1].base_stat}`}/> <br/>
+ {`Defense:`}
+ <ProgressBar variant={statLevel(pokemon.stats[2].base_stat)}
+ now={pokemon.stats[2].base_stat} max={255} label={`${pokemon.stats[2].base_stat}`}/> <br/>
+ { `Special-Attack:`}
+ <ProgressBar variant={statLevel(pokemon.stats[3].base_stat)}
+ now={pokemon.stats[3].base_stat} max={255} label={`${pokemon.stats[3].base_stat}`}/> <br/>
+ { `Special-Defense:`}
+ <ProgressBar variant={statLevel(pokemon.stats[4].base_stat)}
+ now={pokemon.stats[4].base_stat} max={255} label={`${pokemon.stats[4].base_stat}`}/> <br/>
+ {`Speed:`}
+ <ProgressBar variant={statLevel(pokemon.stats[5].base_stat)}
+ now={pokemon.stats[5].base_stat} max={255} label={`${pokemon.stats[5].base_stat}`}/> <br/>
+ </Card.Body>
+ </Card>
+ );
+}
+
diff --git a/my-pokedex/src/features/pokenavbar.js b/my-pokedex/src/component/pokenavbar.js
similarity index 83%
rename from my-pokedex/src/features/pokenavbar.js
rename to my-pokedex/src/component/pokenavbar.js
index 0154bf9..5d0e9a7 100644
--- a/my-pokedex/src/features/pokenavbar.js
+++ b/my-pokedex/src/component/pokenavbar.js
@@ -2,8 +2,8 @@ import React, {useEffect} from "react";
import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Container } from 'react-bootstrap';
// public/Poké_Ball_icon.svg.png
// import './custom.css';
-import styles from './dex.module.css';
-import logo from './Poké_Ball_icon.svg.png';
+import styles from '../features/dex.module.css';
+import logo from '../features/Poké_Ball_icon.svg.png';
export default function PokeNavBar(props) {
@@ -13,14 +13,13 @@ export default function PokeNavBar(props) {
<Navbar bg="dark">
<Container>
<Navbar.Brand href="#home">
- <img className={styles.logoimg} src={logo} alt="" />
+ <img className={styles.logoimg} src={logo} alt="pokeball" />
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
- <Nav.Link href="#link">Link</Nav.Link>
- <NavDropdown title="Dropdown" id="basic-nav-dropdown">
+ <NavDropdown title="Generations" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/genone">Gen I</NavDropdown.Item>
<NavDropdown.Item href="#action/gentwo">Gen II</NavDropdown.Item>
<NavDropdown.Item href="#action/genthree">Gen III</NavDropdown.Item>
diff --git a/my-pokedex/src/features/dex.js b/my-pokedex/src/features/dex.js
index 865c0cf..e4163bb 100644
--- a/my-pokedex/src/features/dex.js
+++ b/my-pokedex/src/features/dex.js
@@ -2,9 +2,9 @@
import React, { useState, useEffect } from "react";
import styles from './dex.module.css';
import './custom.css';
-import Card from 'react-bootstrap/Card';
-import ProgressBar from 'react-bootstrap/ProgressBar';
-import PokeNavBar from './pokenavbar.js';
+import PokemonCard from '../component/pokecard';
+
+import PokeNavBar from '../component/pokenavbar';
@@ -21,131 +21,56 @@ function Pokemon(name, typing, moves, abilities, stats, artwork) {
export default function Dex() {
-
+ //const API_KEY = process.env.REACT_APP_API_KEY;
+
const [listofpokemon, setlistofpokemon] = useState([]);
const [disable, setDisable] = useState(false);
- const COLORS = {
- normal: 'cornsilk',
- grass: 'green',
- fire: 'red',
- water: 'blue',
- electric: 'yellow',
- ice: 'darkturquoise',
- fighting: 'firebrick',
- poison: 'darkmagenta',
- ground: 'tan',
- rock: 'sienna',
- flying: 'silver',
- steel: 'slategrey',
- psychic: 'deeppink',
- bug: 'yellowgreen',
- ghost: 'darkslateblue',
- dark: 'darkslategrey',
- dragon: 'royalblue',
- fairy: 'thistle'
- }
-
- function getTyping(types){
- if( types.length === 1) {
- return COLORS[types[0].type.name];
- }else { // .join() reverses when mapping types. but .reverse() fixes it
- return 'linear-gradient(to left,'+types.map( (type) => COLORS[type['type'].name]).reverse().join()+')';
- }
- }
-
- function statLevel(stat) {
- if( stat > 120) { // think of switching order since there are lower stats normally
- return 'info';
- }else if( stat > 90) {
- return 'success';
- }else if( stat > 40) {
- return 'warning';
- }else {
- return 'danger';
- }
- }
-
-
-
-
-
-
-
async function pokemonFetchHelper(url) {
let result = await fetch(url);
let json = await result.json();
// console.log(json);
- return json;
+ return json;
}
async function pokemonFetcher(){
for(let currentPokemon = 1; currentPokemon < 152; currentPokemon++) {
- let responseURL = `https://pokeapi.co/api/v2/pokemon/${currentPokemon}/`;
+ let responseURL = `https://pokeapi.co/api/v2/pokemon/${currentPokemon}/`;
+ console.log(responseURL);
let currentResponse = await pokemonFetchHelper(responseURL);
setlistofpokemon(listofpokemon => {
return [...listofpokemon, currentResponse];
});
}
}
-
+
return (
<main>
<div>
<PokeNavBar/>
</div>
<div>
- <label>Pokedex</label>
+ <h1>Pokedex</h1>
</div>
<div>
<button disabled={disable} onClick={() => {pokemonFetcher(); setDisable(true);}}>fetch pokemon</button>
</div>
- <div>
- <ul className={styles.pokemonlist}>
+ <div className={styles.allcontainer}>
+
+
+
{ listofpokemon.length > 0 ?
listofpokemon.map((pokemon) => (
- <li key={pokemon.id}>
- <Card style={{ width: '18rem' }}
- >
- <Card.Header>{pokemon.name}</Card.Header>
- <Card.Img variant="top" src={pokemon.sprites.other['official-artwork'].front_default} />
- <Card.Body>
- <Card.Title style={{background: getTyping(pokemon.types) }}>
- { pokemon.types.length > 1 ?
- `${pokemon.types[0].type.name} ${pokemon.types[1].type.name}`
- : `${pokemon.types[0].type.name}`
- }
- </Card.Title>
- <Card.Text>
-
-
- </Card.Text>
- { `Health Points:` }
- <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 variant={statLevel(pokemon.stats[1].base_stat)}
- now={pokemon.stats[1].base_stat} max={255} label={`${pokemon.stats[1].base_stat}`}/> <br/>
- {`Defense:`}
- <ProgressBar variant={statLevel(pokemon.stats[2].base_stat)}
- now={pokemon.stats[2].base_stat} max={255} label={`${pokemon.stats[2].base_stat}`}/> <br/>
- { `Special-Attack:`}
- <ProgressBar variant={statLevel(pokemon.stats[3].base_stat)}
- now={pokemon.stats[3].base_stat} max={255} label={`${pokemon.stats[3].base_stat}`}/> <br/>
- { `Special-Defense:`}
- <ProgressBar variant={statLevel(pokemon.stats[4].base_stat)}
- now={pokemon.stats[4].base_stat} max={255} label={`${pokemon.stats[4].base_stat}`}/> <br/>
- {`Speed:`}
- <ProgressBar variant={statLevel(pokemon.stats[5].base_stat)}
- now={pokemon.stats[5].base_stat} max={255} label={`${pokemon.stats[5].base_stat}`}/> <br/>
- </Card.Body>
- </Card>
- </li>
+ <div id={pokemon.name} className={styles.pokemoncontainer}>
+
+ <PokemonCard {...pokemon}/>
+ </div>
+
))
: null}
- </ul>
+
</div>
</main>
);
diff --git a/my-pokedex/src/features/dex.module.css b/my-pokedex/src/features/dex.module.css
index cada27e..79ea8be 100644
--- a/my-pokedex/src/features/dex.module.css
+++ b/my-pokedex/src/features/dex.module.css
@@ -9,6 +9,24 @@
width: 10%;
object-fit: contain;
}
+
+
+ .pokemoncontainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+.allcontainer {
+ margin-left: 25px;
+ margin-right: 25;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+}
+
+
/* .cat {
height:300px;
width: 300px;
--
GitLab