Formation Créer un Puissance 4 en ligne : Contexte React

Maintenant que nos composants sont prêt nous allons pouvoir les brancher avec la logique de notre machine à états. Pour cela nous allons créer un hook qui permettra de pouvoir intéragir plus simplement avec notre système. On se reposera le système de contexte de React en offrant la signature suivante afin de pouvoir accéder n'importe où aux méthodes nécessaires.

type GameContextType = {
  state: GameStates,
  context: GameContext,
  send: <T extends GameEvents["type"]>(event: Omit<GameEvent<T>, 'playerId'>) => void,
  can: <T extends GameEvents["type"]>(event: Omit<GameEvent<T>, 'playerId'>) => boolean,
  playerId: Player["id"],
}

On pourra ensuite utiliser ce hook dans les différents écrans qui composent notre application.

type LobbyScreenProps = {}

export function LobbyScreen ({}: LobbyScreenProps) {
  const {send, context, can} = useGame()
  const colors = [PlayerColor.YELLOW, PlayerColor.RED]

  const joinGame = (name: string) => send({type: 'join', name: name, playerId: name})
  const chooseColor = (color: PlayerColor) => send({type: 'chooseColor', color, playerId: color === PlayerColor.YELLOW ? 'John' : 'Marc'})
  const startGame = () => send({type: 'start'})

  const canStart = can({type: 'start'})

  return <div>
    <NameSelector onSelect={joinGame} />
    <ColorSelector onSelect={chooseColor} players={context.players} colors={colors} />
    <p>
      <button disabled={!canStart} className="button" onClick={prevent(startGame)}>Démarrer</button>
    </p>
  </div>
}