WIP

client/index.ts

@@ -56,6 +56,7 @@ const showStartButton = (): void => {
 };
 
 startButton.addEventListener("click", () => {
+	console.log("emitting start round");
 	socket.emit("round:start");
 });
 

server/lobby.ts

@@ -1,20 +1,19 @@
 import type { Socket } from "socket.io";
-import type { InterpreterFrom } from "xstate";
-import { interpret } from "xstate";
+import { Actor, createActor } from "xstate";
 
 import type { Player } from "./@types/models";
 import { context, lobbyMachine } from "./machines/lobby";
 import type { SocketServer } from "./socketServer";
 
 class Lobby {
-	machine: InterpreterFrom<typeof lobbyMachine>;
+	machine: Actor<typeof lobbyMachine>;
 	server: SocketServer;
 
 	constructor(server: SocketServer) {
 		this.server = server;
-		this.machine = interpret(lobbyMachine.withContext({ ...context })).start();
+		this.machine = createActor(lobbyMachine, { ...context }).start();
 		this.machine.start();
-		this.machine.onTransition((state) => {
+		this.machine.subscribe((state) => {
 			console.info({ context: state.context, state: state.value });
 
 			switch (state.value) {

server/machines/lobby.test.ts

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from "bun:test";
-import type { InterpreterFrom } from "xstate";
-import { interpret } from "xstate";
+import type { Actor } from "xstate";
+import { createActor, getNextSnapshot } from "xstate";
 
 import { context, isNewPlayer, lobbyMachine } from "./lobby";
 
@@ -11,17 +11,27 @@ describe("lobbyMachine states", () => {
 
 	describe("empty", () => {
 		it("transitions to the onePlayer state when it receives the player joins event", () => {
-			expect(lobbyMachine.transition("empty", "playerJoins").value).toBe(
-				"onePlayer",
-			);
+			expect(
+				getNextSnapshot(
+					lobbyMachine,
+					lobbyMachine.resolveState({
+						value: "empty",
+						context: { players: [] },
+					}),
+					{
+						type: "playerJoins",
+						player: player1,
+					},
+				).value,
+			).toBe("onePlayer");
 		});
 	});
 
 	describe("onePlayer", () => {
-		let actor: InterpreterFrom<typeof lobbyMachine>;
+		let actor: Actor<typeof lobbyMachine>;
 
 		beforeEach(() => {
-			actor = interpret(lobbyMachine);
+			actor = createActor(lobbyMachine);
 			actor.start();
 			actor.send({
 				player: player1,
@@ -43,9 +53,16 @@ describe("lobbyMachine states", () => {
 		});
 
 		it("transitions from onePlayer to empty state when it receives player leaves event", () => {
-			expect(lobbyMachine.transition("onePlayer", "playerLeaves").value).toBe(
-				"empty",
-			);
+			expect(
+				getNextSnapshot(
+					lobbyMachine,
+					lobbyMachine.resolveState({
+						value: "onePlayer",
+						context: { players: [player1] },
+					}),
+					{ type: "playerLeaves", socketId: player1.socketId },
+				).value,
+			).toBe("empty");
 		});
 
 		it("removes a player from the player list when it receives playerLeaves event", () => {
@@ -59,10 +76,10 @@ describe("lobbyMachine states", () => {
 	});
 
 	describe("multiplePlayers", () => {
-		let actor: InterpreterFrom<typeof lobbyMachine>;
+		let actor: Actor<typeof lobbyMachine>;
 
 		beforeEach(() => {
-			actor = interpret(lobbyMachine);
+			actor = createActor(lobbyMachine);
 			actor.start();
 
 			actor.send({
@@ -136,13 +153,23 @@ describe("isNewPlayer", () => {
 	it("returns true if the player is not present in the players array", () => {
 		const player = { name: "a name", socketId: "id" };
 		const contextWithNoPlayers = { players: [] };
-		expect(isNewPlayer(contextWithNoPlayers, { player })).toBe(true);
+		expect(
+			isNewPlayer({
+				context: contextWithNoPlayers,
+				event: { player, type: "playerJoins" },
+			}),
+		).toBe(true);
 	});
 
 	it("returns false if the player is present in the players array", () => {
 		const player = { name: "a name", socketId: "id" };
 		const contextWithPlayer = { players: [player] };
 
-		expect(isNewPlayer(contextWithPlayer, { player })).toBe(false);
+		expect(
+			isNewPlayer({
+				context: contextWithPlayer,
+				event: { player, type: "playerJoins" },
+			}),
+		).toBe(false);
 	});
 });

server/machines/lobby.ts

@@ -1,5 +1,6 @@
-import { assign, createMachine } from "xstate";
+import { EventObject, assign, createMachine } from "xstate";
 
+import { GuardArgs } from "xstate/guards";
 import type { Player } from "../@types/models";
 
 const context = {
@@ -8,11 +9,13 @@ const context = {
 
 type Context = typeof context;
 
+type PlayerJoinsEvent = {
+	player: Player;
+	type: "playerJoins";
+};
+
 type Events =
-	| {
-			player: Player;
-			type: "playerJoins";
-	  }
+	| PlayerJoinsEvent
 	| {
 			socketId: Player["socketId"];
 			type: "playerLeaves";
@@ -21,33 +24,31 @@ type Events =
 			type: "playerClicksStart";
 	  };
 
-const isNewPlayer = (
-	{ players }: { players: Player[] },
-	{ player: playerFromEvent }: { player: Player },
-) =>
-	players.find((player) => player.socketId === playerFromEvent.socketId) ===
-	undefined;
+const isNewPlayer = (args: GuardArgs<Context, PlayerJoinsEvent>) =>
+	args.context.players.find(
+		(player) => player.socketId === args.event.player.socketId,
+	) === undefined;
 
-const isOnlyPlayer = ({ players }: { players: Player[] }) =>
-	players.length === 1;
+const isOnlyPlayer = (args: GuardArgs<Context, EventObject>) =>
+	args.context.players.length === 1;
 
 const lobbyMachine = createMachine(
 	{
-		context: context,
+		context,
 		id: "lobby",
 		initial: "empty",
-		predictableActionArguments: true,
-		schema: {
+		types: {
 			context: {} as Context,
 			events: {} as Events,
+			typegen: {} as import("./lobby.typegen").Typegen0,
 		},
 		states: {
 			empty: {
 				on: { playerJoins: { actions: "addPlayer", target: "onePlayer" } },
 			},
 			multiplePlayers: {
 				always: {
-					cond: "isOnlyPlayer",
+					guard: "isOnlyPlayer",
 					target: "onePlayer",
 				},
 				on: {
@@ -59,7 +60,7 @@ const lobbyMachine = createMachine(
 				on: {
 					playerJoins: {
 						actions: "addPlayer",
-						cond: "isNewPlayer",
+						guard: "isNewPlayer",
 						target: "multiplePlayers",
 					},
 					playerLeaves: {
@@ -69,16 +70,17 @@ const lobbyMachine = createMachine(
 				},
 			},
 		},
-		tsTypes: {} as import("./lobby.typegen").Typegen0,
 	},
 	{
 		actions: {
 			addPlayer: assign({
-				players: ({ players }, { player }) => [...players, player],
+				players: (args) => [...args.context.players, args.event.player],
 			}),
 			removePlayer: assign({
-				players: ({ players }, { socketId }) =>
-					players.filter((p) => p.socketId !== socketId),
+				players: (args) =>
+					args.context.players.filter(
+						(player) => player.socketId !== args.event.socketId,
+					),
 			}),
 		},
 		guards: {

server/machines/round.ts

@@ -1,5 +1,6 @@
 import { assign, createMachine } from "xstate";
 import { Answer } from "../@types/models";
+import questions from "../data/questions.json";
 
 type Question = {
 	answer: string[];
@@ -9,7 +10,7 @@ type Question = {
 
 const context = {
 	answers: [] as Answer[],
-	questions: [] as Question[],
+	questions: questions as Question[],
 	selectedQuestion: {} as Question | undefined,
 };
 
@@ -25,10 +26,10 @@ const gameMachine = createMachine(
 		context,
 		id: "game",
 		initial: "gameStart",
-		predictableActionArguments: true,
-		schema: {
+		types: {
 			context: {} as Context,
 			events: {} as Events,
+			typegen: {} as import("./round.typegen").Typegen0,
 		},
 		states: {
 			gameStart: {
@@ -38,19 +39,18 @@ const gameMachine = createMachine(
 				},
 			},
 		},
-		tsTypes: {} as import("./round.typegen").Typegen0,
 	},
 	{
 		actions: {
 			addAnswer: assign({
-				answers: (context, event) => [...context.answers, event.answer],
+				answers: (args) => [...args.context.answers, args.event.answer],
 			}),
 			setQuestion: assign({
-				selectedQuestion: ({ questions }) => {
+				selectedQuestion: (args) => {
 					const questionIndex = Math.floor(
-						Math.random() * (questions.length - 1),
+						Math.random() * (args.context.questions.length - 1),
 					);
-					return questions[questionIndex];
+					return args.context.questions[questionIndex];
 				},
 			}),
 		},

server/round.ts

@@ -1,22 +1,21 @@
-import type { InterpreterFrom } from "xstate";
-import { interpret } from "xstate";
+import type { Actor } from "xstate";
+import { createActor } from "xstate";
 
 import { Answer, Question } from "./@types/models";
-import questions from "./data/questions.json";
 import { context, gameMachine } from "./machines/round";
 import type { SocketServer } from "./socketServer";
 
 class Round {
-	machine: InterpreterFrom<typeof gameMachine>;
+	machine: Actor<typeof gameMachine>;
 	server: SocketServer;
 
 	constructor(server: SocketServer) {
 		this.server = server;
-		this.machine = interpret(
-			gameMachine.withContext({ ...context, questions }),
-		).start();
+		this.machine = createActor(gameMachine, { ...context }).start();
 
-		this.machine.onTransition((state) => {
+		console.log(this.machine);
+
+		this.machine.subscribe((state) => {
 			console.info({ context: state.context, state: state.value });
 
 			switch (state.value) {

server/socketServer.ts

@@ -36,10 +36,12 @@ export class SocketServer {
 	}
 
 	onQuestionSet(question: Question) {
+		console.log("emitting question set");
 		this.server.emit(...clientboundEvents.getQuestion(question));
 	}
 
 	onRoundStarted() {
+		console.log("got to onRoundStarted");
 		this.round = new Round(this);
 	}