From 3bc92dfedfe3dfbaf7b6379ffcded3ee5636014d Mon Sep 17 00:00:00 2001
From: Ustym <ustym.ukhman@tbwa-x.com>
Date: Tue, 27 Dec 2022 15:13:34 +0200
Subject: [PATCH] Add svelte eslint plugin

Update enemies initialization
Debug application build
Fix linters errors
---
 .eslintrc                               | 18 ++++++++++++--
 .stylelintrc                            | 32 ++++++++++++-------------
 package.json                            |  1 +
 pnpm-lock.yaml                          | 12 ++++++++++
 src/components/map/BorderRifle.svelte   | 14 ++++-------
 src/components/map/Map.svelte           |  2 +-
 src/components/menu/Screen.svelte       |  2 +-
 src/components/overlay/Raindrops.svelte |  2 +-
 src/components/scss/animations.scss     | 15 +-----------
 src/components/scss/mixins.scss         |  1 +
 src/managers/Enemies.ts                 | 11 ++++-----
 src/managers/MainLoop.ts                |  3 +--
 12 files changed, 60 insertions(+), 53 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 3a3dc1c..26ecc83 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,6 +1,7 @@
 {
   "root": true,
   "parser": "@typescript-eslint/parser",
+  "plugins": ["svelte3", "@typescript-eslint"],
 
   "extends": [
     "plugin:@typescript-eslint/recommended",
@@ -12,23 +13,36 @@
     "sourceType": "module"
   },
 
-  "plugins": ["@typescript-eslint"],
+  "overrides": [{
+    "processor": "svelte3/svelte3",
+    "files": ["*.svelte"]
+  }],
 
   "rules": {
-    "@typescript-eslint/no-unused-vars": [2, {"vars": "local", "args": "after-used"}],
+    "@typescript-eslint/no-unused-vars": [2, {
+      "vars": "local", "args": "after-used"
+    }],
+
     "@typescript-eslint/no-redeclare": 2,
     "@typescript-eslint/no-namespace": 0,
+
     "generator-star-spacing": 0,
     "quotes": [2, "single"],
     "no-unused-vars": 0,
+
     "no-redeclare": 0,
     "comma-dangle": 2,
     "no-debugger": 1,
+
     "no-console": 0,
     "no-undef": 0,
     "semi": 2
   },
 
+  "settings": {
+    "svelte3/typescript": true
+  },
+
   "globals": {
     "navigator": false,
     "document": false,
diff --git a/.stylelintrc b/.stylelintrc
index 20144aa..d00c72d 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -4,11 +4,22 @@
   "extends": "stylelint-config-standard",
 
   "overrides": [{
-    "files": ["**/*.svelte"],
-    "customSyntax": "postcss-html"
+    "customSyntax": "postcss-html",
+    "files": ["**/*.svelte"]
   }],
 
   "rules": {
+    "at-rule-no-unknown": [true, {
+      "ignoreAtRules": [
+        "at-root", "include", "use", "mixin", "function",
+        "content", "for", "each", "if", "else", "return"
+      ]
+    }],
+
+    "selector-pseudo-class-no-unknown": [true, {
+      "ignorePseudoClasses": ["global", "export"]
+    }],
+
     "no-invalid-position-at-import-rule": null,
     "block-closing-brace-newline-after": null,
     "declaration-empty-line-before": null,
@@ -16,25 +27,14 @@
     "function-comma-space-after": null,
     "comment-empty-line-before": null,
     "at-rule-empty-line-before": null,
+
     "number-no-trailing-zeros": null,
     "color-function-notation": null,
     "rule-empty-line-before": null,
     "length-zero-no-unit": null,
     "function-name-case": null,
     "color-hex-length": null,
-    "max-nesting-depth": 3,
-
-    "at-rule-no-unknown": [true, {
-      "ignoreAtRules": [
-        "at-root", "include", "use", "mixin", "function",
-        "content", "for", "each", "if", "else", "return"
-      ]
-    }],
-
-    "selector-pseudo-class-no-unknown": [true, {
-      "ignorePseudoClasses": [
-        "global", "export"
-      ]
-    }]
+    "import-notation": null,
+    "max-nesting-depth": 3
   }
 }
diff --git a/package.json b/package.json
index 0e8ec91..748c3d4 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "electron": "^21.1.1",
     "electron-builder": "^23.6.0",
     "eslint": "^8.25.0",
+    "eslint-plugin-svelte3": "^4.0.0",
     "fake-indexeddb": "^4.0.0",
     "jest-canvas-mock": "^2.4.0",
     "jsdom": "^20.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 32b8db9..8ff5761 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,6 +12,7 @@ specifiers:
   electron: ^21.1.1
   electron-builder: ^23.6.0
   eslint: ^8.25.0
+  eslint-plugin-svelte3: ^4.0.0
   fake-indexeddb: ^4.0.0
   jest-canvas-mock: ^2.4.0
   jsdom: ^20.0.1
@@ -48,6 +49,7 @@ devDependencies:
   electron: 21.1.1
   electron-builder: 23.6.0
   eslint: 8.25.0
+  eslint-plugin-svelte3: 4.0.0_2h6d4ngklmojchucosx7yvuw7m
   fake-indexeddb: 4.0.0
   jest-canvas-mock: 2.4.0
   jsdom: 20.0.1
@@ -1714,6 +1716,16 @@ packages:
       source-map: 0.6.1
     dev: true
 
+  /eslint-plugin-svelte3/4.0.0_2h6d4ngklmojchucosx7yvuw7m:
+    resolution: {integrity: sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==}
+    peerDependencies:
+      eslint: '>=8.0.0'
+      svelte: ^3.2.0
+    dependencies:
+      eslint: 8.25.0
+      svelte: 3.52.0
+    dev: true
+
   /eslint-scope/5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
diff --git a/src/components/map/BorderRifle.svelte b/src/components/map/BorderRifle.svelte
index 1c1fbac..afab649 100644
--- a/src/components/map/BorderRifle.svelte
+++ b/src/components/map/BorderRifle.svelte
@@ -11,15 +11,11 @@
     borderRotation = angle - playerRotation;
   }
 
-  $: (angle => {
-    if (!playerRotation) return;
-    updateBorderRotation();
-  })(angle);
-
-  $: (playerRotation => {
-    if (!angle) return;
-    updateBorderRotation();
-  })(playerRotation);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  $: (_ => playerRotation && updateBorderRotation())(angle);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  $: (_ => angle && updateBorderRotation())(playerRotation);
 </script>
 
 <style lang="scss">
diff --git a/src/components/map/Map.svelte b/src/components/map/Map.svelte
index 8f325ff..806e912 100644
--- a/src/components/map/Map.svelte
+++ b/src/components/map/Map.svelte
@@ -99,8 +99,8 @@
   }
 
   function drawBounds (): void {
+    context = map.getContext('2d') as CanvasRenderingContext2D;
     const nBounds = getNormalizedBounds();
-    context = map.getContext('2d')!;
 
     context.strokeStyle = '#000';
     context.lineWidth = 2.0;
diff --git a/src/components/menu/Screen.svelte b/src/components/menu/Screen.svelte
index 4c45ab9..9ba6cb1 100644
--- a/src/components/menu/Screen.svelte
+++ b/src/components/menu/Screen.svelte
@@ -59,7 +59,7 @@
 
     dispatch('hide');
     await tick();
-    dispatch('update', false)
+    dispatch('update', false);
   }
 
   function settingsUpdated (): void {
diff --git a/src/components/overlay/Raindrops.svelte b/src/components/overlay/Raindrops.svelte
index 7cff20b..8ab8759 100644
--- a/src/components/overlay/Raindrops.svelte
+++ b/src/components/overlay/Raindrops.svelte
@@ -8,7 +8,7 @@
   const height = Viewport.size.height;
   const width = Viewport.size.width;
 
-  // @ts-expect-error
+  // @ts-expect-error - Optional:
   let canvas: HTMLCanvasElement;
   export let updating = false;
   let visible = false;
diff --git a/src/components/scss/animations.scss b/src/components/scss/animations.scss
index 9af475e..2fafb24 100644
--- a/src/components/scss/animations.scss
+++ b/src/components/scss/animations.scss
@@ -1,19 +1,5 @@
 @use "sass:math";
 
-/* @keyframes loading {
-  0% {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-} */
-
 @keyframes shoot {
   0% {
     transform: scale(1);
@@ -30,6 +16,7 @@
 
 @keyframes pulse {
   0% {
+    // stylelint-disable-next-line function-no-unknown
     transform: scale(math.div(1, 3));
     opacity: 1;
   }
diff --git a/src/components/scss/mixins.scss b/src/components/scss/mixins.scss
index e88c9c0..cf561df 100644
--- a/src/components/scss/mixins.scss
+++ b/src/components/scss/mixins.scss
@@ -9,6 +9,7 @@
 }
 
 @mixin font-size ($size) {
+  // stylelint-disable-next-line function-no-unknown
   letter-spacing: string.unquote("0.#{$size}rem");
   line-height: #{$size}vw;
   font-size: #{$size}vw;
diff --git a/src/managers/Enemies.ts b/src/managers/Enemies.ts
index 5a3163b..8e34ca3 100644
--- a/src/managers/Enemies.ts
+++ b/src/managers/Enemies.ts
@@ -31,9 +31,10 @@ export default class Enemies
   private spawnedEnemies = 0;
 
   public constructor (private readonly envMap: Texture) {
-    (new Enemy).loadCharacter(envMap).then(model =>
-      this.enemyModel = model
-    );
+    (new Enemy).loadCharacter(envMap).then(model => {
+      this.enemyModel = model;
+      this.spawnEnemy([0.0, 0.0]);
+    });
 
     this.addEvents();
   }
@@ -87,10 +88,6 @@ export default class Enemies
     }
   }
 
-  public spawnFirst (): void {
-    this.spawnEnemy([0.0, 0.0]);
-  }
-
   public spawnMultiple (x: number, z: number, enemies = 2): void {
     const spawned = this.enemies.length - 1;
     enemies = Math.min(Configs.Gameplay.maxEnemies - spawned, enemies);
diff --git a/src/managers/MainLoop.ts b/src/managers/MainLoop.ts
index 936d480..6bbaf9e 100644
--- a/src/managers/MainLoop.ts
+++ b/src/managers/MainLoop.ts
@@ -81,14 +81,13 @@ export default class MainLoop
       this.player.setPistol(this.level.walls, this.pistol);
       Physics.setCharacter(this.player.collider, 90);
 
+      this.enemies = new Enemies(envMap);
       this.player.addRifle(this.rifle);
-      this.enemies.spawnFirst();
 
       this.createRandomCoords();
       RAF.add(this.loop);
     });
 
-    this.enemies = new Enemies(envMap);
     this.pistol = new Pistol(envMap);
     this.rifle = new Rifle(envMap);
   }