Added Volume Slider

Author: omeldev

src/app/app.module.ts

@@ -9,7 +9,7 @@ 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";
+import {GameService} from "./services/game.service";
 
 
 @NgModule({
@@ -28,7 +28,7 @@ import {LeaderboardService} from "./services/leaderboard.service";
     FormsModule
 
   ],
-  providers: [LeaderboardService],
+  providers: [GameService],
   bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/classes/audio/audio.ts

@@ -1,4 +1,6 @@
 import {GameComponent} from "../../components/game/game.component";
+import {inject} from "@angular/core";
+import {GameService} from "../../services/game.service";
 
 export class GameAudio {
 
@@ -7,10 +9,10 @@ export class GameAudio {
 
   private audio: HTMLAudioElement;
 
-  constructor(name: string, audioSrc: string, loop: boolean, volume: number = GameComponent.volume) {
+  constructor(name: string, audioSrc: string, loop: boolean, volume?: number) {
     this.audio = new Audio(audioSrc);
     this.audio.loop = loop;
-    this.audio.volume = volume;
+    this.audio.volume = volume ?? localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume') ?? '0.5') : 0.5;
 
     GameAudio.map.set(name, this);
   }
@@ -26,7 +28,7 @@ export class GameAudio {
 
   public play(onEnded?: () => void): void {
     const clone = this.audio.cloneNode(true) as HTMLAudioElement; // Create a clone of the audio element
-    clone.volume = GameComponent.volume;
+    clone.volume = localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume') ?? '0.5') : 0.5;
     clone.play().then();
     clone.addEventListener("ended", function () {
       onEnded?.();

src/app/classes/gui/window/title.ts

@@ -16,22 +16,7 @@ export class TitleScreen {
           GameComponent.isTitleScreen = false;
           GameComponent.player.preventInput = false;
         }),
-        new Button('../../../assets/gui/mobile/down.png', new Position(100, 200), new Scale(0.25), () => {
-          if (GameComponent.volume - 0.1 <= 0.0) {
-            GameComponent.volume = 0.0;
-            return;
-          }
 
-          GameComponent.volume -= 0.1;
-        }),
-        new Button('../../../assets/gui/mobile/up.png', new Position(100, 250), new Scale(0.25), () => {
-          if (GameComponent.volume + 0.1 >= 1.0) {
-            GameComponent.volume = 1.0;
-            return;
-
-          }
-          GameComponent.volume += 0.1;
-        }),
       ];
     TitleScreen.buttons = this.buttons;
 

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

@@ -8,7 +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";
+import {GameService} from "../../services/game.service";
 
 @Component({
   selector: 'app-game',
@@ -21,8 +21,7 @@ export class GameComponent implements AfterViewInit {
   public static canvasWidth = 64 * 16;
   public static canvasHeight = 64 * 9;
   public static player: Player;
-  public static volume: number = 1.0;
-  public static isTitleScreen: boolean = false;
+  public static isTitleScreen: boolean = true;
   public static hasInteracted: boolean = false;
   public static isFlashLightShaderOn: boolean = true;
   public static levels = [level1, level4];
@@ -35,13 +34,12 @@ export class GameComponent implements AfterViewInit {
   public cameraContext: CanvasRenderingContext2D | undefined;
   public context: CanvasRenderingContext2D | undefined;
   public flashLightShader = new FlashlightShader();
-  public volume: number = localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume')!) : 1.0;
   private oldFrameTime: number = 1;
 
   public static isFinished: boolean = false;
 
 
-  constructor(public readonly leaderboard: LeaderboardService) {
+  constructor(public readonly leaderboard: GameService) {
     GameComponent.player = new Player();
     initializeSounds();
     this.registerGuiListener();
@@ -197,8 +195,6 @@ export class GameComponent implements AfterViewInit {
 
     }
 
-    GameComponent.volume = parseFloat(localStorage.getItem('volume') || '1.0');
-    localStorage.setItem('volume', this.volume.toString());
     this.changeCanvasSize(GameComponent.getCurrentLevel().getBackground().getWidth(), GameComponent.getCurrentLevel().getBackground().getHeight());
 
 

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

@@ -1,2 +1,6 @@
-<input [(ngModel)]="leaderboardService.name" placeholder="Enter Name">
+<input [(ngModel)]="gameService.name" placeholder="Enter Name">
 <button (click)="redirect()">Start Playing</button>
+<div>
+  <p>Volume Slider</p>
+  <input [(ngModel)]="gameService.volume" type="range" min="0" max="1" step="0.01">
+</div>

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

@@ -1,5 +1,5 @@
 import {Component, signal} from '@angular/core';
-import {LeaderboardService} from "../../services/leaderboard.service";
+import {GameService} from "../../services/game.service";
 import {Router} from "@angular/router";
 import {distinctUntilChanged} from "rxjs";
 import {FormControl} from "@angular/forms";
@@ -15,15 +15,16 @@ export class IntroComponent {
   public name: FormControl<string | null> = new FormControl('');
 
 
-  constructor(public readonly leaderboardService: LeaderboardService,
+  constructor(public readonly gameService: GameService,
               public readonly router: Router) {
 
 
 
   }
 
   public redirect(): void {
-    localStorage.setItem('name', this.leaderboardService.name);
+    localStorage.setItem('name', this.gameService.name);
+    localStorage.setItem('volume', this.gameService.volume.toString());
     this.router.navigate(['/game']).then(r => console.log(r));
   }
 

src/app/services/leaderboard.service.ts src/app/services/game.service.tssrc/app/services/leaderboard.service.ts renamed to src/app/services/game.service.ts

@@ -4,14 +4,18 @@ import {Subject} from "rxjs";
 @Injectable({
   providedIn: 'root'
 })
-export class LeaderboardService {
+export class GameService {
 
   public name: string = 'Anonymous';
   public time: number = 0;
+  public volume: number = 0.5;
   constructor() {
     if(localStorage.getItem('name')) {
       this.name = localStorage.getItem('name') ?? 'Anonymous';
     }
+    if(localStorage.getItem('volume')) {
+      this.volume = parseFloat(localStorage.getItem('volume') ?? '0.5');
+    }
   }
 
 

src/app/services/leaderboard.service.spec.ts

@@ -1,13 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 
-import { LeaderboardService } from './leaderboard.service';
+import { GameService } from './game.service';
 
 describe('LeaderboardService', () => {
-  let service: LeaderboardService;
+  let service: GameService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(LeaderboardService);
+    service = TestBed.inject(GameService);
   });
 
   it('should be created', () => {