refactor: use Websocket and drop GraphQL

apps/api/package.json

@@ -20,14 +20,15 @@
 		"@nestjs/apollo": "^12.2.1",
 		"@nestjs/common": "^10.3.10",
 		"@nestjs/core": "^10.4.1",
-		"@nestjs/graphql": "^12.2.1",
 		"@nestjs/platform-express": "^10.3.10",
+		"@nestjs/platform-socket.io": "^10.4.7",
+		"@nestjs/websockets": "^10.4.7",
 		"apollo-server-express": "^3.13.0",
 		"class-transformer": "^0.5.1",
 		"class-validator": "^0.14.1",
-		"graphql": "^16.9.0",
 		"reflect-metadata": "^0.2.0",
 		"rxjs": "^7.8.1",
+		"socket.io": "^4.8.1",
 		"ts-morph": "^24.0.0"
 	},
 	"devDependencies": {

apps/api/src/app.module.ts

@@ -1,39 +1,9 @@
-import { join } from "path";
 import { APP_PIPE } from "@nestjs/core";
 import { Module, ValidationPipe } from "@nestjs/common";
-import { DirectiveLocation, GraphQLDirective } from "graphql";
-import { GraphQLModule } from "@nestjs/graphql";
-import { ApolloDriver, ApolloDriverConfig } from "@nestjs/apollo";
-import { ApolloServerPluginLandingPageLocalDefault } from "@apollo/server/plugin/landingPage/default";
-import {
-	ApolloComplexityPlugin,
-	ApolloLoggingPlugin,
-	DateScalar,
-	upperDirectiveTransformer
-} from "@chess-d/api";
 import { PlayersModule } from "./players/players.module";
 
 @Module({
-	imports: [
-		GraphQLModule.forRootAsync<ApolloDriverConfig>({
-			driver: ApolloDriver,
-			useFactory: () => ({
-				autoSchemaFile: join(process.cwd(), "src/schema.gql"),
-				playground: false,
-				plugins: [ApolloServerPluginLandingPageLocalDefault()],
-				transformSchema: (schema) => upperDirectiveTransformer(schema, "upper"),
-				buildSchemaOptions: {
-					directives: [
-						new GraphQLDirective({
-							name: "upper",
-							locations: [DirectiveLocation.FIELD_DEFINITION]
-						})
-					]
-				}
-			})
-		}),
-		PlayersModule
-	],
+	imports: [PlayersModule],
 	providers: [
 		{
 			provide: APP_PIPE,
@@ -45,10 +15,7 @@ import { PlayersModule } from "./players/players.module";
 					enableImplicitConversion: true
 				}
 			})
-		},
-		DateScalar,
-		ApolloLoggingPlugin,
-		ApolloComplexityPlugin
+		}
 	]
 })
 export class AppModule {}

apps/api/src/players/dto/create-player.input.ts

@@ -1,7 +1,4 @@
-import { InputType, Int, Field } from "@nestjs/graphql";
-
-@InputType()
 export class CreatePlayerInput {
-	@Field(() => Int, { description: "Example field (placeholder)" })
-	exampleField: number;
+	name: string;
+	uuid: number;
 }

apps/api/src/players/dto/update-player.input.ts

@@ -1,8 +1,3 @@
-import { CreatePlayerInput } from "./create-player.input";
-import { InputType, Field, Int, PartialType } from "@nestjs/graphql";
-
-@InputType()
-export class UpdatePlayerInput extends PartialType(CreatePlayerInput) {
-	@Field(() => Int)
-	id: number;
+export class UpdatePlayerInput {
+	id!: number;
 }

apps/api/src/players/gateways/players.gateway.spec.ts

@@ -0,0 +1,18 @@
+import { Test, TestingModule } from "@nestjs/testing";
+import { PlayersGateway } from "./players.gateway";
+
+describe("PlayersGateway", () => {
+	let gateway: PlayersGateway;
+
+	beforeEach(async () => {
+		const module: TestingModule = await Test.createTestingModule({
+			providers: [PlayersGateway]
+		}).compile();
+
+		gateway = module.get<PlayersGateway>(PlayersGateway);
+	});
+
+	it("should be defined", () => {
+		expect(gateway).toBeDefined();
+	});
+});

apps/api/src/players/gateways/players.gateway.ts

@@ -0,0 +1,37 @@
+import {
+	ConnectedSocket,
+	MessageBody,
+	OnGatewayConnection,
+	SubscribeMessage,
+	WebSocketGateway,
+	WebSocketServer
+} from "@nestjs/websockets";
+import { Namespace, Server, Socket } from "socket.io";
+
+@WebSocketGateway()
+export class PlayersGateway implements OnGatewayConnection {
+	@WebSocketServer() private readonly server: Server;
+
+	// @ts-ignore
+	@WebSocketServer({ namespace: "namespace" })
+	private readonly namespace: Namespace;
+
+	constructor() {
+		console.log("PlayersGateway created", this.server, this.namespace);
+	}
+
+	handleConnection(client: Socket, ...args: any[]) {
+		console.log("Client connected", client.id, args);
+	}
+
+	@SubscribeMessage("message")
+	handleMessage(
+		@MessageBody() data: string,
+		@ConnectedSocket() client: Socket,
+		payload: any
+	): string {
+		console.log(data, client.connected);
+
+		return data;
+	}
+}

apps/api/src/players/players.module.ts

@@ -1,8 +1,9 @@
 import { Module } from "@nestjs/common";
+
 import { PlayersService } from "./players.service";
-import { PlayersResolver } from "./players.resolver";
+import { PlayersGateway } from "./gateways/players.gateway";
 
 @Module({
-	providers: [PlayersResolver, PlayersService]
+	providers: [PlayersService, PlayersGateway]
 })
 export class PlayersModule {}

apps/api/src/players/players.service.ts

@@ -2,27 +2,40 @@ import { Injectable } from "@nestjs/common";
 
 import { CreatePlayerInput } from "./dto/create-player.input";
 import { UpdatePlayerInput } from "./dto/update-player.input";
-import { Player } from "./entities/player.entity";
 
 @Injectable()
 export class PlayersService {
+	constructor() {}
+
 	create(createPlayerInput: CreatePlayerInput) {
-		return "This action adds a new player";
+		const newPlayer = {
+			...createPlayerInput,
+			id: 0,
+			connectedAt: new Date()
+		};
+
+		return newPlayer;
 	}
 
-	findAll(): Player[] {
+	findAll() {
 		return [];
 	}
 
-	findOne(id: number): Player {
+	findOne(id: number) {
 		return {
 			id,
 			connectedAt: new Date()
 		};
 	}
 
 	update(id: number, updatePlayerInput: UpdatePlayerInput) {
-		return `This action updates a #${id} player`;
+		const editedPlayer = {
+			...updatePlayerInput,
+			id,
+			connectedAt: new Date()
+		};
+
+		return editedPlayer;
 	}
 
 	remove(id: number) {

apps/web/package.json

@@ -19,6 +19,7 @@
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"rxjs": "^7.8.1",
+		"socket.io-client": "^4.8.1",
 		"threads": "^1.7.0",
 		"three": "^0.169.0"
 	},

apps/web/src/app.tsx

@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { register, RegisterModule } from "@quick-threejs/reactive";
 import GUI from "three/examples/jsm/libs/lil-gui.module.min.js";
 import { Move } from "chess.js";
+import { useSocket } from "./hooks/use-socket.hook";
 
 const location = new URL(
 	"./core/main.worker.ts",
@@ -34,16 +35,25 @@ const onReady = async (app: RegisterModule) => {
 };
 
 export const App = () => {
+	const { socket, currentPlayer, playersList } = useSocket();
+
 	useEffect(() => {
 		register({
 			location,
 			enableDebug,
 			axesSizes: 5,
 			gridSizes: 10,
 			withMiniCamera: true,
-			onReady
+			onReady: async (app) => {
+				await onReady(app);
+				socket.connect();
+			}
 		});
 	}, []);
 
+	useEffect(() => {
+		console.log(currentPlayer, playersList);
+	}, [currentPlayer, playersList]);
+
 	return <div />;
 };