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

@@ -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',
-        }
+        },
       },
     ],
   },

frontend/package.json

@@ -1,24 +1,23 @@
 {
   "name": "decla.red-frontend",
-  "description": "![logo](media/declared.png)",
   "private": true,
-  "main": "index.js",
+  "description": "![logo](media/declared.png)",
-  "scripts": {
-    "start": "webpack-dev-server --mode development",
-    "lint": "eslint --fix \"src/**/*.ts\" && prettier --write \"src/**/*.ts\"",
-    "build": "webpack --mode production",
-    "try-build": "npm run build && cd dist && python3 -m http.server 8080",
-    "initialize": "npm install"
-  },
   "keywords": [],
   "author": "András Schmelczer <andras@schmelczer.dev> (https://schmelczer.dev/)",
-  "postcss": {
+  "sideEffects": [
-    "plugins": {
+    "*.scss"
-      "autoprefixer": {}
+  ],
-    }
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack --mode production",
+    "initialize": "npm install",
+    "start": "webpack-dev-server --mode development",
+    "try-build": "npm run build && cd dist && python3 -m http.server 8080"
   },
+  "browserslist": [
+    "defaults"
+  ],
   "devDependencies": {
-    "terser-webpack-plugin": "^4.2.2",
     "clean-webpack-plugin": "^3.0.0",
     "esbuild-loader": "^2.4.0",
     "html-webpack-inline-source-plugin": "0.0.10",
@@ -32,15 +31,16 @@
     "sass": "^1.26.3",
     "sass-loader": "^9.0.2",
     "svg-url-loader": "^6.0.0",
+    "terser-webpack-plugin": "^4.2.2",
+    "typescript": "^3.9.7",
     "webpack": "^4.43.0",
     "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3"
   },
-  "browserslist": [
+  "postcss": {
-    "defaults"
+    "plugins": {
-  ],
+      "autoprefixer": {}
-  "sideEffects": [
+    }
-    "*.scss"
+  }
-  ]
 }

frontend/src/scripts/commands/generators/touch-listener.ts

@@ -36,8 +36,8 @@ export class TouchListener extends CommandGenerator {
 
       this.sendCommandToSubcribers(
         new MoveActionCommand(
-          vec2.subtract(vec2.create(), position, this.previousPosition)
+          vec2.subtract(vec2.create(), position, this.previousPosition),
-        )
+        ),
       );
 
       this.previousPosition = position;
@@ -49,7 +49,7 @@ export class TouchListener extends CommandGenerator {
       event.touches,
       (center: vec2, touch: Touch) =>
         vec2.add(center, center, vec2.fromValues(-touch.clientX, touch.clientY)),
-      vec2.create()
+      vec2.create(),
     );
 
     return vec2.scale(center, center, 1 / event.touches.length);

frontend/src/scripts/game.ts

@@ -70,7 +70,7 @@ export class Game {
         new MouseListener(this.canvas),
         new TouchListener(this.canvas),
       ],
-      [this.gameObjects, new CommandReceiverSocket(this.socket)]
+      [this.gameObjects, new CommandReceiverSocket(this.socket)],
     );
   }
 
@@ -105,7 +105,7 @@ export class Game {
         shadowTraceCount: 16,
         paletteSize: 10,
         enableStopwatch: true,
-      }
+      },
     );
 
     this.renderer.setRuntimeSettings({
@@ -151,7 +151,7 @@ export class Game {
       // todo: Should only send aspect ratio
       this.socket.emit(
         TransportEvents.PlayerToServer,
-        serialize(new SetViewAreaActionCommand(this.gameObjects.camera.viewArea))
+        serialize(new SetViewAreaActionCommand(this.gameObjects.camera.viewArea)),
       );
     }
 

frontend/src/scripts/helper/delta-time-calculator.ts

@@ -6,7 +6,7 @@ export class DeltaTimeCalculator {
   }
 
   public getNextDeltaTimeInMilliseconds(
-    currentTime: DOMHighResTimeStamp
+    currentTime: DOMHighResTimeStamp,
   ): DOMHighResTimeStamp {
     if (this.previousTime === null) {
       this.previousTime = currentTime;

frontend/src/scripts/objects/camera.ts

@@ -23,12 +23,12 @@ export class Camera extends GameObject {
 
     this._viewArea.topLeft = vec2.fromValues(
       this.center.x - this._viewArea.size.x / 2,
-      this.center.y + this._viewArea.size.y / 2
+      this.center.y + this._viewArea.size.y / 2,
     );
 
     this._viewArea.size = vec2.fromValues(
       Math.sqrt(Camera.inViewAreaSize * canvasAspectRatio),
-      Math.sqrt(Camera.inViewAreaSize / canvasAspectRatio)
+      Math.sqrt(Camera.inViewAreaSize / canvasAspectRatio),
     );
 
     c.renderer.setViewArea(this._viewArea.topLeft, this._viewArea.size);

frontend/src/scripts/objects/game-object-container.ts

@@ -26,7 +26,7 @@ export class GameObjectContainer extends CommandReceiver {
       this.addObject(this.camera);
     },
 
-    [StepCommand.type]: (c: StepCommand) => {
+    [StepCommand.type]: (_: StepCommand) => {
       if (this.player) {
         this.camera.center = this.player.position;
       }

frontend/src/scripts/shapes/blob-shape.ts

@@ -115,12 +115,12 @@ export class BlobShape extends Drawable {
       leftFootCenter: vec2.transformMat2d(
         vec2.create(),
         this.leftFoot.center,
-        transform2d
+        transform2d,
       ),
       rightFootCenter: vec2.transformMat2d(
         vec2.create(),
         this.rightFoot.center,
-        transform2d
+        transform2d,
       ),
       headRadius: this.head.radius * transform1d,
       footRadius: this.leftFoot.radius * transform1d,

frontend/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+    "target": "es6",
+    "esModuleInterop": true,
+    "strict": true,
+    "experimentalDecorators": true,
+    "downlevelIteration": true,
+    "moduleResolution": "Node",
+    "module": "es6",
+    "composite": true,
+    "lib": ["dom", "es2017"]
+  }
+}

frontend/webpack.config.js

@@ -28,7 +28,7 @@ module.exports = (env, argv) => ({
     host: '0.0.0.0',
     disableHostCheck: true,
     watchOptions: {
-      poll: true
+      poll: true,
     },
   },
   optimization: {
@@ -39,7 +39,7 @@ module.exports = (env, argv) => ({
         test: /\.js$/,
         terserOptions: {
           keep_classnames: true,
-        }
+        },
       }),
       new OptimizeCSSAssetsPlugin({}),
     ],
@@ -55,7 +55,7 @@ module.exports = (env, argv) => ({
         removeRedundantAttributes: true,
         removeScriptTypeAttributes: true,
         removeStyleLinkTypeAttributes: true,
-        useShortDoctype: true
+        useShortDoctype: true,
       },
       inlineSource: '.(js|css)$',
     }),
@@ -108,7 +108,7 @@ module.exports = (env, argv) => ({
         options: {
           loader: 'ts',
           target: 'es2015',
-        }
+        },
       },
     ],
   },

package.json

@@ -2,10 +2,16 @@
   "name": "root",
   "private": true,
   "scripts": {
+    "build": "lerna run build-before && lerna run build",
+    "initialize": "lerna link && lerna run initialize",
+    "lint": "eslint './**/src/**/*.{js,ts,json}' --fix",
     "start": "lerna run --parallel start",
-    "try-build": "lerna run --parallel try-build-before && lerna run --parallel try-build",
+    "try-build": "lerna run --parallel try-build-before && lerna run --parallel try-build"
-    "build": "lerna run build",
+  },
-    "initialize": "lerna run initialize"
+  "dependencies": {
+    "decla.red-frontend": "file:frontend",
+    "decla.red-server": "file:backend",
+    "shared": "file:shared"
   },
   "devDependencies": {
     "@types/cors": "^2.8.7",
@@ -17,26 +23,21 @@
     "@typescript-eslint/eslint-plugin": "^3.9.1",
     "@typescript-eslint/parser": "^3.9.1",
     "autoprefixer": "^9.8.5",
-    "lerna": "^3.22.1",
     "css-loader": "^3.5.2",
     "cssnano": "^4.1.10",
     "eslint": "^7.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.21.2",
+    "eslint-plugin-json-format": "^2.0.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-unused-imports": "^0.1.3",
     "file-loader": "^6.1.0",
     "firebase": "^7.22.0",
     "gl-matrix": "^3.3.0",
+    "lerna": "^3.22.1",
     "prettier": "^2.0.5",
     "sdf-2d": "^0.4.0",
     "socket.io-client": "^2.3.1",
-    "typescript": "^3.8.3",
     "uuid": "^8.2.0"
-  },
-  "dependencies": {
-    "decla.red-frontend": "file:frontend",
-    "decla.red-server": "file:backend",
-    "shared": "file:shared"
   }
 }

shared/package.json

@@ -3,17 +3,22 @@
   "private": true,
   "description": "Shared library between backend and frontend",
   "main": "lib/main.js",
+  "types": "lib/src/main.d.ts",
+  "files": [
+    "lib"
+  ],
   "scripts": {
-    "start": "webpack --mode development --watch",
-    "lint": "eslint --fix \"src/**/*.ts\" && prettier --write \"src/**/*.ts\"",
     "build": "webpack --mode production",
-    "try-build-before": "npm run build",
+    "build-before": "npm run build",
-    "initialize": "npm install"
+    "initialize": "npm install",
+    "start": "webpack --mode development --watch",
+    "try-build-before": "npm run build-before"
   },
   "devDependencies": {
     "clean-webpack-plugin": "^3.0.0",
     "terser-webpack-plugin": "^2.3.8",
     "ts-loader": "^8.0.3",
+    "typescript": "^3.9.7",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
   }

shared/src/commands/broadcast-commands.ts

@@ -3,5 +3,5 @@ import { CommandGenerator } from './command-generator';
 
 export const broadcastCommands = (
   commandGenerators: Array<CommandGenerator>,
-  commandReceivers: Array<CommandReceiver>
+  commandReceivers: Array<CommandReceiver>,
 ) => commandReceivers.forEach((r) => commandGenerators.forEach((g) => g.subscribe(r)));

shared/src/commands/command-receiver.ts

@@ -1,18 +1,18 @@
 import { Command } from './command';
 
 export type CommandExecutors = {
-  [type: string]: (command: Command) => void;
+  [type: string]: (command: any) => unknown;
 };
 
 export abstract class CommandReceiver {
   protected commandExecutors: CommandExecutors = {};
 
-  protected defaultCommandExecutor(command: Command) { }
-
   public reactsToCommand(commandType: string): boolean {
     return Object.prototype.hasOwnProperty.call(this.commandExecutors, commandType);
   }
 
+  protected defaultCommandExecutor(_: Command) {}
+
   public sendCommand(command: Command) {
     const commandType = command.type;
 

shared/src/main.ts

@@ -33,4 +33,3 @@ export * from './objects/types/tunnel-base';
 export * from './settings';
 export * from './transport/transport-events';
 export * from './transport/identity';
-export * from './transport/type-to-base-type';

shared/src/objects/types/character-base.ts

@@ -9,7 +9,7 @@ export class CharacterBase extends GameObject {
     id: Id,
     public head: Circle,
     public leftFoot: Circle,
-    public rightFoot: Circle
+    public rightFoot: Circle,
   ) {
     super(id);
   }

shared/src/objects/types/tunnel-base.ts

@@ -10,7 +10,7 @@ export class TunnelBase extends GameObject {
     public readonly from: vec2,
     public readonly to: vec2,
     public readonly fromRadius: number,
-    public readonly toRadius: number
+    public readonly toRadius: number,
   ) {
     super(id);
   }

shared/src/transport/serialization/deserializable-class.ts

@@ -1 +1 @@
-export type DeserializableClass = { new(...args: Array<any>): {}; name: string };
+export type DeserializableClass = { new (...args: Array<any>): unknown; name: string };

shared/src/transport/serialization/override-deserialization.ts

@@ -4,7 +4,7 @@ import { serializableMapping } from './serializable-mapping';
 
 export const overrideDeserialization = (
   source: SerializableClass,
-  target: DeserializableClass
+  target: DeserializableClass,
 ) => {
   serializableMapping.set(source.name, {
     constructor: target,

shared/src/transport/type-to-base-type.ts

@@ -1,14 +0,0 @@
-export const typeToBaseType = <T extends { new(...args: any[]): {} }>(
-  constructor: T
-) => {
-  const parent = constructor;
-  return class extends constructor {
-    public static get type(): string {
-      return Object.getPrototypeOf((parent as any).prototype).constructor.name;
-    }
-
-    public get type(): string {
-      return Object.getPrototypeOf((parent as any).prototype).constructor.name;
-    }
-  };
-};

shared/tsconfig.json

@@ -12,9 +12,6 @@
     "moduleResolution": "Node",
     "module": "es6",
     "composite": true,
-    "lib": [
+    "lib": ["dom", "es2017"]
-      "dom",
-      "es2017"
-    ]
   }
 }

shared/webpack.config.js

@@ -20,7 +20,10 @@ module.exports = (env, argv) => ({
   devtool: argv.mode === 'development' ? 'source-map' : false,
   watchOptions: {
     poll: true,
-    ignored: /node_modules/
+    ignored: /node_modules/,
+  },
+  externals: {
+    'gl-matrix': 'gl-matrix',
   },
   optimization: {
     minimize: false,
@@ -39,10 +42,10 @@ module.exports = (env, argv) => ({
           loader: 'ts-loader',
         },
         exclude: /node_modules/,
-      }
+      },
     ],
   },
   resolve: {
-    extensions: ['.ts', '.js'],
+    extensions: ['.ts'],
   },
 });

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+    "target": "es6",
+    "esModuleInterop": true,
+    "strict": true,
+    "experimentalDecorators": true,
+    "downlevelIteration": true,
+    "moduleResolution": "Node",
+    "module": "es6",
+    "composite": true,
+    "lib": ["dom", "es2017"]
+  }
+}