- App goes here
+
+ {this.state.play ?
)
}
diff --git a/src/components/Cards.js b/src/components/Cards.js
new file mode 100644
index 0000000..55db30b
--- /dev/null
+++ b/src/components/Cards.js
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import '../styles/components/Cards.scss';
+
+class Cards extends React.Component{
+ constructor(){
+ super();
+
+ this.state = {
+ currentCardIndex: 0
+ }
+
+
+ }
+
+
+render(){
+ return(
+
+
+
+
+
}
+
+)
+}
+
+}
+
+export default Cards
diff --git a/src/components/Game.js b/src/components/Game.js
new file mode 100644
index 0000000..8fcc943
--- /dev/null
+++ b/src/components/Game.js
@@ -0,0 +1,63 @@
+import React from 'react'
+import Cards from './Cards.js'
+
+import '../styles/components/Game.scss';
+
+class Game extends React.Component{
+ constructor(){
+ super()
+
+ this.state = {
+ playerScore: 0,
+ computerScore: 0,
+ playerTurn: true,
+ playerCard: {},
+ computerCard: {},
+ cardIndex: 0
+ }
+
+ this.handleClick = this.handleClick.bind(this);
+
+ }
+
+
+handleClick(playerStat, computerStat){
+const playerCard = this.props.team[this.state.cardIndex];
+const computerCard = this.props.opponent[this.state.cardIndex];
+ if (playerStat > computerStat){
+ this.setState({
+ playerScore: this.state.playerScore + 1,
+ cardIndex: this.state.cardIndex + 1
+ })
+ alert(`${playerCard.name} beat ${computerCard.name}`)
+
+ } else if (playerStat < computerStat){
+ this.setState({
+ computerScore: this.state.computerScore + 1,
+ cardIndex: this.state.cardIndex + 1
+ })
+ alert(`${computerCard.name} beat ${playerCard.name}`)
+ }
+
+ if (this.state.playerScore === 3){
+ alert("Player Wins")
+ let win = new Audio('win.mp3');
+ win.play();
+ }
+
+}
+
+render(){
+ const playerCard = this.props.team[this.state.cardIndex];
+ const computerCard = this.props.opponent[this.state.cardIndex];
+ return(
+
+ {this.props.playerCard.name}
+
+ Speed: {this.props.playerCard.stats[0].base_stat}
+ Special Defense: {this.props.playerCard.stats[1].base_stat}
+ Special Attack: {this.props.playerCard.stats[2].base_stat}
+ Defense: {this.props.playerCard.stats[3].base_stat}
+ Attack: {this.props.playerCard.stats[4].base_stat}
+ HP: {this.props.playerCard.stats[5].base_stat}
+
+ +
+ Speed: {this.props.playerCard.stats[0].base_stat}
+ Special Defense: {this.props.playerCard.stats[1].base_stat}
+ Special Attack: {this.props.playerCard.stats[2].base_stat}
+ Defense: {this.props.playerCard.stats[3].base_stat}
+ Attack: {this.props.playerCard.stats[4].base_stat}
+ HP: {this.props.playerCard.stats[5].base_stat}
+
+
+
+ )
+}
+
+
+}
+export default Game
diff --git a/src/components/Playercard.js b/src/components/Playercard.js
new file mode 100644
index 0000000..262b0e2
--- /dev/null
+++ b/src/components/Playercard.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+class Cards extends React.Component{
+ constructor(){
+ super();
+
+ this.state = {
+ currentCardIndex: 0
+ }
+
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+handleClick(){
+ console.log("the")
+}
+
+
+render(){
+ return(
+ Player Score: {this.state.playerScore} --- Computer Score: {this.state.computerScore}
+ {this.props.team[${this.state.currentCardIndex}].name}
+ {pokemon.stats[${this.state.currentCardIndex}].stat.name}{pokemon.stats[${this.state.currentCardIndex}].base_stat}
+
+)
+}
+
+}
+
+export default Cards
diff --git a/src/components/Pokemon.js b/src/components/Pokemon.js
new file mode 100644
index 0000000..0f04b8c
--- /dev/null
+++ b/src/components/Pokemon.js
@@ -0,0 +1,55 @@
+import React from 'react';
+
+class Pokemon extends React.Component {
+ constructor(){
+ super();
+
+ this.state= {
+
+ }
+
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+handleClick(){
+ if(this.props.onTeam){
+ this.props.removePokemonFromTeam(this.props.pokemon);
+ } else {
+ this.props.addPokemonToTeam(this.props.pokemon);
+ }
+}
+
+ render(){
+ return(
+
+
+
+
+
+ )
+ }
+
+}
+
+export default Pokemon
diff --git a/src/components/Search.js b/src/components/Search.js
new file mode 100644
index 0000000..e2d99dd
--- /dev/null
+++ b/src/components/Search.js
@@ -0,0 +1,36 @@
+import React from 'react';
+
+class Search extends React.Component{
+ constructor(){
+ super();
+
+ this.state = {
+
+ }
+
+ this.handleChange = this.handleChange.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ }
+
+handleChange(event){
+ this.props.handleSearchChange(event.target.value)
+}
+
+handleSubmit(event){
+ event.preventDefault();
+ this.props.handleSearchSubmit();
+ }
+
+
+
+render(){
+ return (
+
+ )
+}
+
+}
+export default Search;
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
new file mode 100644
index 0000000..3d094db
--- /dev/null
+++ b/src/components/SearchResults.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import Pokemon from './Pokemon.js'
+
+class SearchResults extends React.Component{
+ constructor(){
+ super();
+
+
+
+ }
+
+
+render(){
+ return(
+ | {this.props.pokemon.name} | +{this.props.pokemon.stats[0].stat.name} | +{this.props.pokemon.stats[1].stat.name} | +{this.props.pokemon.stats[2].stat.name} | +{this.props.pokemon.stats[3].stat.name} | +{this.props.pokemon.stats[4].stat.name} | +{this.props.pokemon.stats[5].stat.name} | +
|---|---|---|---|---|---|---|
| {this.props.pokemon.stats[0].base_stat} | +{this.props.pokemon.stats[1].base_stat} | +{this.props.pokemon.stats[2].base_stat} | +{this.props.pokemon.stats[3].base_stat} | +{this.props.pokemon.stats[4].base_stat} | +{this.props.pokemon.stats[5].base_stat} | +
{this.props.pokemon.species.name}
+ +
+ {this.props.searchListDetails.map(pokemon => {
+
+ const onTeam = this.props.team.find( currentTeam => {
+ return currentTeam.id === pokemon.id;
+ });
+ return(
+
+ );
+ })}
+
+ )
+ }
+}
+export default SearchResults
diff --git a/src/components/Team.js b/src/components/Team.js
new file mode 100644
index 0000000..63e4d87
--- /dev/null
+++ b/src/components/Team.js
@@ -0,0 +1,54 @@
+import React from 'react';
+
+class Team extends React.Component{
+ constructor(){
+ super();
+
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+handleClick(pokemon){
+ this.props.removePokemonFromTeam(pokemon);
+}
+
+
+render(){
+ return(
+
+
+ )
+
+}
+
+}
+
+export default Team
diff --git a/src/components/win.mp3 b/src/components/win.mp3
new file mode 100644
index 0000000..09bc097
Binary files /dev/null and b/src/components/win.mp3 differ
diff --git a/src/styles/components/Cards.scss b/src/styles/components/Cards.scss
new file mode 100644
index 0000000..583b0dd
--- /dev/null
+++ b/src/styles/components/Cards.scss
@@ -0,0 +1,4 @@
+.sprite {
+ display: block;
+ max-width: 20vw;
+}
diff --git a/src/styles/components/Game.scss b/src/styles/components/Game.scss
new file mode 100644
index 0000000..27eccbb
--- /dev/null
+++ b/src/styles/components/Game.scss
@@ -0,0 +1,16 @@
+.game {
+ border: 4mm ridge rgb(170, 50, 220);
+}
+
+
+.scores{
+ text-align: center;
+}
+
+
+.card{
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
diff --git a/win.mp3 b/win.mp3
new file mode 100644
index 0000000..09bc097
Binary files /dev/null and b/win.mp3 differ
My PokeTeam
+ {this.props.team.map(pokemon => { + return
+
+
+
+
+ })}
+ | {pokemon.name} | +{pokemon.stats[0].stat.name} | +{pokemon.stats[1].stat.name} | +{pokemon.stats[2].stat.name} | +{pokemon.stats[3].stat.name} | +{pokemon.stats[4].stat.name} | +{pokemon.stats[5].stat.name} | +
|---|---|---|---|---|---|---|
| {pokemon.stats[0].base_stat} | +{pokemon.stats[1].base_stat} | +{pokemon.stats[2].base_stat} | +{pokemon.stats[3].base_stat} | +{pokemon.stats[4].base_stat} | +{pokemon.stats[5].base_stat} | +