Setup formatting

frontend/package.json

@@ -1,24 +1,23 @@
 {
   "name": "decla.red-frontend",
-  "description": "![logo](media/declared.png)",
   "private": true,
-  "main": "index.js",
-  "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"
-  },
+  "description": "![logo](media/declared.png)",
   "keywords": [],
   "author": "András Schmelczer <andras@schmelczer.dev> (https://schmelczer.dev/)",
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
+  "sideEffects": [
+    "*.scss"
+  ],
+  "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": [
-    "defaults"
-  ],
-  "sideEffects": [
-    "*.scss"
-  ]
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  }
 }

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