tooltips + load file with only the load button not an input

src/app/app.component.html

@@ -117,8 +117,12 @@
             <input name="unity" type="checkbox" />
             <label for="unity">Intégrer le jeu sous Unity</label>
         </div>
+        <div class="container-settings-mode">
+            <input name="tooltip" type="checkbox" [(ngModel)]="tooltipService.activatedTooltips"/>
+            <label for="tooltip">Activer les aides</label>
+        </div>
         <button mat-mini-fab color="white" (click)="downloadFile()"><mat-icon fontIcon="download_file"></mat-icon></button>
-        <button mat-mini-fab color="white"><mat-icon fontIcon="upload-file"></mat-icon></button>
-        <input type="file" (change)="onFileSelected($event)">
+        <button mat-mini-fab color="white" (click)="selectFile()"><mat-icon fontIcon="upload-file"></mat-icon></button>
+        <input type="file" #fileInput style="display: none" (change)="onFileSelected($event)"> 
     </div>
 </div>
\ No newline at end of file

src/app/app.component.scss

@@ -166,7 +166,7 @@
 
     &-settings {
         position: fixed;
-        width: 300px;
+        width: 400px;
         right: 350px;
         display: flex;
         flex-direction: row;
@@ -174,7 +174,7 @@
         z-index: 2;
 
         &-mode {
-            width: 150px;
+            width: 120px;
             background-color: white;
             box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
             padding: 5px;
@@ -187,4 +187,8 @@
             height: 50px;
         }
     }
+}
+
+::ng-deep .mat-tooltip {
+    font-size: 13px;
 }
\ No newline at end of file

src/app/app.component.ts

-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
 import { Mission } from './class/mission/mission';
 import { Scenario } from './class/scenario/scenario';
 import { Step } from './class/step/step';
@@ -23,7 +23,7 @@ import { ObjectsReward } from './class/rewards/objects-reward/objects-reward';
 import { ObjectiveReward } from './class/rewards/objective-reward/objective-reward';
 import { OtherReward } from './class/rewards/other-reward/other-reward';
 import { PrerequireRessource } from './class/prerequires/prerequire-ressource/prerequire-ressource';
-import { elementAt } from 'rxjs';
+import { TooltipService } from './services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-root',
@@ -31,11 +31,12 @@ import { elementAt } from 'rxjs';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'RLG Maker';
 
+  title = 'RLG Maker';
   scenario: Scenario = new Scenario();
+  @ViewChild('fileInput') fileInput: any;
 
-  constructor(private cdr: ChangeDetectorRef, protected pieceDetailsService: PieceDetailsService) {
+  constructor(private cdr: ChangeDetectorRef, protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService) {
     pieceDetailsService.piece = this.scenario;
 
     this.scenario.missions.forEach(mission => {
@@ -53,6 +54,10 @@ export class AppComponent {
     link.click();
     URL.revokeObjectURL(url);
   }
+
+  selectFile(): void {
+    this.fileInput.nativeElement.click();
+  }
   
   onFileSelected(event: any): void {
     const file: File = event.target.files[0];
@@ -141,7 +146,7 @@ export class AppComponent {
                 let i: number = role.educationnalObjectives.findIndex(element => element.objective == reward.objective.objective);
                 reward.objective = role.educationnalObjectives[i];
               }
-              
+
             });
             role.tasks.forEach((inlineTasks: any[], index: number) => {
               role.tasks[index] = inlineTasks.map((taskData: any) => {

src/app/app.module.ts

@@ -6,6 +6,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { AppComponent } from './app.component';
 import { EducationalObjectiveComponent } from './pieces/educational-objective/educational-objective.component';
@@ -67,7 +68,8 @@ import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive
     BrowserAnimationsModule,
     MatIconModule,
     MatButtonModule,
-    MatMenuModule
+    MatMenuModule,
+    MatTooltipModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/pieces/educational-objective/educational-objective.component.html

@@ -15,7 +15,9 @@
         <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>
-            <textarea name="objective" [(ngModel)]="educationnalObjective.objective" placeholder="Comprendre les rôles impliqués dans la conception d'un site web"></textarea>
+            <textarea name="objective" [(ngModel)]="educationnalObjective.objective" placeholder="Comprendre les rôles impliqués dans la conception d'un site web"
+            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"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
         </div>
             
     </div>

src/app/pieces/educational-objective/educational-objective.component.ts

@@ -3,6 +3,7 @@ import { EducationnalObjective } from 'src/app/class/educationnal-objective/educ
 import { Mission } from 'src/app/class/mission/mission';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-educational-objective',
@@ -15,7 +16,7 @@ export class EducationalObjectiveComponent implements OnInit {
   @Input() scenario: Scenario = new Scenario();
   @Input() i: number = 0;
 
-  constructor(private pieceDetailsService: PieceDetailsService) { }
+  constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
   }

src/app/pieces/game-context/game-context.component.html

@@ -11,23 +11,33 @@
         <div class="piece-form-title">Contexte du jeu</div>
         <div class="piece-form-universe">
             <label for="univers">Univers</label>
-            <input name="univers" type="text" [(ngModel)]="gameContext.univers" placeholder="Réaliste"/>   
+            <input name="univers" type="text" [(ngModel)]="gameContext.univers" placeholder="Réaliste"
+            matTooltip="Est-ce que le jeu est réaliste ou est-il futuriste, médiéval-fantastique, post-apocalyptique, est-ce la science-fiction ?"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>   
         </div>
         <div class="piece-form-support">
             <label for="support">Medium / Support(s)</label>
-            <input name="support" type="text" [(ngModel)]="gameContext.support" placeholder="Ordinateur en 3D"/>   
+            <input name="support" type="text" [(ngModel)]="gameContext.support" placeholder="Ordinateur en 3D"
+            matTooltip="Votre jeu sera-t-il sur ordinateur, en VR, sur tablette / smartphone ou sans technologie particulière ?"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>   
         </div>
         <div class="piece-form-duration">
             <label for="duration">Durée</label>
-            <input name="duration" type="text" [(ngModel)]="gameContext.duration" placeholder="3h"/>
+            <input name="duration" type="text" [(ngModel)]="gameContext.duration" placeholder="3h"
+            matTooltip="Combien de temps va durer le jeu ?"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
         </div>
         <div class="piece-form-intrigue">
             <label for="intrigue">Intrigue</label>
-            <textarea name="intrigue" [(ngModel)]="gameContext.intrigue" placeholder="Vous êtes stagiaire dans une agence de communication et devez faire vos preuves pour être embauché.e"></textarea>  
+            <textarea name="intrigue" [(ngModel)]="gameContext.intrigue" placeholder="Vous êtes stagiaire dans une agence de communication et devez faire vos preuves pour être embauché.e"
+            matTooltip="Quelle est l’histoire du jeu ? Quel est l’enjeu pour les joueurs ?"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>  
         </div>
         <div class="piece-form-other">
             <label for="other">Autre</label>
-            <textarea name="other" [(ngModel)]="gameContext.other"></textarea>  
+            <textarea name="other" [(ngModel)]="gameContext.other"
+            matTooltip="Tout autre élément que vous souhaiteriez prendre en compte dans le jeu et non défini dans les tuiles"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>  
         </div> 
     </div>
 

src/app/pieces/game-context/game-context.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { GameContext } from 'src/app/class/game-context/game-context';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-game-context',
@@ -13,7 +14,7 @@ export class GameContextComponent implements OnInit {
   @Input() scenario: Scenario = new Scenario();
   @Input() gameContext: GameContext = new GameContext();
 
-  constructor(private pieceDetailsService: PieceDetailsService) { }
+  constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
   }

src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.html

@@ -12,7 +12,9 @@
         <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>
-            <textarea name="objective" [(ngModel)]="gameEducationnalObjective.objective" placeholder="- Améliorer les softskills&#10;- Apprendre à coopérer"></textarea>
+            <textarea name="objective" [(ngModel)]="gameEducationnalObjective.objective" placeholder="- Améliorer les softskills&#10;- Apprendre à coopérer"
+            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."
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
         </div>
         <div class="piece-form-footer">Sorbonne Université, LIP6 - IMT Nord Europe</div>
     </div>

src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input } from '@angular/core';
 import { GameEducationnalObjective } from 'src/app/class/game-educationnal-objective/game-educationnal-objective';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-game-educationnal-objective',
@@ -13,7 +14,7 @@ export class GameEducationnalObjectiveComponent implements OnInit {
   @Input() scenario: Scenario = new Scenario();
   @Input() gameEducationnalObjective: GameEducationnalObjective = new GameEducationnalObjective();
 
-  constructor(private pieceDetailsService: PieceDetailsService) { }
+  constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
   }

src/app/pieces/mission-context/mission-context.component.html

@@ -14,7 +14,9 @@
         <div class="piece-form-title">Contexte de la mission {{i+1}}</div>
         <div class="piece-form-duration">
             <label for="duration">Durée</label>
-            <input name="duration" type="text" [(ngModel)]="missionContext.duration" placeholder="1h"/>   
+            <input name="duration" type="text" [(ngModel)]="missionContext.duration" placeholder="1h"
+            matTooltip="Combien de temps va durer la mission ?"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>   
         </div>
         <div class="piece-form-intrigue">
             <label for="intrigue">Intrigue</label>

src/app/pieces/mission-context/mission-context.component.ts

@@ -3,6 +3,7 @@ import { MissionContext } from 'src/app/class/mission-context/mission-context';
 import { Mission } from 'src/app/class/mission/mission';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-mission-context',
@@ -11,7 +12,7 @@ import { PieceDetailsService } from 'src/app/services/piece-details/piece-detail
 })
 export class MissionContextComponent implements OnInit {
 
-  constructor(private pieceDetailsService: PieceDetailsService) { }
+  constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService) { }
 
   @Input() missionContext: MissionContext = new MissionContext();
   @Input() scenario: Scenario = new Scenario();

src/app/pieces/role/role.component.html

@@ -13,15 +13,19 @@
     <div class="piece-form">
         <div class="piece-form-title">{{role.intitule ? role.intitule : 'Role '+(i+1)}}</div>
         <mat-icon class="piece-form-comment" fontIcon="comment" *ngIf="role.comments.length > 0"></mat-icon>
-        <img src="../../../assets/background-images/role_opacity0.png" *ngIf="i == 0"/>
-        <img src="../../../assets/background-images/role2_opacity0.png" *ngIf="i == 1"/>
+        <img src="../../../assets/background-images/role_opacity0.png" draggable="false" *ngIf="i == 0"/>
+        <img src="../../../assets/background-images/role2_opacity0.png" draggable="false" *ngIf="i == 1"/>
         <div class="piece-form-intitule">
             <label for="intitule">Intitulé</label>
-            <input name="intitule" type="text" [(ngModel)]="role.intitule" placeholder="Développeur/euse web"/>   
+            <input name="intitule" type="text" [(ngModel)]="role.intitule" placeholder="Développeur/euse web"
+            matTooltip="Nom de ce rôle."
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>   
         </div>
         <div class="piece-form-name">
             <label for="name">Nom de la quête</label>
-            <input name="name" type="text" [(ngModel)]="role.questName" placeholder="Intégration de site web"/>   
+            <input name="name" type="text" [(ngModel)]="role.questName" placeholder="Intégration de site web"
+            matTooltip="En 2-3 mots, l'intitulé de la quête de ce rôle"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>   
         </div>
         <div class="piece-form-description">
             <label for="description">Description</label>
@@ -30,7 +34,9 @@
         <div class="piece-form-objectives">
             <label for="objective">Objectif(s) pédagoqique(s)</label>
             <div class="piece-form-objectives-objective" *ngFor="let objective of role.educationnalObjectives, let i = index">
-                <input name="objective" type="text" [(ngModel)]="role.educationnalObjectives[i].objective" placeholder="Nom de l'objectif"/>
+                <input name="objective" type="text" [(ngModel)]="role.educationnalObjectives[i].objective" placeholder="Nom de l'objectif"
+                matTooltip="Les objectifs visés pour ce rôle en particulier"
+                matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
                 <button mat-button *ngIf="role.educationnalObjectives.length > 1" (click)="removeEducationnalObjective(i)"><mat-icon fontIcon="remove"></mat-icon></button>
             </div>
             <button mat-button class="piece-form-objectives-add" (click)="addEducationnalObjective()"><mat-icon fontIcon="add"></mat-icon></button>
@@ -40,7 +46,9 @@
             <div class="piece-form-rewards-reward" *ngFor="let reward of role.rewards, let i = index">
                 <div class="piece-form-rewards-reward-type">
                     <label>Type</label>
-                    <select [(ngModel)]="reward.type" (change)="changeRewardType(i, reward.type)">
+                    <select [(ngModel)]="reward.type" (change)="changeRewardType(i, reward.type)"
+                    matTooltip="Ce que le rôle va obtenir à la fin de sa quête (gagner en compétence, gagner un objet, débloquer une quête, …)"
+                    matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                         <option value="quest">Débuter une nouvelle quête</option>
                         <option value="skill">Travailler un champ de compétence</option>
                         <option value="character">Récupérer le contact d'un PNJ</option>
@@ -114,7 +122,9 @@
             <div class="piece-form-title">Personnalisation</div>
             <div class="piece-form-personnalization-appearance">
                 <label>Apparence, équipement</label>
-                <textarea [(ngModel)]="role.stuff"></textarea>
+                <textarea [(ngModel)]="role.stuff"
+                matTooltip="Si le rôle a une tenue particulière ou des objets spécifiques"
+                matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
             </div>
         </div>
 
@@ -147,7 +157,9 @@
                 <div>
                     <div class="piece-form-supplementary-form-name">
                         <label for="name">Nom</label>
-                        <input name="name" type="text" [(ngModel)]="supplementaryRole.name"/>
+                        <input name="name" type="text" [(ngModel)]="supplementaryRole.name"
+                        matTooltip="Intitulé du rôle supplémentaire"
+                        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
                     </div>
                     <div class="piece-form-supplementary-form-color">
                         <label for="color">Couleur</label>
@@ -155,15 +167,21 @@
                     </div>
                     <div class="piece-form-supplementary-form-textarea">
                         <label for="objectives">Objectifs</label>
-                        <textarea name="objectives" [(ngModel)]="supplementaryRole.objectives"></textarea>
+                        <textarea name="objectives" [(ngModel)]="supplementaryRole.objectives"
+                        matTooltip="Objectifs (pédagogiques) de ce rôle supplémentaire"
+                        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
                     </div>
                     <div class="piece-form-supplementary-form-textarea">
                         <label for="skills">Compétences</label>
-                        <textarea name="skills" [(ngModel)]="supplementaryRole.skills"></textarea>
+                        <textarea name="skills" [(ngModel)]="supplementaryRole.skills"
+                        matTooltip="Compétences spécifiques à ce rôle pour effectuer les tâches qui lui seront liées (même couleur)"
+                        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
                     </div>
                     <div class="piece-form-supplementary-form-textarea">
                         <label for="rules">Règles</label>
-                        <textarea name="rules" [(ngModel)]="supplementaryRole.rules"></textarea>
+                        <textarea name="rules" [(ngModel)]="supplementaryRole.rules"
+                        matTooltip="Règles spécifiques à ce rôle (a-t-il des contraintes ou des droits, accès supplémentaires ?)"
+                        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
                     </div>
                     <button mat-button (click)="removeSupplementaryRole(i)"><mat-icon fontIcon="remove"></mat-icon></button>
                 </div>

src/app/pieces/role/role.component.ts

@@ -12,6 +12,7 @@ import { Role } from 'src/app/class/role/role';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { SupplementaryRole } from 'src/app/class/supplementary-role/supplementary-role';
 import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-role',
@@ -25,7 +26,7 @@ export class RoleComponent implements OnInit {
   @Input() mission: Mission = new Mission();
   @Input() i: number = 0;
 
-  constructor(protected pieceDetailsService: PieceDetailsService) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
     this.mission.equalizeLengths();

src/app/pieces/tasks/annexe-task/annexe-task.component.html

 <div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displayPrequires='hide'; displaySymbolChoice='hide'"
     [style.background]="task.supplementaryRole ?
     'linear-gradient(140deg, var(--piece-background-color) 0%, var(--piece-background-color) 55%,'+task.supplementaryRole.color+' 55%,'+task.supplementaryRole.color+' 100%)'
-    : 'var(--piece-background-color)'">
+    : 'var(--piece-background-color)'"
+    matTooltip="Tâches annexe: ces tâches ne sont pas obligatoires pour atteindre les objectifs pédagogiques définis. Elles sont rapides et permettent aux joueurs plus rapides d'être occupés en attendant que les autres finissent leurs tâches. Il est préférable d'en mettre."
+    matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
     <div class="piece-attach piece-attach-left"></div>
     <div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
 
@@ -80,20 +82,28 @@
 
     <div class="piece-form">
         <div class="piece-form-top">
-            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
+            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"
+            matTooltip="Identifiant de la tâche (ex: A, B, C, …)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
             <div class="piece-form-top-title">Tâche annexe</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>
         </div>
         <textarea class="piece-form-content" [(ngModel)]="task.objective" [style.background-image]="(i == findFirstIndexOfTaskType('annexe')[0] && j == findFirstIndexOfTaskType('annexe')[1]) ? urlIcon : ''"
-            placeholder="Vérifier ses connaissances sur les formulaires PHP"></textarea>
+            placeholder="Vérifier ses connaissances sur les formulaires PHP"
+            matTooltip="Action à effectuer (interagir avec un objet, parler avec quelqu'un, …)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
         <div class="piece-form-bottom">
-            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
+            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()"
+            matTooltip="Prérequis pour effectuer cette tâche"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                 Prérequis
             </button>
             <mat-icon class="piece-form-bottom-character" fontIcon="person" *ngIf="task.characters.length > 0"></mat-icon>
             <mat-icon class="piece-form-bottom-interrupt" fontIcon="front_hand" *ngIf="task.interrupt != ''"></mat-icon>
-            <div class="piece-form-bottom-duration">
+            <div class="piece-form-bottom-duration"
+            matTooltip="Durée de la tâche (en unité de temps, minutes ou tours)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                 <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()"/>
                 <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">
                     <option value="UT">UT</option>

src/app/pieces/tasks/annexe-task/annexe-task.component.ts

@@ -7,6 +7,7 @@ import { Role } from 'src/app/class/role/role';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { Task } from 'src/app/class/task/task';
 import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-annexe-task',
@@ -30,7 +31,7 @@ export class AnnexeTaskComponent implements OnInit {
 
   urlIcon: string = 'url("../../../../assets/background-images/annexe.png")';
 
-  constructor(private pieceDetailsService: PieceDetailsService) { }
+  constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
     this.durationChange();

src/app/pieces/tasks/final-task/final-task.component.html

 <div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displayPrequires='hide'; displaySymbolChoice='hide'"
     [style.background]="task.supplementaryRole ?
     'linear-gradient(140deg, var(--piece-background-color) 0%, var(--piece-background-color) 55%,'+task.supplementaryRole.color+' 55%,'+task.supplementaryRole.color+' 100%)'
-    : 'var(--piece-background-color)'">
+    : 'var(--piece-background-color)'"
+    matTooltip="Tâche finale: il s'agit de la dernière action à effectuer pour clore la quête."
+    matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
     <div class="piece-attach piece-attach-left"></div>
 
     <div class="piece-menu" [class]="displayMenu">
@@ -108,23 +110,33 @@
 
     <div class="piece-form">
         <div class="piece-form-top">
-            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
+            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"
+            matTooltip="Identifiant de la tâche (ex: A, B, C, …)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
             <div class="piece-form-top-title">Tâche finale</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()">
+            <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"
+            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" [style.background-image]="(i == findFirstIndexOfTaskType('final')[0] && j == findFirstIndexOfTaskType('final')[1]) ? urlIcon : ''"
-            placeholder="Mettre le site web en ligne"></textarea>
+            placeholder="Mettre le site web en ligne"
+            matTooltip="Action à effectuer (interagir avec un objet, parler avec quelqu'un, …)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
         <div class="piece-form-bottom">
-            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
+            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()"
+            matTooltip="Prérequis pour effectuer cette tâche"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                 Prérequis
             </button>
             <mat-icon class="piece-form-character" fontIcon="person" *ngIf="task.characters.length > 0"></mat-icon>
             <mat-icon class="piece-form-interrupt" fontIcon="front_hand" *ngIf="task.interrupt != ''"></mat-icon>
-            <div class="piece-form-bottom-duration">
+            <div class="piece-form-bottom-duration"
+            matTooltip="Durée de la tâche (en unité de temps, minutes ou tours)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                 <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()"/>
                 <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">
                     <option value="UT">UT</option>

src/app/pieces/tasks/final-task/final-task.component.ts

@@ -7,6 +7,7 @@ import { Role } from 'src/app/class/role/role';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { Task } from 'src/app/class/task/task';
 import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-final-task',
@@ -30,7 +31,7 @@ export class FinalTaskComponent implements OnInit {
 
   urlIcon: string = 'url("../../../../assets/background-images/final.png")';
 
-  constructor(private pieceDetailsService: PieceDetailsService) { }
+  constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
     this.durationChange();

src/app/pieces/tasks/optionnal-task/optionnal-task.component.html

 <div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displayPrequires='hide'; displaySymbolChoice='hide'"
     [style.background]="task.supplementaryRole ?
     'linear-gradient(140deg, var(--piece-background-color) 0%, var(--piece-background-color) 55%,'+task.supplementaryRole.color+' 55%,'+task.supplementaryRole.color+' 100%)'
-    : 'var(--piece-background-color)'">
+    : 'var(--piece-background-color)'"
+    matTooltip="Tâche optionnelle: cette tâche peut être réalisée ou non. À la différence d'une tâche annexe, les tâches optionnelles sont utiles pour répondre aux objectifs pédagogiques, comme les tâches simples, mais offent la possibilité au joueur de réaliser la tâche de plusieurs manières différentes."
+    matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
     <div class="piece-attach piece-attach-left"></div>
     <div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
 
@@ -109,23 +111,33 @@
 
     <div class="piece-form">
         <div class="piece-form-top">
-            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
+            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"
+            matTooltip="Identifiant de la tâche (ex: A, B, C, …)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
             <div class="piece-form-top-title">Tâche<br>optionnelle</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()">
+            <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"
+            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" [style.background-image]="(i == findFirstIndexOfTaskType('optionnal')[0] && j == findFirstIndexOfTaskType('optionnal')[1]) ? urlIcon : ''"
-            placeholder="Partir d'un template / Partir de zéro"></textarea>
+            placeholder="Partir d'un template / Partir de zéro"
+            matTooltip="Action à effectuer (interagir avec un objet, parler avec quelqu'un, …)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
         <div class="piece-form-bottom">
-            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
+            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()"
+            matTooltip="Prérequis pour effectuer cette tâche"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                 Prérequis
             </button>
             <mat-icon class="piece-form-character" fontIcon="person" *ngIf="task.characters.length > 0"></mat-icon>
             <mat-icon class="piece-form-interrupt" fontIcon="front_hand" *ngIf="task.interrupt != ''"></mat-icon>
-            <div class="piece-form-bottom-duration">
+            <div class="piece-form-bottom-duration"
+            matTooltip="Durée de la tâche (en unité de temps, minutes ou tours)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                 <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()"/>
                 <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">
                     <option value="UT">UT</option>

src/app/pieces/tasks/optionnal-task/optionnal-task.component.ts

@@ -7,6 +7,7 @@ import { Role } from 'src/app/class/role/role';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { Task } from 'src/app/class/task/task';
 import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-optionnal-task',
@@ -30,7 +31,7 @@ export class OptionnalTaskComponent implements OnInit {
 
   urlIcon: string = 'url("../../../../assets/background-images/optionnal.png")';
 
-  constructor(private pieceDetailsService: PieceDetailsService) { }
+  constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
     this.durationChange();

src/app/pieces/tasks/random-event/random-event.component.html

@@ -101,23 +101,33 @@
 
     <div class="piece-form">
         <div class="piece-form-top">
-            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
+            <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"
+            matTooltip="Identifiant de la tâche (ex: A, B, C, …)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
             <div class="piece-form-top-title">Événement<br>aléatoire</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()">
+            <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"
+            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" [style.background-image]="(i == findFirstIndexOfTaskType('event')[0] && j == findFirstIndexOfTaskType('event')[1]) ? urlIcon : ''"
-            placeholder="Le client modifie sa demande"></textarea>
+            placeholder="Le client modifie sa demande"
+            matTooltip="Action à effectuer (interagir avec un objet, parler avec quelqu'un, …)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
         <div class="piece-form-bottom">
-            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
+            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()"
+            matTooltip="Prérequis pour effectuer cette tâche"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                 Prérequis
             </button>
             <mat-icon class="piece-form-bottom-character" fontIcon="person" *ngIf="task.characters.length > 0"></mat-icon>
             <mat-icon class="piece-form-bottom-interrupt" fontIcon="front_hand" *ngIf="task.interrupt != ''"></mat-icon>
-            <div class="piece-form-bottom-duration">
+            <div class="piece-form-bottom-duration"
+            matTooltip="Durée de la tâche (en unité de temps, minutes ou tours)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                 <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()"/>
                 <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">
                     <option value="UT">UT</option>

src/app/pieces/tasks/random-event/random-event.component.ts

@@ -7,6 +7,7 @@ import { Role } from 'src/app/class/role/role';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { Task } from 'src/app/class/task/task';
 import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-random-event',
@@ -30,7 +31,7 @@ export class RandomEventComponent implements OnInit {
 
   urlIcon: string = 'url("../../../../assets/background-images/event.png")';
 
-  constructor(protected pieceDetailsService: PieceDetailsService) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
     this.durationChange();

src/app/pieces/tasks/repeat-task/repeat-task.component.html

@@ -12,7 +12,9 @@
     <div class="piece-form">
         <label>Recommencer<br>le tour jusqu'à ce que :</label>
         <textarea [(ngModel)]="task.objective" [(ngModel)]="task.objective" [style.background-image]="(i == findFirstIndexOfTaskType('repeat')[0] && j == findFirstIndexOfTaskType('repeat')[1]) ? urlIcon : ''"
-            placeholder="Faire valider au commanditaire"></textarea>
+            placeholder="Faire valider au commanditaire"
+            matTooltip="Action à effectuer (interagir avec un objet, parler avec quelqu'un, …)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
     </div>
     <mat-icon class="piece-form-comment" fontIcon="comment" *ngIf="task.comments.length > 0"></mat-icon>
     <mat-icon class="piece-form-repeat" fontIcon="refresh" *ngIf="task.repeat.iteration > 0 || task.repeat.while != ''"></mat-icon>

src/app/pieces/tasks/repeat-task/repeat-task.component.ts

@@ -3,6 +3,7 @@ import { Mission } from 'src/app/class/mission/mission';
 import { Role } from 'src/app/class/role/role';
 import { Task } from 'src/app/class/task/task';
 import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-repeat-task',
@@ -22,7 +23,7 @@ export class RepeatTaskComponent implements OnInit {
   urlIcon: string = 'url("../../../../assets/background-images/repeatTask.png")';
   
 
-  constructor(protected pieceDetailsService: PieceDetailsService) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
   }

src/app/pieces/tasks/task/task.component.html

@@ -109,23 +109,33 @@
 
     <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"/>
+            <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, …)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
             <div class="piece-form-top-title">Tâche</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()">
+            <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"
+            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" [style.background-image]="(i == findFirstIndexOfTaskType('normal')[0] && j == findFirstIndexOfTaskType('normal')[1]) ? urlIcon : ''"
-            placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
+            placeholder="Positionner dans l'ordre les balises HTML principales"
+            matTooltip="Action à effectuer (interagir avec un objet, parler avec quelqu'un, …)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
         <div class="piece-form-bottom">
-            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
+            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()"
+            matTooltip="Prérequis pour effectuer cette tâche"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                 Prérequis
             </button>
             <mat-icon class="piece-form-bottom-character" fontIcon="person" *ngIf="task.characters.length > 0"></mat-icon>
             <mat-icon class="piece-form-bottom-interrupt" fontIcon="front_hand" *ngIf="task.interrupt != ''"></mat-icon>
-            <div class="piece-form-bottom-duration">
+            <div class="piece-form-bottom-duration"
+            matTooltip="Durée de la tâche (en unité de temps, minutes ou tours)"
+            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                 <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()"/>
                 <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">
                     <option value="UT">UT</option>

src/app/pieces/tasks/task/task.component.ts

@@ -7,6 +7,7 @@ import { Role } from 'src/app/class/role/role';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { Task } from 'src/app/class/task/task';
 import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-task',
@@ -30,7 +31,7 @@ export class TaskComponent implements OnInit {
 
   urlIcon: string = 'url("../../../../assets/background-images/tache.png")';
 
-  constructor(protected pieceDetailsService: PieceDetailsService) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
     this.durationChange();

src/app/services/tooltip/tooltip.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { TooltipService } from './tooltip.service';
+
+describe('TooltipService', () => {
+  let service: TooltipService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TooltipService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/tooltip/tooltip.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TooltipService {
+
+  constructor() { }
+
+  activatedTooltips: boolean = true;
+}

src/app/sider-pieces/characters/characters.component.html

-<div class="piece">
+<div class="piece"
+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."
+matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
     <div class="piece-form">
 
         <div class="piece-form-create">

src/app/sider-pieces/characters/characters.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/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';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-characters',
@@ -16,7 +17,7 @@ export class CharactersComponent implements OnInit {
   selectedAssignCharacter!: Character | undefined;
   selectedDeleteCharacterIndex!: number;
 
-  constructor() { }
+  constructor(protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
   }

src/app/sider-pieces/comments/comments.component.html

-<div class="piece">
+<div class="piece"
+matTooltip="Permet de rajouter des commentaires sur une tuile"
+matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
     <div class="piece-form">
         <div class="piece-form-title">Commentaires</div>
 

src/app/sider-pieces/comments/comments.component.ts

@@ -5,6 +5,7 @@ import { Scenario } from 'src/app/class/scenario/scenario';
 import { Step } from 'src/app/class/step/step';
 import { Task } from 'src/app/class/task/task';
 import { Comment } from 'src/app/class/comment/comment';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-comments',
@@ -16,7 +17,7 @@ export class CommentsComponent implements OnInit {
   @Input() piece!: (Role | Task | Mission | Step | Scenario);
   newComment: string = '';
 
-  constructor() { }
+  constructor(protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
   }

src/app/sider-pieces/interupt/interupt.component.html

-<div class="piece">
+<div class="piece"
+matTooltip="Une tâche peut être interrompue par un autre rôle, ceci est plutôt utilisé dans les compétitifs"
+matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
     <div class="piece-form">
         <div class="piece-form-header">
             <mat-icon fontIcon="front_hand"></mat-icon>

src/app/sider-pieces/interupt/interupt.component.ts

 import { Component, Input, OnInit } from '@angular/core';
 import { Task } from 'src/app/class/task/task';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-interupt',
@@ -10,7 +11,7 @@ export class InteruptComponent implements OnInit {
 
   @Input() task: Task = new Task('normal');
 
-  constructor() { }
+  constructor(protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
   }

src/app/sider-pieces/repeat/repeat.component.html

-<div class="piece">
+<div class="piece"
+matTooltip="Une tâche peut-être répétée un certain nombre de fois avant d'être résolue"
+matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
     <div class="piece-form">
         <div class="piece-form-header">
             <mat-icon fontIcon="refresh"></mat-icon>

src/app/sider-pieces/repeat/repeat.component.ts

 import { Component, Input, OnInit } from '@angular/core';
 import { Task } from 'src/app/class/task/task';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-repeat',
@@ -10,7 +11,7 @@ export class RepeatComponent implements OnInit {
 
   @Input() task: Task = new Task('normal');
 
-  constructor() { }
+  constructor(protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
   }

src/app/sider-pieces/role-occurence/role-occurence.component.html

-<div class="piece">
+<div class="piece"
+matTooltip="Ceci permet de choisir combien de joueurs représenteront chaque rôle si le nombre de joueurs est amené à varier"
+matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
     <div class="piece-form">
         <div class="piece-title">Occurrence du rôle</div>
         <div class="piece-form-occurrence" *ngFor="let occurence of role.occurences, let i = index">

src/app/sider-pieces/role-occurence/role-occurence.component.ts

 import { Component, Input, OnInit } from '@angular/core';
 import { RoleOccurrence } from 'src/app/class/role-occurrence/role-occurrence';
 import { Role } from 'src/app/class/role/role';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-role-occurence',
@@ -11,7 +12,7 @@ export class RoleOccurenceComponent implements OnInit {
 
   @Input() role: Role = new Role();
 
-  constructor() { }
+  constructor(protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
   }

src/app/sider-pieces/rules/rules.component.html

@@ -2,12 +2,16 @@
     <div class="piece-form">
         <div class="piece-form-rules">
             <div class="piece-form-title">Règles du jeu</div>  
-            <textarea [(ngModel)]="scenario.gameRules"></textarea>
+            <textarea [(ngModel)]="scenario.gameRules"
+            matTooltip="Éléments importants à prendre en compte dans les règles du jeu"
+            matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
         </div>
         <div class="piece-form-ressources">
             <div class="piece-form-title">Ressources / objets</div>
             <div class="piece-form-ressources-object">
-                <div class="piece-form-ressources-object-infos" *ngFor="let ressource of scenario.ressources; let i = index">
+                <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"
+                matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                     <div class="piece-form-ressources-object-infos-name">
                         <label for="name">Nom</label>
                         <input name="name" type="text" [(ngModel)]="ressource.name"/>

src/app/sider-pieces/rules/rules.component.ts

 import { Component, Input, OnInit } from '@angular/core';
 import { Ressource } from 'src/app/class/ressource/ressource';
 import { Scenario } from 'src/app/class/scenario/scenario';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-rules',
@@ -11,7 +12,7 @@ export class RulesComponent implements OnInit {
 
   @Input() scenario: Scenario = new Scenario();
 
-  constructor() { }
+  constructor(protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
   }

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%)'">
+    : '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"
+    matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
     <div class="piece-form">
         <div class="piece-title">Tâche liée au rôle supplémentaire</div>
         <!--

src/app/sider-pieces/supplementary-task/supplementary-task.component.ts

 import { Component, Input, OnInit } from '@angular/core';
 import { Task } from 'src/app/class/task/task';
 import { Role } from 'src/app/class/role/role';
+import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 
 @Component({
   selector: 'app-supplementary-task',
@@ -12,7 +13,7 @@ export class SupplementaryTaskComponent implements OnInit {
   @Input() task: Task = new Task('normal');
   @Input() role: Role = new Role();
 
-  constructor() { }
+  constructor(protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
   }