Clean up client types #225 (#226)

* Clean up client types #225

* Fix linter

* Cleaned up TS in the client package

* Add file with shared types

* Add missing empty lines at the end and remove excluding needed files from tsconfigs

.eslintignore

@@ -1,6 +1,3 @@
 node_modules/
 dist/
 packages/**/refactor.ts
-packages/client/**/scene/*.ts
-packages/server/**/scene/*.ts
-packages/server/**/utils/*.ts

.eslintrc

@@ -10,11 +10,22 @@
   "parserOptions": {
     "ecmaVersion": 2021,
     "requireConfigFile": false,
-    "project": ["packages/**/tsconfig.json"]
+    "project": [
+      "packages/**/tsconfig.json"
+    ]
   },
-  "plugins": ["import", "@typescript-eslint"],
-  "extends": ["airbnb-typescript"],
+  "plugins": [
+    "import",
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "airbnb-typescript"
+  ],
   "rules": {
+    "eol-last": [
+      "error",
+      "always"
+    ],
     "import/no-unresolved": 2,
     "import/no-commonjs": 2,
     "no-console": 0,
@@ -27,16 +38,34 @@
         "ts": "never"
       }
     ],
-    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
-    "no-param-reassign": ["error", { "props": false }],
-    "sort-imports": ["error", { "ignoreDeclarationSort": true }],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true
+      }
+    ],
+    "no-param-reassign": [
+      "error",
+      {
+        "props": false
+      }
+    ],
+    "sort-imports": [
+      "error",
+      {
+        "ignoreDeclarationSort": true
+      }
+    ],
     "@typescript-eslint/indent": "off",
     "@typescript-eslint/quotes": "off",
     "@typescript-eslint/comma-dangle": "off",
     "@typescript-eslint/consistent-type-imports": [
       "error",
-      { "prefer": "type-imports", "disallowTypeAnnotations": true }
+      {
+        "prefer": "type-imports",
+        "disallowTypeAnnotations": true
+      }
     ],
     "react/jsx-filename-extension": "off"
   }
-}
+}

packages/client/src/main.ts

@@ -8,27 +8,19 @@ import { loginDialog } from "./ui/dialog-login";
 import { startRace } from "./scene/scene";
 // import { UIDialogWrapper, UIcreatePlayersList, UIsetCurrentPlayer } from "./ui";
 import { debounce, toggleStartRaceBtns } from "./utils";
-import type { Game, GameConfig, GameObject, Position } from "@neu5/types/src";
+import type { Game, GameConfig, GameObject, PlayerFromServer, PlayersFromServer, Position } from "@neu5/types/src";
 import type { Quaternion } from "@babylonjs/core";
 
-type PlayerFromServer = {
-  color: string;
-  userID: string;
-  username: string;
+export type Player = PlayerFromServer & {
+  isCurrentPlayer: boolean;
   vehicle: {
     body: { position: Vector3; rotationQuaternion: Quaternion; quaternion: Quaternion };
     wheels: Array<{ position: Vector3; rotationQuaternion: Quaternion; quaternion: Quaternion }>;
   };
 };
 
-export type Player = PlayerFromServer & {
-  isCurrentPlayer: boolean;
-};
-
 export type PlayersMap = Array<Player>;
 
-type PlayersFromServer = Array<PlayerFromServer>;
-
 const joinRaceRoomBtn = document.getElementById(
   "join-race-room-btn"
 ) as HTMLAnchorElement;

packages/client/tsconfig.json

@@ -14,11 +14,19 @@
     "sourceMap": true,
     "skipLibCheck": true,
     "isolatedModules": true,
-    "types": ["node"],
+    "types": [
+      "node"
+    ],
     "paths": {
-      "~/*": ["./*"]
+      "~/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["src/**/*.ts"],
-  "exclude": ["src/refactor.ts", "src/scene/*.ts"]
-}
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/refactor.ts"
+  ]
+}

packages/server/src/index.ts

@@ -6,7 +6,7 @@ import { createServer } from "http";
 import type { Socket } from "socket.io";
 import { Server } from "socket.io";
 
-import type { GameConfig, GameObject, ServerToClientEvents /*UsersMap*/ } from "@neu5/types/src";
+import type { GameConfig, GameObject, ServerToClientEvents } from "@neu5/types/src";
 
 import { InMemorySessionStore } from "./sessionStore";
 import { createSocketHandlers } from "./sockets/sockets";

packages/server/src/scene/scene.ts

@@ -162,25 +162,25 @@ const startRace = async ({
   loop = setInterval(() => {
     physicsWorld.fixedStep();
 
-    playersMap.forEach(({ actions, vehicle }) => {
+    playersMap.forEach(({ actions: playersActions, vehicle }) => {
       if (!vehicle) {
         return;
       }
 
-      if (actions.accelerate) {
+      if (playersActions.accelerate) {
         vehicle.physicalVehicle.setWheelForce(maxForce, 2);
         vehicle.physicalVehicle.setWheelForce(maxForce, 3);
-      } else if (actions.brake) {
+      } else if (playersActions.brake) {
         vehicle.physicalVehicle.setWheelForce(-maxForce / 2, 2);
         vehicle.physicalVehicle.setWheelForce(-maxForce / 2, 3);
       } else {
         vehicle.physicalVehicle.setWheelForce(0, 2);
         vehicle.physicalVehicle.setWheelForce(0, 3);
       }
-      if (actions.left) {
+      if (playersActions.left) {
         vehicle.physicalVehicle.setSteeringValue(maxSteerVal, 0);
         vehicle.physicalVehicle.setSteeringValue(maxSteerVal, 1);
-      } else if (actions.right) {
+      } else if (playersActions.right) {
         vehicle.physicalVehicle.setSteeringValue(-maxSteerVal, 0);
         vehicle.physicalVehicle.setSteeringValue(-maxSteerVal, 1);
       } else {

packages/server/tsconfig.json

@@ -10,8 +10,15 @@
     "esModuleInterop": true,
     "skipLibCheck": true,
     "isolatedModules": true,
-    "types": ["node", "express"]
+    "types": [
+      "node",
+      "express"
+    ]
   },
-  "include": ["src/**/*.ts"],
-  "exclude": ["src/refactor.ts", "src/scene/*.ts", "src/utils/*.ts"]
-}
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/refactor.ts"
+  ]
+}

packages/types/src/client.ts

@@ -0,0 +1,37 @@
+import type { RoomList, UsersList } from './shared';
+
+type ActionTypes = "accelerate" | "brake" | "left" | "right";
+
+type Class = { new(...args: any[]): any };
+
+type PlayerFromServer = {
+    color: string;
+    userID: string;
+    username: string;
+    vehicle: {
+        body: { position: any; rotationQuaternion: any; quaternion: any };
+        wheels: Array<{ position: any; rotationQuaternion: any; quaternion: any }>;
+    };
+};
+
+type PlayersFromServer = Array<PlayerFromServer>;
+
+type UI = {
+    createPlayersList: (list: UsersList) => void;
+    createRoomList: (list: RoomList) => void;
+    hideElement: (element: HTMLElement) => void;
+    setCurrentPlayer: (id: string) => void;
+    showElement: (element: HTMLElement) => void;
+    DialogWrapper: Class;
+};
+
+interface ClientEvents {
+    "client-dev:stop the race": () => void;
+    "client:action": (data: { playerActions: Array<ActionTypes>, id: string }) => void;
+    "client:join race room": () => void;
+    "client:leave race room": () => void;
+    "client:set name": (data: { userID: string; username: string }) => void;
+    "client:start the race": () => void;
+}
+
+export type { ActionTypes, ClientEvents, PlayerFromServer, PlayersFromServer, UI };

packages/types/src/index.ts

@@ -1,21 +1,6 @@
-type UsersMap = Map<
-  string,
-  {
-    socketId: string;
-    displayName: string;
-  }
->;
-
-type Class = { new(...args: any[]): any };
-
-type UI = {
-  createPlayersList: (list: UsersList) => void;
-  createRoomList: (list: RoomList) => void;
-  hideElement: (element: HTMLElement) => void;
-  setCurrentPlayer: (id: string) => void;
-  showElement: (element: HTMLElement) => void;
-  DialogWrapper: Class;
-};
+import type { RoomList, User, UsersList } from './shared';
+import type { ActionTypes, ClientEvents, PlayerFromServer, PlayersFromServer, UI } from "./client";
+import type { ServerEvents } from './server';
 
 type Game = {
   elements: {
@@ -43,12 +28,6 @@ type GameConfig = {
   depth: number;
 };
 
-type User = {
-  connected: boolean;
-  userID: string;
-  username: string;
-};
-
 type GameQuaternion = {
   x: number;
   y: number;
@@ -66,58 +45,22 @@ type GameObject = {
   depth: number;
 };
 
-type UsersList = Array<User>;
-
-type RoomUser = {
-  username: string;
-};
-type RoomList = Array<RoomUser>;
-
-type SessionInfo = {
-  sessionID: string;
-  userID: string;
-};
-
-type ActionTypes = "accelerate" | "brake" | "left" | "right";
-
-interface ServerToClientEvents {
-  "client-dev:stop the race": () => void;
-  "client:action": (data: { playerActions: Array<ActionTypes>, id: string }) => void;
-  "client:join race room": () => void;
-  "client:leave race room": () => void;
-  "client:set name": (data: { userID: string; username: string }) => void;
-  "client:start the race": () => void;
-  "server:action": (data: Object) => void;
-  // "server:game-info": (data: GameInfo) => void;
-  "server:close dialog": () => void;
-  "server:send users": (data: UsersList) => void;
-  "server:send room users": (data: RoomList) => void;
-  "server:session": (data: SessionInfo) => void;
-  "server:show error": (data: { message: string }) => void;
-  "server:start-race": (data: Object) => void;
-  // "server:stop-race": (data: Object) => void;
-  "server:user can join the room": () => void;
-  "server:user can leave the room": () => void;
-  "server:user can start the race": () => void;
-  "server:user cannot start the race": () => void;
-  "server:user connected": (data: User) => void;
-  "server:user disconnected": (data: { userID: string }) => void;
-  "server:users-list-update": (playersList: UsersList) => void;
-}
+interface ServerToClientEvents extends ClientEvents, ServerEvents { }
 
 export type {
   ActionTypes,
   Game,
   GameConfig,
   GameObject,
   GameQuaternion,
+  PlayerFromServer,
+  PlayersFromServer,
   Position,
   RoomList,
+  UI,
   User,
   UsersList,
-  ServerToClientEvents,
-  UI,
-  UsersMap,
+  ServerToClientEvents
 };
 
 export { FEATURES_NAMES, features } from "./features";

packages/types/src/server.ts

@@ -0,0 +1,24 @@
+import type { RoomList, User, UsersList } from './shared';
+
+type SessionInfo = {
+    sessionID: string;
+    userID: string;
+};
+
+interface ServerEvents {
+    "server:action": (data: Object) => void;
+    "server:close dialog": () => void;
+    "server:send users": (data: UsersList) => void;
+    "server:send room users": (data: RoomList) => void;
+    "server:session": (data: SessionInfo) => void;
+    "server:show error": (data: { message: string }) => void;
+    "server:start-race": (data: Object) => void;
+    "server:user can join the room": () => void;
+    "server:user can leave the room": () => void;
+    "server:user can start the race": () => void;
+    "server:user cannot start the race": () => void;
+    "server:user connected": (data: User) => void;
+    "server:user disconnected": (data: { userID: string }) => void;
+}
+
+export type { ServerEvents };

packages/types/src/shared.ts

@@ -0,0 +1,16 @@
+
+type RoomUser = {
+    username: string;
+};
+
+type RoomList = Array<RoomUser>;
+
+type User = {
+    connected: boolean;
+    userID: string;
+    username: string;
+};
+
+type UsersList = Array<User>;
+
+export type { RoomList, User, UsersList };