add: connection between translation json files and excisting code made

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { ServiceWorkerModule } from '@angular/service-worker';
@@ -20,6 +20,12 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { AuthGuard } from './admin/auth-guard';
 import { DialogTemplateComponent } from './admin/dialog-template/dialog-template.component';
 import { CommonModule } from '@angular/common';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader'; 
+
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/translations/', '.json');
+}
 
 @NgModule({
   declarations: [
@@ -36,17 +42,28 @@ import { CommonModule } from '@angular/common';
     HttpClientModule,
     AppRoutingModule,
     WelcomeModule,
-    GameModule,
+    GameModule,       //includes GameInfoComponent
     MultiplayerModule,
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
     MatSnackBarModule,
     MatDialogModule,
     MaterialImportsModule,
     BrowserAnimationsModule,
     CommonModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    })
+  ],
+  providers: [
+    HttpClientModule, 
+    InfoDialogComponent, 
+    AuthGuard, 
+    { provide: MAT_DIALOG_DATA, useValue: {} }
   ],
-  providers: [HttpClientModule, InfoDialogComponent, AuthGuard, { provide: MAT_DIALOG_DATA, useValue: {} }],
-
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/game/game-info/game-info.component.html

@@ -2,36 +2,41 @@
   <div class="game-info-container">
     <div><img class="logo" src="assets/logo/IO-logo-inverted_transparent-bg.png" alt="logo" /></div>
     <div class="game-info-text-content">
-      <h1 class="player-mode" *ngIf="isSinglePlayer"><mat-icon>person</mat-icon>1 spiller</h1>
-      <h1 class="player-mode" *ngIf="isMultiPlayer"><mat-icon>people_alt</mat-icon>2 spillere</h1>
+      <h1 class="player-mode" *ngIf="isSinglePlayer"><mat-icon>person</mat-icon>{{ 'PLAYER_MODE_SINGLE' | translate }}</h1>
+      <h1 class="player-mode" *ngIf="isMultiPlayer"><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">
-          <h1 class="game-info-text-header" *ngIf="isSinglePlayer">Slik spiller du:</h1>
-          <h1 class="game-info-text-header" *ngIf="isMultiPlayer">Slik spiller dere:</h1>
+          <h1 class="game-info-text-header" *ngIf="isSinglePlayer">{{ 'HOW_TO_PLAY_SINGLE' | translate }}</h1>
+          <h1 class="game-info-text-header" *ngIf="isMultiPlayer">{{ 'HOW_TO_PLAY_MULTI' | translate }}</h1>
           <ol class="game-info-text-list">
-            <li>Tegn ord</li>
-            <li>IO gjetter</li>
-            <li *ngIf="isSinglePlayer">Tre runder</li>
-            <li *ngIf="isMultiPlayer">Best av tre vinner!</li>
+            <li>{{ 'DRAW_WORD' | translate }}</li>
+            <li>{{ 'IO_GUESSES' | translate }}</li>
+            <li *ngIf="isSinglePlayer">{{ 'NUMBER_OF_ROUNDS' | translate }}</li>
+            <li *ngIf="isMultiPlayer">{{ '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)="startDrawing()">
           <div class="button-text">
-            Start
+            {{ 'START_BUTTON' | translate }}
             <mat-icon class="button-icon play_arrow" aria-label="play_arrow">arrow_forward_ios</mat-icon>
           </div>
         </button>
       </div>
     </div>
   </div>
 </div>
+
+<div class="language-selector">
+  <button (click)="switchLanguage('NO')">Norsk</button>
+  <button (click)="switchLanguage('EN')">English</button>
+</div>

src/assets/translations/EN.json

@@ -0,0 +1,12 @@
+{
+  "PLAYER_MODE_SINGLE": "1 player",
+  "PLAYER_MODE_MULTI": "2 players",
+  "HOW_TO_PLAY_SINGLE": "How to play:",
+  "HOW_TO_PLAY_MULTI": "How to play:",
+  "DRAW_WORD": "Draw a word",
+  "IO_GUESSES": "IO guesses",
+  "NUMBER_OF_ROUNDS": "Three rounds",
+  "BEST_OF_THREE": "Best of three wins!",
+  "BACK_BUTTON": "Back",
+  "START_BUTTON": "Start"
+}

src/assets/translations/NO.json

@@ -0,0 +1,13 @@
+{
+    "PLAYER_MODE_SINGLE": "1 spiller",
+    "PLAYER_MODE_MULTI": "2 spillere",
+    "HOW_TO_PLAY_SINGLE": "Slik spiller du:",
+    "HOW_TO_PLAY_MULTI": "Slik spiller dere:",
+    "DRAW_WORD": "Tegn ord",
+    "IO_GUESSES": "IO gjetter",
+    "NUMBER_OF_ROUNDS": "Tre runder",
+    "BEST_OF_THREE": "Best av tre vinner!",
+    "BACK_BUTTON": "Tilbake",
+    "START_BUTTON": "Start"
+}
+