Board.re

type team =
  | X
  | O;

type squareState = option(team);

type state = {
  turn: team,
  board: array(squareState)
};

type action =
  | Select(int);

/* This is the basic component. */
let component = ReasonReact.reducerComponent("Board");

  /* let onClick = () => self.send(Select(index)); */

let renderSquare = (self, index) => {
  let s = switch(self.state.board[index]) {
  | Some(X) => "X"
  | Some(O) => "O"
  | None => "."
  };

  <Square value=s />
};

let otherTeam = (thisTeam: team) => {
  switch(thisTeam) {
  | X => O
  | O => X
  };
};

let updatedBoard = (board: array(squareState), index: int, v: team) => {
  let newBoard = Array.copy(board);
  newBoard[index] = Some(v);
  newBoard
};

let make = (_children) => {
  ...component,
  initialState: () => {
    turn: X,
    board: [| None, Some(X), None, None, None, Some(O), None, None, None |]
  },

  reducer: (action, state) => {
    let Select(index) = action;
    switch (state.board[index]) {
    | None => ReasonReact.Update({...state, board: updatedBoard(state.board, index, state.turn )})
    | _ => ReasonReact.NoUpdate
    };
  },

  render: (self) => {
    <div>
        <div>
            {renderSquare(self, 0)}
            {renderSquare(self, 1)}
            {renderSquare(self, 2)}
        </div>
        <div>
            {renderSquare(self, 3)}
            {renderSquare(self, 4)}
            {renderSquare(self, 5)}
        </div>
        <div>
            {renderSquare(self, 6)}
            {renderSquare(self, 7)}
            {renderSquare(self, 8)}
        </div>
      </div>
  }
};