gistfile1.txt

import React, { Component } from 'react';
import PlayerForm from './PlayerForm';
import Game from './Game';

class App extends Component {

  state = { username: '', gameOver: false, gameStarted: false };

  setUsername = (e) => {
    this.setState({ username: e.target.value });
  }

  startGame = () => {
    this.setState({ gameStarted: true });
  }

  render() {
    let { gameStarted, username } = this.state;

    if(gameStarted)
      return(<Game {...this.state} />);
    else
      return(<PlayerForm username={username} setUsername={this.setUsername} startGame={this.startGame} />);
  }
}

export default App;

gistfile2.txt

import React, { Component } from 'react';

class PlayerForm extends Component { 
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.startGame();
  }

  render() {
    let { username, setUsername } = this.props;

    return(
      <div>
        <h1 className='text-center'>Welcome To React Memory Match</h1>
        <form onSubmit={this.handleSubmit} className='container text-center'>
          <div className="form-group">
            <label htmlFor="username">Username</label>
            <input 
              value={username} 
              onChange={ (e) => setUsername(e) }
              className="form-control" 
              id="username" 
              autoFocus
              placeholder="Username"
            />
          </div>
          <button type="submit" className="btn btn-primary">Play!</button>
        </form>
      </div>
    )
  }
}

export default PlayerForm;

gistfile3.txt

import React, { Component } from 'react';
import Board from './Board';

class Game extends Component {
  // Match Icons: fa-bug, fa-bolt, fa-cloud-upload, fa-cloud-download

  cards = [
    { flipped: false, matched: false, icon: 'fa-bug'}, 
    { flipped: false, matched: false, icon: 'fa-bolt'}, 
    { flipped: false, matched: false, icon: 'fa-bug'}, 
    { flipped: false, matched: false, icon: 'fa-bolt'},
    { flipped: false, matched: false, icon: 'fa-cloud-upload'}, 
    { flipped: false, matched: false, icon: 'fa-cloud-download'}, 
    { flipped: false, matched: false, icon: 'fa-cloud-upload'},
    { flipped: false, matched: false, icon: 'fa-cloud-download'} 
  ]
  ''
  state = { cards: this.cards, flippedCardIndexes: [], matchedCardIndexs: [] };

  // What lifecycle method could we use each time the components state is updated to check for gameOver

  // figure out how to end the game once all cards are matched this probably requires more state or a lifecycle method that loops card state
  // figure out how to start a new game
  // figure out how to change the players username while in the game
  // implement a game timer and save fastest times
  // integrate this project into an express app and store this info to a database

  updateCard = (cardIndex, flipped = false, matched = false) => {
    let cards = this.state.cards.map( (card, loopIndex) => {
      if(cardIndex === loopIndex)
        return { ...card, flipped, matched };
      else
        return card;
    })
    this.setState({ cards });
  }

  render(){
    let { username, gameStarted, gameOver } = this.props;

    return(
      <div className='container'>
        <h1 className='text-center'>React Memory Match</h1>
        <h4>Current Player: { username }</h4>
        <Board cards={ this.state.cards } updateCard={ this.updateCard }  />
      </div>
    );
  }
}

export default Game;

gistfile4.txt

import React from 'react';
import Card from './Card';

const Board = ({ cards, updateCard }) => {
  let cardOutput = cards.map( (card, index) => {
    return(
      <Card {...card} index={index} updateCard={updateCard} />
    );
  });

  return(
    <div className='row'>
      { cardOutput }
    </div>
  );
}

export default Board;

gistfile5.txt

import React from 'react';

const Card = ({ updateCard, flipped, matched, icon, index }) => (
  <div 
    className='col-xs-3 text-center' 
    style={{ height: '300px', border: '1px solid black'}}
  >
   {/*need a onClick handler on the card div to call updateCard*/}
   
   {/*show icon if flipped or matched*/}
   {/*<i className={`fa ${icon} fa-5x`} />*/}

   {/*do not show icon if not flipped or matched*/}

   {/*do not allow user to click on card again if flipped or matched*/}
  </div>
);

export default Card;