Browse Source

Managed to get multiple mons appearing!

Luiserebii 10 months ago
parent
commit
f7e59d3a37
Signed by: Luiserebii <luis@serebii.io> GPG Key ID: 58A745E0A5422230
2 changed files with 65 additions and 20 deletions
  1. 63
    18
      first-simple-project/js/app.js
  2. 2
    2
      first-simple-project/js/seed.js

+ 63
- 18
first-simple-project/js/app.js View File

@@ -1,32 +1,77 @@
1
+class PokemonListComponent extends React.Component {
2
+
3
+
4
+	//Array.map (thing of each array being iterated over => return value of each thing)
5
+
6
+	render() {
7
+
8
+				/*REMEMBER THAT THE BELOW ARE JUST HTML ATTRIBUTES; therefore, need {}*/
9
+
10
+		let pokemonList = Seed.smogonBWSets.map((pokemon) => (
11
+
12
+				<PokemonComponent 
13
+					id={pokemon.id} 
14
+					name = {pokemon.name}
15
+					imgurl = {pokemon.imgurl}
16
+					typing = {pokemon.typing}
17
+					stats = {pokemon.stats}
18
+					item = {pokemon.item}
19
+					ability = {pokemon.ability}
20
+					nature = {pokemon.nature}
21
+					evs = {pokemon.evs}
22
+					moveset = {pokemon.moveset}
23
+				/>
24
+			)
25
+
26
+		);
27
+
28
+		console.log(pokemonList);
29
+
30
+		return (<div className="pokemon-list-component">{pokemonList}</div>); 
31
+
32
+	}
33
+
34
+
35
+
36
+
37
+
38
+}
39
+
40
+
41
+
1 42
 class PokemonComponent extends React.Component {
2 43
 
44
+	constructor(props){
45
+		super(props);
46
+	}
47
+
3 48
 	render() {
4 49
 
5 50
 			return (
6 51
 
7 52
 				<div className="pokemon-component">
8
-					<h3 className="name">{Seed.smogonBWSets[0].name}</h3>
9
-					<img src={Seed.smogonBWSets[0].imgurl}/>
10
-					<span>Typing: {Seed.smogonBWSets[0].typing.type1}/{Seed.smogonBWSets[0].typing.type2}</span><br />
53
+					<h3 className="name">{this.props.name}</h3>
54
+					<img src={this.props.imgurl}/>
55
+					<span>Typing: {this.props.typing.type1}</span><br />
11 56
 					<span>Stats: </span>
12 57
 						<ol>
13
-							<li>HP: {Seed.smogonBWSets[0].stats.hp}</li>
14
-							<li>Attack: {Seed.smogonBWSets[0].stats.atk}</li>
15
-							<li>Defense: {Seed.smogonBWSets[0].stats.def}</li>
16
-							<li>Sp. Atk: {Seed.smogonBWSets[0].stats.spa}</li>
17
-							<li>Sp. Def: {Seed.smogonBWSets[0].stats.spd}</li>
18
-							<li>Speed: {Seed.smogonBWSets[0].stats.spe}</li>
58
+							<li>HP: {this.props.stats.hp}</li>
59
+							<li>Attack: {this.props.stats.atk}</li>
60
+							<li>Defense: {this.props.stats.def}</li>
61
+							<li>Sp. Atk: {this.props.stats.spa}</li>
62
+							<li>Sp. Def: {this.props.stats.spd}</li>
63
+							<li>Speed: {this.props.stats.spe}</li>
19 64
 						</ol>
20
-					<span>Item: {Seed.smogonBWSets[0].item}</span><br />
21
-					<span>Ability: {Seed.smogonBWSets[0].ability}</span><br />
22
-					<span>Nature: {Seed.smogonBWSets[0].nature}</span><br />
23
-					<span>EVs: {/*Seed.smogonBWSets[0].evs*/}</span>
65
+					<span>Item: {this.props.item}</span><br />
66
+					<span>Ability: {this.props.ability}</span><br />
67
+					<span>Nature: {this.props.nature}</span><br />
68
+					<span>EVs: {/*this.props.evs*/}</span>
24 69
 					<span>Moveset: </span>
25 70
 						<ol>
26
-							<li>{Seed.smogonBWSets[0].moveset[0]}</li>
27
-							<li>{Seed.smogonBWSets[0].moveset[1]}</li>
28
-							<li>{Seed.smogonBWSets[0].moveset[2]}</li>
29
-							<li>{Seed.smogonBWSets[0].moveset[3]}</li>
71
+							<li>{this.props.moveset[0]}</li>
72
+							<li>{this.props.moveset[1]}</li>
73
+							<li>{this.props.moveset[2]}</li>
74
+							<li>{this.props.moveset[3]}</li>
30 75
 
31 76
 						</ol>
32 77
 				</div>
@@ -38,4 +83,4 @@ class PokemonComponent extends React.Component {
38 83
 }
39 84
 
40 85
 
41
-ReactDOM.render(<PokemonComponent />, document.getElementById('main'));
86
+ReactDOM.render(<PokemonListComponent />, document.getElementById('main'));

+ 2
- 2
first-simple-project/js/seed.js View File

@@ -93,7 +93,7 @@ window.Seed = (function () {
93 93
 		{
94 94
 			id: 2,
95 95
 			name: "Cloyster",
96
-			imgurl: "https://www.smogon.com/dex/media/sprites/bw/breloom.gif",
96
+			imgurl: "https://www.smogon.com/dex/media/sprites/bw/cloyster.gif",
97 97
 			typing: {
98 98
 				type1: Type.WATER,
99 99
 				type2: Type.ICE
@@ -125,7 +125,7 @@ window.Seed = (function () {
125 125
 		{
126 126
 			id: 3,
127 127
 			name: "Donphan",
128
-			imgurl: "https://www.smogon.com/dex/media/sprites/bw/cloyster.gif",
128
+			imgurl: "https://www.smogon.com/dex/media/sprites/bw/donphan.gif",
129 129
 			typing: {
130 130
 				type1: Type.GROUND
131 131
 			},

Loading…
Cancel
Save