dynamic comments

src/app/app.component.html

@@ -4,8 +4,8 @@
 
             <div class="container-scenario-main">
                 <div class="container-scenario-main-gamePieces" [style.z-index]="4">
-                    <app-game-educationnal-objective [gameEducationnalObjective]="this.scenario.educationnalObjective"></app-game-educationnal-objective>
-                    <app-game-context [style.z-index]="2" [gameContext]="this.scenario.context"></app-game-context>
+                    <app-game-educationnal-objective [scenario]="scenario" [gameEducationnalObjective]="this.scenario.educationnalObjective"></app-game-educationnal-objective>
+                    <app-game-context [style.z-index]="2" [scenario]="scenario" [gameContext]="this.scenario.context"></app-game-context>
                 </div>
 
                 <div class="container-scenario-main-missions">
@@ -104,12 +104,12 @@
 
     <div class="container-sider">
         <app-rules class="container-sider-element" [scenario]="scenario"></app-rules>
-        <app-role-occurence class="container-sider-element"></app-role-occurence>
-        <app-supplementary-task class="container-sider-element"></app-supplementary-task>
-        <app-repeat class="container-sider-element"></app-repeat>
-        <app-interupt class="container-sider-element"></app-interupt>
-        <app-characters class="container-sider-element"></app-characters>
-        <app-comments class="container-sider-element"></app-comments>
+        <app-role-occurence class="container-sider-element" [role]="pieceDetailsService.pieceAsRole()" *ngIf="pieceDetailsService.pieceIsRole()"></app-role-occurence>
+        <app-supplementary-task class="container-sider-element" [task]="pieceDetailsService.pieceAsTask()" *ngIf="pieceDetailsService.pieceIsTask()"></app-supplementary-task>
+        <app-repeat class="container-sider-element" [task]="pieceDetailsService.pieceAsTask()" *ngIf="pieceDetailsService.pieceIsTask()"></app-repeat>
+        <app-interupt class="container-sider-element" [task]="pieceDetailsService.pieceAsTask()" *ngIf="pieceDetailsService.pieceIsTask()"></app-interupt>
+        <app-characters class="container-sider-element" [task]="pieceDetailsService.pieceAsTask()" *ngIf="pieceDetailsService.pieceIsTask()"></app-characters>
+        <app-comments class="container-sider-element" [piece]="pieceDetailsService.piece"></app-comments>
     </div>
 
     <div class="container-settings">

src/app/app.component.ts

@@ -13,6 +13,8 @@ import { EducationnalObjective } from './class/educationnal-objective/educationn
 import { RoleOccurrence } from './class/role-occurrence/role-occurrence';
 import { SupplementaryRole } from './class/supplementary-role/supplementary-role';
 import { Symbol } from './class/symbol/symbol';
+import { PieceDetailsService } from './services/piece-details/piece-details.service';
+import { Comment } from './class/comment/comment';
 
 @Component({
   selector: 'app-root',
@@ -24,9 +26,11 @@ export class AppComponent {
 
   scenario: Scenario = new Scenario();
 
-  constructor(private cdr: ChangeDetectorRef) {
+  constructor(private cdr: ChangeDetectorRef, protected pieceDetailsService: PieceDetailsService) {
+    pieceDetailsService.piece = this.scenario;
+
     this.scenario.missions.forEach(mission => {
-      mission.equalizeLengths();   
+      mission.equalizeLengths();
     });
   }
 
@@ -57,6 +61,7 @@ export class AppComponent {
         scenario.gameRules = jsonData.gameRules;
         scenario.characters = jsonData.characters.map((characterData: any) => Object.assign(new Character(), characterData));
         scenario.ressources = jsonData.ressources.map((ressourceData: any) => Object.assign(new Ressource(), ressourceData));
+        scenario.comments = jsonData.comments.map((commentData: any) => Object.assign(new Comment(), commentData));
         scenario.missions = jsonData.missions.map((missionData: any) => Object.assign(new Mission(), missionData));
         scenario.missions.forEach((mission, index)=> {
           mission.chronologie = jsonData.missions[index].chronologie.map((chronologieData: any) => {
@@ -71,6 +76,7 @@ export class AppComponent {
               step.comments = step.comments.map((commentData: any) => Object.assign(new Comment(), commentData));
             }
           });
+          mission.comments = jsonData.comments.map((commentData: any) => Object.assign(new Comment(), commentData));
           mission.context = Object.assign(new MissionContext(), jsonData.missions[index].context);
           mission.context.comments = jsonData.missions[index].context.comments.map((commentData: any) => Object.assign(new Comment(), commentData));
           mission.educationnalObjective = Object.assign(new EducationnalObjective(), jsonData.missions[index].educationnalObjective);
@@ -111,6 +117,7 @@ export class AppComponent {
           });
         });
         this.scenario = scenario;
+        this.pieceDetailsService.piece = this.scenario;
         this.cdr.detectChanges();
       };
     }

src/app/class/mission/mission.ts

@@ -3,6 +3,7 @@ import { MissionContext } from "../mission-context/mission-context";
 import { Role } from "../role/role";
 import { Step } from "../step/step";
 import { Task } from "../task/task";
+import { Comment } from "../comment/comment";
 
 export class Mission {
 
@@ -10,6 +11,7 @@ export class Mission {
     context: MissionContext = new MissionContext();
     roles: Role[] = [new Role(), new Role()];
     chronologie: (Step | null)[] = [new Step()];
+    comments: Comment[] = [];
 
     public addChronologieStep(index: number) {
         this.chronologie[index] = new Step();

src/app/class/role/role.ts

@@ -5,6 +5,7 @@ import { SupplementaryRole } from "../supplementary-role/supplementary-role";
 import { Reward } from "../rewards/reward";
 import { RoleOccurrence } from "../role-occurrence/role-occurrence";
 import { RoleEducationnalObjective } from "../role-educationnal-objective/role-educationnal-objective";
+import { Comment } from "../comment/comment";
 
 export class Role {
 

src/app/class/scenario/scenario.ts

@@ -3,6 +3,7 @@ import { GameContext } from "../game-context/game-context";
 import { GameEducationnalObjective } from "../game-educationnal-objective/game-educationnal-objective";
 import { Mission } from "../mission/mission";
 import { Ressource } from "../ressource/ressource";
+import { Comment } from "../comment/comment";
 
 export class Scenario {
 
@@ -12,4 +13,5 @@ export class Scenario {
     characters: Character[] = [];
     gameRules: string = '';
     ressources: Ressource[] = [new Ressource()];
+    comments: Comment[] = [];
 }
\ No newline at end of file

src/app/class/step/step.ts

+import { Comment } from "../comment/comment";
+
 export class Step {
 
     description: string = '';

src/app/components/comment/comment.component.html

 <div class="form">
     <div class="form-comment">
-        <textarea [disabled]="true">Mon commentaire</textarea>
+        <textarea [disabled]="!isEditable" [(ngModel)]="comment.content"></textarea>
         <div class="form-comment-buttons">
-            <button mat-button>Modifier</button>
-            <button mat-button>Supprimer</button>
+            <button mat-button (click)="isEditable = !isEditable">Modifier</button>
+            <button mat-button (click)="removeComment(index)">Supprimer</button>
         </div>  
     </div>
-
-    <div class="form-answers">
-        <textarea [disabled]="true">Une réponse</textarea>
+    <div class="form-answers" *ngFor="let answer of comment.answers, let i = index">
+        <textarea [disabled]="!answerEditables[i]" [(ngModel)]="comment.answers[i]">Une réponse</textarea>
         <div class="form-comment-buttons">
-            <button mat-button>Modifier</button>
-            <button mat-button>Supprimer</button>
+            <button mat-button (click)="this.answerEditables[i] = !this.answerEditables[i]">Modifier</button>
+            <button mat-button (click)="removeAnwer(i)">Supprimer</button>
         </div>  
     </div>
-    
     <div class="form-newanswer">
-        <textarea></textarea>
+        <textarea [(ngModel)]="newAnswer"></textarea>
         <div class="form-newanswer-buttons">
-           <button mat-button>Répondre</button> 
+           <button mat-button (click)="addAnswer()">Répondre</button> 
         </div>
-        
     </div>
 </div>
\ No newline at end of file

src/app/components/comment/comment.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Comment } from 'src/app/class/comment/comment';
 
 @Component({
   selector: 'app-comment',
@@ -7,9 +8,35 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CommentComponent implements OnInit {
 
+  @Input() comments: Comment[] = [];
+  @Input() index: number = 0;
+  @Input() comment: Comment = new Comment();
+  answerEditables: boolean[] = [];
+  isEditable: boolean = false;
+  newAnswer: string = '';
+
   constructor() { }
 
   ngOnInit(): void {
+    this.comment.answers.forEach(answer => {
+      this.answerEditables.push(false);
+    });
+  }
+
+  removeAnwer(index: number): void {
+    this.comment.answers.splice(index, 1);
+    this.answerEditables.splice(index, 1);
   }
 
+  addAnswer(): void {
+    if (this.newAnswer.length > 0) {
+      this.comment.answers.push(this.newAnswer);
+      this.answerEditables.push(false);
+      this.newAnswer = '';      
+    }
+  }
+
+  removeComment(index: number): void {
+    this.comments.splice(index, 1);
+  }
 }

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

@@ -12,6 +12,7 @@
    
     <div class="piece-form">
         <div class="piece-form-title">Objectif pédagogique</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 1</label>
             <textarea name="objective" [(ngModel)]="educationnalObjective.objective" placeholder="Comprendre les rôles impliqués dans la conception d'un site web"></textarea>

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

@@ -86,6 +86,15 @@
             font-size: 25px;
             font-family: 'Glacial Indifference Bold';
         }
+
+
+        &-comment {
+            transform: scale(1.2);
+            position: absolute;
+            top: 25px;
+            right: 5%;
+        }
+
         &-objective{
             height: 100%;
             margin-top: 10px;

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

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { EducationnalObjective } from 'src/app/class/educationnal-objective/educationnal-objective';
 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';
 
 @Component({
   selector: 'app-educational-objective',
@@ -14,7 +15,7 @@ export class EducationalObjectiveComponent implements OnInit {
   @Input() scenario: Scenario = new Scenario();
   @Input() i: number = 0;
 
-  constructor() { }
+  constructor(private pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
   }
@@ -22,7 +23,7 @@ export class EducationalObjectiveComponent implements OnInit {
   displayMenu: string = 'hide';
 
   onClickDots(): void {
-
+    this.pieceDetailsService.piece = this.scenario.missions[this.i];
   }
 
   onClickAdd(): void {

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

 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';
 
 @Component({
   selector: 'app-game-context',
@@ -8,9 +10,10 @@ import { GameContext } from 'src/app/class/game-context/game-context';
 })
 export class GameContextComponent implements OnInit {
 
+  @Input() scenario: Scenario = new Scenario();
   @Input() gameContext: GameContext = new GameContext();
 
-  constructor() { }
+  constructor(private pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
   }
@@ -26,7 +29,7 @@ export class GameContextComponent implements OnInit {
   } 
 
   onClickDots(): void {
-    
+    this.pieceDetailsService.piece = this.scenario;
   }
 
 }

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

@@ -9,6 +9,7 @@
    
     <div class="piece-form">
         <div class="piece-form-title">Objectif pédagogique</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>
             <textarea name="objective" [(ngModel)]="gameEducationnalObjective.objective" placeholder="- Améliorer les softskills&#10;- Apprendre à coopérer"></textarea>

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

@@ -76,6 +76,14 @@
             font-size: 25px;
             font-family: 'Glacial Indifference Bold';
         }
+
+        &-comment {
+            transform: scale(1.2);
+            position: absolute;
+            top: 25px;
+            right: 5%;
+        }
+
         &-objective{
             height: 100%;
             margin-top: 10px;

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

 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';
 
 @Component({
   selector: 'app-game-educationnal-objective',
@@ -8,9 +10,10 @@ import { GameEducationnalObjective } from 'src/app/class/game-educationnal-objec
 })
 export class GameEducationnalObjectiveComponent implements OnInit {
 
+  @Input() scenario: Scenario = new Scenario();
   @Input() gameEducationnalObjective: GameEducationnalObjective = new GameEducationnalObjective();
 
-  constructor() { }
+  constructor(private pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
   }
@@ -18,7 +21,7 @@ export class GameEducationnalObjectiveComponent implements OnInit {
   displayMenu: string = 'hide';
 
   onClickDots(): void {
-    
+    this.pieceDetailsService.piece = this.scenario;
   }
 
   onClickErase(): void {

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

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 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';
 
 @Component({
   selector: 'app-mission-context',
@@ -10,7 +11,7 @@ import { Scenario } from 'src/app/class/scenario/scenario';
 })
 export class MissionContextComponent implements OnInit {
 
-  constructor() { }
+  constructor(private pieceDetailsService: PieceDetailsService) { }
 
   @Input() missionContext: MissionContext = new MissionContext();
   @Input() scenario: Scenario = new Scenario();
@@ -22,7 +23,7 @@ export class MissionContextComponent implements OnInit {
   displayMenu: string = 'hide';
 
   onClickDots(): void {
-    
+    this.pieceDetailsService.piece = this.scenario.missions[this.i];
   }
 
   onClickAdd(): void {

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

@@ -12,6 +12,7 @@
 
     <div class="piece-form">
         <div class="piece-form-title">Rôle 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"/>
         <div class="piece-form-intitule">
             <label for="intitule">Intitulé</label>

src/app/pieces/role/role.component.scss

+@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
+
 .piece {
     --piece-background-color: #9ad5ec;
 
@@ -129,6 +131,13 @@
             font-family: 'Glacial Indifference Bold';
         }
 
+        &-comment {
+            position: absolute;
+            right: 30%;
+            top: 25px;
+            transform: scale(1.2);
+        }
+
         &-intitule {
             display: flex;
             flex-direction: column;

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

@@ -11,6 +11,7 @@ import { SkillReward } from 'src/app/class/rewards/skill-reward/skill-reward';
 import { RoleEducationnalObjective } from 'src/app/class/role-educationnal-objective/role-educationnal-objective';
 import { Role } from 'src/app/class/role/role';
 import { SupplementaryRole } from 'src/app/class/supplementary-role/supplementary-role';
+import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
 
 @Component({
   selector: 'app-role',
@@ -23,7 +24,7 @@ export class RoleComponent implements OnInit {
   @Input() mission: Mission = new Mission();
   @Input() i: number = 0;
 
-  constructor() { }
+  constructor(protected pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
     this.mission.equalizeLengths();
@@ -33,7 +34,7 @@ export class RoleComponent implements OnInit {
   rewardType: number = 0;
 
   onClickDots(): void {
-    
+    this.pieceDetailsService.piece = this.role;
   }
 
   onClickAdd(): void {

src/app/pieces/step/step.component.html

@@ -12,6 +12,7 @@
 
     <div class="piece-form">
         <div class="piece-form-title">Étape 1</div>
+        <mat-icon class="piece-form-comment" fontIcon="comment" *ngIf="step.comments.length > 0"></mat-icon>
         <textarea [(ngModel)]="step.description"></textarea>
         <div class="piece-form-duration">
             <label for="duration">Durée</label>

src/app/pieces/step/step.component.scss

@@ -84,6 +84,13 @@
             font-family: 'Glacial Indifference Bold';
         }
 
+        &-comment {
+            transform: scale(1.2);
+            position: absolute;
+            top: 15px;
+            right: 5%;
+        }
+
         textarea {
             margin-top: 5px;
             padding: 10px;

src/app/pieces/step/step.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { Mission } from 'src/app/class/mission/mission';
 import { Role } from 'src/app/class/role/role';
 import { Step } from 'src/app/class/step/step';
+import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
 
 @Component({
   selector: 'app-step',
@@ -18,14 +19,14 @@ export class StepComponent implements OnInit {
   displayMenu: string = 'hide';
   pieceWidth = '400px';
 
-  constructor() { }
+  constructor(private pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
     this.durationChange();
   }
 
   onClickDots(): void {
-    
+    this.pieceDetailsService.piece = this.step;
   }
 
   onClickErase(): void {

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

@@ -75,6 +75,7 @@
         <div class="piece-form-top">
             <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
             <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>
         </div>
         <textarea class="piece-form-content" [(ngModel)]="task.objective" placeholder="Vérifier ses connaissances sur les formulaires PHP"></textarea>
         <div class="piece-form-bottom">

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

@@ -231,6 +231,13 @@
                 margin-left: 10px;
             }
 
+            &-comment {
+                transform: scale(1.2);
+                position: absolute;
+                top: 25px;
+                right: 5%;
+            }
+
             &-symbol {
                 width: 50px;
                 height: 50px;

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

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 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';
 
 @Component({
   selector: 'app-annexe-task',
@@ -22,7 +23,7 @@ export class AnnexeTaskComponent implements OnInit {
   @Input() i!: number;
   @Input() j!: number;
 
-  constructor() { }
+  constructor(private pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
     this.durationChange();
@@ -52,7 +53,7 @@ export class AnnexeTaskComponent implements OnInit {
   } 
 
   onClickDots(): void {
-    
+    this.pieceDetailsService.piece = this.task;
   }
 
   onClickDelete(): void {

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

@@ -103,6 +103,7 @@
         <div class="piece-form-top">
             <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
             <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>
             <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
                 <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    

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

@@ -266,6 +266,13 @@
                 margin-left: 10px;
             }
 
+            &-comment {
+                transform: scale(1.2);
+                position: absolute;
+                top: 25px;
+                right: 25%;
+            }
+
             &-symbol {
                 width: 50px;
                 height: 50px;

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

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 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';
 
 @Component({
   selector: 'app-final-task',
@@ -22,7 +23,7 @@ export class FinalTaskComponent implements OnInit {
   @Input() i!: number;
   @Input() j!: number;
 
-  constructor() { }
+  constructor(private pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
     this.durationChange();
@@ -54,7 +55,7 @@ export class FinalTaskComponent implements OnInit {
   } 
 
   onClickDots(): void {
-    
+    this.pieceDetailsService.piece = this.task;
   }
 
   onClickChange(type: string): void {

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

@@ -104,6 +104,7 @@
         <div class="piece-form-top">
             <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
             <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>
             <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
                 <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    

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

@@ -274,6 +274,13 @@
                 margin-left: 10px;
             }
 
+            &-comment {
+                transform: scale(1.2);
+                position: absolute;
+                top: 25px;
+                right: 25%;
+            }
+
             &-symbol {
                 width: 50px;
                 height: 50px;

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

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 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';
 
 @Component({
   selector: 'app-optionnal-task',
@@ -22,7 +23,7 @@ export class OptionnalTaskComponent implements OnInit {
   @Input() i!: number;
   @Input() j!: number;
 
-  constructor() { }
+  constructor(private pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
     this.durationChange();
@@ -54,7 +55,7 @@ export class OptionnalTaskComponent implements OnInit {
   } 
 
   onClickDots(): void {
-    
+    this.pieceDetailsService.piece = this.task;
   }
 
   onClickChange(type: string): void {

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

@@ -96,6 +96,7 @@
         <div class="piece-form-top">
             <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
             <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>
             <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
                 <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    

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

@@ -269,6 +269,13 @@
                 margin-left: 10px;
             }
 
+            &-comment {
+                transform: scale(1.2);
+                position: absolute;
+                top: 25px;
+                right: 25%;
+            }
+
             &-symbol {
                 width: 50px;
                 height: 50px;

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

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 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';
 
 @Component({
   selector: 'app-random-event',
@@ -22,7 +23,7 @@ export class RandomEventComponent implements OnInit {
   @Input() i!: number;
   @Input() j!: number;
 
-  constructor() { }
+  constructor(protected pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
     this.durationChange();
@@ -54,7 +55,7 @@ export class RandomEventComponent implements OnInit {
   } 
 
   onClickDots(): void {
-    
+    this.pieceDetailsService.piece = this.task;
   }
 
   onClickDelete(): void {

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

@@ -13,4 +13,5 @@
         <label>Recommencer<br>le tour jusqu'à ce que :</label>
         <textarea [(ngModel)]="task.objective" placeholder="Faire valider au commanditaire"></textarea>
     </div>
+    <mat-icon class="piece-form-comment" fontIcon="comment" *ngIf="task.comments.length > 0"></mat-icon>
 </div>

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

@@ -86,6 +86,13 @@
             height: 50%;
             font-size: 15px;
         }
+
+        &-comment {
+            transform: scale(1.2);
+            position: absolute;
+            bottom: 50px;
+            left: 35px;
+        }
     }
 }
 

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

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 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';
 
 @Component({
   selector: 'app-repeat-task',
@@ -18,7 +19,7 @@ export class RepeatTaskComponent implements OnInit {
   @Input() i!: number;
   @Input() j!: number;
 
-  constructor() { }
+  constructor(protected pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
   }
@@ -28,7 +29,7 @@ export class RepeatTaskComponent implements OnInit {
   } 
 
   onClickDots(): void {
-    
+    this.pieceDetailsService.piece = this.task;
   }
 
   onClickDelete(): void {

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

@@ -104,6 +104,7 @@
         <div class="piece-form-top">
             <input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
             <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>
             <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
                 <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    

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

@@ -278,6 +278,13 @@
                 margin-left: 10px;
             }
 
+            &-comment {
+                transform: scale(1.2);
+                position: absolute;
+                top: 25px;
+                right: 25%;
+            }
+
             &-symbol {
                 width: 50px;
                 height: 50px;

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

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 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';
 
 @Component({
   selector: 'app-task',
@@ -22,7 +23,7 @@ export class TaskComponent implements OnInit {
   @Input() i!: number;
   @Input() j!: number;
 
-  constructor() { }
+  constructor(protected pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
     this.durationChange();
@@ -54,7 +55,7 @@ export class TaskComponent implements OnInit {
   } 
 
   onClickDots(): void {
-    
+    this.pieceDetailsService.piece = this.task;
   }
 
   onClickChange(type: string): void {

src/app/services/piece-details/piece-details.service.spec.ts

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

src/app/services/piece-details/piece-details.service.ts

+import { Injectable } from '@angular/core';
+import { Task } from 'src/app/class/task/task';
+import { Role } from 'src/app/class/role/role';
+import { Mission } from 'src/app/class/mission/mission';
+import { Step } from 'src/app/class/step/step';
+import { Scenario } from 'src/app/class/scenario/scenario';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PieceDetailsService {
+
+  piece!: (Task | Role | Mission | Step | Scenario);
+
+  constructor() { }
+
+  pieceIsTask(): boolean {
+    return this.piece instanceof Task;
+  }
+
+  pieceIsRole(): boolean {
+    return this.piece instanceof Role;
+  }
+
+  pieceIsMission(): boolean {
+    return this.piece instanceof Mission;
+  }
+
+  pieceIsStep(): boolean {
+    return this.piece instanceof Step;
+  }
+
+  pieceIsScenatio(): boolean {
+    return this.piece instanceof Scenario;
+  }
+
+  pieceAsTask(): Task {
+    return this.piece as Task;
+  }
+
+  pieceAsRole(): Role {
+    return this.piece as Role;
+  }
+
+  pieceAsMission(): Mission {
+    return this.piece as Mission;
+  }
+
+  pieceAsStep(): Step {
+    return this.piece as Step;
+  }
+
+  pieceAsScenario(): Scenario {
+    return this.piece as Scenario;
+  }
+}

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Task } from 'src/app/class/task/task';
 
 @Component({
   selector: 'app-characters',
@@ -7,6 +8,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CharactersComponent implements OnInit {
 
+  @Input() task: Task = new Task('normal');
+
   constructor() { }
 
   ngOnInit(): void {

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

@@ -3,15 +3,15 @@
         <div class="piece-form-title">Commentaires</div>
 
         <div class="piece-form-comments">
-            <app-comment></app-comment>
+            <app-comment *ngFor="let comment of piece.comments, let i = index" [comment]="comment" [comments]="piece.comments" [index]="i"></app-comment>
         </div>
 
         <div class="piece-form-newcomment">
             <div class="piece-form-newcomment-form">
                 <label>Nouveau commentaire</label>
-                <textarea></textarea>
+                <textarea [(ngModel)]="newComment"></textarea>
             </div>
-            <button mat-button>Ajouter un commentaire</button>
+            <button mat-button (click)="addComment()">Ajouter un commentaire</button>
         </div>
 
     </div>

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Mission } from 'src/app/class/mission/mission';
+import { Role } from 'src/app/class/role/role';
+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';
 
 @Component({
   selector: 'app-comments',
@@ -7,9 +13,20 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CommentsComponent implements OnInit {
 
+  @Input() piece!: (Role | Task | Mission | Step | Scenario);
+  newComment: string = '';
+
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  addComment(): void {
+    if (this.newComment.length > 0) {
+      let comment = new Comment();
+      comment.content = this.newComment;
+      this.newComment = '';
+      this.piece.comments.push(comment);      
+    }
+  }
 }

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Task } from 'src/app/class/task/task';
 
 @Component({
   selector: 'app-interupt',
@@ -7,6 +8,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class InteruptComponent implements OnInit {
 
+  @Input() task: Task = new Task('normal');
+
   constructor() { }
 
   ngOnInit(): void {

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Task } from 'src/app/class/task/task';
 
 @Component({
   selector: 'app-repeat',
@@ -7,6 +8,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class RepeatComponent implements OnInit {
 
+  @Input() task: Task = new Task('normal');
+
   constructor() { }
 
   ngOnInit(): void {

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Role } from 'src/app/class/role/role';
 
 @Component({
   selector: 'app-role-occurence',
@@ -7,6 +8,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class RoleOccurenceComponent implements OnInit {
 
+  @Input() role: Role = new Role();
+
   constructor() { }
 
   ngOnInit(): void {

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

@@ -14,17 +14,14 @@ export class RulesComponent implements OnInit {
   constructor() { }
 
   ngOnInit(): void {
-    console.log(this.scenario.ressources)
   }
 
   addRessource(): void {
     this.scenario.ressources.push(new Ressource());
-    console.log('ajout ressource');
   }
 
   removeRessource(index: number): void {
     this.scenario.ressources.splice(index, 1);
-    console.log('retrait ressource');
   }
 
 }

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Task } from 'src/app/class/task/task';
 
 @Component({
   selector: 'app-supplementary-task',
@@ -7,6 +8,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SupplementaryTaskComponent implements OnInit {
 
+  @Input() task: Task = new Task('normal');
+
   constructor() { }
 
   ngOnInit(): void {