change language button/menu

src/app/app.component.html

@@ -152,12 +152,16 @@
         <input type="file" #fileInput style="display: none" (change)="onFileSelected($event)"> 
     </div>
     <div class="container-settings container-settings-secondline">
+        <button mat-mini-fab color="white" style="font-size: 20px;" [matMenuTriggerFor]="changeLanguageMenu"
+        [matTooltip]="translate.instant('lang_tooltip')"
+        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">{{langEmoji}}</button>
+        <mat-menu #changeLanguageMenu="matMenu">
+            <button mat-menu-item (click)="changeLanguage('fr')">🇫🇷 {{'language_fr' | translate}}</button>
+            <button mat-menu-item (click)="changeLanguage('en')">🇬🇧 {{'language_en' | translate}}</button>
+        </mat-menu>
         <button mat-mini-fab color="white" (click)="downloadManual()"
         [matTooltip]="translate.instant('manual_tooltip')"
         matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="menu_book"></mat-icon></button>
-        <button mat-mini-fab color="white" (click)="changeLanguage()"
-        [matTooltip]="translate.instant('lang_tooltip')"
-        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">🇫🇷</button>
     </div>
     <div class="container-minimap"></div>
     <div class="container-zoom">

src/app/app.component.scss

@@ -197,8 +197,9 @@
         }
 
         &-secondline {
-            width: 50px;
             top: 75px;
+            width: 112px;
+            right: 360px;
         }
     }
 

src/app/app.component.ts

@@ -48,6 +48,7 @@ export class AppComponent {
   scenario: Scenario = new Scenario();
   @ViewChild('fileInput') fileInput: any;
   selectedLang: string = 'en';
+  langEmoji: string = '🇬🇧';
 
   constructor(private cdr: ChangeDetectorRef, private http: HttpClient, protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService,
     private elementRef: ElementRef, private zoomService: ZoomService, private dialog: MatDialog, private titleService: Title,
@@ -63,6 +64,10 @@ export class AppComponent {
       this.selectedLang = selectedLang;
     }
     translate.use(this.selectedLang);
+    switch(selectedLang) {
+      case 'en': this.langEmoji = '🇬🇧'; break;
+      case 'fr': this.langEmoji = '🇫🇷'; break;
+    }
 
     pieceDetailsService.piece = this.scenario;
 
@@ -114,15 +119,15 @@ export class AppComponent {
     }
   }
 
-  changeLanguage(): void {
-    if (this.selectedLang == 'en') {
-      this.selectedLang = 'fr';
-      this.translate.use('fr');
-    } else if (this.selectedLang == 'fr') {
-      this.selectedLang = 'en';
-      this.translate.use('en');
+  changeLanguage(lang: string): void {
+    if (lang !== this.selectedLang) {
+      switch(lang) {
+        case 'fr': this.selectedLang = 'fr'; this.translate.use('fr'); this.langEmoji = '🇫🇷'; break;
+        case 'en': this.selectedLang = 'en'; this.translate.use('en'); this.langEmoji = '🇬🇧'; break;
+      }
+      this.minimapService.reset();
+      this.scenario.traces.push(new Trace(this.scenario.traces.length, 'change_lang', undefined, undefined, 'all', 'Scenario'));
     }
-    this.minimapService.reset();
   }
 
   downloadManual(): void {

src/assets/lang/en.json

 {
+    "language_fr": "French",
+    "language_en": "English",
+
     "clearPiece_tooltip": "Clear the content of this tile.",
     "deletePiece_tooltip": "Delete the tile",
     "moveRight_tooltip": "Shift the tile to the right. In case a tile is already present, their positions are swapped.",

src/assets/lang/fr.json

 {
+    "language_fr": "Français",
+    "language_en": "Anglais",
+
     "clearPiece_tooltip": "Effacer le contenu de cette tuile",
     "deletePiece_tooltip": "Supprimer la tuile",
     "moveRight_tooltip": "Décaler la tuile vers la droite. Dans le cas où une tuile est déjà présente, leurs places sont inversées.",