add: translations of lobby and idle-timeout added

src/app/game/game-multiplayer/lobby/lobby.component.html

@@ -1,7 +1,7 @@
 <div class="container-background">
   <div class="container">
     <div><img class="logo" src="assets/logo/IO-logo-inverted_transparent-bg.png" alt="logo" /></div>
-    <div class="waiting-text">Venter på spiller 2</div>
+    <div class="waiting-text">{{ 'WAITING_FOR_PLAYER' | translate }}</div>
     @if (waitingForOtherPlayer) {
       <div>
         <mat-spinner></mat-spinner>
@@ -15,7 +15,7 @@
     <a routerLink="/" routerLinkActive="active">
       <button mat-raised-button class="home-button">
         <div class="button-text">
-          <mat-icon class="button-icon" aria-label="Example home icon">home</mat-icon>Tilbake
+          <mat-icon class="button-icon" aria-label="Example home icon">home</mat-icon>{{ 'BACK_BUTTON' | translate }}
         </div>
       </button>
     </a>

src/app/game/game-multiplayer/lobby/lobby.component.ts

@@ -5,19 +5,30 @@ import { MatButton } from '@angular/material/button';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { MatIcon } from '@angular/material/icon';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { TranslationService } from '@/app/services/translation.service';
+import { TranslatePipe } from '@/app/pipes/translation.pipe';
 
 @Component({
   selector: 'app-lobby',
   templateUrl: './lobby.component.html',
   styleUrls: ['./lobby.component.scss'],
   standalone: true,
-  imports: [MatProgressSpinner, MatIcon, RouterLink, RouterLinkActive, MatButton],
+  imports: [
+    MatProgressSpinner, 
+    MatIcon, RouterLink, 
+    RouterLinkActive, 
+    MatButton,
+    TranslatePipe
+  ],
 })
 export class LobbyComponent implements OnInit, OnDestroy {
   waitingForOtherPlayer = true;
   subscriptions = new Subscription();
 
-  constructor(public multiPlayerService: MultiplayerService) {}
+  constructor(
+    public multiPlayerService: MultiplayerService,
+    private translationService: TranslationService
+  ) {}
 
   ngOnInit(): void {
     this.subscriptions.add(this.multiPlayerService.joinGame().subscribe());
@@ -28,6 +39,7 @@ export class LobbyComponent implements OnInit, OnDestroy {
         }
       })
     );
+    this.translationService.loadTranslations(this.translationService.getCurrentLang()).subscribe();
   }
 
   ngOnDestroy() {

src/app/idle-timeout/idle-timeout.component.html

@@ -1,11 +1,11 @@
 <div mat-dialog-content class="content">
   <p>
-    Spillet vil automatisk avslutte om <strong>{{ timer }}</strong> sekunder
+    {{ 'AUTO_END_MESSAGE' | translate }} <strong>{{ timer }}</strong> {{ 'SECONDS' | translate }}
   </p>
 </div>
 <div mat-dialog-actions class="actions">
-  <button mat-raised-button class="button" id="stay-button" (click)="closeDialog()">Bli værende</button>
+  <button mat-raised-button class="button" id="stay-button" (click)="closeDialog()">{{ 'STAY_BUTTON' | translate }}</button>
   <button mat-raised-button class="button" id="home-button" (click)="goHome()">
-    <div class="button-text"><mat-icon class="button-icon">home</mat-icon>Avslutt nå</div>
+    <div class="button-text"><mat-icon class="button-icon">home</mat-icon>{{ 'END_NOW_BUTTON' | translate }}</div>
   </button>
 </div>

src/app/idle-timeout/idle-timeout.component.ts

@@ -6,6 +6,8 @@ import { routes } from '../shared/models/routes';
 import { MatIcon } from '@angular/material/icon';
 import { MatButton } from '@angular/material/button';
 import { CdkScrollable } from '@angular/cdk/scrolling';
+import { TranslationService } from '../services/translation.service';
+import { TranslatePipe } from '../pipes/translation.pipe';
 
 @Component({
     selector: 'app-idle-timeout',
@@ -19,10 +21,15 @@ import { CdkScrollable } from '@angular/cdk/scrolling';
         MatDialogActions,
         MatButton,
         MatIcon,
+        TranslatePipe
     ],
 })
 export class IdleTimeoutComponent implements OnInit, OnDestroy {
-  constructor(private router: Router, private dialogRef: MatDialogRef<IdleTimeoutComponent>) {}
+  constructor(
+    private router: Router, 
+    private dialogRef: MatDialogRef<IdleTimeoutComponent>,
+    private translationService: TranslationService
+  ) {}
 
   startTime = 15;
   timer = 0;
@@ -37,6 +44,7 @@ export class IdleTimeoutComponent implements OnInit, OnDestroy {
         this.goHome();
       }
     }, 1000);
+    this.translationService.loadTranslations(this.translationService.getCurrentLang()).subscribe();
   }
 
   goHome() {

src/assets/translation/EN.json

@@ -40,6 +40,5 @@
     "AUTO_END_MESSAGE": "The game will automatically end in ",
     "SECONDS": "seconds",
     "STAY_BUTTON": "Stay",
-    "HOME_ICON": "To homepage",
     "END_NOW_BUTTON": "End now"
 }

src/assets/translation/NO.json

@@ -40,6 +40,5 @@
     "AUTO_END_MESSAGE": "Spillet vil automatisk avslutte om ",
     "SECONDS": "sekunder",
     "STAY_BUTTON": "Bli værende",
-    "HOME_ICON": "Til førsteside",
     "END_NOW_BUTTON": "Avslutt nå"
 }