Merge pull request #211 from candirugame/message-types

Less redundancy and type-safe messages

src/client/core/CommandManager.ts

@@ -1,6 +1,6 @@
-import { Player } from './Player.ts';
 import { ChatOverlay } from '../ui/ChatOverlay.ts';
 import { SettingsManager } from './SettingsManager.ts';
+import { Player } from '../../shared/Player.ts';
 
 export class CommandManager {
 	private localPlayer: Player;

src/client/core/Game.ts

@@ -1,4 +1,3 @@
-import { Player } from './Player.ts';
 import { Renderer } from './Renderer.ts';
 import { ChatOverlay } from '../ui/ChatOverlay.ts';
 import { InputHandler } from '../input/InputHandler.ts';
@@ -9,6 +8,8 @@ import { HealthIndicator } from '../ui/HealthIndicator.ts';
 import { MapLoader } from './MapLoader.ts';
 import { RemoteItemRenderer } from './RemoteItemRenderer.ts';
 import { TouchInputHandler } from '../input/TouchInputHandler.ts';
+import { SettingsManager } from './SettingsManager.ts';
+import { Player } from '../../shared/Player.ts';
 
 export class Game {
 	private localPlayer: Player;
@@ -28,6 +29,7 @@ export class Game {
 	constructor(container: HTMLElement) {
 		this.gameIndex = Game.nextGameIndex++;
 		this.localPlayer = new Player();
+		this.localPlayer.name = SettingsManager.settings.name ?? this.localPlayer.name;
 		this.chatOverlay = new ChatOverlay(container, this.localPlayer);
 		this.networking = new Networking(this.localPlayer, this.chatOverlay);
 		this.renderer = new Renderer(container, this.networking, this.localPlayer, this.chatOverlay);

src/client/core/Inventory.ts

@@ -4,9 +4,9 @@ import { InputHandler } from '../input/InputHandler.ts';
 import { BananaGun } from '../items/BananaGun.ts';
 import { HeldItemInput } from '../input/HeldItemInput.ts';
 import { Networking } from './Networking.ts';
-import { Player } from './Player.ts';
 import { ItemBase, ItemType } from '../items/ItemBase.ts';
 import { FishGun } from '../items/FishGun.ts';
+import { Player } from '../../shared/Player.ts';
 
 export class Inventory {
 	private inventoryItems: ItemBase[] = [];

src/client/core/Networking.ts

@@ -1,26 +1,8 @@
-import { io, Socket } from 'socket.io-client';
-import { Player } from './Player.ts';
-import { ChatOverlay } from '../ui/ChatOverlay.ts';
 import * as THREE from 'three';
-
-export interface RemotePlayer {
-	idLastDamagedBy: number;
-	latency: number;
-	id: number;
-	position: { x: number; y: number; z: number };
-	velocity: { x: number; y: number; z: number };
-	lookQuaternion: [number, number, number, number];
-	name: string;
-	gravity: number;
-	forced: boolean;
-	health: number;
-	inventory: number[];
-	chatActive: boolean;
-	chatMsg: string;
-	playerSpectating: number;
-	gameMsgs: string[];
-	gameMsgs2: string[];
-}
+import { io } from 'socket.io-client';
+import { ChatOverlay } from '../ui/ChatOverlay.ts';
+import { CustomClientSocket } from '../../shared/messages.ts';
+import { Player, PlayerData } from '../../shared/Player.ts';
 
 interface WorldItem {
 	vector: { x: number; y: number; z: number };
@@ -48,9 +30,9 @@ interface LastUploadedLocalPlayer {
 }
 
 export class Networking {
-	private socket: Socket;
+	private socket: CustomClientSocket;
 	private gameVersion: string = '';
-	private remotePlayers: RemotePlayer[] = [];
+	private remotePlayers: PlayerData[] = [];
 	private worldItems: WorldItem[] = [];
 	private lastUploadedLocalPlayer: LastUploadedLocalPlayer | null = null;
 	private lastUploadTime: number;
@@ -107,21 +89,21 @@ export class Networking {
 			this.lastLatencyTestGotResponse = true;
 		});
 
-		this.socket.on('remotePlayerData', (data: RemotePlayer[]) => {
+		this.socket.on('remotePlayerData', (data) => {
 			this.remotePlayers = data;
 			this.processRemotePlayerData();
 		});
 
-		this.socket.on('worldItemData', (data: WorldItem[]) => {
+		this.socket.on('worldItemData', (data) => {
 			this.worldItems = data;
 			this.processWorldItemData();
 		});
 
-		this.socket.on('chatMsg', (data: { id: number; name: string; message: string }) => {
+		this.socket.on('chatMsg', (data) => {
 			if (data.id !== this.localPlayer.id) this.chatOverlay.addChatMessage(data);
 		});
 
-		this.socket.on('serverInfo', (data: ServerInfo) => {
+		this.socket.on('serverInfo', (data) => {
 			this.serverInfo = data;
 			this.onServerInfo();
 		});
@@ -180,7 +162,12 @@ export class Networking {
 				if (remotePlayer.forced) {
 					this.localPlayer.position.set(remotePlayer.position.x, remotePlayer.position.y, remotePlayer.position.z);
 					this.localPlayer.velocity.set(remotePlayer.velocity.x, remotePlayer.velocity.y, remotePlayer.velocity.z);
-					this.localPlayer.lookQuaternion.set(...remotePlayer.lookQuaternion);
+					this.localPlayer.lookQuaternion.set(
+						remotePlayer.lookQuaternion.x,
+						remotePlayer.lookQuaternion.y,
+						remotePlayer.lookQuaternion.z,
+						remotePlayer.lookQuaternion.w,
+					);
 					//this.localPlayer.name = remotePlayer.name;
 					this.localPlayer.gravity = remotePlayer.gravity;
 					this.localPlayer.forcedAcknowledged = true;
@@ -222,7 +209,7 @@ export class Networking {
 		return this.messagesBeingTyped;
 	}
 
-	public getRemotePlayerData(): RemotePlayer[] {
+	public getRemotePlayerData(): PlayerData[] {
 		return this.remotePlayers;
 	}
 
@@ -244,7 +231,7 @@ export class Networking {
 	}
 
 	public applyDamage(id: number, damage: number) {
-		const player2 = this.remotePlayers.find((player) => player.id === id);
+		const player2 = this.remotePlayers.find((player) => player.id === id)!;
 		const damageRequest = {
 			localPlayer: this.localPlayer,
 			targetPlayer: player2,

src/client/core/RemotePlayerRenderer.ts

@@ -2,27 +2,12 @@ import * as THREE from 'three';
 import { Networking } from './Networking.ts';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
-import { Player } from './Player.ts';
 import { acceleratedRaycast, computeBoundsTree } from 'three-mesh-bvh';
+import { Player, PlayerData } from '../../shared/Player.ts';
 
 THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
 THREE.Mesh.prototype.raycast = acceleratedRaycast;
 
-interface RemotePlayerData {
-	health: number;
-	id: number;
-	velocity: { x: number; y: number; z: number };
-	position: { x: number; y: number; z: number };
-	quaternion: [number, number, number, number]; // Add quaternion as required
-	forced: boolean;
-	name: string;
-	playerSpectating: number;
-}
-
-interface RemotePlayer extends Omit<RemotePlayerData, 'quaternion'> {
-	quaternion?: [number, number, number, number]; // Optional in case it's missing
-}
-
 interface PlayerToRender {
 	id: number;
 	object: THREE.Object3D;
@@ -122,7 +107,7 @@ export class RemotePlayerRenderer {
 	private updateRemotePlayers(): void {
 		if (!this.possumMesh) return;
 
-		const remotePlayerData: RemotePlayer[] = this.networking.getRemotePlayerData();
+		const remotePlayerData: PlayerData[] = this.networking.getRemotePlayerData();
 		const localPlayerId = this.localPlayer.id;
 
 		// First, remove all players that should be hidden
@@ -161,7 +146,7 @@ export class RemotePlayerRenderer {
 				return;
 			}
 
-			const playerDataWithQuaternion: RemotePlayerData = {
+			const playerDataWithQuaternion: PlayerData = {
 				...remotePlayer,
 				quaternion: remotePlayer.quaternion || [0, 0, 0, 1],
 			};
@@ -178,7 +163,7 @@ export class RemotePlayerRenderer {
 	private updatePlayerPosition(
 		playerObject: THREE.Object3D,
 		playerSphere: THREE.Object3D,
-		remotePlayerData: RemotePlayerData,
+		remotePlayerData: PlayerData,
 	): void {
 		const velocity = Math.sqrt(
 			Math.pow(remotePlayerData.velocity.x, 2) +
@@ -265,10 +250,10 @@ export class RemotePlayerRenderer {
 
 		// Apply quaternion slerp as before
 		const targetQuaternion = new THREE.Quaternion(
-			remotePlayerData.quaternion[0],
-			remotePlayerData.quaternion[1],
-			remotePlayerData.quaternion[2],
-			remotePlayerData.quaternion[3],
+			remotePlayerData.quaternion.x,
+			remotePlayerData.quaternion.y,
+			remotePlayerData.quaternion.z,
+			remotePlayerData.quaternion.w,
 		);
 		const rotationQuaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI / 2);
 		targetQuaternion.multiply(rotationQuaternion);
@@ -302,7 +287,7 @@ export class RemotePlayerRenderer {
 		}
 	}
 
-	private addNewPlayer(remotePlayerData: RemotePlayerData): void {
+	private addNewPlayer(remotePlayerData: PlayerData): void {
 		const object = this.possumMesh!.clone();
 		const sphere = this.sphere.clone();
 
@@ -331,7 +316,7 @@ export class RemotePlayerRenderer {
 		);
 	}
 
-	private removeInactivePlayers(remotePlayerData: RemotePlayer[]): void {
+	private removeInactivePlayers(remotePlayerData: PlayerData[]): void {
 		this.playersToRender = this.playersToRender.filter((player) => {
 			const isActive = remotePlayerData.some((remotePlayer) => remotePlayer.id === player.id);
 			if (!isActive) {

src/client/core/Renderer.ts

@@ -1,11 +1,11 @@
 import * as THREE from 'three';
-import { Networking, type RemotePlayer } from './Networking.ts';
-import { Player } from './Player.ts';
+import { Networking } from './Networking.ts';
 import { ChatOverlay } from '../ui/ChatOverlay.ts';
 import { RemotePlayerRenderer } from './RemotePlayerRenderer.ts';
 import { InputHandler } from '../input/InputHandler.ts';
 import { SettingsManager } from './SettingsManager.ts';
 import { CollisionManager } from '../input/CollisionManager.ts';
+import { Player, PlayerData } from '../../shared/Player.ts';
 
 export class Renderer {
 	private clock: THREE.Clock;
@@ -230,10 +230,10 @@ export class Renderer {
 				// Simple quaternion slerp
 				this.camera.quaternion.slerp(
 					new THREE.Quaternion(
-						remotePlayer.lookQuaternion[0],
-						remotePlayer.lookQuaternion[1],
-						remotePlayer.lookQuaternion[2],
-						remotePlayer.lookQuaternion[3],
+						remotePlayer.lookQuaternion.x,
+						remotePlayer.lookQuaternion.y,
+						remotePlayer.lookQuaternion.z,
+						remotePlayer.lookQuaternion.w,
 					),
 					0.3 * this.deltaTime * 60,
 				);
@@ -249,7 +249,7 @@ export class Renderer {
 		this.knockbackVector.lerp(new THREE.Vector3(), 0.05 * this.deltaTime * 60);
 
 		if (this.localPlayer.health < this.lastPlayerHealth) {
-			const remotePlayer: RemotePlayer | undefined = this.networking.getRemotePlayerData().find((player) =>
+			const remotePlayer: PlayerData | undefined = this.networking.getRemotePlayerData().find((player) =>
 				player.id === this.localPlayer.idLastDamagedBy
 			);
 			if (remotePlayer !== undefined) {

src/client/input/CollisionManager.ts

@@ -1,5 +1,4 @@
 import * as THREE from 'three';
-import { Player } from '../core/Player.ts';
 import {
 	acceleratedRaycast,
 	computeBoundsTree,
@@ -9,6 +8,7 @@ import {
 } from 'three-mesh-bvh';
 import { InputHandler } from './InputHandler.ts';
 import { RemotePlayerRenderer } from '../core/RemotePlayerRenderer.ts';
+import { Player } from '../../shared/Player.ts';
 
 THREE.Mesh.prototype.raycast = acceleratedRaycast;
 THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;

src/client/input/InputHandler.ts

@@ -1,8 +1,8 @@
 import * as THREE from 'three';
 import { PointerLockControls } from './PointerLockControl.ts';
 import { Renderer } from '../core/Renderer.ts';
-import { Player } from '../core/Player.ts';
 import { SettingsManager } from '../core/SettingsManager.ts';
+import { Player } from '../../shared/Player.ts';
 
 export class InputHandler {
 	private readonly gameIndex: number;

src/client/input/PointerLockControl.ts

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
-import { Player } from '../core/Player.ts';
 import { SettingsManager } from '../core/SettingsManager.ts';
+import { Player } from '../../shared/Player.ts';
 
 // Define a custom event map interface
 interface PointerLockControlEventMap {

src/client/ui/ChatOverlay.ts

@@ -1,10 +1,10 @@
-import { Player } from '../core/Player.ts';
 import { Renderer } from '../core/Renderer.ts';
 import { Networking } from '../core/Networking.ts';
 import { InputHandler } from '../input/InputHandler.ts';
 import { CommandManager } from '../core/CommandManager.ts';
 import { SettingsManager } from '../core/SettingsManager.ts';
 import { TouchInputHandler } from '../input/TouchInputHandler.ts';
+import { Player } from '../../shared/Player.ts';
 
 interface ChatMessage {
 	id: number;

src/client/ui/HealthIndicator.ts

@@ -2,8 +2,8 @@ import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 import * as THREE from 'three';
 import { Renderer } from '../core/Renderer.ts';
-import { Player } from '../core/Player.ts';
 import { Networking } from '../core/Networking.ts';
+import { Player } from '../../shared/Player.ts';
 
 const clock = new THREE.Clock();