Formation Créer un Puissance 4 en ligne : Machine à états

Dans ce chapitre nous allons créer notre machine à états qui nous permettra de piloter le jeu. On utilisera vitest pour tester le fonctionnement de cette machine.

00:00 Définition de la machine
01:00 Première "guard"
22:30 Première action
25:20 Création des tests fonctionnels
30:24 Phase de lobby
33:20 Phase de jeu

Pour cette machine nous allons utiliser Xstate et on va commencer par définir les états possible de notre jeu.

• Le lobby, qui permettra aux joueurs de rejoindre la partie et de choisir sa couleur
• Le jeu, où les joueurs pourront déposer à tour de rôle des pièces
• La victoire
• L'égalité si aucun des joueurs n'a réussi à aligner 4 pions

import { createMachine } from 'xstate';
createMachine({
  id: 'game',
  context: "LOBBY",
  initial: "LOBBY",
  states: {
    LOBBY: {
      on: {
        join: {
          cond: "canJoin",
          actions: ["joinGame"],
          target: "LOBBY"
        },
        leave: {
          cond: "canLeave",
          actions: ["leaveGame"],
          target: "LOBBY"
        },
        chooseColor: {
          cond: "canChooseColor",
          target: "LOBBY",
          actions: ["chooseColor"],
        },
        start: {
          cond: "canStartGame",
          target: "PLAY",
          actions: ["setCurrentPlayer"]
        }
      }
    },
    PLAY: {
      after: {
        20000: {
          target: "PLAY",
          actions: ["switchPlayer"],
        }
      },
      on: {
        dropToken: [
          {
            cond: "isDrawMove",
            target: "DRAW",
            actions: ["dropToken"]
          },
          {
            cond: "isWiningMove",
            target: "VICTORY",
            actions: ["saveWiningPositionsActions", "dropToken"]
          },
          {
            cond: "canDrop",
            target: "PLAY",
            actions: ["dropToken", "switchPlayer"]
          }
        ]
      }
    },
    VICTORY: {
      on: {
        restart: {
          target: "LOBBY",
          actions: ["restart"]
        }
      }
    },
    DRAW: {
      on: {
        restart: {
          target: "LOBBY",
          actions: ["restart"]
        }
      }
    }
  }
})