Memory Game Suggestions

Memory Game Suggestions
0

#1

Wishing I got further than this…right now I just have the 2 components. Right now im trying just to get the card color to show. I have a map which uses the index, that selects the right card. When the card is clicked I want to the cards actual background color, right now the cards all have a grey background.

I added a isShowing to each card object, and was going to set that to true and change the background color to the color in the object, but im not sure if I even need that. it was from a video example, but of course the video was not explained well


#2

There was a tutorial video last month on FCC youtube page. It is pure javascript but maybe you can glean something from it.?

Memory Card Game - JavaScript Tutorial


#3

I will have to give it a look after work. I have a course on udemy, but the react part is just terrible in my opinion. The guy is horrible at explaining, and just randomly adds code almost assuming that you know what it does.


#4

I have not read it, but I heard good things about the Pure React book.

Edit:
Also Frontend masters has some pretty high quality stuff.


#5

There are a few different approaches here, but using your current state structure, you could have the following methods. Keep in mind, the handleClick method is just changing the isShowing property of the applicable card. It is just toggling the isShowing property. That way, when the card is rendered via the Card component which gets passed backgroundColor, the style is conditionally changed with the specified color or not.

  handleClick = index => {
    const cards = this.state.cards.map(card => {
      if (card.id == index) {
        card.isShowing = !card.isShowing;
      }
      return card;
    });
    this.setState({cards})
  }
  
  render() {
    const cards = this.state.cards.map(({id, isShowing, backgroundColor}) => (
      <Card 
        key={id}
        id={id}
        handleClick={this.handleClick}
        isShowing={isShowing}
        backgroundColor={backgroundColor}
      />
    ))
    return <div>{cards}</div>; //end return
  } //end render
} //end of cardGame component

const Card = ({id, handleClick, isShowing, backgroundColor}) => (
  <div 
    className="flex-container"
    onClick={handleClick.bind(this, id)}
    style={isShowing ? {backgroundColor} : null}
  />
);

Another way is to make Card a React component instead of an SFC and have each card keep track of it’s own isShowing property. In that case the MemoryGame component’s cards property of state would not include the isShowing property.

class MemoryGame extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cards: [
        { id: 11, backgroundColor: "blue" },
        { id: 1, backgroundColor: "red" },
        { id: 2, backgroundColor: "green" },
        { id: 3, backgroundColor: "purple" },
        { id: 4, backgroundColor: "yellow" },
        { id: 5, backgroundColor: "orange" },
        { id: 6, backgroundColor: "blue" },
        { id: 7, backgroundColor: "red" },
        { id: 8, backgroundColor: "yellow" },
        { id: 9, backgroundColor: "orange" },
        { id: 10, backgroundColor: "purple" }
      ]
    };
  }
   
  render() {
    const cards = this.state.cards.map(({id, backgroundColor}) => (
      <Card 
        key={id}
        id={id}
        backgroundColor={backgroundColor}
      />
    ))
    return <div>{cards}</div>; //end return
  } //end render
} //end of cardGame component

class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowing: false 
    };
  }  
  
  handleClick = () => {
    this.setState({isShowing: !this.state.isShowing})
  }
  
  render() {
    return (
      <div 
        className="flex-container"
        onClick={this.handleClick}
        style={this.state.isShowing ? {backgroundColor: this.props.backgroundColor} : null}
      />
    )
  }
}

It is even possible to make the MemoryGame component an SFC which allows you to move the cards array outside of the components.

const cards = [
  { id: 11, backgroundColor: "blue" },
  { id: 1, backgroundColor: "red" },
  { id: 2, backgroundColor: "green" },
  { id: 3, backgroundColor: "purple" },
  { id: 4, backgroundColor: "yellow" },
  { id: 5, backgroundColor: "orange" },
  { id: 6, backgroundColor: "blue" },
  { id: 7, backgroundColor: "red" },
  { id: 8, backgroundColor: "yellow" },
  { id: 9, backgroundColor: "orange" },
  { id: 10, backgroundColor: "purple" }
];

const MemoryGame = props => (
  <div>{
    cards.map(({id, backgroundColor}) => (
      <Card 
        key={id}
        id={id}
        backgroundColor={backgroundColor}
      />
    ))
  }</div>
); //end of cardGame component

class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowing: false 
    };
  }  
  
  handleClick = () => {
    this.setState({isShowing: !this.state.isShowing})
  }
  
  render() {
    return (
      <div 
        className="flex-container"
        onClick={this.handleClick}
        style={this.state.isShowing ? {backgroundColor: this.props.backgroundColor} : null}
      />
    )
  }
}