Added Name and Time

Author: omeldev

package.json

@@ -7,8 +7,8 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "createComponent": "ng generate component components/game",
-    "createService": "ng generate service services/home"
+    "createComponent": "ng generate component components/intro",
+    "createService": "ng generate service services/leaderboard"
   },
   "private": true,
   "dependencies": {

src/app/app.module.ts

@@ -8,6 +8,8 @@ import {RouterModule} from "@angular/router";
 import {routes} from "./modules/route/app.routes";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {GameComponent} from './components/game/game.component';
+import { IntroComponent } from './components/intro/intro.component';
+import {LeaderboardService} from "./services/leaderboard.service";
 
 
 @NgModule({
@@ -16,6 +18,7 @@ import {GameComponent} from './components/game/game.component';
 
     ErrorComponent,
     GameComponent,
+    IntroComponent,
   ],
   imports: [
     BrowserModule,
@@ -25,7 +28,7 @@ import {GameComponent} from './components/game/game.component';
     FormsModule
 
   ],
-  providers: [],
+  providers: [LeaderboardService],
   bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/classes/entitiy/player/player.ts

@@ -35,6 +35,7 @@ export class Player extends Sprite {
   private readonly hitbox: Hitbox;
   private potionEffects: PotionEffect[] = [];
   private collisionDone = new Set<Hitbox>;
+  private name: string = 'Anonymous';
 
   /**
    * Create a new player
@@ -86,6 +87,7 @@ export class Player extends Sprite {
         loop: false,
         imageSrc: '../../../assets/sprites/player/animation/enterDoor.png',
         onComplete: () => {
+
           GameComponent.levelChange();
           GameComponent.player.preventInput = false;
 
@@ -179,6 +181,14 @@ export class Player extends Sprite {
     return this.potionEffects;
   }
 
+  public setName(name: string) {
+    this.name = name;
+  }
+
+  public getName() {
+    return this.name;
+  }
+
   public switchSprite(name: string, destinationDoor?: Door) {
     if (this.image === this.animations[name].image) return;
     this.currentFrame = 0;

src/app/classes/level/level.ts

@@ -310,6 +310,9 @@ export class Level extends Sprite {
       GameComponent.player.getVelocity().setX(0);
       GameComponent.player.preventInput = true;
       GameComponent.player.switchSprite('enterDoor');
+      if(GameComponent.getCurrentLevel() === GameComponent.levels[GameComponent.levels.length - 1]) {
+        GameComponent.isFinished = true;
+      }
 
     }
 

src/app/components/game/game.component.ts

@@ -8,6 +8,7 @@ import {TitleScreen} from "../../classes/gui/window/title";
 import {initializeSounds} from "../../classes/audio/audio";
 import {Mobile} from "../../classes/gui/window/mobile";
 import {PotionEffectType} from "../../classes/collectibles/potion/potioneffect";
+import {LeaderboardService} from "../../services/leaderboard.service";
 
 @Component({
   selector: 'app-game',
@@ -24,7 +25,9 @@ export class GameComponent implements AfterViewInit {
   public static isTitleScreen: boolean = true;
   public static hasInteracted: boolean = false;
   public static isFlashLightShaderOn: boolean = true;
-  private static currentLevel = level1;
+  public static levels = [level4];
+
+  private static currentLevel = level1 ?? GameComponent.levels[0];
   @ViewChild('canvas', {static: true})
   public canvas: ElementRef<HTMLCanvasElement> | undefined;
   @ViewChild('cameraCanvas', {static: true})
@@ -35,8 +38,10 @@ export class GameComponent implements AfterViewInit {
   public volume: number = localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume')!) : 1.0;
   private oldFrameTime: number = 1;
 
+  public static isFinished: boolean = false;
+
 
-  constructor() {
+  constructor(public readonly leaderboard: LeaderboardService) {
     GameComponent.player = new Player();
     initializeSounds();
     this.registerGuiListener();
@@ -62,9 +67,9 @@ export class GameComponent implements AfterViewInit {
   }
 
   public static levelChange(): void {
-    const levels = [level4];
-    const index = levels.indexOf(GameComponent.getCurrentLevel());
-    GameComponent.setCurrentLevel(levels[(index + 1) % levels.length]);
+
+    const index = this.levels.indexOf(GameComponent.getCurrentLevel());
+    GameComponent.setCurrentLevel(this.levels[(index + 1) % this.levels.length]);
 
 
   }
@@ -197,6 +202,8 @@ export class GameComponent implements AfterViewInit {
     this.oldFrameTime = performance.now();
 
 
+
+
     GameComponent.getCurrentLevel().draw(this.context!, delta);
     GameComponent.player.update(this.context!, delta);
     GameComponent.player.drawSprite(this.context!, delta);
@@ -231,6 +238,8 @@ export class GameComponent implements AfterViewInit {
       return;
     }
 
+    if(!GameComponent.isFinished)
+    this.leaderboard.time += delta;
 
   }
 
@@ -263,30 +272,35 @@ export class GameComponent implements AfterViewInit {
       0, 0, cameraWidth, cameraHeight
     );
 
+    //Draw Name onto Camera Canvas
+    this.cameraContext!.fillStyle = 'white';
+    this.cameraContext!.font = '20px Arial';
+    this.cameraContext!.fillText(`Name: ${this.leaderboard.name} Time: ${Math.round(this.leaderboard.time* 100) / 100}`, 10, 30);
+
     //Draw Coin Counter onto Camera Canvas
     this.cameraContext!.fillStyle = 'white';
     this.cameraContext!.font = '20px Arial';
-    this.cameraContext!.fillText(`Coins: ${GameComponent.player.collectedCoins}`, 10, 30);
+    this.cameraContext!.fillText(`Coins: ${GameComponent.player.collectedCoins}`, 10, 60);
 
     //Draw Shine Counter onto Camera Canvas
     this.cameraContext!.fillStyle = 'white';
     this.cameraContext!.font = '20px Arial';
-    this.cameraContext!.fillText(`Shines: ${GameComponent.player.collectedShines}`, 10, 60);
+    this.cameraContext!.fillText(`Shines: ${GameComponent.player.collectedShines}`, 10, 90);
 
     //Draw Key Counter onto Camera Canvas
     this.cameraContext!.fillStyle = 'white';
     this.cameraContext!.font = '20px Arial';
-    this.cameraContext!.fillText(`Keys: ${GameComponent.player.collectedKeys}`, 10, 90);
+    this.cameraContext!.fillText(`Keys: ${GameComponent.player.collectedKeys}`, 10, 120);
 
     //Draw Active Potion Effects
     this.cameraContext!.fillStyle = 'white';
     this.cameraContext!.font = '20px Arial';
 
-    for(let i = 0; i < GameComponent.player.getPotionEffects().length; i++) {
+    for (let i = 0; i < GameComponent.player.getPotionEffects().length; i++) {
       let duration = GameComponent.player.getPotionEffects()[i].duration;
       //Round to 2 decimal places
       duration = Math.round(duration * 100) / 100;
-      this.cameraContext!.fillText(PotionEffectType[GameComponent.player.getPotionEffects()[i].type] + ": " + duration, 10, 120 + i * 30);
+      this.cameraContext!.fillText(PotionEffectType[GameComponent.player.getPotionEffects()[i].type] + ": " + duration, 10, 150 + i * 30);
     }
 
   }

src/app/components/intro/intro.component.html

@@ -0,0 +1,2 @@
+<input [(ngModel)]="leaderboardService.name" placeholder="Enter Name">
+<button (click)="redirect()">Start Playing</button>

src/app/components/intro/intro.component.scss

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IntroComponent } from './intro.component';
+
+describe('IntroComponent', () => {
+  let component: IntroComponent;
+  let fixture: ComponentFixture<IntroComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [IntroComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(IntroComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/intro/intro.component.spec.ts

@@ -0,0 +1,29 @@
+import {Component, signal} from '@angular/core';
+import {LeaderboardService} from "../../services/leaderboard.service";
+import {Router} from "@angular/router";
+import {distinctUntilChanged} from "rxjs";
+import {FormControl} from "@angular/forms";
+import {GameComponent} from "../game/game.component";
+
+@Component({
+  selector: 'app-intro',
+  templateUrl: './intro.component.html',
+  styleUrl: './intro.component.scss'
+})
+export class IntroComponent {
+
+  public name: FormControl<string | null> = new FormControl('');
+
+
+  constructor(public readonly leaderboardService: LeaderboardService,
+              public readonly router: Router) {
+
+
+  }
+
+  public redirect(): void {
+    this.router.navigate(['/game']).then(r => console.log(r));
+  }
+
+
+}

src/app/components/intro/intro.component.ts

@@ -1,7 +1,8 @@
 import {Routes} from '@angular/router';
 import {GameComponent} from "../../components/game/game.component";
+import {IntroComponent} from "../../components/intro/intro.component";
 
 export const routes: Routes = [
-
-  {path: '**', component: GameComponent}
+  {path: '', component: IntroComponent},
+  {path: 'game', component: GameComponent}
 ];