Skip to content

Commit 5f1b557

Browse files
linuxunillinuxunil
committed
Merge branch 'styleing'
2 parents 528c1f7 + 454f949 commit 5f1b557

File tree

4 files changed

+99
-30
lines changed

4 files changed

+99
-30
lines changed

Diff for: ‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-bs-theme="dark">
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />

Diff for: ‎src/App.jsx

+68-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { useState, useReducer } from "react";
1+
import { useState, useReducer, useEffect } from "react";
22
import GameCard from "./components/GameCard";
33
import "./App.css";
4-
import { Col, Row, Container } from "react-bootstrap";
4+
import { Navbar, Nav, NavDropdown, Row, Col, Container } from "react-bootstrap";
5+
import axios from "./axios";
6+
import { propTypes } from "react-bootstrap/esm/Image";
57

68
const defaultPokedex = [
79
{
@@ -71,8 +73,9 @@ function App() {
7173
const [score, setScore] = useState(0);
7274
const [highScore, setHS] = useState(0);
7375
const [pokedex, setPokedex] = useState(defaultPokedex);
74-
// const [pokimonToPlay, setPokimonToPlay] = useState();
76+
const [imageCache, setImageCache] = useState({});
7577
const [pokemonToDisplay, setPokemonToDisply] = useState(defaultPokedex);
78+
const [isLoading, setLoading] = useState(null);
7679

7780
function isHighScore(newScore) {
7881
if (newScore > highScore) setHS(newScore);
@@ -95,6 +98,25 @@ function App() {
9598
setPokemonToDisply(array);
9699
forceUpdate();
97100
}
101+
useEffect(() => {
102+
async function cacheImages() {
103+
try {
104+
let cacheImages = {};
105+
pokedex.map(async (pokemon) => {
106+
const response = await axios.get(pokemon.name);
107+
const img_url = response.data.sprites.other["official-artwork"];
108+
cacheImages[pokemon.name] = img_url.front_default;
109+
console.log(img_url.front_default);
110+
console.log(cacheImages[pokemon.name]);
111+
});
112+
setImageCache(cacheImages);
113+
} catch (error) {
114+
console.error(error);
115+
}
116+
}
117+
cacheImages();
118+
setLoading(false);
119+
},[pokedex])
98120

99121
const handleClick = (pokemonID) => {
100122
let newState = (pokedex.map(pokemon => {
@@ -110,22 +132,60 @@ function App() {
110132
};
111133

112134
return (
135+
<>
136+
<Navbar expand="lg" className="bg-body-tertiary" pb={4}>
137+
<Container>
138+
<Navbar.Brand href="#home">Pokemon Memorization</Navbar.Brand>
139+
<Navbar.Toggle aria-controls="basic-navbar-nav" />
140+
<Navbar.Collapse id="basic-navbar-nav">
141+
{/* <Nav className="me-auto">
142+
<Nav.Link href="#home">Home</Nav.Link>
143+
<Nav.Link href="#link">Link</Nav.Link>
144+
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
145+
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
146+
<NavDropdown.Item href="#action/3.2">
147+
Another action
148+
</NavDropdown.Item>
149+
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
150+
<NavDropdown.Divider />
151+
<NavDropdown.Item href="#action/3.4">
152+
Separated link
153+
</NavDropdown.Item>
154+
</NavDropdown>
155+
</Nav> */}
156+
</Navbar.Collapse>
157+
<Navbar.Collapse className="justify-content-end">
158+
<Col>
159+
<Row>
160+
<Navbar.Text>
161+
Score: {score}
162+
</Navbar.Text>
163+
</Row>
164+
<Row>
165+
<Navbar.Text>
166+
High Score: {highScore}
167+
</Navbar.Text>
168+
</Row>
169+
</Col>
170+
</Navbar.Collapse>
171+
</Container>
172+
173+
</Navbar>
113174
<Container>
114-
<div>
115-
<p>Score: {score}</p>
116-
<p>High Score: {highScore}</p>
117-
</div>
118-
<Row md={4}>
175+
<Row className="justify-content-md-center pt-5">
119176
{pokemonToDisplay.map((pokemon, index) => (
120177
<GameCard
121178
key={index}
122179
name={pokemon.name}
123180
handleClick={handleClick}
181+
images={imageCache}
124182
id={pokemon.id}
183+
isLoading={isLoading}
125184
/>
126185
))}
127186
</Row>
128187
</Container>
188+
</>
129189
);
130190
}
131191
export default App;

Diff for: ‎src/components/GameCard.jsx

+29-20
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,52 @@
11
import { useState, useEffect } from "react";
2-
import { Card, Col } from "react-bootstrap";
3-
import axios from "../axios";
2+
import { Card, Col, Placeholder } from "react-bootstrap";
3+
// import axios from "../axios";
44

55
//Display picture of pokemon
66
//Display pokemon name
77
export default function GameCard(props) {
88
const [sprite, setSprite] = useState([]);
99
const [isLoading, setLoading] = useState(null);
1010

11-
useEffect(() => {
12-
async function fetchData() {
13-
try {
14-
const response = await axios.get(props.name);
15-
setSprite(response.data.sprites.other["official-artwork"]);
16-
} catch (error) {
17-
console.error(error);
18-
}
19-
}
20-
fetchData();
11+
// useEffect(() => {
12+
// async function fetchData() {
13+
// try {
14+
// const response = await axios.get(props.name);
15+
// setSprite(response.data.sprites.other["official-artwork"]);
16+
// } catch (error) {
17+
// console.error(error);
18+
// }
19+
// }
20+
// fetchData();
2121

22-
setLoading(false);
23-
}, [props.name]);
22+
// setLoading(false);
23+
// }, [props.name]);
2424

25-
if (isLoading) {
25+
if (props.isLoading) {
2626
return <p>Loading...</p>;
2727
} else {
2828
return (
29-
<Col>
30-
<Card
31-
style={{ width: "12rem" }}
29+
<Col md={"auto"}>
30+
{props.isLoading ? (
31+
<Card style={{ width: '18rem' }}>
32+
<Card.Img variant="top" src="holder.js/100px180" />
33+
<Card.Body>
34+
<Placeholder as={Card.Title} animation="glow">
35+
<Placeholder xs={6} />
36+
</Placeholder>
37+
</Card.Body>
38+
</Card> ) : (
39+
<Card style={{ width: "14rem", height: "15rem" }}
3240
onClick={() => {
3341
props.handleClick(props.id);
3442
}}
3543
>
36-
<Card.Img variant="top" src={sprite.front_default} />
44+
{console.log(props.images[props.name])}
45+
<Card.Img variant="top" src={props.images[props.name]} />
3746
<Card.Body>
3847
<Card.Title>{props.name}</Card.Title>
3948
</Card.Body>
40-
</Card>
49+
</Card>)}
4150
</Col>
4251
);
4352
}

Diff for: ‎vite.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@ export default defineConfig({
1111
host: true,
1212
strictPort: true,
1313
port: 5173,
14-
}
14+
},
1515
})

0 commit comments

Comments
 (0)