add: translation of game-info added

computas · Jun 26, 2024 · 8cfa05d · 8cfa05d
1 parent 1efc884
commit 8cfa05d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/src/app/game/game-info/game-info.component.html b/src/app/game/game-info/game-info.component.html
@@ -3,43 +3,43 @@
     <div><img class="logo" src="assets/logo/IO-logo-inverted_transparent-bg.png" alt="logo" /></div>
     <div class="game-info-text-content">
       @if (isSinglePlayer) {
-        <h1 class="player-mode"><mat-icon>person</mat-icon>1 spiller</h1>
+        <h1 class="player-mode"><mat-icon>person</mat-icon>{{ 'PLAYER_MODE_SINGLE' | translate }}</h1>
       }
       @if (isMultiPlayer) {
-        <h1 class="player-mode"><mat-icon>people_alt</mat-icon>2 spillere</h1>
+        <h1 class="player-mode"><mat-icon>people_alt</mat-icon>{{ 'PLAYER_MODE_MULTI' | translate }}</h1>
       }
       <div class="game-info-text-content-list">
         <div class="avatar">
           <img class="avatar-image" src="assets/illustrations/IO_Illustrasjoner-1_1360x939.png" alt="avatar" />
         </div>
         <div class="game-info-text-content-list-text">
           @if (isSinglePlayer) {
-            <h1 class="game-info-text-header">Slik spiller du:</h1>
+            <h1 class="game-info-text-header">{{ 'HOW_TO_PLAY_SINGLE' | translate }}</h1>
           }
           @if (isMultiPlayer) {
-            <h1 class="game-info-text-header">Slik spiller dere:</h1>
+            <h1 class="game-info-text-header">{{ 'HOW_TO_PLAY_MULTI' | translate }}</h1>
           }
           <ol class="game-info-text-list">
-            <li>Tegn ord</li>
-            <li>IO gjetter</li>
+            <li>{{ 'DRAW_WORD' | translate }}</li>
+            <li>{{ 'IO_GUESSES' | translate }}</li>
             @if (isSinglePlayer) {
-              <li>Tre runder</li>
+              <li>{{ 'NUMBER_OF_ROUNDS' | translate }}</li>
             }
             @if (isMultiPlayer) {
-              <li>Best av tre vinner!</li>
+              <li>{{ 'BEST_OF_THREE' | translate }}</li>
             }
           </ol>
         </div>
       </div>
       <div class="game-info-footer">
         <button mat-raised-button class="button" id="back-button" (click)="goToLanding()">
           <div class="button-text">
-            <mat-icon class="button-icon" aria-label="Example home icon">arrow_back_ios</mat-icon>Tilbake
+            <mat-icon class="button-icon" aria-label="Example home icon">arrow_back_ios</mat-icon>{{ 'BACK_BUTTON' | translate }}
           </div>
         </button>
         <button mat-raised-button class="button" id="get-word-button" (click)="goToDifficultyPicker()">
           <div class="button-text">
-            Neste
+            {{ 'START_BUTTON' | translate }}
             <mat-icon class="button-icon play_arrow" aria-label="play_arrow">arrow_forward_ios</mat-icon>
           </div>
         </button>

diff --git a/src/app/game/game-info/game-info.component.ts b/src/app/game/game-info/game-info.component.ts
@@ -6,13 +6,20 @@ import { WebSocketService } from '../game-multiplayer/services/web-socket.servic
 import { SocketEndpoints } from '../../shared/models/websocketEndpoints';
 import { MatButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
+import { TranslationService } from '@/app/services/translation.service';
+import { TranslatePipe } from '@/app/pipes/translation.pipe';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-game-info',
   templateUrl: './game-info.component.html',
   styleUrls: ['./game-info.component.scss'],
   standalone: true,
-  imports: [MatIcon, MatButton],
+  imports: [
+    MatIcon, 
+    MatButton,
+    TranslatePipe
+  ],
 })
 export class GameInfoComponent implements OnInit {
   @Output() getDifficultyPicker = new EventEmitter();
@@ -22,7 +29,8 @@ export class GameInfoComponent implements OnInit {
   constructor(
     private router: Router,
     private multiplayerService: MultiplayerService,
-    private webSocketService: WebSocketService
+    private webSocketService: WebSocketService, 
+    private translationService: TranslationService
   ) {}
 
   ngOnInit(): void {
@@ -41,6 +49,7 @@ export class GameInfoComponent implements OnInit {
       });
       this.webSocketService.listen(SocketEndpoints.END_GAME).subscribe();
     }
+    this.translationService.loadTranslations(this.translationService.getCurrentLang()).subscribe();
   }
 
   goToDifficultyPicker() {