Credits

.eslintrc.json

@@ -14,13 +14,46 @@
         ],
         "createDefaultProgram": true
       },
+      "plugins": [
+        "function-name"
+      ],
       "extends": [
         "plugin:@typescript-eslint/recommended",
         "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
+        "eqeqeq": [
+          "error",
+          "always"
+        ],
+        "function-name/starts-with-verb": [
+          "error",
+          {
+            "whitelist": [
+              "ng",
+              "spawn",
+              "hit",
+              "shot",
+              "collide",
+              "resize"
+            ]
+          }
+        ],
+        "max-params": [
+          "error",
+          4
+        ],
         "@typescript-eslint/await-thenable": "error",
+        "@typescript-eslint/explicit-function-return-type": "error",
+        "@typescript-eslint/naming-convention": "error",
+        "@typescript-eslint/no-explicit-any": 0,
+        "@typescript-eslint/no-floating-promises": "error",
+        "no-nested-ternary": "error",
+        "no-shadow": "off",
+        "@typescript-eslint/no-shadow": "error",
+        "@typescript-eslint/no-unnecessary-condition": "error",
+        "require-await": "off",
         "@typescript-eslint/require-await": "error",
         "@angular-eslint/directive-selector": [
           "error",

package.json

@@ -46,6 +46,7 @@
     "@typescript-eslint/parser": "^6.5.0",
     "angular-cli-ghpages": "^1.0.0",
     "eslint": "^8.39.0",
+    "eslint-plugin-function-name": "^2.0.1",
     "jasmine-core": "~5.1.1",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

src/app/models/collectable.model.ts

@@ -2,7 +2,7 @@ import { RenderObject } from './render-object.model';
 import { Weapon } from './ship.model';
 
 export class Collectable extends RenderObject {
-  type = Weapon.Two;
+  type = Weapon.two;
 
   override update(): void {
     this.y += 0.125;

src/app/models/located-object.model.ts

@@ -4,5 +4,5 @@ export interface LocatedObject {
   width: number,
   height: number,
   update: () => void,
-  collidate: (item: LocatedObject) => boolean
+  collide: (item: LocatedObject) => boolean
 }

src/app/models/pixijs/background-sprite.ts

@@ -1,6 +1,7 @@
 import { Texture, TilingSprite } from 'pixi.js';
 
 export class BackgroundSprite extends TilingSprite {
+  // eslint-disable-next-line max-params
   constructor(
     private readonly speedTilepositionY: number,
     private readonly speedTilepositionX: number,
@@ -15,7 +16,7 @@ export class BackgroundSprite extends TilingSprite {
     this.speedTilepositionX = speedTilepositionX;
   }
 
-  update(delta: number) {
+  update(delta: number): void {
     this.tilePosition.y += delta * this.speedTilepositionY;
     this.tilePosition.x += delta * this.speedTilepositionX;
 

src/app/models/pixijs/game-sprite.ts

@@ -12,7 +12,7 @@ export class GameSprite extends AnimatedSprite {
     this.speed = speed;
   }
 
-  override update(delta: number) {
+  override update(delta: number): void {
     super.update(delta);
 
     this.y += delta * this.speed;

src/app/models/pixijs/power-up-sprite.ts

@@ -2,12 +2,12 @@ import { FrameObject, Texture } from 'pixi.js';
 import { GameSprite } from './game-sprite';
 
 export enum PowerUp {
-  Speed,
-  Shot,
+  speed,
+  shot,
 }
 
 export class PowerUpSprite extends GameSprite {
-  readonly type: PowerUp = PowerUp.Speed;
+  readonly type: PowerUp = PowerUp.speed;
 
   constructor(speed: number, textures: Texture[] | FrameObject[], type: PowerUp) {
     super(speed, textures);

src/app/models/render-object.model.ts

@@ -20,7 +20,7 @@ export class RenderObject implements LocatedObject {
     this.y += 0.25;
   }
 
-  collidate(item: LocatedObject): boolean {
+  collide(item: LocatedObject): boolean {
     const small = item.width < this.width ? item : this;
     const large = item.width >= this.width ? item : this;
 

src/app/models/ship.model.ts

@@ -4,42 +4,40 @@ import { RenderObject } from './render-object.model';
 import { ShotObject } from './shot-object.model';
 
 export enum Weapon {
-  One,
-  Two,
-  Three,
-  Auto
+  one,
+  two,
+  three,
+  auto
 }
 
 export class Ship extends RenderObject {
-  weapon: Weapon = Weapon.One;
+  weapon: Weapon = Weapon.one;
 
   constructor(x: number, y: number, private readonly game: GameService, private readonly sound: SoundService) {
     super(x, y);
   }
 
   override update(): void {
-    if (this.weapon === Weapon.Auto) {
+    if (this.weapon === Weapon.auto) {
       this.shot();
     }
   }
 
   shot(): void {
     void this.sound.playSound();
-    if (this.weapon === Weapon.One || this.weapon === Weapon.Auto) {
+    if (this.weapon === Weapon.one || this.weapon === Weapon.auto) {
       this.game.shots.push(new ShotObject(this.x + this.width / 2, this.y));
       return;
     }
-    if (this.weapon === Weapon.Two) {
+    if (this.weapon === Weapon.two) {
       this.game.shots.push(new ShotObject(this.x + 7, this.y));
       this.game.shots.push(new ShotObject(this.x + this.width - 7, this.y));
       return;
     }
-    if (this.weapon === Weapon.Three) {
-      this.game.shots.push(new ShotObject(this.x + 7, this.y));
-      this.game.shots.push(new ShotObject(this.x + this.width / 2, this.y));
-      this.game.shots.push(new ShotObject(this.x + this.width - 7, this.y));
-      return;
-    }
+
+    this.game.shots.push(new ShotObject(this.x + 7, this.y));
+    this.game.shots.push(new ShotObject(this.x + this.width / 2, this.y));
+    this.game.shots.push(new ShotObject(this.x + this.width - 7, this.y));
   }
 
   move(clientX: number): void {

src/app/models/shot-object.model.ts

@@ -17,7 +17,7 @@ export class ShotObject implements LocatedObject {
     this.y -= 2;
   }
 
-  collidate(item: LocatedObject): boolean {
+  collide(item: LocatedObject): boolean {
     return (item.x <= this.x && (item.x - 20) >= this.x)
       && (item.y <= this.y && (item.y - 20) >= this.y);
   }

src/app/popups/credits-popup.ts

@@ -0,0 +1,32 @@
+import { Button } from '@pixi/ui';
+import { Sprite, Text } from 'pixi.js';
+import { PixiGameService } from '../services/pixi-game.service';
+import { Popup } from './popup';
+
+export class CreditsPopup extends Popup {
+  constructor(private readonly gameService: PixiGameService) {
+    super('Credits');
+
+    this.addText(this.panel, 'Idee & Programmierung', 14, -60);
+    this.addText(this.panel, 'Thomas Renger', 12, -40);
+    this.addText(this.panel, 'Grafiken', 14, -10);
+    this.addText(this.panel, 'Kenney (www.kenney.nl)', 12, 10);
+
+    this.addCloseButton(this.panel);
+  }
+
+  private addCloseButton(panel: Sprite): void {
+    const creditButton = new Button(Sprite.from('assets/ui/yellow_button00.png'));
+    creditButton.view.width = 190;
+    creditButton.view.height = 49;
+    creditButton.view.y = 55;
+    creditButton.view.x = -95;
+    const text = new Text('Schließen', { fontFamily: 'DefaultFont', dropShadowColor: '000000', fontSize: 14 });
+    text.anchor.set(0.5, 0.5);
+    text.x = 100;
+    text.y = 20;
+    creditButton.view.addChild(text);
+    creditButton.onPress.connect(() => this.gameService.openNavigation(this));
+    panel.addChild(creditButton.view);
+  }
+}

src/app/popups/navigation-popup.ts

@@ -1,76 +1,44 @@
 import { Button } from '@pixi/ui';
-import gsap from 'gsap';
-import { Container, Sprite, Text, Texture } from 'pixi.js';
+import { Sprite, Text } from 'pixi.js';
 import { PixiGameService } from '../services/pixi-game.service';
+import { Popup } from './popup';
 
-export class NavigationPopup extends Container {
-  private readonly background: Sprite;
-  private readonly panel: Sprite;
-  private readonly title: Text;
-  private readonly doneButton: Button;
-  private readonly panelBase: Container;
+export class NavigationPopup extends Popup {
 
-  constructor(gameService: PixiGameService) {
-    super();
+  constructor(private readonly gameService: PixiGameService) {
+    super('Solarstriker');
 
-    this.background = Sprite.from(Texture.WHITE);
-    this.background.tint = 0xffcc55;
-    this.background.eventMode = 'none';
-    this.addChild(this.background);
-
-    this.panel = Sprite.from('assets/ui/navigation-popup.png');
-    this.panel.anchor.set(0.5);
-    this.panel.width = 265;
-    this.panel.height = 230;
-    this.addChild(this.panel);
-
-    this.panelBase = new Container();
-    this.panelBase.height = 400;
-    this.panelBase.width = 400;
-    this.panel.addChild(this.panelBase);
-
-    this.title = new Text('Solarstriker', { fontFamily: 'DefaultFont', dropShadowColor: '000000', fontSize: 14 });
-    this.title.x = 0;
-    this.title.y = -96;
-    this.title.anchor.set(0.5, 0.5);
-    this.panel.addChild(this.title);
+    this.addStartButton(this.panel);
+    this.addCreditsButton(this.panel);
+  }
 
-    this.doneButton = new Button(Sprite.from('assets/ui/yellow_button00.png'));
-    this.doneButton.view.width = 190;
-    this.doneButton.view.height = 49;
-    this.doneButton.view.y = -50;
-    this.doneButton.view.x = -95;
+  private addStartButton(panel: Sprite): void {
+    const startButton = new Button(Sprite.from('assets/ui/yellow_button00.png'));
+    startButton.view.width = 190;
+    startButton.view.height = 49;
+    startButton.view.y = -50;
+    startButton.view.x = -95;
     const text = new Text('Spiel starten!', { fontFamily: 'DefaultFont', dropShadowColor: '000000', fontSize: 14 });
     text.anchor.set(0.5, 0.5);
     text.x = 100;
     text.y = 20;
-    this.doneButton.view.addChild(text);
-    this.doneButton.onPress.connect(() => gameService.start(this));
-    this.panel.addChild(this.doneButton.view);
-  }
-
-  /** Present the popup, animated */
-  public async show() {
-    gsap.killTweensOf(this.background);
-    gsap.killTweensOf(this.panel.pivot);
-    this.background.alpha = 0;
-    this.panel.pivot.y = -400;
-    gsap.to(this.background, { alpha: 0.8, duration: 0.2, ease: 'linear' });
-    await gsap.to(this.panel.pivot, { y: 0, duration: 0.3, ease: 'back.out' });
+    startButton.view.addChild(text);
+    startButton.onPress.connect(() => this.gameService.start(this));
+    panel.addChild(startButton.view);
   }
 
-  /** Dismiss the popup, animated */
-  public async hide() {
-    gsap.killTweensOf(this.background);
-    gsap.killTweensOf(this.panel.pivot);
-    gsap.to(this.background, { alpha: 0, duration: 0.2, ease: 'linear' });
-    await gsap.to(this.panel.pivot, { y: -500, duration: 0.3, ease: 'back.in' });
-  }
-
-  public resize(width: number, height: number) {
-    this.background.width = width;
-    this.background.height = height;
-    this.panel.x = width * 0.5;
-    this.panel.y = height * 0.5;
+  private addCreditsButton(panel: Sprite): void {
+    const creditButton = new Button(Sprite.from('assets/ui/yellow_button00.png'));
+    creditButton.view.width = 190;
+    creditButton.view.height = 49;
+    creditButton.view.y = 10;
+    creditButton.view.x = -95;
+    const text = new Text('Credits', { fontFamily: 'DefaultFont', dropShadowColor: '000000', fontSize: 14 });
+    text.anchor.set(0.5, 0.5);
+    text.x = 100;
+    text.y = 20;
+    creditButton.view.addChild(text);
+    creditButton.onPress.connect(() => this.gameService.openCredits(this));
+    panel.addChild(creditButton.view);
   }
 }