Add linting

frontend/.eslintrc.json

@@ -0,0 +1,28 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "prettier/@typescript-eslint"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  },
+  "plugins": ["unused-imports", "@typescript-eslint", "prettier"],
+  "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-explicit-any": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

frontend/.prettierrc

@@ -1,6 +1,6 @@
 {
   "trailingComma": "es5",
-  "printWidth": 120,
+  "printWidth": 90,
   "tabWidth": 2,
   "singleQuote": true,
   "endOfLine": "lf"

frontend/package.json

@@ -6,6 +6,7 @@
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server --mode development",
+    "lint": "npx eslint --fix \"src/**/*.ts\" && npx prettier --write \"src/**/*.ts\"",
     "build": "webpack && find dist -type f -not -name '*.html' | xargs rm"
   },
   "keywords": [],
@@ -27,10 +28,16 @@
   "devDependencies": {
     "@types/gl-matrix": "^2.4.5",
     "@types/uuid": "^8.0.0",
+    "@typescript-eslint/eslint-plugin": "^3.9.1",
+    "@typescript-eslint/parser": "^3.9.1",
     "autoprefixer": "^9.8.5",
     "clean-webpack-plugin": "^3.0.0",
     "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-prettier": "^3.1.4",
     "gl-matrix": "^3.3.0",
     "html-webpack-inline-source-plugin": "0.0.10",
     "html-webpack-plugin": "^3.2.0",

frontend/src/scripts/commands/command-broadcaster.ts

@@ -6,8 +6,6 @@ export class CommandBroadcaster {
     commandGenerators: Array<CommandGenerator>,
     commandReceivers: Array<CommandReceiver>
   ) {
-    commandReceivers.forEach((r) =>
-      commandGenerators.forEach((g) => g.subscribe(r))
-    );
+    commandReceivers.forEach((r) => commandGenerators.forEach((g) => g.subscribe(r)));
   }
 }

frontend/src/scripts/drawing/drawables/drawable-blob.ts

@@ -1,8 +1,8 @@
+import { mat2d, vec2 } from 'gl-matrix';
+import { Blob } from '../../shapes/types/blob';
+import { settings } from '../settings';
 import { IDrawable } from './i-drawable';
 import { IDrawableDescriptor } from './i-drawable-descriptor';
-import { settings } from '../settings';
-import { Blob } from '../../shapes/types/blob';
-import { vec2, mat2d } from 'gl-matrix';
 
 export class DrawableBlob extends Blob implements IDrawable {
   public static descriptor: IDrawableDescriptor = {
@@ -11,32 +11,16 @@ export class DrawableBlob extends Blob implements IDrawable {
     shaderCombinationSteps: settings.shaderCombinations.blobSteps,
   };
 
-  public serializeToUniforms(
-    uniforms: any,
-    scale: number,
-    transform: mat2d
-  ): void {
-    const uniformName = DrawableBlob.descriptor.uniformName;
-    if (!uniforms.hasOwnProperty(uniformName)) {
+  public serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void {
+    const { uniformName } = DrawableBlob.descriptor;
+    if (!Object.prototype.hasOwnProperty.call(uniforms, uniformName)) {
       uniforms[uniformName] = [];
     }
 
     uniforms[uniformName].push({
-      headCenter: vec2.transformMat2d(
-        vec2.create(),
-        this.head.center,
-        transform
-      ),
-      torsoCenter: vec2.transformMat2d(
-        vec2.create(),
-        this.torso.center,
-        transform
-      ),
-      leftFootCenter: vec2.transformMat2d(
-        vec2.create(),
-        this.leftFoot.center,
-        transform
-      ),
+      headCenter: vec2.transformMat2d(vec2.create(), this.head.center, transform),
+      torsoCenter: vec2.transformMat2d(vec2.create(), this.torso.center, transform),
+      leftFootCenter: vec2.transformMat2d(vec2.create(), this.leftFoot.center, transform),
       rightFootCenter: vec2.transformMat2d(
         vec2.create(),
         this.rightFoot.center,

frontend/src/scripts/drawing/drawables/drawable-tunnel.ts

@@ -1,8 +1,8 @@
-import { IDrawable } from './i-drawable';
-import { TunnelShape } from '../../shapes/types/tunnel-shape';
-import { IDrawableDescriptor } from './i-drawable-descriptor';
-import { settings } from '../settings';
 import { mat2d, vec2 } from 'gl-matrix';
+import TunnelShape from '../../shapes/types/tunnel-shape';
+import { settings } from '../settings';
+import { IDrawable } from './i-drawable';
+import { IDrawableDescriptor } from './i-drawable-descriptor';
 
 export class DrawableTunnel extends TunnelShape implements IDrawable {
   public static descriptor: IDrawableDescriptor = {
@@ -11,23 +11,15 @@ export class DrawableTunnel extends TunnelShape implements IDrawable {
     shaderCombinationSteps: settings.shaderCombinations.lineSteps,
   };
 
-  public serializeToUniforms(
-    uniforms: any,
-    scale: number,
-    transform: mat2d
-  ): void {
-    const uniformName = DrawableTunnel.descriptor.uniformName;
-    if (!uniforms.hasOwnProperty(uniformName)) {
+  public serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void {
+    const { uniformName } = DrawableTunnel.descriptor;
+    if (!Object.prototype.hasOwnProperty.call(uniforms, uniformName)) {
       uniforms[uniformName] = [];
     }
 
     uniforms[uniformName].push({
       from: vec2.transformMat2d(vec2.create(), this.from, transform),
-      toFromDelta: vec2.transformMat2d(
-        vec2.create(),
-        this.toFromDelta,
-        transform
-      ),
+      toFromDelta: vec2.transformMat2d(vec2.create(), this.toFromDelta, transform),
       fromRadius: this.fromRadius * scale,
       toRadius: this.toRadius * scale,
     });

frontend/src/scripts/drawing/drawables/lights/circle-light.ts

@@ -1,5 +1,4 @@
-import { vec2, vec3, mat2d } from 'gl-matrix';
-import { GameObject } from '../../../objects/game-object';
+import { mat2d, vec2, vec3 } from 'gl-matrix';
 import { settings } from '../../settings';
 import { IDrawableDescriptor } from '../i-drawable-descriptor';
 import { ILight } from './i-light';
@@ -22,14 +21,10 @@ export class CircleLight implements ILight {
     return 0;
   }
 
-  public serializeToUniforms(
-    uniforms: any,
-    scale: number,
-    transform: mat2d
-  ): void {
-    const uniformName = CircleLight.descriptor.uniformName;
+  public serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void {
+    const { uniformName } = CircleLight.descriptor;
 
-    if (!uniforms.hasOwnProperty(uniformName)) {
+    if (!Object.prototype.hasOwnProperty.call(uniforms, uniformName)) {
       uniforms[uniformName] = [];
     }
 

frontend/src/scripts/drawing/drawables/lights/i-light.ts

@@ -1,4 +1,3 @@
-import { vec2 } from 'gl-matrix';
 import { IDrawable } from '../i-drawable';
 
-export interface ILight extends IDrawable {}
+export type ILight = IDrawable;

frontend/src/scripts/drawing/drawables/lights/point-light.ts

@@ -1,8 +1,7 @@
-import { ILight } from './i-light';
-import { vec2, vec3, mat2d } from 'gl-matrix';
-import { IDrawableDescriptor } from '../i-drawable-descriptor';
+import { mat2d, vec2, vec3 } from 'gl-matrix';
 import { settings } from '../../settings';
-import { GameObject } from '../../../objects/game-object';
+import { IDrawableDescriptor } from '../i-drawable-descriptor';
+import { ILight } from './i-light';
 
 export class PointLight implements ILight {
   public static descriptor: IDrawableDescriptor = {
@@ -22,14 +21,10 @@ export class PointLight implements ILight {
     return vec2.distance(this.center, target) - this.radius;
   }
 
-  public serializeToUniforms(
-    uniforms: any,
-    scale: number,
-    transform: mat2d
-  ): void {
+  public serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void {
     const listName = PointLight.descriptor.uniformName;
 
-    if (!uniforms.hasOwnProperty(listName)) {
+    if (!Object.prototype.hasOwnProperty.call(uniforms, listName)) {
       uniforms[listName] = [];
     }
 

frontend/src/scripts/drawing/graphics-library/frame-buffer/default-frame-buffer.ts

@@ -11,10 +11,7 @@ export class DefaultFrameBuffer extends FrameBuffer {
   public setSize() {
     super.setSize();
 
-    if (
-      this.gl.canvas.width !== this.size.x ||
-      this.gl.canvas.height !== this.size.y
-    ) {
+    if (this.gl.canvas.width !== this.size.x || this.gl.canvas.height !== this.size.y) {
       this.gl.canvas.width = this.size.x;
       this.gl.canvas.height = this.size.y;
     }

frontend/src/scripts/drawing/graphics-library/frame-buffer/frame-buffer.ts

@@ -2,9 +2,11 @@ import { vec2 } from 'gl-matrix';
 
 export abstract class FrameBuffer {
   public renderScale = 1;
+
   public enableHighDpiRendering = false;
 
   protected size: vec2;
+
   protected frameBuffer: WebGLFramebuffer;
 
   constructor(protected gl: WebGL2RenderingContext) {}

frontend/src/scripts/drawing/graphics-library/helper/enable-extension.ts

@@ -1,7 +1,4 @@
-export const enableExtension = (
-  gl: WebGL2RenderingContext,
-  name: string
-): any => {
+export const enableExtension = (gl: WebGL2RenderingContext, name: string): any => {
   if (gl.getSupportedExtensions().indexOf(name) == -1) {
     throw new Error(`Unsupported extension ${name}`);
   }

frontend/src/scripts/drawing/graphics-library/helper/get-webgl2-context.ts

@@ -1,6 +1,4 @@
-export const getWebGl2Context = (
-  canvas: HTMLCanvasElement
-): WebGL2RenderingContext => {
+export const getWebGl2Context = (canvas: HTMLCanvasElement): WebGL2RenderingContext => {
   const gl = canvas.getContext('webgl2');
 
   if (!gl) {

frontend/src/scripts/drawing/graphics-library/helper/load-uniform.ts

@@ -10,11 +10,7 @@ export const loadUniform = (
 ): any => {
   const converters: Map<
     GLenum,
-    (
-      gl: WebGL2RenderingContext,
-      value: any,
-      location: WebGLUniformLocation
-    ) => void
+    (gl: WebGL2RenderingContext, value: any, location: WebGLUniformLocation) => void
   > = new Map();
   {
     converters.set(WebGL2RenderingContext.FLOAT, (gl, v, l) => {
@@ -29,27 +25,24 @@ export const loadUniform = (
       }
     });
 
-    converters.set(
-      WebGL2RenderingContext.FLOAT_VEC2,
-      (gl, v: vec2 | Array<vec2>, l) => {
-        if (v.length == 0) {
-          return;
-        }
-
-        if (v[0] instanceof Array) {
-          const result = new Float32Array(v.length * 2);
-
-          for (let i = 0; i < v.length; i++) {
-            result[2 * i] = (v[i] as Array<number>).x;
-            result[2 * i + 1] = (v[i] as Array<number>).y;
-          }
-
-          gl.uniform2fv(l, result);
-        } else {
-          gl.uniform2fv(l, v as vec2);
-        }
+    converters.set(WebGL2RenderingContext.FLOAT_VEC2, (gl, v: vec2 | Array<vec2>, l) => {
+      if (v.length == 0) {
+        return;
       }
-    );
+
+      if (v[0] instanceof Array) {
+        const result = new Float32Array(v.length * 2);
+
+        for (let i = 0; i < v.length; i++) {
+          result[2 * i] = (v[i] as Array<number>).x;
+          result[2 * i + 1] = (v[i] as Array<number>).y;
+        }
+
+        gl.uniform2fv(l, result);
+      } else {
+        gl.uniform2fv(l, v as vec2);
+      }
+    });
 
     converters.set(
       WebGL2RenderingContext.FLOAT_VEC3,
@@ -78,9 +71,7 @@ export const loadUniform = (
       gl.uniformMatrix3fv(l, true, mat3.fromMat2d(loaderMat3, v));
     });
 
-    converters.set(WebGL2RenderingContext.BOOL, (gl, v, l) =>
-      gl.uniform1i(l, v)
-    );
+    converters.set(WebGL2RenderingContext.BOOL, (gl, v, l) => gl.uniform1i(l, v));
 
     if (!converters.has(type)) {
       throw new Error(`Unimplemented webgl type: ${type}`);

frontend/src/scripts/drawing/graphics-library/helper/stopwatch.ts

@@ -5,16 +5,15 @@ import { enableExtension } from './enable-extension';
 
 export class WebGlStopwatch {
   private timerExtension: any;
+
   private timerQuery: WebGLQuery;
+
   private isReady = true;
 
   private resultsInNanoSeconds: number;
 
   constructor(private gl: WebGL2RenderingContext) {
-    this.timerExtension = enableExtension(
-      gl,
-      'EXT_disjoint_timer_query_webgl2'
-    );
+    this.timerExtension = enableExtension(gl, 'EXT_disjoint_timer_query_webgl2');
   }
 
   public start() {
@@ -42,10 +41,7 @@ export class WebGlStopwatch {
         this.gl.QUERY_RESULT
       );
 
-      InfoText.modifyRecord(
-        'Draw time',
-        `${this.resultsInMilliSeconds.toFixed(2)} ms`
-      );
+      InfoText.modifyRecord('Draw time', `${this.resultsInMilliSeconds.toFixed(2)} ms`);
 
       this.isReady = true;
     }

frontend/src/scripts/drawing/graphics-library/program/fragment-shader-only-program.ts

@@ -1,4 +1,4 @@
-import { Program } from './program';
+import Program from './program';
 
 export class FragmentShaderOnlyProgram extends Program {
   private vao: WebGLVertexArrayObject;
@@ -39,13 +39,6 @@ export class FragmentShaderOnlyProgram extends Program {
 
     this.gl.bindVertexArray(this.vao);
     this.gl.enableVertexAttribArray(positionAttributeLocation);
-    this.gl.vertexAttribPointer(
-      positionAttributeLocation,
-      2,
-      this.gl.FLOAT,
-      false,
-      0,
-      0
-    );
+    this.gl.vertexAttribPointer(positionAttributeLocation, 2, this.gl.FLOAT, false, 0, 0);
   }
 }

frontend/src/scripts/drawing/graphics-library/program/program.ts

@@ -3,10 +3,13 @@ import { createShader } from '../helper/create-shader';
 import { loadUniform } from '../helper/load-uniform';
 import { IProgram } from './i-program';
 
-export abstract class Program implements IProgram {
+export default abstract class Program implements IProgram {
   protected program: WebGLProgram;
+
   private shaders: Array<WebGLShader> = [];
+
   private modelTransform = mat2d.identity(mat2d.create());
+
   private readonly ndcToUv: mat2d;
 
   private uniforms: Array<{
@@ -116,10 +119,7 @@ export abstract class Program implements IProgram {
 
     this.gl.linkProgram(this.program);
 
-    const success = this.gl.getProgramParameter(
-      this.program,
-      this.gl.LINK_STATUS
-    );
+    const success = this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS);
 
     if (!success) {
       throw new Error(this.gl.getProgramInfoLog(this.program));

frontend/src/scripts/drawing/graphics-library/program/uniform-array-autoscaling-program.ts

@@ -1,18 +1,20 @@
 import { vec2 } from 'gl-matrix';
+import { getCombinations } from '../../../helper/get-combinations';
+import { last } from '../../../helper/last';
+import { IDrawableDescriptor } from '../../drawables/i-drawable-descriptor';
 import { FragmentShaderOnlyProgram } from './fragment-shader-only-program';
 import { IProgram } from './i-program';
-import { last } from '../../../helper/last';
-import { getCombinations } from '../../../helper/get-combinations';
-import { IDrawableDescriptor } from '../../drawables/i-drawable-descriptor';
 
 export class UniformArrayAutoScalingProgram implements IProgram {
   private programs: Array<{
     program: FragmentShaderOnlyProgram;
     values: Array<number>;
   }> = [];
+
   private current: FragmentShaderOnlyProgram;
 
   private drawingRectangleTopLeft = vec2.fromValues(0, 0);
+
   private drawingRectangleSize = vec2.fromValues(1, 1);
 
   constructor(
@@ -21,7 +23,7 @@ export class UniformArrayAutoScalingProgram implements IProgram {
     private options: Array<IDrawableDescriptor>
   ) {
     const names = options.map((o) => o.countMacroName);
-    for (let combination of getCombinations(
+    for (const combination of getCombinations(
       options.map((o) => o.shaderCombinationSteps)
     )) {
       this.createProgram(names, combination, shaderSources);
@@ -29,13 +31,11 @@ export class UniformArrayAutoScalingProgram implements IProgram {
   }
 
   public bindAndSetUniforms(uniforms: { [name: string]: any }): void {
-    let values = this.options.map((o) =>
+    const values = this.options.map((o) =>
       uniforms[o.uniformName] ? uniforms[o.uniformName].length : 0
     );
 
-    const closest = this.programs.find((p) =>
-      p.values.every((v, i) => v >= values[i])
-    );
+    const closest = this.programs.find((p) => p.values.every((v, i) => v >= values[i]));
 
     this.current = closest ? closest.program : last(this.programs).program;
 
@@ -67,11 +67,7 @@ export class UniformArrayAutoScalingProgram implements IProgram {
     const substitutions = {};
     names.forEach((v, i) => (substitutions[v] = combination[i].toString()));
 
-    const program = new FragmentShaderOnlyProgram(
-      this.gl,
-      shaderSources,
-      substitutions
-    );
+    const program = new FragmentShaderOnlyProgram(this.gl, shaderSources, substitutions);
 
     this.programs.push({
       program,

frontend/src/scripts/drawing/i-renderer.ts

@@ -1,7 +1,7 @@
 import { vec2 } from 'gl-matrix';
-import { ILight } from './drawables/lights/i-light';
-import { IDrawable } from './drawables/i-drawable';
 import { BoundingBoxBase } from '../shapes/bounding-box-base';
+import { IDrawable } from './drawables/i-drawable';
+import { ILight } from './drawables/lights/i-light';
 
 export interface IRenderer {
   startFrame(deltaTime: DOMHighResTimeStamp): void;

frontend/src/scripts/drawing/rendering/fps-autoscaler.ts

@@ -7,6 +7,7 @@ import { toPercent } from '../../helper/to-percent';
 
 export class FpsAutoscaler extends Autoscaler {
   private timeSinceLastAdjusment = 0;
+
   private exponentialDecayedDeltaTime = 0.0;
 
   constructor(private frameBuffers: Array<FrameBuffer>) {
@@ -21,8 +22,7 @@ export class FpsAutoscaler extends Autoscaler {
   public autoscale(lastDeltaTime: DOMHighResTimeStamp) {
     this.timeSinceLastAdjusment += lastDeltaTime;
     if (
-      this.timeSinceLastAdjusment >=
-      settings.qualityScaling.adjusmentRateInMilliseconds
+      this.timeSinceLastAdjusment >= settings.qualityScaling.adjusmentRateInMilliseconds
     ) {
       this.timeSinceLastAdjusment = 0;
       this.exponentialDecayedDeltaTime = exponentialDecay(