Setup formatting

.devcontainer/devcontainer.json

@@ -1,5 +1,3 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
-// https://github.com/microsoft/vscode-dev-containers/tree/v0.140.1/containers/typescript-node
 {
   "name": "Node.js & TypeScript",
   "build": {
@@ -8,31 +6,39 @@
       "VARIANT": "14"
     }
   },
-  // Set *default* container specific settings.json values on container create.
   "settings": {
     "terminal.integrated.shell.linux": "/bin/zsh",
-    "workbench.sideBar.location": "right",
     "files.exclude": {
       "**/node_modules": true,
-      "**/package-lock.json": true
+      "**/package-lock.json": true,
-    }
+      "**/dist": true,
+      "**/lib": true
+    },
+    "editor.tabSize": 2,
+    "editor.detectIndentation": false,
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "eslint.enable": true,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+    "eslint.validate": ["json"],
+    "markdown.extension.toc.levels": "2..4"
   },
-  // Add the IDs of extensions you want installed when the container is created.
   "extensions": [
     "dbaeumer.vscode-eslint",
-    "ms-vscode.vscode-typescript-tslint-plugin"
+    "esbenp.prettier-vscode",
+    "yzhang.markdown-all-in-one",
+    "hediet.vscode-drawio"
   ],
   "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached",
   "workspaceFolder": "/workspace",
   "mounts": [
-    "source=decla-red-root-node_modules,target=/workspace/node_modules,type=volume",
+    "source=decla-red-root-node_modules2,target=/workspace/node_modules,type=volume",
-    "source=decla-red-frontend-node_modules,target=/workspace/frontend/node_modules,type=volume",
+    "source=decla-red-frontend-node_modules2,target=/workspace/frontend/node_modules,type=volume",
-    "source=decla-red-backend-node_modules,target=/workspace/backend/node_modules,type=volume",
+    "source=decla-red-backend-node_modules2,target=/workspace/backend/node_modules,type=volume",
-    "source=decla-red-shared-node_modules,target=/workspace/shared/node_modules,type=volume",
+    "source=decla-red-shared-node_modules2,target=/workspace/shared/node_modules,type=volume"
   ],
-  "forwardPorts": [
+  "forwardPorts": [3000, 8080],
-    3000,
+  "postCreateCommand": "sudo npm install && sudo npm run initialize && npm run build"
-    8080
-  ],
-  "postCreateCommand": "npm install && npx lerna run initialize"
 }

.eslintignore

@@ -1 +1,4 @@
-**/*.js
+**/node_modules/**/*.js
+node_modules/**/*.js
+**/package-lock.json
+package-lock.json

.eslintrc.json

@@ -5,25 +5,33 @@
     "es2020": true
   },
   "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier",
+    "prettier/@typescript-eslint",
-    "prettier/@typescript-eslint"
+    "plugin:prettier/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 11,
+    "ecmaVersion": 2020,
     "sourceType": "module"
   },
-  "plugins": ["unused-imports", "@typescript-eslint", "prettier"],
+  "plugins": ["unused-imports", "@typescript-eslint", "json-format", "prettier"],
+  "settings": {
+    "json/sort-package-json": true
+  },
   "rules": {
     "prettier/prettier": "error",
     "no-unused-vars": "off",
     "unused-imports/no-unused-imports-ts": "error",
-    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-non-null-assertion": "off"
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-var-requires": "off"
   }
 }

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "trailingComma": "es5",
+  "trailingComma": "all",
   "printWidth": 90,
   "tabWidth": 2,
   "singleQuote": true,

backend/package.json

@@ -1,28 +1,15 @@
 {
   "name": "decla.red-server",
-  "description": "Game server for decla.red",
   "private": true,
-  "main": "index.js",
+  "description": "Game server for decla.red",
-  "scripts": {
-    "start": "concurrently --kill-others \"webpack --mode development -w\" \"nodemon --legacy-watch dist/main.js\"",
-    "lint": "eslint --fix \"src/**/*.ts\" && prettier --write \"src/**/*.ts\"",
-    "build": "webpack --mode production",
-    "try-build": "npm run build && node dist/main.js",
-    "initialize": "npm install"
-  },
   "keywords": [],
   "author": "András Schmelczer <andras@schmelczer.dev> (https://schmelczer.dev/)",
-  "devDependencies": {
+  "main": "index.js",
-    "clean-webpack-plugin": "^3.0.0",
+  "scripts": {
-    "concurrently": "^5.3.0",
+    "build": "webpack --mode production",
-    "esbuild-loader": "^2.4.0",
+    "initialize": "npm install",
-    "nodemon": "^2.0.4",
+    "start": "concurrently --kill-others \"webpack --mode development -w\" \"nodemon --legacy-watch dist/main.js\"",
-    "raw-loader": "^4.0.1",
+    "try-build": "npm run build && node dist/main.js"
-    "resolve-url-loader": "^3.1.1",
-    "terser-webpack-plugin": "^2.3.5",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
   },
   "dependencies": {
     "cors": "^2.8.5",
@@ -31,5 +18,18 @@
     "socket.io": "^2.3.0",
     "uws": "^10.148.1",
     "webpack-node-externals": "^2.5.2"
+  },
+  "devDependencies": {
+    "clean-webpack-plugin": "^3.0.0",
+    "concurrently": "^5.3.0",
+    "esbuild-loader": "^2.4.0",
+    "nodemon": "^2.0.4",
+    "raw-loader": "^4.0.1",
+    "resolve-url-loader": "^3.1.1",
+    "terser-webpack-plugin": "^2.3.5",
+    "typescript": "^3.9.7",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
   }
 }

backend/src/main.ts

@@ -40,16 +40,18 @@ app.use(
       callback(null, true);
     },
     credentials: true,
-  })
+  }),
 );
 
 const port = 3000;
 const server = new Server(app);
 const io = ioserver(server);
 
+/*
 const log = (text: string) => {
   io.to('insights').emit('insights', text + '\n');
 };
+*/
 
 app.get('/', function (req, res) {
   res.sendFile('dist/index.html', { root: '.' });

backend/src/map/create-dungeon.ts

@@ -20,7 +20,7 @@ export const createDungeon = (objects: PhysicalContainer) => {
       previousEnd,
       currentEnd,
       previousRadius,
-      currentToRadius
+      currentToRadius,
     );
 
     objects.addObject(tunnel);
@@ -31,10 +31,10 @@ export const createDungeon = (objects: PhysicalContainer) => {
           currentEnd,
           vec3.normalize(
             vec3.create(),
-            vec3.fromValues(Random.getRandom(), 0, Random.getRandom())
+            vec3.fromValues(Random.getRandom(), 0, Random.getRandom()),
+          ),
+          0.5,
         ),
-          0.5
-        )
       );
       tunnelsCountSinceLastLight = 0;
     }

backend/src/objects/character-physical.ts

@@ -44,14 +44,14 @@ export class CharacterPhysical extends CharacterBase implements Physical {
         vec2.clone(CharacterPhysical.leftFootOffset),
         20,
         null,
-        container
+        container,
       ),
       new CirclePhysical(
         vec2.clone(CharacterPhysical.rightFootOffset),
         20,
         null,
-        container
+        container,
-      )
+      ),
     );
 
     this.head.owner = this;
@@ -89,7 +89,7 @@ export class CharacterPhysical extends CharacterBase implements Physical {
 
     const movementForce = this.movementActions.reduce(
       (sum, current) => vec2.add(sum, sum, current.delta),
-      vec2.create()
+      vec2.create(),
     );
 
     vec2.scale(movementForce, movementForce, 1 / this.movementActions.length);
@@ -113,25 +113,25 @@ export class CharacterPhysical extends CharacterBase implements Physical {
     const bodyCenter = vec2.sub(
       vec2.create(),
       this.head.center,
-      CharacterPhysical.headOffset
+      CharacterPhysical.headOffset,
     );
 
     const leftFootPositon = vec2.add(
       vec2.create(),
       bodyCenter,
-      CharacterPhysical.leftFootOffset
+      CharacterPhysical.leftFootOffset,
     );
     const rightFootPositon = vec2.add(
       vec2.create(),
       bodyCenter,
-      CharacterPhysical.rightFootOffset
+      CharacterPhysical.rightFootOffset,
     );
 
     const leftFootDelta = vec2.sub(vec2.create(), this.leftFoot.center, leftFootPositon);
     const rightFootDelta = vec2.sub(
       vec2.create(),
       this.rightFoot.center,
-      rightFootPositon
+      rightFootPositon,
     );
 
     vec2.scale(leftFootDelta, leftFootDelta, 0.0006);

backend/src/objects/circle-physical.ts

@@ -39,9 +39,9 @@ export class CirclePhysical implements Circle, Physical {
     private _center: vec2,
     private _radius: number,
     public owner: GameObject,
-    private readonly container: PhysicalContainer
+    private readonly container: PhysicalContainer,
   ) {
-    this._boundingBox = new BoundingBox(null);
+    this._boundingBox = new BoundingBox();
     this.recalculateBoundingBox();
   }
 
@@ -93,8 +93,8 @@ export class CirclePhysical implements Circle, Physical {
       result.push(
         vec2.fromValues(
           Math.cos((2 * Math.PI * i) / count) * this.radius + this.center.x,
-          Math.sin((2 * Math.PI * i) / count) * this.radius + this.center.y
+          Math.sin((2 * Math.PI * i) / count) * this.radius + this.center.y,
-        )
+        ),
       );
     }
     return result;
@@ -111,13 +111,13 @@ export class CirclePhysical implements Circle, Physical {
     vec2.add(
       this.velocity,
       this.velocity,
-      vec2.scale(vec2.create(), force, timeInMilliseconds)
+      vec2.scale(vec2.create(), force, timeInMilliseconds),
     );
 
     vec2.set(
       this.velocity,
       clamp(this.velocity.x, -settings.maxVelocityX, settings.maxVelocityX),
-      clamp(this.velocity.y, -settings.maxVelocityY, settings.maxVelocityY)
+      clamp(this.velocity.y, -settings.maxVelocityY, settings.maxVelocityY),
     );
   }
 
@@ -129,7 +129,7 @@ export class CirclePhysical implements Circle, Physical {
     vec2.scale(
       this.velocity,
       this.velocity,
-      Math.pow(settings.velocityAttenuation, timeInMilliseconds)
+      Math.pow(settings.velocityAttenuation, timeInMilliseconds),
     );
 
     const distance = vec2.scale(vec2.create(), this.velocity, timeInMilliseconds);
@@ -140,13 +140,13 @@ export class CirclePhysical implements Circle, Physical {
     let wasHit = false;
 
     for (let i = 0; i < stepCount; i++) {
-      const { normal, tangent, hitSurface } = moveCircle(
+      const { tangent, hitSurface } = moveCircle(
         this,
         distance,
-        this.container.findIntersecting(this.boundingBox)
+        this.container.findIntersecting(this.boundingBox),
       );
       if (hitSurface) {
-        vec2.scale(this.velocity, tangent, vec2.dot(tangent, this.velocity));
+        vec2.scale(this.velocity, tangent!, vec2.dot(tangent!, this.velocity));
         wasHit = true;
       }
 

backend/src/objects/lamp-physical.ts

@@ -23,7 +23,7 @@ export class LampPhysical extends LampBase implements Physical {
         this.center.x - settings.lightCutoffDistance,
         this.center.x + settings.lightCutoffDistance,
         this.center.y - settings.lightCutoffDistance,
-        this.center.y + settings.lightCutoffDistance
+        this.center.y + settings.lightCutoffDistance,
       );
     }
 

backend/src/objects/tunnel-physical.ts

@@ -21,7 +21,7 @@ export class TunnelPhysical extends TunnelBase implements StaticPhysical {
     const targetFromDelta = vec2.subtract(vec2.create(), target, this.from);
 
     const h = clamp01(
-      vec2.dot(targetFromDelta, toFromDelta) / vec2.dot(toFromDelta, toFromDelta)
+      vec2.dot(targetFromDelta, toFromDelta) / vec2.dot(toFromDelta, toFromDelta),
     );
 
     return (

backend/src/physics/bounding-boxes/bounding-box-base.ts

@@ -1,11 +1,11 @@
 import { vec2 } from 'gl-matrix';
 
-export abstract class BoundingBoxBase {
+export class BoundingBoxBase {
   constructor(
     protected _xMin: number = 0,
     protected _xMax: number = 0,
     protected _yMin: number = 0,
-    protected _yMax: number = 0
+    protected _yMax: number = 0,
   ) {}
 
   public get 0(): number {

backend/src/physics/containers/bounding-box-list.ts

@@ -2,7 +2,7 @@ import { Physical } from '../physical';
 import { BoundingBoxBase } from '../bounding-boxes/bounding-box-base';
 
 export class BoundingBoxList {
-  constructor(private objects: Array<Physical> = []) { }
+  constructor(private objects: Array<Physical> = []) {}
 
   public insert(object: Physical) {
     this.objects.push(object);
@@ -11,7 +11,7 @@ export class BoundingBoxList {
   public remove(object: Physical) {
     this.objects.splice(
       this.objects.findIndex((i) => i === object),
-      1
+      1,
     );
   }
 

backend/src/physics/containers/bounding-box-tree.ts

@@ -22,7 +22,7 @@ export class BoundingBoxTree {
   private buildRecursive(
     objects: Array<StaticPhysical>,
     depth: number,
-    parent: Node
+    parent: Node,
   ): Node {
     if (objects.length === 0) {
       return null;
@@ -71,7 +71,7 @@ export class BoundingBoxTree {
   private findMaybeIntersecting(
     boundingBox: BoundingBoxBase,
     node: Node,
-    depth: number
+    depth: number,
   ): Array<StaticPhysical> {
     if (node === null) {
       return [];
@@ -104,7 +104,7 @@ export class BoundingBoxTree {
     object: StaticPhysical,
     node: Node,
     depth: number,
-    parent: Node
+    parent: Node,
   ): [Node, number] {
     if (node === null) {
       return [parent, depth - 1];

backend/src/physics/containers/physical-container.ts

@@ -53,7 +53,7 @@ export class PhysicalContainer {
         const array = this.objectsGroupedByAbilities.get(command);
         array.splice(
           array.findIndex((i) => i.id == object.gameObject.id),
-          1
+          1,
         );
       }
     }

backend/src/physics/move-circle.ts

@@ -6,7 +6,7 @@ import { Physical } from './physical';
 export const moveCircle = (
   circle: CirclePhysical,
   delta: vec2,
-  possibleIntersectors: Array<Physical>
+  possibleIntersectors: Array<Physical>,
 ): {
   realDelta: vec2;
   hitSurface: boolean;
@@ -16,7 +16,8 @@ export const moveCircle = (
   circle.center = vec2.add(circle.center, circle.center, delta);
 
   const intersecting = possibleIntersectors.filter(
-    (b) => b.gameObject !== circle.gameObject && circle.areIntersecting(b) && b.canCollide
+    (b) =>
+      b.gameObject !== circle.gameObject && circle.areIntersecting(b) && b.canCollide,
   );
 
   if (intersecting.length === 0) {
@@ -43,7 +44,7 @@ export const moveCircle = (
   const distancesOfIntersectingPoints = distancesOfPoints.filter(
     (d) =>
       (d.closest.distance > 0 && d.closest.inverted) ||
-      (d.closest.distance < 0 && !d.closest.inverted)
+      (d.closest.distance < 0 && !d.closest.inverted),
   );
 
   if (distancesOfIntersectingPoints.length === 0) {
@@ -59,14 +60,14 @@ export const moveCircle = (
     vec2.scale(
       pointDistance.point,
       pointDistance.point,
-      (pointDistance.closest.inverted ? 1 : -1) * pointDistance.closest.distance
+      (pointDistance.closest.inverted ? 1 : -1) * pointDistance.closest.distance,
     );
     return pointDistance.point;
   });
 
   const approxNormal = deltas.reduce(
     (sum, current) => vec2.add(sum, sum, current),
-    vec2.create()
+    vec2.create(),
   );
   vec2.scale(approxNormal, approxNormal, 1 / deltas.length);
 

backend/src/players/player.ts

@@ -1,6 +1,5 @@
 import { vec2 } from 'gl-matrix';
 import {
-  Command,
   CommandExecutors,
   CommandReceiver,
   CreateObjectsCommand,
@@ -35,11 +34,9 @@ export class Player extends CommandReceiver {
     },
   };
 
-  protected defaultCommandExecutor(command: Command) { }
-
   constructor(
     private readonly objects: PhysicalContainer,
-    private readonly socket: SocketIO.Socket
+    private readonly socket: SocketIO.Socket,
   ) {
     super();
     this.character = new CharacterPhysical(objects);
@@ -50,7 +47,7 @@ export class Player extends CommandReceiver {
 
     socket.emit(
       TransportEvents.ServerToPlayer,
-      serialize(new CreatePlayerCommand(this.character))
+      serialize(new CreatePlayerCommand(this.character)),
     );
 
     this.sendObjects();
@@ -66,11 +63,11 @@ export class Player extends CommandReceiver {
 
   public sendObjects() {
     const newlyIntersecting = this.objectsInViewArea.filter(
-      (o) => !this.objectsPreviouslyInViewArea.includes(o)
+      (o) => !this.objectsPreviouslyInViewArea.includes(o),
     );
 
     const noLongerIntersecting = this.objectsPreviouslyInViewArea.filter(
-      (o) => !this.objectsInViewArea.includes(o)
+      (o) => !this.objectsInViewArea.includes(o),
     );
     this.objectsPreviouslyInViewArea = this.objectsInViewArea;
 
@@ -80,8 +77,8 @@ export class Player extends CommandReceiver {
         serialize(
           new DeleteObjectsCommand([
             ...new Set(noLongerIntersecting.map((p) => p.gameObject.id)),
-          ])
+          ]),
-        )
+        ),
       );
     }
 
@@ -91,8 +88,8 @@ export class Player extends CommandReceiver {
         serialize(
           new CreateObjectsCommand([
             ...new Set(newlyIntersecting.map((p) => p.gameObject)),
-          ])
+          ]),
-        )
+        ),
       );
     }
 
@@ -101,10 +98,10 @@ export class Player extends CommandReceiver {
       serialize(
         new UpdateObjectsCommand([
           ...new Set(
-            this.objectsInViewArea.filter((p) => p.canMove).map((p) => p.gameObject)
+            this.objectsInViewArea.filter((p) => p.canMove).map((p) => p.gameObject),
+          ),
+        ]),
       ),
-        ])
-      )
     );
 
     if (this.isActive) {

backend/webpack.config.js

@@ -25,7 +25,7 @@ module.exports = (env, argv) => ({
   },
   devtool: argv.mode === 'development' ? 'source-map' : false,
   watchOptions: {
-    poll: true
+    poll: true,
   },
   optimization: {
     minimize: argv.mode !== 'development',
@@ -35,7 +35,7 @@ module.exports = (env, argv) => ({
         test: /\.js$/,
         terserOptions: {
           keep_classnames: true,
-        }
+        },
       }),
     ],
   },
@@ -64,7 +64,7 @@ module.exports = (env, argv) => ({
         options: {
           loader: 'ts',
           target: 'es2015',
-        }
+        },
       },
     ],
   },