Tic Fac Toe by the A Team - Ryan, Matt and Mr T.

Our link: https://tic-fac-toe.netlify.com/

Preparation

Wireframe

Live Figma Preview: https://www.figma.com/file/VMhodyDAjR7Y5lQPIH1lzmHE/Untitled

Component Hierarchy

View 1: Choose Players

• Wrapper
  • Header
  • Page Wrapper
  • Box
    • Select x2

View 2: Game

• Wrapper
  • Header
  • Page Wrapper
  • Box
  • Board
    • Square (x9)

View 3: End of Game

• Wrapper
  • Header
  • Page Wrapper
  • Board

Interesting Code / Challenges

Error handling

Error handling is simple, we just updated the text in our 'Box' component with the error message.

nextView() {
    if (this.state.player1 === this.state.player2) {
      this.setState({ instruction: "Please choose 2 different players" });
    } else {
      this.setState({ view: 2 });
    }
  }

Building our grids

  buildGrid = () => {
    return [1, 2, 3].map(y =>
      [1, 2, 3].map(x => {
        let coords = `${x}${y}`;
        return (
          <div onClick={() => this.squareHandler(x, y)}>
            <Square
              x={x}
              y={y}
              state={this.board[x][y]}
              id={coords}
              key={coords}
              player={this.state.player}
            />
          </div>
        );
      })
    );
  };

Passing childs state to the parent

Parent

  player1handler(value) {
    this.setState({
      player1: value
    });
  }
  player2handler(value) {
    this.setState({
      player2: value
    });
  }

            <Select action={this.player1handler} id="Player 1" />
            ...
            <Select action={this.player2handler} id="Player 2" />

Child:

  handleChange(event) {
    this.setState({ value: event.target.value });
    this.props.action(event.target.value);
  }