Multilanguage: fr / en (without real button)

195e9ef8 · Romain DELEAU · 37329327 · 195e9ef8 · 195e9ef8 · 195e9ef8
Commit 195e9ef8 authored Oct 27, 2023 by Romain DELEAU
57 changed files
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,8 @@
        "@angular/platform-browser": "^14.0.0",
        "@angular/platform-browser-dynamic": "^14.0.0",
        "@angular/router": "^14.0.0",
+        "@ngx-translate/core": "^14.0.0",
+        "@ngx-translate/http-loader": "^7.0.0",
        "js-minimap": "^1.0.7",
        "rxjs": "~7.5.0",
        "tslib": "^2.3.0",
@@ -2883,6 +2885,31 @@
        "webpack": "^5.54.0"
      }
    },
+    "node_modules/@ngx-translate/core": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-14.0.0.tgz",
+      "integrity": "sha512-UevdwNCXMRCdJv//0kC8h2eSfmi02r29xeE8E9gJ1Al4D4jEJ7eiLPdjslTMc21oJNGguqqWeEVjf64SFtvw2w==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=13.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@ngx-translate/http-loader": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-7.0.0.tgz",
+      "integrity": "sha512-j+NpXXlcGVdyUNyY/qsJrqqeAdJdizCd+GKh3usXExSqy1aE9866jlAIL+xrfDU4w+LiMoma5pgE4emvFebZmA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=13.0.0",
+        "@ngx-translate/core": ">=14.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -14276,6 +14303,22 @@
      "dev": true,
      "requires": {}
    },
+    "@ngx-translate/core": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-14.0.0.tgz",
+      "integrity": "sha512-UevdwNCXMRCdJv//0kC8h2eSfmi02r29xeE8E9gJ1Al4D4jEJ7eiLPdjslTMc21oJNGguqqWeEVjf64SFtvw2w==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
+    "@ngx-translate/http-loader": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-7.0.0.tgz",
+      "integrity": "sha512-j+NpXXlcGVdyUNyY/qsJrqqeAdJdizCd+GKh3usXExSqy1aE9866jlAIL+xrfDU4w+LiMoma5pgE4emvFebZmA==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
    "@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",

--- a/package.json
+++ b/package.json
@@ -20,6 +20,8 @@
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
+    "@ngx-translate/core": "^14.0.0",
+    "@ngx-translate/http-loader": "^7.0.0",
    "js-minimap": "^1.0.7",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",

--- a/src/app/app.component.html
+++ b/src/app/app.component.html
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -35,6 +35,7 @@ import { LoadingfailSnackbarComponent } from './components/snackbars/loadingfail
 import { Trace } from './class/trace/trace';
 import Minimap from 'js-minimap';
 import { MinimapService } from './services/minimap/minimap.service';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-root',
@@ -46,10 +47,23 @@ export class AppComponent {
  title = 'RLG Maker';
  scenario: Scenario = new Scenario();
  @ViewChild('fileInput') fileInput: any;
+  selectedLang: string = 'en';
  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,
-    private _snackBar: MatSnackBar, protected minimapService: MinimapService) {
+    private _snackBar: MatSnackBar, protected minimapService: MinimapService, protected translate: TranslateService) {
+    translate.setTranslation('en', require('../assets/lang/en.json'));
+    translate.setTranslation('fr', require('../assets/lang/fr.json'));  
+    translate.addLangs(['en', 'fr']);
+    translate.setDefaultLang('en');
+    let browserLang = translate.getBrowserLang();
+    let selectedLang = browserLang && (browserLang.match(/en|fr/) ? browserLang : 'en');
+    if(selectedLang) {
+      this.selectedLang = selectedLang;
+    }
+    translate.use(this.selectedLang);
    pieceDetailsService.piece = this.scenario;
    this.scenario.missions.forEach(mission => {
@@ -100,6 +114,17 @@ 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');
+    }
+    this.minimapService.reset();
+  }
  downloadManual(): void {
    const manualUrl = './assets/GuideMakerWeb_v2.0.pdf';
    this.http.get(manualUrl, { responseType: 'blob' }).subscribe((blob: Blob) => {
@@ -360,19 +385,19 @@ export class AppComponent {
  getSiderTitle(): string {
    let piece = this.pieceDetailsService.piece;
    if (piece instanceof Task) {
-      return "Tâche";
+      return this.translate.instant('siderTitle_task');
    }
    if (piece instanceof Role) {
-      return "Rôle";
+      return this.translate.instant('siderTitle_role');
    }
    if (piece instanceof Mission) {
-      return "Mission";
+      return this.translate.instant('siderTitle_mission');
    }
    if (piece instanceof Scenario) {
-      return "Jeu";
+      return this.translate.instant('siderTitle_game');
    }
    if (piece instanceof Step) {
-      return "Étape";
+      return this.translate.instant('siderTitle_step');
    } else {
      return "";
    }

--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -42,7 +42,13 @@ import { SaveDialogComponent } from './components/dialogs/save-dialog/save-dialo
 import { IdentifierSnackbarComponent } from './components/snackbars/identifier-snackbar/identifier-snackbar.component';
 import { LoadingsucessSnackbarComponent } from './components/snackbars/loadingsucess-snackbar/loadingsucess-snackbar.component';
 import { LoadingfailSnackbarComponent } from './components/snackbars/loadingfail-snackbar/loadingfail-snackbar.component';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http);
+}
 @NgModule({
  declarations: [
@@ -89,7 +95,14 @@ import { HttpClientModule } from '@angular/common/http';
    MatMenuModule,
    MatTooltipModule,
    MatDialogModule,
-    MatSnackBarModule
+    MatSnackBarModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    })
  ],
  providers: [],
  bootstrap: [AppComponent]

--- a/src/app/components/comment/comment.component.html
+++ b/src/app/components/comment/comment.component.html
@@ -2,21 +2,21 @@
    <div class="form-comment">
        <textarea [disabled]="!isEditable" [(ngModel)]="comment.content" (change)="editTrace($event, 'comment')"></textarea>
        <div class="form-comment-buttons">
-            <button mat-button (click)="isEditable = !isEditable">Modifier</button>
+            <button mat-button (click)="isEditable = !isEditable">{{'comments_button_edit' | translate}}</button>
-            <button mat-button (click)="removeComment(index)">Supprimer</button>
+            <button mat-button (click)="removeComment(index)">{{'comments_button_delete' | translate}}</button>
        </div>  
    </div>
    <div class="form-answers" *ngFor="let answer of comment.answers, let i = index;trackBy:trackByIdx">
        <textarea [disabled]="!answerEditables[i]" [(ngModel)]="comment.answers[i]" (change)="editTrace($event,'answer_['+i+']')">Une réponse</textarea>
        <div class="form-comment-buttons">
-            <button mat-button (click)="this.answerEditables[i] = !this.answerEditables[i]">Modifier</button>
+            <button mat-button (click)="this.answerEditables[i] = !this.answerEditables[i]">{{'comments_button_edit' | translate}}</button>
-            <button mat-button (click)="removeAnswer(i)">Supprimer</button>
+            <button mat-button (click)="removeAnswer(i)">{{'comments_button_delete' | translate}}</button>
        </div>  
    </div>
    <div class="form-newanswer">
        <textarea [(ngModel)]="newAnswer" (change)="editTrace($event,'newAnswer')"></textarea>
        <div class="form-newanswer-buttons">
-           <button mat-button (click)="addAnswer()">Répondre</button> 
+           <button mat-button (click)="addAnswer()">{{'comments_button_answer' | translate}}</button> 
        </div>
    </div>
 </div>
\ No newline at end of file
--- a/src/app/components/comment/comment.component.ts
+++ b/src/app/components/comment/comment.component.ts
@@ -9,6 +9,7 @@ import { Task } from 'src/app/class/task/task';
 import { Role } from 'src/app/class/role/role';
 import { Step } from 'src/app/class/step/step';
 import { Trace } from 'src/app/class/trace/trace';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-comment',
@@ -25,7 +26,7 @@ export class CommentComponent implements OnInit {
  isEditable: boolean = false;
  newAnswer: string = '';
-  constructor(public dialog: MatDialog, private pieceDetailsService: PieceDetailsService) { }
+  constructor(public dialog: MatDialog, private pieceDetailsService: PieceDetailsService, protected translate: TranslateService) { }
  ngOnInit(): void {
    this.comment.answers.forEach(answer => {
@@ -34,7 +35,7 @@ export class CommentComponent implements OnInit {
  }
  removeAnswer(index: number): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'cette Réponse' });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('comments_answer_delete') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.comment.answers.splice(index, 1);
@@ -56,7 +57,7 @@ export class CommentComponent implements OnInit {
  }
  removeComment(index: number): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'ce Commentaire' });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('comments_comment_delete') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.comments.splice(index, 1);

--- a/src/app/components/dialogs/clean-dialog/clean-dialog.component.html
+++ b/src/app/components/dialogs/clean-dialog/clean-dialog.component.html
-<h2 mat-dialog-title>Effacer le contenu</h2>
+<h2 mat-dialog-title>{{'dialog_clean_title' | translate}}</h2>
-<mat-dialog-content>Êtes vous sûr de vouloir effacer le contenu de cette tuile {{data}} ?</mat-dialog-content>
+<mat-dialog-content>{{'dialog_clean_content' | translate}} {{data}} ?</mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button mat-button mat-dialog-close>Non</button>
+    <button mat-button mat-dialog-close>{{'dialog_button_no' | translate}}</button>
-    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Oui</button>
+    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>{{'dialog_button_yes' | translate}}</button>
 </mat-dialog-actions>
--- a/src/app/components/dialogs/create-dialog/create-dialog.component.html
+++ b/src/app/components/dialogs/create-dialog/create-dialog.component.html
-<h2 mat-dialog-title>Créer un élément</h2>
+<h2 mat-dialog-title>{{'dialog_create_title' | translate}}</h2>
-<mat-dialog-content>Êtes vous sûr de vouloir créer {{data}} ?</mat-dialog-content>
+<mat-dialog-content>{{'dialog_create_content' | translate}} {{data}} ?</mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button mat-button mat-dialog-close>Non</button>
+    <button mat-button mat-dialog-close>{{'dialog_button_yes' | translate}}</button>
-    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Oui</button>
+    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>{{'dialog_button_no' | translate}}</button>
 </mat-dialog-actions>
--- a/src/app/components/dialogs/save-dialog/save-dialog.component.html
+++ b/src/app/components/dialogs/save-dialog/save-dialog.component.html
-<h2 mat-dialog-title>Télécharger le scénario</h2>
+<h2 mat-dialog-title>{{'dialog_save_title' | translate}}</h2>
 <mat-dialog-content>
-    <label for="name">Nom du projet :</label>
+    <label for="name">{{'dialog_save_content' | translate}}</label>
-    <input name="name" type="text" placeholder="Mon Scénario" [(ngModel)]="data.fileName"/>
+    <input name="name" type="text" [placeholder]="translate.instant('dialog_save_placeholder')" [(ngModel)]="data.fileName"/>
 </mat-dialog-content>
 <mat-dialog-actions align="center">
-    <button mat-button mat-dialog-close>Annuler</button>
+    <button mat-button mat-dialog-close>{{'dialog_button_cancel' | translate}}</button>
-    <button mat-button (click)="data.result = true" [mat-dialog-close]="data" cdkFocusInitial>Télécharger</button>
+    <button mat-button (click)="data.result = true" [mat-dialog-close]="data" cdkFocusInitial>{{'dialog_button_save' | translate}}</button>
 </mat-dialog-actions>
\ No newline at end of file
--- a/src/app/components/dialogs/save-dialog/save-dialog.component.ts
+++ b/src/app/components/dialogs/save-dialog/save-dialog.component.ts
 import { Component, OnInit, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-save-dialog',
@@ -8,7 +9,7 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 })
 export class SaveDialogComponent implements OnInit {
-  constructor(@Inject(MAT_DIALOG_DATA) public data: {fileName: string, result: boolean}) { }
+  constructor(@Inject(MAT_DIALOG_DATA) public data: {fileName: string, result: boolean}, protected translate: TranslateService) { }
  ngOnInit(): void {
  }

--- a/src/app/components/dialogs/suppress-dialog/suppress-dialog.component.html
+++ b/src/app/components/dialogs/suppress-dialog/suppress-dialog.component.html
-<h2 mat-dialog-title>Supprimer l'élément</h2>
+<h2 mat-dialog-title>{{'dialog_delete_title' | translate}}</h2>
-<mat-dialog-content>Êtes vous sûr de vouloir supprimer {{data}} et tout ce que cela implique ?</mat-dialog-content>
+<mat-dialog-content>{{'dialog_delete_content1' | translate}} {{data}} {{'dialog_delete_content2' | translate}}</mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button mat-button mat-dialog-close>Non</button>
+    <button mat-button mat-dialog-close>{{'dialog_button_no' | translate}}</button>
-    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Oui</button>
+    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>{{'dialog_button_yes' | translate}}</button>
 </mat-dialog-actions>
--- a/src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component.html
+++ b/src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component.html
-<span matSnackBarLabel>Attention, cet identifiant est déjà utilisé dans ce Rôle</span>
+<span matSnackBarLabel>{{'snackbar_identifier' | translate}}</span>
--- a/src/app/components/snackbars/loadingfail-snackbar/loadingfail-snackbar.component.html
+++ b/src/app/components/snackbars/loadingfail-snackbar/loadingfail-snackbar.component.html
-<span matSnackBarLabel>Chargement du fichier échoué</span>
+<span matSnackBarLabel>{{'snackbar_loading_fail' | translate}}</span>
\ No newline at end of file
--- a/src/app/components/snackbars/loadingsucess-snackbar/loadingsucess-snackbar.component.html
+++ b/src/app/components/snackbars/loadingsucess-snackbar/loadingsucess-snackbar.component.html
-<span matSnackBarLabel>Chargement du fichier réussi</span>
+<span matSnackBarLabel>{{'snackbar_loading_success' | translate}}</span>
\ No newline at end of file
--- a/src/app/pieces/educational-objective/educational-objective.component.html
+++ b/src/app/pieces/educational-objective/educational-objective.component.html
 <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
 [class]="pieceDetailsService.piece == scenario.missions[i] ? 'isActive' : 'border'"
-matTooltip="La mission est commune à tous les Rôles"
+[matTooltip]="translate.instant('mission_tooltip')"
 matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
    <div class="piece-attach piece-attach-right"></div>
    <div class="piece-attach piece-attach-left-top"></div>
@@ -8,23 +8,23 @@ matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedToolt
    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="add" (click)="onClickAdd()"
-        matTooltip="Ajouter une mission."
+        [matTooltip]="translate.instant('mission_add_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="backspace" (click)="onClickErase()"
-        matTooltip="Effacer le contenu de cette tuile."
+        [matTooltip]="translate.instant('clearPiece_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="delete" (click)="onClickDelete()" *ngIf="canDelete()"
-        matTooltip="Supprimer la mission."
+        [matTooltip]="translate.instant('mission_delete_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
    </div>
    <div class="piece-form">
-        <div class="piece-form-title">Objectif(s) pédagogique</div>
+        <div class="piece-form-title">{{'missionEducationnalObjective_title' | translate}}</div>
        <mat-icon class="piece-form-comment" fontIcon="comment" *ngIf="scenario.missions[i].comments.length > 0"></mat-icon>
        <div class="piece-form-objective">
-            <label for="objective">Commun pour la mission {{i+1}}</label>
+            <label for="objective">{{'missionEducationnalObjective_objective_label' | translate}} {{i+1}}</label>
-            <textarea name="objective" [(ngModel)]="educationnalObjective.objective" (change)="editTrace($event, 'Obj_m')" placeholder="Comprendre les rôles impliqués dans la conception d'un site web"
+            <textarea name="objective" [(ngModel)]="educationnalObjective.objective" (change)="editTrace($event, 'Obj_m')" [placeholder]="translate.instant('missionEducationnalObjective_objective_placeholder')"
-            matTooltip="Ce que l’on veut atteindre en situation de formation. Commencer chaque objectif par un verbe. Si votre jeu est composé de plusieurs missions, distinguez les objectifs globaux du jeu et les objectifs de chaque mission"
+            [matTooltip]="translate.instant('missionEducationnalObjective_objective_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
        </div>

--- a/src/app/pieces/educational-objective/educational-objective.component.ts
+++ b/src/app/pieces/educational-objective/educational-objective.component.ts
@@ -9,6 +9,7 @@ import { SuppressDialogComponent } from 'src/app/components/dialogs/suppress-dia
 import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/clean-dialog.component';
 import { CreateDialogComponent } from 'src/app/components/dialogs/create-dialog/create-dialog.component';
 import { Trace } from 'src/app/class/trace/trace';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-educational-objective',
@@ -21,7 +22,7 @@ export class EducationalObjectiveComponent implements OnInit {
  @Input() scenario: Scenario = new Scenario();
  @Input() i: number = 0;
-  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog, protected translate: TranslateService) { }
  ngOnInit(): void {
  }
@@ -36,7 +37,7 @@ export class EducationalObjectiveComponent implements OnInit {
  }
  onClickAdd(): void {
-    const dialogRef = this.dialog.open(CreateDialogComponent, { data: 'une nouvelle Mission' });
+    const dialogRef = this.dialog.open(CreateDialogComponent, { data: this.translate.instant('mission_new') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.scenario.missions.push(new Mission());
@@ -48,7 +49,7 @@ export class EducationalObjectiveComponent implements OnInit {
  }
  onClickErase(): void {
-    const dialogRef = this.dialog.open(CleanDialogComponent, { data: 'Objectif pédagogique de la mission '+(this.i+1) });
+    const dialogRef = this.dialog.open(CleanDialogComponent, { data: this.translate.instant('missionEducationnalObjective_clean')+' '+(this.i+1) });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.educationnalObjective.objective = '';
@@ -60,7 +61,7 @@ export class EducationalObjectiveComponent implements OnInit {
  }
  onClickDelete(): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'cette Mission '+(this.i+1) });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('mission_delete')+' '+(this.i+1) });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.scenario.missions.splice(this.i, 1);

--- a/src/app/pieces/game-characters/game-characters.component.html
+++ b/src/app/pieces/game-characters/game-characters.component.html
 <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
-[class]="pieceDetailsService.piece == scenario ? 'isActive' : 'border'"
+[class]="pieceDetailsService.piece == scenario ? 'isActive' : 'border'">
-matTooltip="Le jeu comprend une ou plusieurs Missions. Chaque mission comprend au moins 2 Rôles. Les Rôles peuvent être différents au sein des différentes Missions du jeu."
-matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="backspace" (click)="onClickErase()"
-        matTooltip="Effacer le contenu de cette tuile."
+        [matTooltip]="translate.instant('clearPiece_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
    </div>
    <div class="piece-form">
        <div class="piece-form-character-create"
-        matTooltip="Si des personnages non joueurs (PNJ) doivent intervenir dans le scénario, ils doivent être décrits avec cette tuile. Chaque personnage a sa propre couleur et sont visibles sur les tâches où ils interviennent. L'enseignant peut être considéré comme un personnage s'il n'a pas un Rôle à part entière."
+        [matTooltip]="translate.instant('char_create_tooltip')"
        matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
-            <div class="piece-form-title">Créer un nouveau personnage non joueur</div>
+            <div class="piece-form-title">{{'char_create_title' | translate}}</div>
            <div class="piece-form-character-create-top">
                <mat-icon fontIcon="person_add"></mat-icon>
                <div class="piece-form-character-create-top-name">
-                    <label for="name">Nom</label>
+                    <label for="name">{{'char_name_label' | translate}}</label>
                    <input name="name" type="text" [(ngModel)]="newCharacter.name" (change)="editTrace($event,'newCharacter_name')"/>
                </div>
            </div>
            <div class="piece-form-create-infos">
                <div class="piece-form-character-create-infos-description">
-                    <label for="description">Description</label>
+                    <label for="description">{{'char_description_label' | translate}}</label>
                    <textarea class="background" name="description" [(ngModel)]="newCharacter.description" (change)="editTrace($event,'newCharacter_description')"></textarea>
                </div>
                <div class="piece-form-character-create-infos-color">
-                    <label for="color">Couleur</label>
+                    <label for="color">{{'char_color_label' | translate}}</label>
                    <input name="color" type="color" [(ngModel)]="newCharacter.color" (change)="editTrace($event,'newCharacter_color')"/>
                </div>
            </div>
-            <button mat-button (click)="createCharacter()">Créer</button>
+            <button mat-button (click)="createCharacter()">{{'char_button_create' | translate}}</button>
        </div>   
        <div class="piece-form-character-characters"  *ngIf="scenario.characters.length > 0" >
-            <div class="piece-form-title">Personnages non joueur</div>
+            <div class="piece-form-title">{{'chars_title' | translate}}</div>
            <div class="piece-form-character-characters-character" *ngFor="let character of scenario.characters; let index = index" [style]="index == 0? '' : 'border-top: solid black 1px;'"
-            matTooltip="Pour faire intervenir ce personnage sur une Tâche ou Événement aléatoire, cliquez sur la tuile en question et sélectionnez ce personnage dans la barre latérale."
+            [matTooltip]="translate.instant('char_tooltip')"
            matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                <div class="piece-form-character-create-top">
                    <mat-icon fontIcon="person"></mat-icon>
                    <div class="piece-form-character-create-top-name">
-                        <label for="name">Nom</label>
+                        <label for="name">{{'char_name_label' | translate}}</label>
                        <input name="name" type="text" [(ngModel)]="character.name" (change)="editTrace($event,'Character_['+index+']_name')"/>
                    </div>
                </div>
                <div class="piece-form-create-infos">
                    <div class="piece-form-character-create-infos-description">
-                        <label for="description">Description</label>
+                        <label for="description">{{'char_description_label' | translate}}</label>
                        <textarea name="description" [(ngModel)]="character.description" (change)="editTrace($event,'Character_['+index+']_description')"></textarea>
                    </div>
                    <div class="piece-form-character-create-infos-color">
-                        <label for="color">Couleur</label>
+                        <label for="color">{{'char_color_label' | translate}}</label>
                        <input name="color" type="color" [(ngModel)]="character.color" (change)="editTrace($event,'Character_['+index+']_color')"/>
                    </div>
                </div>
-                <button mat-button (click)="deleteCharacter(index)">Supprimer</button>
+                <button mat-button (click)="deleteCharacter(index)">{{'char_button_delete' | translate}}</button>
            </div>
        </div>     
    </div>

--- a/src/app/pieces/game-characters/game-characters.component.ts
+++ b/src/app/pieces/game-characters/game-characters.component.ts
@@ -9,6 +9,7 @@ import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/cl
 import { Task } from 'src/app/class/task/task';
 import { Trace } from 'src/app/class/trace/trace';
 import { MinimapService } from 'src/app/services/minimap/minimap.service';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-game-characters',
@@ -21,7 +22,7 @@ export class GameCharactersComponent implements OnInit {
  @Input() scenario = new Scenario()
  newCharacter: Character = new Character();
-  constructor(protected tooltipService: TooltipService, public dialog: MatDialog, protected pieceDetailsService: PieceDetailsService, private minimapService: MinimapService) { }
+  constructor(protected tooltipService: TooltipService, public dialog: MatDialog, protected pieceDetailsService: PieceDetailsService, private minimapService: MinimapService, protected translate: TranslateService) { }
  ngOnInit(): void {
  }
@@ -34,7 +35,7 @@ export class GameCharactersComponent implements OnInit {
  }
  onClickErase(): void {
-    const dialogRef = this.dialog.open(CleanDialogComponent, { data: 'Personnages (cela inclut la suppression de tous les personnages)' });
+    const dialogRef = this.dialog.open(CleanDialogComponent, { data: this.translate.instant('char_clean') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.newCharacter = new Character();
@@ -68,7 +69,7 @@ export class GameCharactersComponent implements OnInit {
  }
  deleteCharacter(index: number): void {
-      const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'ce Personnage <'+this.scenario.characters[index].name+'>' });
+      const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('char_delete')+' <'+this.scenario.characters[index].name+'>' });
      dialogRef.afterClosed().subscribe(result => {
        if (result == true) {
          this.scenario.missions.forEach(mission => {

--- a/src/app/pieces/game-context/game-context.component.html
+++ b/src/app/pieces/game-context/game-context.component.html
 <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
-[class]="pieceDetailsService.piece == scenario ? 'isActive' : 'border'">
+[class]="pieceDetailsService.piece == scenario ? 'isActive' : 'border'"
+[matTooltip]="translate.instant('game_tooltip')"
+matTooltipPosition="after" [matTooltipDisabled]="!tooltipService.activatedTooltips">
    <div class="piece-attach piece-attach-right-top"></div>
    <div class="piece-attach piece-attach-right-bottom"></div>
    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="backspace" (click)="onClickErase()"
-        matTooltip="Effacer le contenu de cette tuile."
+        [matTooltip]="translate.instant('clearPiece_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
    </div>
    <div class="piece-form">
-        <div class="piece-form-title">Contexte du jeu</div>
+        <div class="piece-form-title">{{'gameContext_title' | translate}}</div>
        <div class="piece-form-universe">
-            <label for="univers">Univers</label>
+            <label for="univers">{{'gameContext_universe_label' | translate}}</label>
-            <input name="univers" type="text" [(ngModel)]="gameContext.univers" (change)="editTrace($event, 'Universe')" placeholder="Réaliste" 
+            <input name="univers" type="text" [(ngModel)]="gameContext.univers" (change)="editTrace($event, 'Universe')" [placeholder]="translate.instant('gameContext_universe_placeholder')" 
-            matTooltip="Est-ce que le jeu est réaliste ou est-il futuriste, médiéval-fantastique, post-apocalyptique, est-ce de la science-fiction ?"
+            [matTooltip]="translate.instant('gameContext_universe_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>   
        </div>
        <div class="piece-form-support">
-            <label for="support">Medium / Support(s)</label>
+            <label for="support">{{'gameContext_support_label' | translate}}</label>
-            <input name="support" type="text" [(ngModel)]="gameContext.support" (change)="editTrace($event, 'Medium')" placeholder="Jeu en 3D sur ordinateur" 
+            <input name="support" type="text" [(ngModel)]="gameContext.support" (change)="editTrace($event, 'Medium')" [placeholder]="translate.instant('gameContext_support_placeholder')" 
-            matTooltip="Votre jeu sera-t-il sur ordinateur, en VR, sur tablette / smartphone ou sans technologie particulière ?"
+            [matTooltip]="translate.instant('gameContext_support_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>   
        </div>
        <div class="piece-form-duration">
-            <label for="duration">Durée</label>
+            <label for="duration">{{'gameContext_duration_label' | translate}}</label>
-            <input name="duration" type="text" [(ngModel)]="gameContext.duration" (change)="editTrace($event, 'Duration_g')" placeholder="3h" 
+            <input name="duration" type="text" [(ngModel)]="gameContext.duration" (change)="editTrace($event, 'Duration_g')" [placeholder]="translate.instant('gameContext_duration_placeholder')" 
-            matTooltip="Combien de temps va durer le jeu ? Sachant que le jeu comporte 1 ou plusieurs missions. Une mission peut être la durée d’une séance de cours et le jeu se déroulerait sur plusieurs séances de cours."
+            [matTooltip]="translate.instant('gameContext_duration_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
        </div>
        <div class="piece-form-intrigue">
-            <label for="intrigue">Intrigue</label>
+            <label for="intrigue">{{'gameContext_intrigue_label' | translate}}</label>
-            <textarea name="intrigue" [(ngModel)]="gameContext.intrigue" (change)="editTrace($event, 'Plot_g')" placeholder="Vous êtes stagiaire dans une agence de communication et devez faire vos preuves pour être embauché.e"
+            <textarea name="intrigue" [(ngModel)]="gameContext.intrigue" (change)="editTrace($event, 'Plot_g')" [placeholder]="translate.instant('gameContext_intrigue_placeholder')"
-            matTooltip="Quelle est l’histoire du jeu ? Quel est l’enjeu pour les joueurs ?"
+            [matTooltip]="translate.instant('gameContext_intrigue_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>  
        </div>
        <div class="piece-form-other">
-            <label for="other">Contexte d'utilisation</label>
+            <label for="other">{{'gameContext_other_label' | translate}}</label>
-            <textarea name="other" [(ngModel)]="gameContext.other" (change)="editTrace($event, 'Other_g')" placeholder="Contexte d’utilisation : lieu, présence de tuteur/formateur, à quel moment du cursus utiliser ce jeu, matériel nécessaire"
+            <textarea name="other" [(ngModel)]="gameContext.other" (change)="editTrace($event, 'Other_g')" [placeholder]="translate.instant('gameContext_other_placeholder')"
-            matTooltip="Tout autre élément que vous souhaiteriez prendre en compte dans le jeu et non défini dans les tuiles"
+            [matTooltip]="translate.instant('gameContext_other_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>  
        </div> 
    </div>

--- a/src/app/pieces/game-context/game-context.component.ts
+++ b/src/app/pieces/game-context/game-context.component.ts
@@ -6,6 +6,7 @@ import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/clean-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { Trace } from 'src/app/class/trace/trace';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-game-context',
@@ -17,7 +18,7 @@ export class GameContextComponent implements OnInit {
  @Input() scenario: Scenario = new Scenario();
  @Input() gameContext: GameContext = new GameContext();
-  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog, protected translate: TranslateService) { }
  ngOnInit(): void {
  }
@@ -25,7 +26,7 @@ export class GameContextComponent implements OnInit {
  displayMenu: string = 'hide';
  onClickErase(): void {
-    const dialogRef = this.dialog.open(CleanDialogComponent, { data: 'Contexte du jeu' });
+    const dialogRef = this.dialog.open(CleanDialogComponent, { data: this.translate.instant('gameContext_title') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.gameContext.univers = '';

--- a/src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.html
+++ b/src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.html
 <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
 [class]="pieceDetailsService.piece == scenario ? 'isActive' : 'border'"
-matTooltip="Le jeu comprend une ou plusieurs Missions. Chaque mission comprend au moins 2 Rôles. Les Rôles peuvent être différents au sein des différentes Missions du jeu."
+[matTooltip]="translate.instant('game_tooltip')"
-matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
+matTooltipPosition="after" [matTooltipDisabled]="!tooltipService.activatedTooltips">
    <div class="piece-attach piece-attach-right-top"></div>
    <div class="piece-attach piece-attach-right-bottom"></div>
    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="backspace" (click)="onClickErase()"
-        matTooltip="Effacer le contenu de cette tuile."
+        [matTooltip]="translate.instant('clearPiece_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
    </div>
    <div class="piece-form">
-        <div class="piece-form-title">Objectif(s) pédagogique</div>
+        <div class="piece-form-title">{{'gameEducationnalObjective_title' | translate}}</div>
        <mat-icon class="piece-form-comment" fontIcon="comment" *ngIf="scenario.comments.length > 0"></mat-icon>
        <div class="piece-form-objective">
-            <label for="objective">Commun pour le jeu</label>
+            <label for="objective">{{'gameEducationnalObjective_objective_label' | translate}}</label>
-            <textarea name="objective" [(ngModel)]="gameEducationnalObjective.objective" (change)="editTrace($event, 'Obj_game')" placeholder="- Améliorer les softskills&#10;- Apprendre à coopérer"
+            <textarea name="objective" [(ngModel)]="gameEducationnalObjective.objective" (change)="editTrace($event, 'Obj_game')" [placeholder]="translate.instant('gameEducationnalObjective_objective_placeholder')"
-            matTooltip="Ce que l’on veut atteindre en situation de formation. Commencer chaque objectif par un verbe. Si votre jeu est composé de plusieurs missions, distinguez les objectifs globaux du jeu et les objectifs de chaque mission."
+            [matTooltip]="translate.instant('gameEducationnalObjective_objective_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
        </div>
        <div class="piece-form-footer">Sorbonne Université, LIP6 - IMT Nord Europe</div>

--- a/src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.ts
+++ b/src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.ts
@@ -6,6 +6,7 @@ import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/clean-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { Trace } from 'src/app/class/trace/trace';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-game-educationnal-objective',
@@ -17,7 +18,7 @@ export class GameEducationnalObjectiveComponent implements OnInit {
  @Input() scenario: Scenario = new Scenario();
  @Input() gameEducationnalObjective: GameEducationnalObjective = new GameEducationnalObjective();
-  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog, protected translate: TranslateService) { }
  ngOnInit(): void {
  }
@@ -32,7 +33,7 @@ export class GameEducationnalObjectiveComponent implements OnInit {
  }
  onClickErase(): void {
-    const dialogRef = this.dialog.open(CleanDialogComponent, { data: 'Objectif pédagogique' });
+    const dialogRef = this.dialog.open(CleanDialogComponent, { data: this.translate.instant('gameEducationnalObjective_title') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.gameEducationnalObjective.objective = '';

--- a/src/app/pieces/mission-context/mission-context.component.html
+++ b/src/app/pieces/mission-context/mission-context.component.html
 <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
 [class]="pieceDetailsService.piece == scenario.missions[i] ? 'isActive' : 'border'"
-matTooltip="La mission est commune à tous les Rôles"
+[matTooltip]="translate.instant('mission_tooltip')"
 matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
    <div class="piece-attach piece-attach-left-top"></div>
    <div class="piece-attach piece-attach-right"></div>
@@ -8,40 +8,40 @@ matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedToolt
    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="add" (click)="onClickAdd()"
-        matTooltip="Ajouter une mission."
+        [matTooltip]="translate.instant('mission_add_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="backspace" (click)="onClickErase()"
-        matTooltip="Effacer le contenu de cette tuile."
+        [matTooltip]="translate.instant('clearPiece_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="delete" (click)="onClickDelete()" *ngIf="canDelete()"
-        matTooltip="Supprimer la mission."
+        [matTooltip]="translate.instant('mission_delete_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
    </div>
    <div class="piece-form">
-        <div class="piece-form-title">Contexte de la mission {{i+1}}</div>
+        <div class="piece-form-title">{{'missionContext_title' | translate}} {{i+1}}</div>
        <div class="piece-form-duration">
-            <label for="duration">Durée</label>
+            <label for="duration">{{'missionContext_duration_label' | translate}}</label>
-            <input name="duration" type="text" [(ngModel)]="missionContext.duration" (change)="editTrace($event, 'Duration_m')" placeholder="1h"
+            <input name="duration" type="text" [(ngModel)]="missionContext.duration" (change)="editTrace($event, 'Duration_m')" [placeholder]="translate.instant('missionContext_duration_placeholder')"
-            matTooltip="Combien de temps va durer la mission ?"
+            [matTooltip]="translate.instant('missionContext_duration_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>   
        </div>
        <div class="piece-form-intrigue">
-            <label for="intrigue">Intrigue</label>
+            <label for="intrigue">{{'missionContext_intrigue_label' | translate}}</label>
-            <textarea name="intrigue" [(ngModel)]="missionContext.intrigue" (change)="editTrace($event, 'Plot_m')" placeholder="Concevez un site web ergonomique pour votre premier client"  
+            <textarea name="intrigue" [(ngModel)]="missionContext.intrigue" (change)="editTrace($event, 'Plot_m')" [placeholder]="translate.instant('missionContext_intrigue_placeholder')"
-            matTooltip="Quelle est l’histoire de la mission ? Quel est l’enjeu pour les joueurs ?"
+            [matTooltip]="translate.instant('missionContext_intrigue_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
        </div>
        <div class="piece-form-communication">
-            <label for="communication">Moyen(s) de communication</label>
+            <label for="communication">{{'missionContext_communication_label' | translate}}</label>
-            <textarea name="communication" [(ngModel)]="missionContext.communication" (change)="editTrace($event, 'Communication')" placeholder="Chat en ligne, vocal en ligne, face à face, talkie walkie, pigeon voyageur..."
+            <textarea name="communication" [(ngModel)]="missionContext.communication" (change)="editTrace($event, 'Communication')" [placeholder]="translate.instant('missionContext_communication_placeholder')"
-            matTooltip="Comment les joueurs vont-ils communiquer entre eux : à l'oral, par chat, en vocal sur ordinateur, par messages, etc."
+            [matTooltip]="translate.instant('missionContext_communication_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
        </div>
        <div class="piece-form-divers">
-            <label for="divers">Autre</label>
+            <label for="divers">{{'missionContext_other_label' | translate}}</label>
-            <textarea name="divers" [(ngModel)]="missionContext.various" (change)="editTrace($event, 'Other_m')" placeholder="Contexte d’utilisation : lieu, présence de tuteur/formateur, à quel moment du cursus utiliser ce jeu, matériel nécessaire, public cible"
+            <textarea name="divers" [(ngModel)]="missionContext.various" (change)="editTrace($event, 'Other_m')" [placeholder]="translate.instant('missionContext_other_placeholder')"
-            matTooltip="Tout autre élément que vous souhaiteriez prendre en compte dans la mission et non défini dans les tuiles"
+            [matTooltip]="translate.instant('missionContext_other_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
        </div>
    </div>

--- a/src/app/pieces/mission-context/mission-context.component.ts
+++ b/src/app/pieces/mission-context/mission-context.component.ts
@@ -9,6 +9,7 @@ import { SuppressDialogComponent } from 'src/app/components/dialogs/suppress-dia
 import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/clean-dialog.component';
 import { CreateDialogComponent } from 'src/app/components/dialogs/create-dialog/create-dialog.component';
 import { Trace } from 'src/app/class/trace/trace';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-mission-context',
@@ -17,7 +18,7 @@ import { Trace } from 'src/app/class/trace/trace';
 })
 export class MissionContextComponent implements OnInit {
-  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog, protected translate: TranslateService) { }
  @Input() missionContext: MissionContext = new MissionContext();
  @Input() scenario: Scenario = new Scenario();
@@ -36,7 +37,7 @@ export class MissionContextComponent implements OnInit {
  }
  onClickAdd(): void {
-    const dialogRef = this.dialog.open(CreateDialogComponent, { data: 'une nouvelle Mission' });
+    const dialogRef = this.dialog.open(CreateDialogComponent, { data: this.translate.instant('mission_new') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.scenario.missions.push(new Mission());
@@ -48,7 +49,7 @@ export class MissionContextComponent implements OnInit {
  }
  onClickErase(): void {
-    const dialogRef = this.dialog.open(CleanDialogComponent, { data: 'Contexte de la mission '+(this.i+1) });
+    const dialogRef = this.dialog.open(CleanDialogComponent, { data: this.translate.instant('missionContext_clean')+' '+(this.i+1) });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.missionContext.duration = '';
@@ -63,7 +64,7 @@ export class MissionContextComponent implements OnInit {
  } 
  onClickDelete(): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'cette Mission '+(this.i+1) });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('mission_delete')+' '+(this.i+1) });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.scenario.missions.splice(this.i, 1);

--- a/src/app/pieces/role/role.component.html
+++ b/src/app/pieces/role/role.component.html
--- a/src/app/pieces/role/role.component.ts
+++ b/src/app/pieces/role/role.component.ts
@@ -19,6 +19,7 @@ import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/cl
 import { CreateDialogComponent } from 'src/app/components/dialogs/create-dialog/create-dialog.component';
 import { Trace } from 'src/app/class/trace/trace';
 import { MinimapService } from 'src/app/services/minimap/minimap.service';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-role',
@@ -33,7 +34,7 @@ export class RoleComponent implements OnInit {
  @Input() i: number = 0;
  @Input() missionIndex: number = 0;
-  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog, private minimapService: MinimapService) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog, private minimapService: MinimapService, protected translate: TranslateService) { }
  ngOnInit(): void {
    this.mission.equalizeLengths();
@@ -50,7 +51,7 @@ export class RoleComponent implements OnInit {
  }
  onClickAdd(): void {
-    const dialogRef = this.dialog.open(CreateDialogComponent, { data: 'un nouveau Rôle pour la Mission '+(this.missionIndex+1) });
+    const dialogRef = this.dialog.open(CreateDialogComponent, { data: this.translate.instant('role_new')+' '+(this.missionIndex+1) });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.mission.roles.push(new Role());
@@ -61,7 +62,7 @@ export class RoleComponent implements OnInit {
  }
  onClickErase(): void {
-    const dialogRef = this.dialog.open(CleanDialogComponent, { data: 'Role '+(this.role.intitule ? '<'+this.role.intitule+'>' : (this.i+1)) });
+    const dialogRef = this.dialog.open(CleanDialogComponent, { data: this.translate.instant('role_clean')+' '+(this.role.intitule ? '<'+this.role.intitule+'>' : (this.i+1)) });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.role.intitule = '';
@@ -91,7 +92,7 @@ export class RoleComponent implements OnInit {
  }
  onClickDelete(): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'ce Rôle '+(this.role.intitule ? '<'+this.role.intitule+'>' : this.i+1) });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('role_delete')+' '+(this.role.intitule ? '<'+this.role.intitule+'>' : this.i+1) });
    dialogRef.afterClosed().subscribe(result => {
      let missionIndex: number = this.scenario.missions.findIndex(mission => mission == this.mission);
      if (result == true) {
@@ -119,7 +120,7 @@ export class RoleComponent implements OnInit {
  }
  removeEducationnalObjective(index: number): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'cette Objectif Pédagogique' });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('role_objective_delete') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.role.educationnalObjectives.splice(index, 1);
@@ -138,7 +139,7 @@ export class RoleComponent implements OnInit {
  }
  removeRessource(index: number): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'cette Ressource' });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('role_ressource_delete') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.role.tasks.forEach(inlineTasks => {
@@ -166,7 +167,7 @@ export class RoleComponent implements OnInit {
  }
  removeSupplementaryRole(index: number) {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'ce Rôle Supplémentaire'+(this.role.supplementaryRoles[index].name ? ' <'+this.role.supplementaryRoles[index].name+'>' : '') });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('role_supplementaryRole_delete')+(this.role.supplementaryRoles[index].name ? ' <'+this.role.supplementaryRoles[index].name+'>' : '') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.role.supplementaryRoles.splice(index, 1);
@@ -202,7 +203,7 @@ export class RoleComponent implements OnInit {
  }
  removeReward(index: number): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'cette Récompense' });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('role_reward_delete') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.role.rewards.splice(index, 1);
@@ -245,7 +246,7 @@ export class RoleComponent implements OnInit {
  }
  removeObject(i: number, j: number): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'cet Objet de la Récompense' });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('role_reward_type_object_delete') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.getObjectsReward(i).objects.splice(j, 1);

--- a/src/app/pieces/rules/rules.component.html
+++ b/src/app/pieces/rules/rules.component.html
@@ -3,29 +3,29 @@
    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="backspace" (click)="onClickErase()"
-        matTooltip="Effacer le contenu de cette tuile."
+        [matTooltip]="translate.instant('clearPiece_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
    </div>
    <div class="piece-form">
        <div class="piece-form-rules">
-            <div class="piece-form-title">Règles du jeu</div>  
+            <div class="piece-form-title">{{'rules_title' | translate}}</div>  
            <textarea [(ngModel)]="scenario.gameRules" (change)="editTrace($event,'rules')"
-            matTooltip="Éléments importants à prendre en compte dans les règles du jeu"
+            [matTooltip]="translate.instant('rules_rule_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
        </div>
        <div class="piece-form-ressources">
-            <div class="piece-form-title">Ressources / objets</div>
+            <div class="piece-form-title">{{'rules_ressource_title' | translate}}</div>
            <div class="piece-form-ressources-object">
                <div class="piece-form-ressources-object-infos" *ngFor="let ressource of scenario.ressources; let i = index"
-                matTooltip="Objets, ressources disponibles pour TOUS les rôles"
+                [matTooltip]="translate.instant('rules_ressource_tooltip')"
                matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                    <div class="piece-form-ressources-object-infos-name">
-                        <label for="name">Nom</label>
+                        <label for="name">{{'rules_ressource_name_label' | translate}}</label>
                        <input name="name" type="text" [(ngModel)]="ressource.name" (change)="editTrace($event,'Ressource_['+i+']_name')"/>
                    </div>
                    <div class="piece-form-ressources-object-infos-quantity">
-                        <label for="quantity">Quantité</label>
+                        <label for="quantity">{{'rules_ressource_quantity_label' | translate}}</label>
                        <input name="quantity" type="number" min="1"[(ngModel)]="ressource.number" (change)="editTrace($event,'Ressource_['+i+']_quantity')"/>
                    </div>
                    <button mat-button (click)="removeRessource(i)"><mat-icon fontIcon="remove"></mat-icon></button>                           

--- a/src/app/pieces/rules/rules.component.ts
+++ b/src/app/pieces/rules/rules.component.ts
@@ -9,6 +9,7 @@ import { PieceDetailsService } from 'src/app/services/piece-details/piece-detail
 import { Task } from 'src/app/class/task/task';
 import { Trace } from 'src/app/class/trace/trace';
 import { MinimapService } from 'src/app/services/minimap/minimap.service';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-rules',
@@ -20,7 +21,7 @@ export class RulesComponent implements OnInit {
  displayMenu: string = 'hide';
  @Input() scenario: Scenario = new Scenario();
-  constructor(protected tooltipService: TooltipService, public dialog: MatDialog, protected pieceDetailsService: PieceDetailsService, private minimapService: MinimapService) { }
+  constructor(protected tooltipService: TooltipService, public dialog: MatDialog, protected pieceDetailsService: PieceDetailsService, private minimapService: MinimapService, protected translate: TranslateService) { }
  ngOnInit(): void {
  }
@@ -33,7 +34,7 @@ export class RulesComponent implements OnInit {
  }
  onClickErase(): void {
-    const dialogRef = this.dialog.open(CleanDialogComponent, { data: 'Règles du jeu (cela inclut la suppression de toutes les ressources)' });
+    const dialogRef = this.dialog.open(CleanDialogComponent, { data: this.translate.instant('rules_clean') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.scenario.gameRules = '';
@@ -70,7 +71,7 @@ export class RulesComponent implements OnInit {
  }
  removeRessource(index: number): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'cette Ressource' });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('rules_delete') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.scenario.missions.forEach(mission => {

--- a/src/app/pieces/step/step.component.html
+++ b/src/app/pieces/step/step.component.html
 <div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
 [class]="pieceDetailsService.piece == step ? 'isActive' : 'border'"
-matTooltip="Permet de découper le scénario en grandes étapes."
+[matTooltip]="translate.instant('step_tooltip')"
 matTooltipPosition="below" [matTooltipDisabled]="!tooltipService.activatedTooltips">
    <div class="piece-attach piece-attach-right"></div>
    <div class="piece-attach piece-attach-left"></div>
    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="arrow_back_ios" (click)="moveStep('left'); editTrace($event,'Step_moveLeft')" *ngIf="index > 0"
-        matTooltip="Décaler la tuile vers la gauche. Dans le cas où une tuile est déjà présente, leurs places sont inversées."
+        [matTooltip]="translate.instant('moveLeft_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="backspace" (click)="onClickErase()"
-        matTooltip="Effacer le contenu de cette tuile."
+        [matTooltip]="translate.instant('clearPiece_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="delete" (click)="onClickDelete()"
-        matTooltip="Supprimer la tuile."
+        [matTooltip]="translate.instant('deletePiece_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="arrow_forward_ios" (click)="moveStep('right'); editTrace($event,'Step_moveRight')"
-        matTooltip="Décaler la tuile vers la droite. Dans le cas où une tuile est déjà présente, leurs places sont inversées."
+        [matTooltip]="translate.instant('moveRight_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
    </div>
    <div class="piece-form">
-        <div class="piece-form-title">Étape {{getStepNumber()}}</div>
+        <div class="piece-form-title">{{'step_title' | translate}} {{getStepNumber()}}</div>
        <mat-icon class="piece-form-comment" fontIcon="comment" *ngIf="step.comments.length > 0"></mat-icon>
        <textarea [(ngModel)]="step.description" [style.background-image]="index == FirstStepIndex() ? urlIcon : ''" (change)="editTrace($event,'Step_content')"></textarea>
        <div class="piece-form-duration"
-        matTooltip="Durée de l'étape' (en unité de temps, minutes ou tours). Il est conseillé d'utiliser les mêmes unités sur toutes les tuiles pour pouvoir comparer plus facilement les durées des actions."
+        [matTooltip]="translate.instant('step_duration_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
-            <label for="duration">Durée</label>
+            <label for="duration">{{'step_duration_label' | translate}}</label>
            <input name="duration" type="number" [(ngModel)]="step.duration" (input)="durationChange()" min="1" (change)="step.duration < 1 ? step.duration = 1 : ''; editTrace($event, 'Step_duration')"/>
            <select name="duration" [(ngModel)]="step.durationUnit" (change)="durationChange(); editTrace($event, 'Step_duration_unit')">
-                <option value="UT">UT</option>
+                <option value="UT">{{'step_duration_ut' | translate}}</option>
-                <option value="min">min</option>
+                <option value="min">{{'step_duration_min' | translate}}</option>
-                <option value="tours">tours</option>
+                <option value="tours">{{'step_duration_turn' | translate}}</option>
            </select>
        </div>
    </div>

--- a/src/app/pieces/step/step.component.ts
+++ b/src/app/pieces/step/step.component.ts
@@ -10,6 +10,7 @@ import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 import { Trace } from 'src/app/class/trace/trace';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { MinimapService } from 'src/app/services/minimap/minimap.service';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-step',
@@ -30,7 +31,7 @@ export class StepComponent implements OnInit {
  pieceWidth: number = 400;
  urlIcon: string = 'url("./assets/background-images/step.png")';
-  constructor(protected pieceDetailsService: PieceDetailsService, public dialog: MatDialog, protected tooltipService: TooltipService, private minimapService: MinimapService) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, public dialog: MatDialog, protected tooltipService: TooltipService, private minimapService: MinimapService, protected translate: TranslateService) { }
  ngOnInit(): void {
    this.setPieceWidth();
@@ -99,7 +100,7 @@ export class StepComponent implements OnInit {
  }
  onClickErase(): void {
-    const dialogRef = this.dialog.open(CleanDialogComponent, { data: 'Étape' });
+    const dialogRef = this.dialog.open(CleanDialogComponent, { data: this.translate.instant('step_clean') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.step.description = '';
@@ -121,7 +122,7 @@ export class StepComponent implements OnInit {
  }
  onClickDelete(): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'cette Étape de '+(this.parent instanceof Mission ? 'Mission' : 'Rôle') });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('step_delete')+' '+(this.parent instanceof Mission ? this.translate.instant('mission') : this.translate.instant('role_title')) });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        if (this.parent instanceof Mission) {

--- a/src/app/pieces/tasks/annexe-task/annexe-task.component.html
+++ b/src/app/pieces/tasks/annexe-task/annexe-task.component.html
--- a/src/app/pieces/tasks/annexe-task/annexe-task.component.ts
+++ b/src/app/pieces/tasks/annexe-task/annexe-task.component.ts
@@ -15,6 +15,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { IdentifierSnackbarComponent } from 'src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component';
 import { Trace } from 'src/app/class/trace/trace';
 import { MinimapService } from 'src/app/services/minimap/minimap.service';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-annexe-task',
@@ -42,7 +43,7 @@ export class AnnexeTaskComponent implements OnInit {
  antecedent: boolean = false;
  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog,
-    private _snackBar: MatSnackBar, private minimapService: MinimapService) { }
+    private _snackBar: MatSnackBar, private minimapService: MinimapService, protected translate: TranslateService) { }
  ngOnInit(): void {
    this.setPieceWidth();
@@ -90,7 +91,7 @@ export class AnnexeTaskComponent implements OnInit {
  }
  onClickErase(): void {
-    const dialogRef = this.dialog.open(CleanDialogComponent, { data: 'Tâche annexe' });
+    const dialogRef = this.dialog.open(CleanDialogComponent, { data: this.translate.instant('task_prefix')+' '+this.translate.instant('annexeTask_title') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.task.duration = 1;
@@ -124,7 +125,7 @@ export class AnnexeTaskComponent implements OnInit {
  }
  onClickDelete(): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'cette Tâche annexe' });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('task_prefix')+' '+this.translate.instant('annexeTask_title') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.role.tasks.forEach(inlineTasks => {

--- a/src/app/pieces/tasks/final-task/final-task.component.html
+++ b/src/app/pieces/tasks/final-task/final-task.component.html
--- a/src/app/pieces/tasks/final-task/final-task.component.ts
+++ b/src/app/pieces/tasks/final-task/final-task.component.ts
@@ -15,6 +15,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { IdentifierSnackbarComponent } from 'src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component';
 import { Trace } from 'src/app/class/trace/trace';
 import { MinimapService } from 'src/app/services/minimap/minimap.service';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-final-task',
@@ -42,7 +43,7 @@ export class FinalTaskComponent implements OnInit {
  antecedent: boolean = false;
  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog,
-    private _snackBar: MatSnackBar, private minimapService: MinimapService) { }
+    private _snackBar: MatSnackBar, private minimapService: MinimapService, protected translate: TranslateService) { }
  ngOnInit(): void {
    this.setPieceWidth();
@@ -90,7 +91,7 @@ export class FinalTaskComponent implements OnInit {
  }
  onClickErase(): void {
-    const dialogRef = this.dialog.open(CleanDialogComponent, { data: 'Tâche finale' });
+    const dialogRef = this.dialog.open(CleanDialogComponent, { data: this.translate.instant('finalTask_title') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.task.duration = 1;
@@ -136,7 +137,7 @@ export class FinalTaskComponent implements OnInit {
  }
  onClickDelete(): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'cette Tâche finale' });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('task_prefix')+' '+this.translate.instant('finalTask_title') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.role.tasks.forEach(inlineTasks => {

--- a/src/app/pieces/tasks/optionnal-task/optionnal-task.component.html
+++ b/src/app/pieces/tasks/optionnal-task/optionnal-task.component.html
--- a/src/app/pieces/tasks/optionnal-task/optionnal-task.component.ts
+++ b/src/app/pieces/tasks/optionnal-task/optionnal-task.component.ts
@@ -15,6 +15,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { IdentifierSnackbarComponent } from 'src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component';
 import { Trace } from 'src/app/class/trace/trace';
 import { MinimapService } from 'src/app/services/minimap/minimap.service';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-optionnal-task',
@@ -42,7 +43,7 @@ export class OptionnalTaskComponent implements OnInit {
  antecedent: boolean = false;
  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog,
-    private _snackBar: MatSnackBar, private minimapService: MinimapService) { }
+    private _snackBar: MatSnackBar, private minimapService: MinimapService, protected translate: TranslateService) { }
  ngOnInit(): void {
    this.setPieceWidth();
@@ -90,7 +91,7 @@ export class OptionnalTaskComponent implements OnInit {
  }
  onClickErase(): void {
-    const dialogRef = this.dialog.open(CleanDialogComponent, { data: 'Tâche optionnelle' });
+    const dialogRef = this.dialog.open(CleanDialogComponent, { data: this.translate.instant('optionnalTask_title') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.task.duration = 1;
@@ -135,7 +136,7 @@ export class OptionnalTaskComponent implements OnInit {
  }
  onClickDelete(): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'cette Tâche optionnelle' });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('task_prefix')+' '+this.translate.instant('optionnalTask_title') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.role.tasks.forEach(inlineTasks => {

--- a/src/app/pieces/tasks/random-event/random-event.component.html
+++ b/src/app/pieces/tasks/random-event/random-event.component.html
@@ -8,32 +8,32 @@
    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="backspace" (click)="onClickErase()"
-        matTooltip="Effacer le contenu de cette tuile."
+        [matTooltip]="translate.instant('clearPiece_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="delete" (click)="onClickDelete()"
-        matTooltip="Supprimer la tuile."
+        [matTooltip]="translate.instant('deletePiece_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <div class="piece-menu-directioncross">
            <div class="piece-menu-directioncross-left">
                <mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left'); editMoveTrace($event,'Task_moveLeft')"
-                matTooltip="Décaler la tuile vers la gauche. Dans le cas où une tuile est déjà présente, leurs places sont inversées."
+                [matTooltip]="translate.instant('moveLeft_tooltip')"
                matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>                
            </div>
            <div class="piece-menu-directioncross-updownarrows">
                <div class="piece-menu-updownarrows-up">
                    <mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top'); editMoveTrace($event,'Task_moveTop')"
-                    matTooltip="Décaler la tuile vers le haut (ceci placera la tuile à la fin de la ligne)."
+                    [matTooltip]="translate.instant('moveTop_tooltip')"
                    matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>                
                </div>
                <div class="piece-menu-directioncross-updownarrows-down">
                    <mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom'); editMoveTrace($event,'Task_moveBottom')"
-                    matTooltip="Décaler la tuile vers le bas (ceci placera la tuile à la fin de la ligne)."
+                    [matTooltip]="translate.instant('moveBottom_tooltip')"
                    matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
                </div>
            </div>
            <div class="piece-menu-directioncross-right">
                <mat-icon style="transform: rotate(0.5turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('right'); editMoveTrace($event,'Task_moveRight')"
-                matTooltip="Décaler la tuile vers la droite. Dans le cas où une tuile est déjà présente, leurs places sont inversées."
+                [matTooltip]="translate.instant('moveRight_tooltip')"
                matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
            </div>
        </div>
@@ -41,7 +41,7 @@
    <div class="piece-symbolchoice" [class]="displaySymbolChoice">
        <div class="piece-symbolchoice-header">
-            <label>Choisir un symbole de tâche commune :</label>
+            <label>{{'task_common_label' | translate}}</label>
            <div><mat-icon fontIcon="delete" (click)="setSymbol('','')"></mat-icon></div>
        </div>
        <div class="piece-symbolchoice-symbols">
@@ -70,9 +70,9 @@
    <div class="piece-prerequires" [class]="pieceDetailsService.piece == task ? displayPrequires : 'hide'">
        <div class="piece-prerequires-prerequires">
-            <label class="piece-prerequires-title">Antécédents</label>
+            <label class="piece-prerequires-title">{{'task_prerequire_antecedents_title' | translate}}</label>
            <div class="piece-prerequires-form">
-                <div style="text-align: center;" *ngIf="j == 0">La première tâche de la ligne ne peut pas avoir d'antécédent</div>
+                <div style="text-align: center;" *ngIf="j == 0">{{'task_prerequire_antecedents_err1' | translate}}</div>
                <ng-container *ngIf="hasPossibleAntecedents()">
                    <ng-container *ngFor="let inlineTask of role.tasks">
                        <ng-container *ngFor="let element of inlineTask; let index = index">
@@ -83,11 +83,11 @@
                        </ng-container>
                    </ng-container>
                </ng-container>
-                <div style="text-align: center;" *ngIf="!hasPossibleAntecedents() && j != 0">Veuillez d'abord entrer des identifiants aux tâches précédentes</div>
+                <div style="text-align: center;" *ngIf="!hasPossibleAntecedents() && j != 0">{{'task_prerequire_antecedents_err2' | translate}}</div>
            </div>
        </div>
        <div class="piece-prerequires-ressources">
-            <label class="piece-prerequires-title">Ressources & Compétences</label>
+            <label class="piece-prerequires-title">{{'task_prerequire_ressource_title' | translate}}</label>
            <div class="piece-prerequires-form">
                <ng-container *ngFor="let ressource of scenario.ressources">
                    <div class="piece-prerequires-ressources-element" *ngIf="ressource.name">
@@ -132,30 +132,30 @@
    <div class="piece-form">
        <div class="piece-form-top">
            <input class="piece-form-top-identifier" name="identifier" type="text" [value]="task.identifier" (change)="changeIdentifier($event)" placeholder="A" min="1" maxlength="5"
-            matTooltip="Identifiant de la tâche (ex: A, B, C, …)"
+            [matTooltip]="translate.instant('task_identifier_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
-            <div class="piece-form-top-title">Événement<br>aléatoire</div>
+            <div class="piece-form-top-title">{{'randomEvent_title1' | translate}}<br>{{'randomEvent_title2' | translate}}</div>
            <mat-icon class="piece-form-top-comment" fontIcon="comment" *ngIf="task.comments.length > 0"></mat-icon>
            <mat-icon class="piece-form-top-repeat" fontIcon="refresh" *ngIf="task.repeat.iteration > 0 || task.repeat.while != ''"></mat-icon>
            <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()"
-            matTooltip="Indicateur de tâche commune: si cette tâche doit être faite avec un autre rôle, mettez le même symbole sur la tâche de ces deux rôles"
+            [matTooltip]="translate.instant('task_common_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
            </button>    
        </div>
        <textarea class="piece-form-content" [(ngModel)]="task.objective" (change)="editTrace($event,'Task_action')" [style.background-image]="(i == findFirstIndexOfTaskType('event')[0] && j == findFirstIndexOfTaskType('event')[1]) ? urlIcon : ''"
-            placeholder="Le client modifie sa demande"
+            [placeholder]="translate.instant('randomEvent_action_placeholder')"
-            matTooltip="Action à effectuer (interagir avec un objet, parler avec quelqu'un, …)"
+            [matTooltip]="translate.instant('task_action_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
        <div class="piece-form-bottom">
            <div class="piece-form-bottom-duration"
-            matTooltip="Durée de la tâche (en unité de temps, minutes ou tours). Il est conseillé d'utiliser les mêmes unités sur toutes les tuiles pour pouvoir comparer plus facilement les durées des actions."
+            [matTooltip]="translate.instant('task_duration_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()" min="1" (change)="task.duration < 1 ? task.duration = 1 : ''; editTrace($event,'Task_duration')"/>
                <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange(); editTrace($event,'Task_duration_unit')">
-                    <option value="UT">UT</option>
+                    <option value="UT">{{'task_duration_ut' | translate}}</option>
-                    <option value="min">min</option>
+                    <option value="min">{{'task_duration_min' | translate}}</option>
-                    <option value="tours">tours</option> 
+                    <option value="tours">{{'task_duration_turn' | translate}}</option> 
                </select>
            </div>
            <mat-icon class="piece-form-bottom-character" fontIcon="person" *ngIf="task.characters.length > 0"
@@ -163,9 +163,9 @@
            [style.background]="task.characters.length > 1 ? 'linear-gradient('+ task.characters[0].color +','+ task.characters[task.characters.length-1].color +')' : 'white'"></mat-icon>
            <mat-icon class="piece-form-bottom-interrupt" fontIcon="front_hand" *ngIf="task.interrupt != ''"></mat-icon>
            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()"
-            matTooltip="Prérequis pour effectuer cette tâche"
+            [matTooltip]="translate.instant('task_prerequire_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
-                Prérequis
+                {{'task_prerequire_label' | translate}}
            </button>
        </div>
    </div>

--- a/src/app/pieces/tasks/random-event/random-event.component.ts
+++ b/src/app/pieces/tasks/random-event/random-event.component.ts
@@ -15,6 +15,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { IdentifierSnackbarComponent } from 'src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component';
 import { Trace } from 'src/app/class/trace/trace';
 import { MinimapService } from 'src/app/services/minimap/minimap.service';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-random-event',
@@ -42,7 +43,7 @@ export class RandomEventComponent implements OnInit {
  antecedent: boolean = false;
  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog,
-    private _snackBar: MatSnackBar, private minimapService: MinimapService) { }
+    private _snackBar: MatSnackBar, private minimapService: MinimapService, protected translate: TranslateService) { }
  ngOnInit(): void {
    this.setPieceWidth();
@@ -90,7 +91,7 @@ export class RandomEventComponent implements OnInit {
  }
  onClickErase(): void {
-    const dialogRef = this.dialog.open(CleanDialogComponent, { data: 'Événement aléatoire' });
+    const dialogRef = this.dialog.open(CleanDialogComponent, { data: this.translate.instant('randomEvent_title') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.task.duration = 1;
@@ -126,7 +127,7 @@ export class RandomEventComponent implements OnInit {
  }
  onClickDelete(): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'cet Événement aléatoire' });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('task_prefix')+' '+this.translate.instant('randomEvent_title') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.role.tasks.forEach(inlineTasks => {

--- a/src/app/pieces/tasks/repeat-task/repeat-task.component.html
+++ b/src/app/pieces/tasks/repeat-task/repeat-task.component.html
@@ -4,42 +4,42 @@
    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="backspace" (click)="onClickErase()"
-        matTooltip="Effacer le contenu de cette tuile."
+        [matTooltip]="translate.instant('clearPiece_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="delete" (click)="onClickDelete()"
-        matTooltip="Supprimer la tuile."
+        [matTooltip]="translate.instant('deletePiece_tooltip')"
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <div class="piece-menu-directioncross">
            <div class="piece-menu-directioncross-left">
                <mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left'); editMoveTrace($event,'Task_moveLeft')"
-                matTooltip="Décaler la tuile vers la gauche."
+                [matTooltip]="translate.instant('moveLeftFinal_tooltip')"
                matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>                
            </div>
            <div class="piece-menu-directioncross-updownarrows">
                <div class="piece-menu-updownarrows-up">
                    <mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top'); editMoveTrace($event,'Task_moveTop')"
-                    matTooltip="Décaler la tuile vers le haut (ceci placera la tuile à la fin de la ligne)."
+                    [matTooltip]="translate.instant('moveTop_tooltip')"
                    matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>                
                </div>
                <div class="piece-menu-directioncross-updownarrows-down">
                    <mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom'); editMoveTrace($event,'Task_moveBottom')"
-                    matTooltip="Décaler la tuile vers le bas (ceci placera la tuile à la fin de la ligne)."
+                    [matTooltip]="translate.instant('moveBottom_tooltip')"
                    matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
                </div>
            </div>
            <div class="piece-menu-directioncross-right">
                <mat-icon style="transform: rotate(0.5turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('right'); editMoveTrace($event,'Task_moveRight')"
-                matTooltip="Décaler la tuile vers la droite."
+                [matTooltip]="translate.instant('moveRightFinal_tooltip')"
                matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
            </div>
        </div>
    </div>
    <div class="piece-form">
-        <label>Recommencer<br>le tour jusqu'à ce que :</label>
+        <label>{{'repeatTask_title' | translate}}<br>{{'repeatTask_while' | translate}}</label>
        <textarea [(ngModel)]="task.objective" [(ngModel)]="task.objective" (change)="editTrace($event,'Task_action')" [style.background-image]="(i == findFirstIndexOfTaskType('repeat')[0] && j == findFirstIndexOfTaskType('repeat')[1]) ? urlIcon : ''"
-            placeholder="Faire valider au commanditaire"
+            [placeholder]="translate.instant('repeatTask_action_placeholder')"
-            matTooltip="Action à effectuer (interagir avec un objet, parler avec quelqu'un, …)"
+            [matTooltip]="translate.instant('task_action_tooltip')"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
    </div>
    <mat-icon class="piece-form-comment" fontIcon="comment" *ngIf="task.comments.length > 0"></mat-icon>

--- a/src/app/pieces/tasks/repeat-task/repeat-task.component.ts
+++ b/src/app/pieces/tasks/repeat-task/repeat-task.component.ts
@@ -10,6 +10,7 @@ import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/cl
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { Trace } from 'src/app/class/trace/trace';
 import { MinimapService } from 'src/app/services/minimap/minimap.service';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-repeat-task',
@@ -32,7 +33,7 @@ export class RepeatTaskComponent implements OnInit {
  urlIcon: string = 'url("./assets/background-images/repeatTask.png")';
-  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog, private minimapService: MinimapService) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog, private minimapService: MinimapService, protected translate: TranslateService) { }
  ngOnInit(): void {
    this.mission.equalizeLengths();
@@ -40,7 +41,7 @@ export class RepeatTaskComponent implements OnInit {
  }
  onClickErase(): void {
-    const dialogRef = this.dialog.open(CleanDialogComponent, { data: 'Répétition de tour' });
+    const dialogRef = this.dialog.open(CleanDialogComponent, { data: this.translate.instant('repeatTask_title') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.task.objective = '';
@@ -60,7 +61,7 @@ export class RepeatTaskComponent implements OnInit {
  }
  onClickDelete(): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'cette Répétition de tour' });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('task_prefix')+' '+this.translate.instant('repeatTask_title') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.role.tasks.forEach(inlineTasks => {

--- a/src/app/pieces/tasks/task/task.component.html
+++ b/src/app/pieces/tasks/task/task.component.html
--- a/src/app/pieces/tasks/task/task.component.ts
+++ b/src/app/pieces/tasks/task/task.component.ts
@@ -15,6 +15,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { IdentifierSnackbarComponent } from 'src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component';
 import { Trace } from 'src/app/class/trace/trace';
 import { MinimapService } from 'src/app/services/minimap/minimap.service';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-task',
@@ -42,7 +43,7 @@ export class TaskComponent implements OnInit {
  antecedent: boolean = false;
  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog,
-    private _snackBar: MatSnackBar, private minimapService: MinimapService) { }
+    private _snackBar: MatSnackBar, private minimapService: MinimapService, protected translate: TranslateService) { }
  ngOnInit(): void {
    this.setPieceWidth();
@@ -90,7 +91,7 @@ export class TaskComponent implements OnInit {
  }
  onClickErase(): void {
-    const dialogRef = this.dialog.open(CleanDialogComponent, { data: 'Tâche' });
+    const dialogRef = this.dialog.open(CleanDialogComponent, { data: this.translate.instant('normalTask_title') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.task.duration = 1;
@@ -135,7 +136,7 @@ export class TaskComponent implements OnInit {
  }
  onClickDelete(): void {
-    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'cette Tâche' });
+    const dialogRef = this.dialog.open(SuppressDialogComponent, { data: this.translate.instant('task_prefix')+' '+this.translate.instant('normalTask_title') });
    dialogRef.afterClosed().subscribe(result => {
      if (result == true) {
        this.role.tasks.forEach(inlineTasks => {

--- a/src/app/sider-pieces/characters/characters.component.html
+++ b/src/app/sider-pieces/characters/characters.component.html
 <div class="piece"
-matTooltip="Permet d'affecter un ou des personnages précédemment créé(s) à la tâche."
+[matTooltip]="translate.instant('sider_char_tooltip')"
 matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
    <div class="piece-form">
        <div class="piece-form-select">
-            <div class="piece-form-title">Affecter un personnage non joueur déjà créé</div>
+            <div class="piece-form-title">{{'sider_char_select_title' | translate}}</div>
            <div class="piece-form-select-container">
                <mat-icon fontIcon="person"></mat-icon>
                <div class="piece-form-select-container-select">
-                    <label for="name">Nom</label>
+                    <label for="name">{{'char_name_label' | translate}}</label>
                    <select name="name" [(ngModel)]="selectedAssignCharacter">
                        <ng-container *ngFor="let character of scenario.characters">
                            <option [ngValue]="character" *ngIf="notAlreadyAssigned(character)">{{character.name}}</option>
@@ -15,29 +15,29 @@ matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedToolt
                    </select>
                </div>
            </div>
-            <button mat-button (click)="assignCharacter()">Sélectionner</button>
+            <button mat-button (click)="assignCharacter()">{{'sider_char_button_select' | translate}}</button>
        </div>
        <div>
-            <div class="piece-form-title">Personnage(s) non joueur utilisé(s)</div>
+            <div class="piece-form-title">{{'sider_chars_title' | translate}}</div>
            <div class="piece-form-character-create" *ngFor="let character of task.characters, let index = index">
                <div class="piece-form-character-create-top">
                    <mat-icon fontIcon="person"></mat-icon>
                    <div class="piece-form-character-create-top-name">
-                        <label for="name">Nom</label>
+                        <label for="name">{{'char_name_label' | translate}}</label>
                        <input name="name" type="text" [(ngModel)]="character.name" disabled/>                    
                    </div>
                </div>
                <div class="piece-form-character-infos">
                    <div class="piece-form-character-infos-description">
-                        <label for="description">Description</label>
+                        <label for="description">{{'char_description_label' | translate}}</label>
                        <textarea name="description" [(ngModel)]="character.description" disabled></textarea>
                    </div>
                    <div class="piece-form-character-infos-color">
-                        <label for="color">Couleur</label>
+                        <label for="color">{{'char_color_label' | translate}}</label>
                        <input name="color" type="color" [(ngModel)]="character.color" disabled/>
                    </div>
                </div>
-                <button mat-button (click)="unassignCharacter(index)">Retirer de ma tâche</button>
+                <button mat-button (click)="unassignCharacter(index)">{{'sider_char_button_unselect' | translate}}</button>
            </div>
        </div>

--- a/src/app/sider-pieces/characters/characters.component.ts
+++ b/src/app/sider-pieces/characters/characters.component.ts
 import { Component, Input, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { TranslateService } from '@ngx-translate/core';
 import { Character } from 'src/app/class/character/character';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { Task } from 'src/app/class/task/task';
@@ -20,7 +21,7 @@ export class CharactersComponent implements OnInit {
  selectedAssignCharacter!: Character | undefined;
  selectedDeleteCharacterIndex!: number;
-  constructor(protected tooltipService: TooltipService, public dialog: MatDialog, private pieceDetailsService: PieceDetailsService) { }
+  constructor(protected tooltipService: TooltipService, public dialog: MatDialog, private pieceDetailsService: PieceDetailsService, protected translate: TranslateService) { }
  ngOnInit(): void {
  }

--- a/src/app/sider-pieces/comments/comments.component.html
+++ b/src/app/sider-pieces/comments/comments.component.html
 <div class="piece"
-matTooltip="Permet de rajouter des commentaires sur une tuile"
+[matTooltip]="translate.instant('comments_tooltip')"
 matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
    <div class="piece-form">
-        <div class="piece-form-title">Commentaires</div>
+        <div class="piece-form-title">{{'comments_title' | translate}}</div>
        <div class="piece-form-comments">
            <app-comment *ngFor="let comment of piece.comments, let i = index" [comment]="comment" [comments]="piece.comments" [index]="i" [scenario]="scenario"></app-comment>
@@ -10,10 +10,10 @@ matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedToolt
        <div class="piece-form-newcomment">
            <div class="piece-form-newcomment-form">
-                <label>Nouveau commentaire</label>
+                <label>{{'comments_newComment' | translate}}</label>
                <textarea [(ngModel)]="newComment" (change)="editTrace($event,'newComment')"></textarea>
            </div>
-            <button mat-button (click)="addComment()">Ajouter un commentaire</button>
+            <button mat-button (click)="addComment()">{{'comments_button_newComment' | translate}}</button>
        </div>
    </div>

--- a/src/app/sider-pieces/comments/comments.component.ts
+++ b/src/app/sider-pieces/comments/comments.component.ts
@@ -8,6 +8,7 @@ import { Comment } from 'src/app/class/comment/comment';
 import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 import { Trace } from 'src/app/class/trace/trace';
 import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-comments',
@@ -20,7 +21,7 @@ export class CommentsComponent implements OnInit {
  @Input() scenario: Scenario = new Scenario();
  newComment: string = '';
-  constructor(protected tooltipService: TooltipService, private pieceDetailsService: PieceDetailsService) { }
+  constructor(protected tooltipService: TooltipService, private pieceDetailsService: PieceDetailsService, protected translate: TranslateService) { }
  ngOnInit(): void {
  }

--- a/src/app/sider-pieces/interupt/interupt.component.html
+++ b/src/app/sider-pieces/interupt/interupt.component.html
 <div class="piece"
-matTooltip="Une tâche peut être interrompue par un autre rôle, ceci est plutôt utilisé dans les jeux compétitifs"
+[matTooltip]="translate.instant('interruption_tooltip')"
 matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
    <div class="piece-form">
        <div class="piece-form-header">
            <mat-icon fontIcon="front_hand"></mat-icon>
            <div class="piece-form-header-label">
-                <label>Interruption de la tâche</label>
+                <label>{{'interruption_title' | translate}}</label>
            </div>
        </div>
        <div class="piece-form-textarea">

--- a/src/app/sider-pieces/interupt/interupt.component.ts
+++ b/src/app/sider-pieces/interupt/interupt.component.ts
 import { Component, Input, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { Task } from 'src/app/class/task/task';
 import { Trace } from 'src/app/class/trace/trace';
@@ -15,7 +16,7 @@ export class InteruptComponent implements OnInit {
  @Input() task: Task = new Task('normal');
  @Input() scenario: Scenario = new Scenario();
-  constructor(protected tooltipService: TooltipService, private pieceDetailsService: PieceDetailsService) { }
+  constructor(protected tooltipService: TooltipService, private pieceDetailsService: PieceDetailsService, protected translate: TranslateService) { }
  ngOnInit(): void {
  }

--- a/src/app/sider-pieces/repeat/repeat.component.html
+++ b/src/app/sider-pieces/repeat/repeat.component.html
 <div class="piece"
-matTooltip="Une tâche peut-être répétée un certain nombre de fois avant d'être résolue"
+[matTooltip]="translate.instant('repeat_tooltip')"
 matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
    <div class="piece-form">
        <div class="piece-form-header">
            <mat-icon fontIcon="refresh"></mat-icon>
            <div class="piece-form-header-for">
-                <label>Répéter</label>
+                <label>{{'repeat_title1' | translate}}</label>
                <input type="text" [(ngModel)]="task.repeat.iteration" (change)="editTrace($event,'repeat_nbTimes')"/>
-                <label>fois</label>
+                <label>{{'repeat_title2' | translate}}</label>
            </div>
        </div>
        <div class="piece-form-while">
-            <label>ou jusqu'à ce que :</label>
+            <label>{{'repeat_title3' | translate}}</label>
            <textarea [(ngModel)]="task.repeat.while" (change)="editTrace($event,'repeat_stopCondition')"></textarea>
        </div>    
    </div>

--- a/src/app/sider-pieces/repeat/repeat.component.ts
+++ b/src/app/sider-pieces/repeat/repeat.component.ts
 import { Component, Input, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { Task } from 'src/app/class/task/task';
 import { Trace } from 'src/app/class/trace/trace';
@@ -15,7 +16,7 @@ export class RepeatComponent implements OnInit {
  @Input() scenario: Scenario = new Scenario();
  @Input() task: Task = new Task('normal');
-  constructor(protected tooltipService: TooltipService, private pieceDetailsService: PieceDetailsService) { }
+  constructor(protected tooltipService: TooltipService, private pieceDetailsService: PieceDetailsService, protected translate: TranslateService) { }
  ngOnInit(): void {
  }

--- a/src/app/sider-pieces/role-occurence/role-occurence.component.html
+++ b/src/app/sider-pieces/role-occurence/role-occurence.component.html
 <div class="piece"
-matTooltip="Ceci permet de choisir combien de joueurs représenteront chaque rôle si le nombre de joueurs est amené à varier"
+[matTooltip]="translate.instant('occurence_tooltip')"
 matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
    <div class="piece-form">
-        <div class="piece-title">Occurrence du rôle</div>
+        <div class="piece-title">{{'occurence_title' | translate}}</div>
        <div class="piece-form-occurrence" *ngFor="let occurence of role.occurences, let i = index">
            <div class="piece-form-occurrence-text">
                <input type="number" [(ngModel)]="occurence.iteration" (change)="editTrace($event,'Occurrence_['+i+']_nbRole')"/>
-                <label> entre </label>
+                <label> {{'occurence_between' | translate}} </label>
                <input type="number" [(ngModel)]="occurence.min" (change)="editTrace($event,'Occurrence_['+i+']_playersMin')"/>
-                <label> et </label>
+                <label> {{'occurence_and' | translate}} </label>
                <input type="number" [(ngModel)]="occurence.max" (change)="editTrace($event,'Occurrence_['+i+']_playersMax')"/>
-                <label> joueurs</label>  
+                <label> {{'occurence_player' | translate}}</label>  
            </div>
            <button mat-button (click)="removeOccurrence(i)"><mat-icon fontIcon="remove"></mat-icon></button>
        </div>

--- a/src/app/sider-pieces/role-occurence/role-occurence.component.ts
+++ b/src/app/sider-pieces/role-occurence/role-occurence.component.ts
 import { Component, Input, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 import { RoleOccurrence } from 'src/app/class/role-occurrence/role-occurrence';
 import { Role } from 'src/app/class/role/role';
 import { Scenario } from 'src/app/class/scenario/scenario';
@@ -16,7 +17,7 @@ export class RoleOccurenceComponent implements OnInit {
  @Input() scenario: Scenario = new Scenario();
  @Input() role: Role = new Role();
-  constructor(protected tooltipService: TooltipService, private pieceDetailsService: PieceDetailsService) { }
+  constructor(protected tooltipService: TooltipService, private pieceDetailsService: PieceDetailsService, protected translate: TranslateService) { }
  ngOnInit(): void {
  }

--- a/src/app/sider-pieces/supplementary-task/supplementary-task.component.html
+++ b/src/app/sider-pieces/supplementary-task/supplementary-task.component.html
 <div class="piece" [style.background]="task.supplementaryRole ?
    'linear-gradient(165deg, rgba(154,213,236,1) 0%, rgba(154,213,236,1) 55%,'+task.supplementaryRole.color+' 55%,'+task.supplementaryRole.color+' 100%)'
    : 'linear-gradient(165deg, rgba(154,213,236,1) 0%, rgba(154,213,236,1) 55%, rgba(0,0,0,1) 55%, rgba(0,0,0,1) 100%)'"
-    matTooltip="Sert à associer ou non une tâche à un Rôle supplémentaire"
+    [matTooltip]="translate.instant('supplementaryRole_tooltip')"
    matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
    <div class="piece-form">
-        <div class="piece-title">Tâche liée au rôle supplémentaire</div>
+        <div class="piece-title">{{'supplementaryRole_title' | translate}}</div>
        <!--
        <div class="piece-form-checkbox">
            <input type="checkbox" [(ngModel)]="checkbox"/>
@@ -12,9 +12,9 @@
        </div>
        œ-->
        <div class="piece-form-select">
-            <label>Rôle</label>
+            <label>{{'supplementaryRole_label' | translate}}</label>
            <select [(ngModel)]="task.supplementaryRole" (change)="editTrace($event,'supplementaryRole')">
-                <option selected [ngValue]="undefined">Aucun</option>
+                <option selected [ngValue]="undefined">{{'supplementaryRole_none' | translate}}</option>
                <ng-container *ngFor="let supplementaryRole of role.supplementaryRoles">
                    <option [ngValue]="supplementaryRole">{{supplementaryRole.name}}</option>
                </ng-container>

--- a/src/app/sider-pieces/supplementary-task/supplementary-task.component.ts
+++ b/src/app/sider-pieces/supplementary-task/supplementary-task.component.ts
@@ -5,6 +5,7 @@ import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
 import { Trace } from 'src/app/class/trace/trace';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
  selector: 'app-supplementary-task',
@@ -17,7 +18,7 @@ export class SupplementaryTaskComponent implements OnInit {
  @Input() task: Task = new Task('normal');
  @Input() role: Role = new Role();
-  constructor(protected tooltipService: TooltipService, private pieceDetailsService: PieceDetailsService) { }
+  constructor(protected tooltipService: TooltipService, private pieceDetailsService: PieceDetailsService, protected translate: TranslateService) { }
  ngOnInit(): void {
  }

--- a/src/assets/lang/en.json
+++ b/src/assets/lang/en.json
--- a/src/assets/lang/fr.json
+++ b/src/assets/lang/fr.json