Add ES Lint, Typescript, Prettier and fix up all the files due to this change

.eslintrc

@@ -0,0 +1,36 @@
+{
+    "parser":  "@typescript-eslint/parser",
+    "env": {
+        "browser": true,
+        "es6": true,
+    },
+    "plugins": ["prettier"],
+    "extends": [
+        "airbnb-base",
+        "plugin:prettier/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier",
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly",
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module",
+    },
+    "rules": {
+        "consistent-return": 0,
+        "import/prefer-default-export": 0,
+        "import/no-unresolved": 0,
+        "lines-between-class-members": 0,
+        "no-plusplus": 0,
+        "no-undef": 0,
+        "prettier/prettier": 2,
+        "quotes": [2, "single"],
+        "@typescript-eslint/array-type": [2, "generic"],
+        "@typescript-eslint/indent": [2, 2],
+        "@typescript-eslint/explicit-function-return-type": 0,
+        "@typescript-eslint/explicit-member-accessibility": 0,
+    }
+}

.gitignore

@@ -1,3 +1,2 @@
 node_modules/
 build/
-.prettierrc

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "singleQuote": true,
+    "trailingComma": "es5"
+}

package.json

@@ -13,8 +13,19 @@
     "@types/mocha": "^5.2.7",
     "@types/node": "^10.12.2",
     "@types/webpack": "^4.4.17",
-    "expect": "^24.8.0",
+    "@typescript-eslint/eslint-plugin": "^1.13.0",
+    "@typescript-eslint/parser": "^1.13.0",
+    "eslint": "^6.1.0",
+    "eslint-config-airbnb-base": "^13.2.0",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-config-standard": "^13.0.1",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-node": "^9.1.0",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
     "mocha": "^6.2.0",
+    "prettier": "1.18.2",
     "raw-loader": "^0.5.1",
     "ts-loader": "^5.3.0",
     "ts-mocha": "^6.0.0",
@@ -26,6 +37,7 @@
   },
   "dependencies": {
     "copy-webpack-plugin": "^4.6.0",
+    "expect": "^24.8.0",
     "html-webpack-plugin": "^3.2.0",
     "phaser": "^3.18.1"
   }

src/core/pokemon.model.ts

@@ -71,7 +71,7 @@ export const pokemonData = {
 } as const;
 
 export type PokemonName = keyof typeof pokemonData;
-export const allPokemonNames = Object.keys(pokemonData) as PokemonName[];
+export const allPokemonNames = Object.keys(pokemonData) as Array<PokemonName>;
 
 /**
  * this is just to typecheck the PokemonData to make sure each object

src/game.ts

@@ -4,11 +4,7 @@ import { GameScene } from './scenes/game/game.scene';
 import { MenuScene } from './scenes/menu.scene';
 import { PreloadScene } from './scenes/preload.scene';
 
-export class PokemonAutochessGame extends Game {
-  constructor(config: Phaser.Types.Core.GameConfig) {
-    super(config);
-  }
-}
+export class PokemonAutochessGame extends Game {}
 
 window.onload = () => {
   const game = new PokemonAutochessGame({

src/objects/floating-text.object.ts

@@ -1,5 +1,6 @@
+import * as Phaser from 'phaser';
+
 export class FloatingText extends Phaser.GameObjects.Text {
-  static readonly COMPLETE = 'complete';
   private textObject: Phaser.GameObjects.Text;
 
   constructor(scene: Phaser.Scene, x: number, y: number, text: string) {

src/objects/pokemon.object.ts

@@ -1,9 +1,9 @@
-import { Scene } from 'phaser';
+import * as Phaser from 'phaser';
 import { Pokemon, pokemonData, PokemonName } from '../core/pokemon.model';
 import { FloatingText } from './floating-text.object';
 
 interface SpriteParams {
-  readonly scene: Scene;
+  readonly scene: Phaser.Scene;
   readonly x: number;
   readonly y: number;
   readonly id: string;
@@ -17,7 +17,6 @@ export type PokemonAnimationType = 'left' | 'right' | 'up' | 'down';
 export class PokemonObject extends Phaser.GameObjects.Sprite {
   private sprite: Phaser.GameObjects.Sprite;
   private hpBar: Phaser.GameObjects.Graphics;
-
   private currentHP: number;
   private maxHP: number;
 
@@ -34,11 +33,12 @@ export class PokemonObject extends Phaser.GameObjects.Sprite {
     this.name = params.name;
 
     // load data from Pokemon data
-    this.currentHP = this.maxHP = pokemonData[params.name].maxHP;
-    this.basePokemon = pokemonData[params.name];
+    this.maxHP = pokemonData[this.name].maxHP;
+    this.currentHP = this.maxHP;
+    this.basePokemon = pokemonData[this.name];
     this.side = params.side;
 
-    this.sprite = this.scene.add.sprite(this.x, this.y, params.name);
+    this.sprite = this.scene.add.sprite(this.x, this.y, this.name);
     // default state is facing the player
     this.playAnimation('down');
 
@@ -57,15 +57,7 @@ export class PokemonObject extends Phaser.GameObjects.Sprite {
     this.hpBar.y = this.y;
     this.hpBar.clear();
 
-    const hpBarColor =
-      this.currentHP >= this.maxHP / 2
-        ? // high HP: green
-          0x32cd32
-        : this.currentHP >= this.maxHP / 5
-        ? // low HP: orange
-          0xffa500
-        : // critical: red
-          0xdc143c;
+    const hpBarColor = this.getHPBarColor();
     this.hpBar.fillStyle(hpBarColor, 1);
     this.hpBar.fillRect(
       -this.width / 2,
@@ -78,6 +70,27 @@ export class PokemonObject extends Phaser.GameObjects.Sprite {
     this.hpBar.setDepth(1);
   }
 
+  getHPBarColor() {
+    const fiftyPercentHP = this.maxHP / 2;
+    const twentyPercentHP = this.maxHP / 5;
+
+    // 50% or Higher
+    if (this.currentHP >= fiftyPercentHP) {
+      // High HP: Green
+      return 0x32cd32;
+    }
+
+    // Between 20% and 50%
+    if (this.currentHP >= twentyPercentHP) {
+      // Low HP: Orange
+      return 0xffa500;
+    }
+
+    // Between 0% and 20%
+    // Critical: Red
+    return 0xdc143c;
+  }
+
   playAnimation(type: PokemonAnimationType) {
     this.sprite.play(`${this.name}--${type}`);
   }

src/scenes/game/game.helpers.spec.ts

@@ -3,6 +3,7 @@ import { PokemonObject } from '../../objects/pokemon.object';
 import { getNearestTarget } from './game.helpers';
 
 describe('getNearestTarget', () => {
+  // TODO: Probably want to fix this, @typescript-eslint/no-object-literal-type-assertion
   const playerMock = { side: 'player' } as PokemonObject;
   const enemyMock = { side: 'enemy' } as PokemonObject;
 

src/scenes/game/game.helpers.ts

@@ -30,7 +30,7 @@ export function getNearestTarget(
     return undefined;
   }
 
-  const side = self.side;
+  const { side } = self;
 
   // the following code is some pathfinding magic
   // don't question it or look too closely
@@ -41,17 +41,18 @@ export function getNearestTarget(
     let x2 = x + i;
     let y2 = y;
 
+    // TODO: Fix this loop, no-restricted-syntax
     // at each loop, there are 4 * dist possible places to go
     // and we will go in clockwise order
     // eg. (1,0) (0,1) (-1,0) (0,-1)
     // or  (2,0) (1,1) (0,2) (-1,1) (-2,0) (-1,-1) (0,-2) (1,-1)
     // if you observe, we can do (x-=1, y+=1) to iterate around the bottom-right
     // then do (x-=1, y-=1) to iterate around the bottom-left
     // and so on
-    for (let step of [[-1, 1], [-1, -1], [1, -1], [1, 1]]) {
+    for (const step of [[-1, 1], [-1, -1], [1, -1], [1, 1]]) {
       for (let k = 0; k < i; k++) {
         // if still on board
-        if (0 <= x2 && x2 < width && 0 <= y2 && y2 < height) {
+        if (x2 >= 0 && x2 < width && y2 >= 0 && y2 < height) {
           const target = board[x2][y2];
           // opposite side matched: target this one
           if (target && target.side !== side) {

src/scenes/game/game.scene.ts

@@ -9,10 +9,19 @@ import { Coords, getGridDistance, getNearestTarget } from './game.helpers';
 const CELL_WIDTH = 70;
 const BOARD_WIDTH = 5;
 
+/**
+ * Returns the graphical x and y coordinates for a spot in the battle grid.
+ * @param x
+ * @param y
+ */
+function getCoordinatesForGrid({ x, y }: Coords): Coords {
+  return { x: 400 + (x - 2) * CELL_WIDTH, y: 300 + (y - 2) * CELL_WIDTH };
+}
+
 export class GameScene extends Scene {
   static readonly KEY = 'GameScene';
 
-  private board: (PokemonObject | undefined)[][] = [[], [], [], [], []];
+  private board: Array<Array<PokemonObject | undefined>> = [[], [], [], [], []];
   private grid: Phaser.GameObjects.Grid;
 
   constructor() {
@@ -125,12 +134,3 @@ export class GameScene extends Scene {
     setTimeout(() => this.takeTurn(myCoords), delay);
   }
 }
-
-/**
- * Returns the graphical x and y coordinates for a spot in the battle grid.
- * @param x
- * @param y
- */
-function getCoordinatesForGrid({ x, y }: Coords): Coords {
-  return { x: 400 + (x - 2) * CELL_WIDTH, y: 300 + (y - 2) * CELL_WIDTH };
-}

src/scenes/menu.scene.ts

@@ -5,6 +5,7 @@ import { GameScene } from './game/game.scene';
 
 export class MenuScene extends Scene {
   static readonly KEY = 'MenuScene';
+
   private titlePokemon: PokemonObject;
   private startButton: Phaser.GameObjects.Text;