Skip to content

Commit 47866aa

Browse files
linuxunillinuxunil
authored
Merge pull request #2 from linuxunil/imagesLoading
Images loading
2 parents b7cdc2f + 42d0ec4 commit 47866aa

File tree

2 files changed

+93
-74
lines changed

2 files changed

+93
-74
lines changed

Diff for: ‎src/App.jsx

+63-49
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState, useReducer } from "react";
1+
import { useState } from "react";
22
import GameCard from "./components/GameCard";
33
import "./App.css";
44
import { Navbar, Nav, NavDropdown, Row, Col, Container } from "react-bootstrap";
@@ -66,24 +66,39 @@ const defaultPokedex = [
6666
},
6767
];
6868

69-
// BUGS: When high score is recorded images stop changing.
69+
// FIXME: When high score is recorded images stop changing.
7070
function App() {
71-
const [, forceUpdate] = useReducer(x => x + 1, 0);
7271
const [score, setScore] = useState(0);
73-
const [highScore, setHS] = useState(0);
72+
const [highScore, setHighScore] = useState(0);
7473
const [pokedex, setPokedex] = useState(defaultPokedex);
74+
const [selectedTokens, setSelected] = useState([]);
7575
const [pokemonToDisplay, setPokemonToDisply] = useState(defaultPokedex);
7676

77-
function isHighScore(newScore) {
78-
if (newScore > highScore) setHS(newScore);
77+
function gameOver(newScore) {
78+
// Check if score is higher than old HS
79+
// if (newScore > highScore) { setHS(newScore) } //Set HS to new score
80+
if (newScore > highScore) {
81+
setHighScore(newScore);
82+
}
83+
// reset score
84+
// TODO: Reset clicked values.
7985
setScore(0);
8086
}
8187

88+
function resetGame() {
89+
const resetDex = pokedex.map((pokemon) => {
90+
return { ...pokemon, clicked: false };
91+
});
92+
console.log(resetDex);
93+
setSelected('');
94+
console.log("Reset Pokedex")
95+
}
96+
8297
function shuffle(array) {
8398
let currentIndex = array.length;
8499

85100
// While there remain elements to shuffle
86-
while (currentIndex !=0 ) {
101+
while (currentIndex != 0) {
87102
// Pick a remaining element...
88103
let randomIndex = Math.floor(Math.random() * currentIndex);
89104
currentIndex--;
@@ -92,60 +107,59 @@ function App() {
92107
[array[currentIndex], array[randomIndex]] = [
93108
array[randomIndex], array[currentIndex]];
94109
}
95-
setPokemonToDisply(array);
96-
forceUpdate();
110+
return array;
97111
}
98112

99-
const handleClick = (pokemonID) => {
100-
let newState = (pokedex.map(pokemon => {
101-
if (pokemon.id === pokemonID) {
102-
pokemon.clicked ? (isHighScore(score)) : (setScore(score +1 ));
103-
return {...pokedex, clicked: true};
104-
} else {
105-
return pokemon;
106-
}
107-
}));
108-
setPokedex(newState);
109-
shuffle(newState);
113+
const handleClick = (pokemonName) => {
114+
if (selectedTokens.indexOf(pokemonName) >= 0) {
115+
gameOver(score);
116+
resetGame();
117+
} else {
118+
console.log(`Added ${pokemonName}`);
119+
setSelected([...selectedTokens, pokemonName])
120+
setScore(score + 1);
121+
}
122+
123+
// Set new order
124+
setPokemonToDisply(shuffle(pokemonToDisplay));
110125
};
111126

112127
return (
113128
<>
114-
<Navbar expand="lg" className="bg-body-tertiary" pb={4}>
115-
<Container>
116-
<Navbar.Brand href="#home">Pokemon Memorization</Navbar.Brand>
117-
<Navbar.Toggle aria-controls="basic-navbar-nav" />
118-
<Navbar.Collapse id="basic-navbar-nav">
119-
</Navbar.Collapse>
129+
<Navbar expand="lg" className="bg-body-tertiary" pb={4}>
130+
<Container>
131+
<Navbar.Brand href="#home">Pokemon Memorization</Navbar.Brand>
132+
<Navbar.Toggle aria-controls="basic-navbar-nav" />
133+
<Navbar.Collapse id="basic-navbar-nav">
134+
</Navbar.Collapse>
120135
<Navbar.Collapse className="justify-content-end">
121136
<Col>
122-
<Row>
123-
<Navbar.Text>
124-
Score: {score}
125-
</Navbar.Text>
126-
</Row>
127-
<Row>
128-
<Navbar.Text>
129-
High Score: {highScore}
130-
</Navbar.Text>
131-
</Row>
137+
<Row>
138+
<Navbar.Text>
139+
Score: {score}
140+
</Navbar.Text>
141+
</Row>
142+
<Row>
143+
<Navbar.Text>
144+
High Score: {highScore}
145+
</Navbar.Text>
146+
</Row>
132147
</Col>
133148
</Navbar.Collapse>
134-
</Container>
149+
</Container>
135150

136-
</Navbar>
137-
<Container>
151+
</Navbar>
152+
<Container>
138153
<Row className="justify-content-md-center pt-5">
139-
{pokemonToDisplay.map((pokemon, index) => (
140-
<GameCard
141-
key={index}
142-
name={pokemon.name}
143-
handleClick={handleClick}
144-
id={pokemon.id}
145-
/>
146-
))}
147-
</Row>
148-
</Container>
154+
{pokemonToDisplay.map((pokemon, index) => (
155+
<GameCard
156+
key={index}
157+
pokemon={pokemon}
158+
handleClick={handleClick}
159+
/>
160+
))}
161+
</Row>
162+
</Container>
149163
</>
150164
);
151165
}

Diff for: ‎src/components/GameCard.jsx

+30-25
Original file line numberDiff line numberDiff line change
@@ -5,39 +5,44 @@ import axios from "../axios";
55
//Display picture of pokemon
66
//Display pokemon name
77
// TODO: Flip cards on click.
8-
98
export default function GameCard(props) {
10-
const [imageURL, setURL] = useState(null)
11-
const [name, setName] = useState(props.name);
9+
const [imageURL, setURL] = useState(null); // URL for image from API
10+
const [name, setName] = useState(props.pokemon.name); // Name of pokemon
1211

1312
useEffect(() => {
13+
// Get image to display on card
1414
async function getImageURL() {
15-
let response;
16-
let sprites;
15+
// We have to split the response due to 'official-artwork' hyphen
16+
let response; // First part of response
17+
let sprites; // second part of response
1718
try {
18-
response = await axios.get(props.name);
19-
sprites = response.data.sprites.other["official-artwork"];
20-
setURL(sprites.front_default);
21-
setName(props.name);
22-
} catch(error) {
19+
// get json from api. baseURL in axios.js + pokemon name
20+
response = await axios.get(props.pokemon.name);
21+
// get first half listing sprites
22+
sprites = response.data.sprites.other["official-artwork"];
23+
//set url to the default artwork
24+
setURL(sprites.front_default);
25+
// set the name.
26+
setName(props.pokemon.name);
27+
} catch (error) {
2328
console.error(error);
2429
}
2530
}
2631
getImageURL();
27-
}, [imageURL, props.name]);
32+
}, [imageURL, props.pokemon.name]);
2833

29-
return (
30-
<Col md={"auto"}>
31-
<Card style={{ width: "14rem", height: "15rem" }}
32-
onClick={() => {
33-
props.handleClick(props.id);
34-
}}
35-
>
36-
<Card.Img variant="top" src={imageURL} />
37-
<Card.Body>
38-
<Card.Title>{name}</Card.Title>
39-
</Card.Body>
40-
</Card>
41-
</Col>
42-
);
34+
return (
35+
<Col md={"auto"}>
36+
<Card style={{ width: "14rem", height: "15rem" }}
37+
onClick={() => {
38+
props.handleClick(name);
39+
}}
40+
>
41+
<Card.Img variant="top" src={imageURL} />
42+
<Card.Body>
43+
<Card.Title>{name}</Card.Title>
44+
</Card.Body>
45+
</Card>
46+
</Col>
47+
);
4348
}

0 commit comments

Comments
 (0)