feat(ttt): made proper queue and multi game handling

frontend/src/pages/ttt/socket.ts

@@ -0,0 +1,41 @@
+import { type Socket } from 'socket.io-client';
+
+export type UpdateInfo = {
+	inQueue: number,
+	totalUser: number,
+}
+export type CellState = 'X' | 'O' | null;
+
+export type GameUpdate = {
+	gameId: string;
+
+	playerX: string;
+	playerO: string;
+
+	boardState: CellState[];
+	currentPlayer: 'X' | 'O';
+	gameState: 'winX' | 'winO' | 'concededX' | 'concededO' | 'draw' | 'ongoing';
+}
+
+export type GameMove = {
+	index: number;
+}
+export type GameMoveResponse = 'success' | 'invalidMove' | 'unknownError';
+
+export interface ClientToServer {
+	enqueue: () => void;
+	dequeue: () => void;
+	debugInfo: () => void;
+	gameMove: (up: GameMove) => GameMoveResponse;
+};
+
+export interface ServerToClient {
+	forceDisconnect: (reason: string) => void;
+	queueEvent: (msg: 'registered' | 'unregistered') => void;
+	updateInformation: (info: UpdateInfo) => void,
+	newGame: (gameId: string) => void,
+	gameBoard: (state: GameUpdate) => void,
+};
+
+export type SSocket = Socket<ClientToServer, ServerToClient>;
+export type CSocket = Socket<ServerToClient, ClientToServer>;

frontend/src/pages/ttt/ttt.ts

@@ -1,38 +1,32 @@
 import { addRoute, type RouteHandlerReturn } from "@app/routing";
 import tttPage from "./ttt.html?raw";
 import { showError, showInfo, showSuccess } from "@app/toast";
-import { io, Socket } from "socket.io-client";
+import { io } from "socket.io-client";
+import type { CSocket as Socket } from "./socket";
 
-// get the name of the machine used to connect
-const machineHostName = window.location.hostname;
-console.log(
-	"connect to login at https://" + machineHostName + ":8888/app/login",
-);
 
-export let __socket: Socket | undefined = undefined;
+declare module 'ft_state' {
+	interface State {
+		tttSock?: Socket;
+	}
+}
+
 document.addEventListener("ft:pageChange", () => {
-	if (__socket !== undefined) __socket.close();
+	if (window.__state.tttSock !== undefined) window.__state.tttSock.close();
-	__socket = undefined;
+	window.__state.tttSock = undefined;
-	console.log("Page changed");
 });
 
 export function getSocket(): Socket {
-	let addressHost = `wss://${machineHostName}:8888`;
+	if (window.__state.tttSock === undefined)
-	// let addressHost = `wss://localhost:8888`;
+		window.__state.tttSock = io(window.location.host, { path: "/api/ttt/socket.io/" }) as any as Socket;
-	if (__socket === undefined)
+	return window.__state.tttSock;
-		__socket = io(addressHost, {
-			path: "/api/ttt/socket.io/",
-			secure: true,
-			transports: ["websocket"],
-		});
-	return __socket;
 }
 
 // Route handler for the Tic-Tac-Toe page.
 // Instantiates the game logic and binds UI events.
 async function handleTTT(): Promise<RouteHandlerReturn> {
 	const socket: Socket = getSocket();
-
+	void socket;
 	return {
 		html: tttPage,
 		postInsert: async (app) => {
@@ -40,10 +34,12 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
 				return;
 			}
 
-			const cells =
+			socket.on('updateInformation', (e) => showInfo(`UpdateInformation: t=${e.totalUser};q=${e.inQueue}`));
-				app.querySelectorAll<HTMLDivElement>(".ttt-grid-cell");
+			socket.on('queueEvent', (e) => showInfo(`QueueEvent: ${e}`));
-			const restartBtn =
+			socket.on('newGame', (e) => showInfo(`newGame: ${e}`));
-				app.querySelector<HTMLButtonElement>("#ttt-restart-btn");
+			socket.emit('enqueue');
+
+			const cells = app.querySelectorAll<HTMLDivElement>(".ttt-grid-cell");
 			const grid = app.querySelector(".ttt-grid"); // Not sure about this one
 
 			const updateUI = (boardState: (string | null)[]) => {
@@ -52,41 +48,36 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
 				});
 			};
 
-			socket.on("gameState", (data) => {
+			socket.on('gameBoard', (u) => {
-				updateUI(data.board);
+				updateUI(u.boardState);
 
-				if (data.lastResult && data.lastResult !== "ongoing") {
+				if (u.gameState && u.gameState !== "ongoing") {
 					grid?.classList.add("pointer-events-none");
-					if (data.lastResult === "winX") {
+					if (u.gameState === "winX") {
 						showSuccess("X won !");
 					}
-					if (data.lastResult === "winO") {
+					if (u.gameState === "winO") {
 						showSuccess("O won !");
 					}
-					if (data.lastResult === "draw") {
+					if (u.gameState === "draw") {
 						showInfo("Draw !");
 					}
+					if (u.gameState === 'concededX' )
+					{
+						showInfo("concededX");
+					}
+					if (u.gameState === 'concededO' )
+					{
+						showInfo("concededO");
+					}
 				}
-
-				if (data.reset) {
-					grid?.classList.remove("pointer-events-none");
-					showInfo("Game Restarted");
-				}
-			});
-
-			socket.on("error", (msg) => {
-				showError(msg);
 			});
 
 			cells?.forEach(function(c, idx) {
 				c.addEventListener("click", () => {
-					socket.emit("makeMove", idx);
+					socket.emit("gameMove", { index: idx });
 				});
 			});
-
-			restartBtn?.addEventListener("click", () => {
-				socket.emit("resetGame");
-			});
 		},
 	};
 }

src/@shared/src/database/mixin/tictactoe.ts

@@ -1,10 +1,11 @@
 import type { Database } from './_base';
+import { UserId } from './user';
 // import { UserId } from './user';
 
 // describe every function in the object
 export interface ITicTacToeDb extends Database {
-	setGameOutcome(this: ITicTacToeDb, id: GameId): void,
+	setGameOutcome(this: ITicTacToeDb, id: GameId, player1: UserId, player2: UserId, outcome: string): void,
-// 	asyncFunction(id: TemplateId): Promise<TemplateData | undefined>,
+	// 	asyncFunction(id: TemplateId): Promise<TemplateData | undefined>,
 };
 
 export const TicTacToeImpl: Omit<ITicTacToeDb, keyof Database> = {
@@ -25,13 +26,13 @@ export const TicTacToeImpl: Omit<ITicTacToeDb, keyof Database> = {
 	 *
 	 * @returns what does the function return ?
 	 */
-//     async asyncFunction(this: ITemplateDb, id: TemplateId): Promise<TemplateData | undefined> {
+	//     async asyncFunction(this: ITemplateDb, id: TemplateId): Promise<TemplateData | undefined> {
-//         void id;
+	//         void id;
-//         return undefined;
+	//         return undefined;
-//     },
+	//     },
 };
 
-export type GameId = number & { readonly __brand: unique symbol };
+export type GameId = string & { readonly __brand: unique symbol };
 
 export type TicTacToeData = {
 	readonly id: GameId;

src/tic-tac-toe/src/app.ts

@@ -1,4 +1,4 @@
-import { TTC } from './game';
+// import { TTC } from './game';
 import { FastifyInstance, FastifyPluginAsync } from 'fastify';
 import fastifyFormBody from '@fastify/formbody';
 import fastifyMultipart from '@fastify/multipart';
@@ -7,6 +7,8 @@ import * as auth from '@shared/auth';
 import * as swagger from '@shared/swagger';
 import * as utils from '@shared/utils';
 import { Server } from 'socket.io';
+import { State, createState } from './state';
+import { ClientToServer, ServerToClient } from './socket';
 
 declare const __SERVICE_NAME: string;
 
@@ -36,11 +38,10 @@ const app: FastifyPluginAsync = async (fastify, opts): Promise<void> => {
 	void fastify.register(fastifyFormBody, {});
 	void fastify.register(fastifyMultipart, {});
 
-	const game = new TTC();
-
 	fastify.ready((err) => {
 		if (err) throw err;
-		onReady(fastify, game);
+		onReady(fastify);
+		createState(fastify);
 	});
 };
 export default app;
@@ -48,53 +49,13 @@ export default app;
 // When using .decorate you have to specify added properties for Typescript
 declare module 'fastify' {
 	interface FastifyInstance {
-		io: Server<{
+		io: Server<ClientToServer, ServerToClient>;
-			hello: (message: string) => string;
-			// idk you put something
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			gameState: any;
-			makeMove: (idx: number) => void;
-			resetGame: () => void;
-			error: string,
-		}>;
 	}
 }
 
-async function onReady(fastify: FastifyInstance, game: TTC) {
+async function onReady(fastify: FastifyInstance) {
 	fastify.io.on('connection', (socket) => {
 		fastify.log.info(`Client connected: ${socket.id}`);
-
+		State.registerUser(socket);
-		socket.emit('gameState', {
-			board: game.board,
-			turn: game.currentPlayer,
-			gameOver: game.isGameOver,
-		});
-
-		socket.on('makeMove', (idx: number) => {
-			const result = game.makeMove(idx);
-
-			if (result === 'invalidMove') {
-				socket.emit('error', 'Invalid Move');
-			}
-			else {
-				if (result !== 'ongoing') {
-					fastify.db.setGameOutcome('011001', 'player1', 'player2', result);
-				}
-				fastify.io.emit('gameState', {
-					board: game.board,
-					turn: game.currentPlayer,
-					lastResult: result,
-				});
-			}
-		});
-
-		socket.on('resetGame', () => {
-			game.reset();
-			fastify.io.emit('gameState', {
-				board: game.board,
-				turn: game.currentPlayer,
-				reset: true,
-			});
-		});
 	});
-}
+}

src/tic-tac-toe/src/game.ts

@@ -1,5 +1,7 @@
 // import type { TicTacToeData } from '@shared/database/mixin/tictactoe';
 
+import { UserId } from '@shared/database/mixin/user';
+
 // Represents the possible states of a cell on the board.
 // `null` means that the cell is empty.
 type CellState = 'O' | 'X' | null
@@ -9,31 +11,35 @@ export class TTC {
 	public board: CellState[] = Array(9).fill(null);
 	private currentPlayer: 'O' | 'X' = 'X';
 
+	public gameUpdate: NodeJS.Timeout | null = null;
+
 	private changePlayer() {
 		this.currentPlayer = this.currentPlayer === 'X' ? 'O' : 'X';
 	}
 
+	public constructor(public readonly playerX: UserId, public readonly playerO: UserId) { }
+
 	// Analyzes the current board to determine if the game has ended.
-	private checkState(): 'winX' | 'winO' | 'draw' | 'ongoing' {
+	public checkState(): 'winX' | 'winO' | 'draw' | 'ongoing' {
 		const checkRow = (row: number): ('X' | 'O' | null) => {
-			if (this.board[row * 3] === null) {return null;}
+			if (this.board[row * 3] === null) { return null; }
-			if (this.board[row * 3] === this.board[row * 3 + 1] && this.board[row * 3 + 1] === this.board[row * 3 + 2]) {return this.board[row * 3];}
+			if (this.board[row * 3] === this.board[row * 3 + 1] && this.board[row * 3 + 1] === this.board[row * 3 + 2]) { return this.board[row * 3]; }
 			return null;
 		};
 
 		const checkCol = (col: number): ('X' | 'O' | null) => {
 			if (this.board[col] === null) return null;
 
-			if (this.board[col] === this.board[col + 3] && this.board[col + 3] === this.board[col + 6]) {return this.board[col];}
+			if (this.board[col] === this.board[col + 3] && this.board[col + 3] === this.board[col + 6]) { return this.board[col]; }
 			return null;
 		};
 
 		const checkDiag = (): ('X' | 'O' | null) => {
 			if (this.board[4] === null) return null;
 
-			if (this.board[0] === this.board[4] && this.board[4] === this.board[8]) {return this.board[4];}
+			if (this.board[0] === this.board[4] && this.board[4] === this.board[8]) { return this.board[4]; }
 
-			if (this.board[2] === this.board[4] && this.board[4] === this.board[6]) {return this.board[4];}
+			if (this.board[2] === this.board[4] && this.board[4] === this.board[6]) { return this.board[4]; }
 			return null;
 		};
 
@@ -46,7 +52,7 @@ export class TTC {
 		if (col !== null) return `win${col}`;
 		if (diag !== null) return `win${diag}`;
 
-		if (this.board.filter(c => c === null).length === 0) {return 'draw';}
+		if (this.board.filter(c => c === null).length === 0) { return 'draw'; }
 		return 'ongoing';
 	}
 
@@ -59,8 +65,14 @@ export class TTC {
 	// Attempts to place the current player's mark on the specified cell.
 	// @param idx - The index of the board (0-8) to place the mark.
 	// @returns The resulting game state, or `invalidMove` if the move is illegal.
-	public makeMove(idx: number): 'winX' | 'winO' | 'draw' | 'ongoing' | 'invalidMove' {
+	public makeMove(playerId: UserId, idx: number): 'success' | 'invalidMove' {
-		if (this.isGameOver) {
+		const player = playerId == this.playerX ? 'X' : (
+			playerId == this.playerO ? 'O' : null
+		);
+
+		if (player === null) return 'invalidMove';
+
+		if (player !== this.currentPlayer || this.isGameOver) {
 			return 'invalidMove';
 		}
 		if (idx < 0 || idx >= this.board.length) {
@@ -77,7 +89,9 @@ export class TTC {
 		if (result !== 'ongoing') {
 			this.isGameOver = true;
 		}
+		return 'success';
 
-		return result;
 	}
+
+	getCurrentState(): 'X' | 'O' { return this.currentPlayer; };
 }

src/tic-tac-toe/src/socket.ts

@@ -0,0 +1,41 @@
+import { Socket } from 'socket.io';
+
+export type UpdateInfo = {
+	inQueue: number,
+	totalUser: number,
+}
+export type CellState = 'X' | 'O' | null;
+
+export type GameUpdate = {
+	gameId: string;
+
+	playerX: string;
+	playerO: string;
+
+	boardState: CellState[];
+	currentPlayer: 'X' | 'O';
+	gameState: 'winX' | 'winO' | 'concededX' | 'concededO' | 'draw' | 'ongoing';
+}
+
+export type GameMove = {
+	index: number;
+}
+export type GameMoveResponse = 'success' | 'invalidMove' | 'unknownError';
+
+export interface ClientToServer {
+	enqueue: () => void;
+	dequeue: () => void;
+	debugInfo: () => void;
+	gameMove: (up: GameMove) => GameMoveResponse;
+};
+
+export interface ServerToClient {
+	forceDisconnect: (reason: string) => void;
+	queueEvent: (msg: 'registered' | 'unregistered') => void;
+	updateInformation: (info: UpdateInfo) => void,
+	newGame: (gameId: string) => void,
+	gameBoard: (state: GameUpdate) => void,
+};
+
+export type SSocket = Socket<ClientToServer, ServerToClient>;
+export type CSocket = Socket<ServerToClient, ClientToServer>;

src/tic-tac-toe/src/state.ts

@@ -0,0 +1,175 @@
+import { UserId } from '@shared/database/mixin/user';
+import { FastifyInstance } from 'fastify';
+import { GameMove, GameMoveResponse, SSocket } from './socket';
+import { isNullish } from '@shared/utils';
+import { newUUID } from '@shared/utils/uuid';
+import { GameId } from '@shared/database/mixin/tictactoe';
+import { TTC } from './game';
+
+type TTTUser = {
+	socket: SSocket,
+	userId: UserId,
+	windowId: string,
+	updateInterval: NodeJS.Timeout,
+	currentGame: GameId | null,
+}
+
+export class StateI {
+	private users: Map<UserId, TTTUser> = new Map();
+
+	private queue: Set<UserId> = new Set();
+
+	private queueInterval: NodeJS.Timeout;
+
+	private games: Map<GameId, TTC> = new Map();
+
+	constructor(private fastify: FastifyInstance) {
+		this.queueInterval = setInterval(() => this.queuerFunction());
+		void this.queueInterval;
+	}
+
+	private queuerFunction(): void {
+		const values = Array.from(this.queue.values());
+		while (values.length >= 2) {
+			const id1 = values.pop();
+			const id2 = values.pop();
+
+			if (isNullish(id1) || isNullish(id2)) {
+				continue;
+			}
+
+			const u1 = this.users.get(id1);
+			const u2 = this.users.get(id2);
+
+			if (isNullish(u1) || isNullish(u2)) {
+				continue;
+			}
+			this.queue.delete(id1);
+			this.queue.delete(id2);
+
+			const gameId = newUUID() as unknown as GameId;
+			u1.socket.emit('newGame', gameId);
+			u2.socket.emit('newGame', gameId);
+
+			this.games.set(gameId, new TTC(u1.userId, u2.userId));
+
+			u1.currentGame = gameId;
+			u2.currentGame = gameId;
+
+			this.games.get(gameId)!.gameUpdate = setInterval(() => {
+				this.gameUpdate(gameId, u1.socket);
+				this.gameUpdate(gameId, u2.socket);
+			}, 100);
+		}
+	}
+
+	public registerUser(socket: SSocket): void {
+		this.fastify.log.info('Registering new user');
+		if (this.users.has(socket.authUser.id)) {
+			socket.emit('forceDisconnect', 'Already Connected');
+			socket.disconnect();
+			return;
+		}
+		this.users.set(socket.authUser.id, {
+			socket,
+			userId: socket.authUser.id,
+			windowId: socket.id,
+			updateInterval: setInterval(() => this.updateClient(socket), 3000),
+			currentGame: null,
+		});
+		this.fastify.log.info('Registered new user');
+
+		socket.on('disconnect', () => this.cleanupUser(socket));
+		socket.on('enqueue', () => this.enqueueUser(socket));
+		socket.on('dequeue', () => this.dequeueUser(socket));
+		socket.on('debugInfo', () => this.debugSocket(socket));
+
+		socket.on('gameMove', (e) => this.gameMove(socket, e));
+	}
+
+	private updateClient(socket: SSocket): void {
+		socket.emit('updateInformation', {
+			inQueue: this.queue.size,
+			totalUser: this.users.size,
+		});
+	}
+
+	private cleanupUser(socket: SSocket): void {
+		if (!this.users.has(socket.authUser.id)) return;
+
+		clearInterval(this.users.get(socket.authUser.id)?.updateInterval);
+		this.users.delete(socket.authUser.id);
+		this.queue.delete(socket.authUser.id);
+	}
+
+	private enqueueUser(socket: SSocket): void {
+		if (!this.users.has(socket.authUser.id)) return;
+
+		if (this.queue.has(socket.authUser.id)) return;
+
+		if (this.users.get(socket.authUser.id)?.currentGame !== null) return;
+
+		this.queue.add(socket.authUser.id);
+		socket.emit('queueEvent', 'registered');
+	}
+
+	private dequeueUser(socket: SSocket): void {
+		if (!this.users.has(socket.authUser.id)) return;
+
+		if (!this.queue.has(socket.authUser.id)) return;
+
+		this.queue.delete(socket.authUser.id);
+		socket.emit('queueEvent', 'unregistered');
+	}
+
+	private debugSocket(socket: SSocket): void {
+		console.log(({
+			message: `socket debug for ${socket.id}`,
+			userid: socket.authUser.id,
+			queue: this.queue,
+			users: this.users,
+		}));
+	}
+
+	private gameUpdate(gameId: GameId, socket: SSocket): void {
+		if (!this.users.has(socket.authUser.id)) return;
+		const user = this.users.get(socket.authUser.id)!;
+
+		if (user.currentGame !== gameId || !this.games.has(user.currentGame)) return;
+
+		const games = this.games.get(gameId)!;
+
+		socket.emit('gameBoard', {
+			boardState: games.board,
+			currentPlayer: games.getCurrentState(),
+			playerX: games.playerX,
+			playerO: games.playerO,
+			gameState: games.checkState(),
+			gameId: gameId,
+		});
+	}
+
+	private gameMove(socket: SSocket, update: GameMove): GameMoveResponse {
+		if (!this.users.has(socket.authUser.id)) return 'unknownError';
+		const user = this.users.get(socket.authUser.id)!;
+
+		if (user.currentGame !== null && !this.games.has(user.currentGame)) return 'unknownError';
+		const game = this.games.get(user.currentGame!)!;
+
+		return game.makeMove(socket.authUser.id, update.index);
+	}
+}
+
+// this value will be overriten
+export let State: StateI = undefined as unknown as StateI;
+
+export function createState(fastify: FastifyInstance) {
+	if (State !== undefined) {
+		throw new Error('State was already created !!!!');
+	}
+	State = new StateI(fastify);
+}
+
+
+export default State;
+