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"]
}
}
}
}
})
