sider complete: characters - occurences - repeat - interrupt

src/app/app.component.html

@@ -105,10 +105,10 @@
     <div class="container-sider">
         <app-rules class="container-sider-element" [scenario]="scenario"></app-rules>
         <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-supplementary-task class="container-sider-element" [task]="pieceDetailsService.pieceAsTask()" [role]="pieceDetailsService.parentAsRole()" *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-characters class="container-sider-element" [scenario]="scenario" [task]="pieceDetailsService.pieceAsTask()" *ngIf="pieceDetailsService.pieceIsTask()"></app-characters>
         <app-comments class="container-sider-element" [piece]="pieceDetailsService.piece"></app-comments>
     </div>
 

src/app/app.component.ts

@@ -111,6 +111,19 @@ export class AppComponent {
                 if (task instanceof Task) {
                   task.comments = task.comments.map((commentData: any) => Object.assign(new Comment(), commentData));
                   task.symbol = Object.assign(new Symbol(), task.symbol);
+                  task.characters = task.characters.map((characterData: any) => Object.assign(new Character(), characterData));
+                  task.characters.forEach((character, index) => {
+                    console.log(character instanceof Character);
+                    let i: number | undefined = scenario.characters.findIndex(element => element.name == character.name && element.description == character.description && element.color == character.color);
+                    if (typeof i !== 'undefined' && i !== -1) {
+                      task.characters[i] = scenario.characters[index];
+                    }
+                  });
+                  let supplementaryRoleIndex: number | undefined = role.supplementaryRoles.findIndex(element =>
+                    element.name == task.supplementaryRole.name 
+                    && element.color == task.supplementaryRole.color
+                  );
+                  task.supplementaryRole = role.supplementaryRoles[supplementaryRoleIndex];
                 }
               });
             });

src/app/class/character/character.ts

@@ -2,5 +2,5 @@ export class Character {
 
     name: string = '';
     description: string = '';
-
+    color: string = '';
 }

src/app/class/role-occurrence/role-occurrence.ts

 export class RoleOccurrence {
     iteration: number = 1;
-    min!: number;
-    max!:number;
+    min: number = 0;
+    max:number = 0;
 }

src/app/class/task/task.ts

@@ -14,7 +14,7 @@ export class Task {
     duration: number = 1;
     durationUnit: string = 'UT';
     comments: Comment[] = [];
-    character!: Character;
+    characters: Character[] = [];
     repeat: Repeat = new Repeat();
 
     supplementaryRole!: SupplementaryRole;

src/app/components/character/character.component.html

@@ -3,13 +3,13 @@
         <mat-icon fontIcon="person"></mat-icon>
         <div class="character-top-name">
             <label for="name">Nom</label>
-            <input name="name" type="text"/>                    
+            <input name="name" type="text" [(ngModel)]="character.name"/>                    
         </div>
     </div>
     <div class="character-infos">
         <div class="character-infos-description">
             <label for="description">Description</label>
-            <textarea name="description"></textarea>
+            <textarea name="description" [(ngModel)]="character.description"></textarea>
         </div>
 
         <!--
@@ -27,8 +27,8 @@
 
         <div class="character-infos-color">
             <label for="color">Couleur</label>
-            <input name="color" type="color"/>
+            <input name="color" type="color" [(ngModel)]="character.color"/>
         </div>
     </div>
-    <button mat-button>Retirer de ma tâche</button>
+    <button mat-button (click)="unassignCharacter(index)">Retirer de ma tâche</button>
 </div>
\ No newline at end of file

src/app/components/character/character.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Character } from 'src/app/class/character/character';
+import { Task } from 'src/app/class/task/task';
 
 @Component({
   selector: 'app-character',
@@ -7,9 +9,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CharacterComponent implements OnInit {
 
+  @Input() task: Task = new Task('normal');
+  @Input() character: Character = new Character();
+  @Input() index: number = 0;
+
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  unassignCharacter(index: number): void {
+    this.task.characters.splice(index, 1);
+  }
+
 }

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'">
+<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)'">
     <div class="piece-attach piece-attach-left"></div>
-    <div class="piece-attach piece-attach-right"></div>
+    <div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
 
     <div class="piece-menu" [class]="displayMenu">
         <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
@@ -76,12 +79,15 @@
             <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>
+            <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" placeholder="Vérifier ses connaissances sur les formulaires PHP"></textarea>
         <div class="piece-form-bottom">
             <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
                 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">
                 <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()"/>
                 <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">

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

@@ -4,7 +4,6 @@
     width: 400px;
     height: 400px;
     position: relative;
-    background-color: var(--piece-background-color);
     transition: all 0.5s ease;
 
     &-menu {
@@ -157,7 +156,6 @@
             border-right: solid black 1px;
             width: 40px;
             height: 40px;
-            background-color: var(--piece-background-color);
             transform: translateY(-50%) rotate(45deg);
             position: absolute;
             right: -20px;
@@ -234,7 +232,14 @@
             &-comment {
                 transform: scale(1.2);
                 position: absolute;
-                top: 25px;
+                top: 20px;
+                right: 5%;
+            }
+
+            &-repeat {
+                transform: scale(1.2);
+                position: absolute;
+                top: 45px;
                 right: 5%;
             }
 
@@ -293,6 +298,20 @@
                 align-items: center;
                 justify-content: center;
             }
+
+            &-interrupt {
+                transform: scale(1.2);
+                position: absolute;
+                right: 41%;
+                bottom: 25px;
+            }
+
+            &-character {
+                transform: scale(1.2);
+                position: absolute;
+                left: 40%;
+                bottom: 25px;
+            }
         }
     }
 }

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

@@ -54,6 +54,7 @@ export class AnnexeTaskComponent implements OnInit {
 
   onClickDots(): void {
     this.pieceDetailsService.piece = this.task;
+    this.pieceDetailsService.parent = this.role;
   }
 
   onClickDelete(): void {

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'">
+<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)'">
     <div class="piece-attach piece-attach-left"></div>
 
     <div class="piece-menu" [class]="displayMenu">
@@ -104,6 +107,7 @@
             <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>
+            <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()">
                 <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    
@@ -113,6 +117,8 @@
             <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
                 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">
                 <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()"/>
                 <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">

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

@@ -4,7 +4,6 @@
     width: 400px;
     height: 400px;
     position: relative;
-    background-color: var(--piece-background-color);
     transition: all 0.5s ease;
 
     &-menu {
@@ -203,7 +202,6 @@
             border-right: solid black 1px;
             width: 40px;
             height: 40px;
-            background-color: var(--background-color);
             transform: translateY(-50%) rotate(45deg);
             position: absolute;
             left: -20px;
@@ -269,7 +267,14 @@
             &-comment {
                 transform: scale(1.2);
                 position: absolute;
-                top: 25px;
+                top: 20px;
+                right: 25%;
+            }
+
+            &-repeat {
+                transform: scale(1.2);
+                position: absolute;
+                top: 45px;
                 right: 25%;
             }
 
@@ -330,6 +335,20 @@
                 align-items: center;
                 justify-content: center;
             }
+
+            &-interrupt {
+                transform: scale(1.2);
+                position: absolute;
+                right: 41%;
+                bottom: 25px;
+            }
+
+            &-character {
+                transform: scale(1.2);
+                position: absolute;
+                left: 40%;
+                bottom: 25px;
+            }
         }
     }
 }

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

@@ -56,6 +56,7 @@ export class FinalTaskComponent implements OnInit {
 
   onClickDots(): void {
     this.pieceDetailsService.piece = this.task;
+    this.pieceDetailsService.parent = this.role;
   }
 
   onClickChange(type: string): void {

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'">
+<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)'">
     <div class="piece-attach piece-attach-left"></div>
-    <div class="piece-attach piece-attach-right"></div>
+    <div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
 
     <div class="piece-menu" [class]="displayMenu">
         <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
@@ -105,6 +108,7 @@
             <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>
+            <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()">
                 <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    
@@ -114,6 +118,8 @@
             <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
                 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">
                 <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()"/>
                 <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">

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

@@ -4,7 +4,6 @@
     width: 400px;
     height: 400px;
     position: relative;
-    background-color: var(--piece-background-color);
     transition: all 0.5s ease;
 
     &-menu {
@@ -203,7 +202,6 @@
             border-right: solid black 1px;
             width: 40px;
             height: 40px;
-            background-color: var(--piece-background-color);
             transform: translateY(-50%) rotate(45deg);
             position: absolute;
             right: -20px;
@@ -277,7 +275,14 @@
             &-comment {
                 transform: scale(1.2);
                 position: absolute;
-                top: 25px;
+                top: 20px;
+                right: 25%;
+            }
+
+            &-repeat {
+                transform: scale(1.2);
+                position: absolute;
+                top: 45px;
                 right: 25%;
             }
 
@@ -338,6 +343,20 @@
                 align-items: center;
                 justify-content: center;
             }
+
+            &-interrupt {
+                transform: scale(1.2);
+                position: absolute;
+                right: 41%;
+                bottom: 25px;
+            }
+
+            &-character {
+                transform: scale(1.2);
+                position: absolute;
+                left: 40%;
+                bottom: 25px;
+            }
         }
     }
 }

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

@@ -56,6 +56,7 @@ export class OptionnalTaskComponent implements OnInit {
 
   onClickDots(): void {
     this.pieceDetailsService.piece = this.task;
+    this.pieceDetailsService.parent = this.role;
   }
 
   onClickChange(type: string): void {

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

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displayPrequires='hide'; displaySymbolChoice='hide'">
+<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)'">
     <div class="piece-attach piece-attach-left"></div>
-    <div class="piece-attach piece-attach-right"></div>
+    <div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
 
     <div class="piece-menu" [class]="displayMenu">
         <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
@@ -97,6 +100,7 @@
             <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>
+            <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()">
                 <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    
@@ -106,6 +110,8 @@
             <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
                 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">
                 <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()"/>
                 <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">

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

@@ -4,7 +4,6 @@
     width: 400px;
     height: 400px;
     position: relative;
-    background-color: var(--piece-background-color);
     transition: all 0.5s ease;
 
     &-menu {
@@ -194,7 +193,6 @@
             border-right: solid black 1px;
             width: 40px;
             height: 40px;
-            background-color: var(--piece-background-color);
             transform: translateY(-50%) rotate(45deg);
             position: absolute;
             right: -20px;
@@ -272,7 +270,14 @@
             &-comment {
                 transform: scale(1.2);
                 position: absolute;
-                top: 25px;
+                top: 20px;
+                right: 25%;
+            }
+
+            &-repeat {
+                transform: scale(1.2);
+                position: absolute;
+                top: 45px;
                 right: 25%;
             }
 
@@ -333,6 +338,20 @@
                 align-items: center;
                 justify-content: center;
             }
+
+            &-interrupt {
+                transform: scale(1.2);
+                position: absolute;
+                right: 41%;
+                bottom: 25px;
+            }
+
+            &-character {
+                transform: scale(1.2);
+                position: absolute;
+                left: 40%;
+                bottom: 25px;
+            }
         }
     }
 }

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

@@ -56,6 +56,7 @@ export class RandomEventComponent implements OnInit {
 
   onClickDots(): void {
     this.pieceDetailsService.piece = this.task;
+    this.pieceDetailsService.parent = this.role;
   }
 
   onClickDelete(): void {

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

@@ -14,4 +14,7 @@
         <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>
+    <mat-icon class="piece-form-repeat" fontIcon="refresh" *ngIf="task.repeat.iteration > 0 || task.repeat.while != ''"></mat-icon>
+    <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>

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

@@ -91,7 +91,28 @@
             transform: scale(1.2);
             position: absolute;
             bottom: 50px;
-            left: 35px;
+            left: 50px;
+        }
+
+        &-repeat {
+            transform: scale(1.2);
+            position: absolute;
+            bottom: 50px;
+            left: 100px;
+        }
+
+        &-character {
+            transform: scale(1.2);
+            position: absolute;
+            bottom: 50px;
+            left: 150px;
+        }
+
+        &-interrupt {
+            transform: scale(1.2);
+            position: absolute;
+            bottom: 50px;
+            left: 200px;
         }
     }
 }

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

@@ -30,6 +30,7 @@ export class RepeatTaskComponent implements OnInit {
 
   onClickDots(): void {
     this.pieceDetailsService.piece = this.task;
+    this.pieceDetailsService.parent = this.role;
   }
 
   onClickDelete(): void {

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

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displayPrequires='hide'; displaySymbolChoice='hide'">
+<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)'">
     <div class="piece-attach piece-attach-left"></div>
-    <div class="piece-attach piece-attach-right"></div>
+    <div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
 
     <div class="piece-menu" [class]="displayMenu">
         <mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
@@ -105,6 +108,7 @@
             <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>
+            <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()">
                 <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
             </button>    
@@ -114,6 +118,8 @@
             <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
                 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">
                 <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()"/>
                 <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">

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

@@ -4,7 +4,6 @@
     width: 400px;
     height: 400px;
     position: relative;
-    background-color: var(--piece-background-color);
     transition: all 0.5s ease;
 
     &-menu {
@@ -203,7 +202,6 @@
             border-right: solid black 1px;
             width: 40px;
             height: 40px;
-            background-color: var(--piece-background-color);
             transform: translateY(-50%) rotate(45deg);
             position: absolute;
             right: -20px;
@@ -281,7 +279,14 @@
             &-comment {
                 transform: scale(1.2);
                 position: absolute;
-                top: 25px;
+                top: 20px;
+                right: 25%;
+            }
+
+            &-repeat {
+                transform: scale(1.2);
+                position: absolute;
+                top: 45px;
                 right: 25%;
             }
 
@@ -342,6 +347,20 @@
                 align-items: center;
                 justify-content: center;
             }
+
+            &-interrupt {
+                transform: scale(1.2);
+                position: absolute;
+                right: 41%;
+                bottom: 25px;
+            }
+
+            &-character {
+                transform: scale(1.2);
+                position: absolute;
+                left: 40%;
+                bottom: 25px;
+            }
         }
     }
 }

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

@@ -56,6 +56,7 @@ export class TaskComponent implements OnInit {
 
   onClickDots(): void {
     this.pieceDetailsService.piece = this.task;
+    this.pieceDetailsService.parent = this.role;
   }
 
   onClickChange(type: string): void {

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

@@ -11,6 +11,7 @@ import { Scenario } from 'src/app/class/scenario/scenario';
 export class PieceDetailsService {
 
   piece!: (Task | Role | Mission | Step | Scenario);
+  parent!: (Role | Mission | Scenario);
 
   constructor() { }
 
@@ -53,4 +54,8 @@ export class PieceDetailsService {
   pieceAsScenario(): Scenario {
     return this.piece as Scenario;
   }
+
+  parentAsRole(): Role {
+    return this.parent as Role;
+  }
 }

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

@@ -7,13 +7,13 @@
                 <mat-icon fontIcon="person_add"></mat-icon>
                 <div class="piece-form-create-top-name">
                     <label for="name">Nom</label>
-                    <input name="name" type="text" />
+                    <input name="name" type="text" [(ngModel)]="newCharacter.name"/>
                 </div>
             </div>
             <div class="piece-form-create-infos">
                 <div class="piece-form-create-infos-description">
                     <label for="description">Description</label>
-                    <textarea name="description"></textarea>
+                    <textarea name="description" [(ngModel)]="newCharacter.description"></textarea>
                 </div>
 
                 <!--
@@ -31,10 +31,10 @@
 
                 <div class="piece-form-create-infos-color">
                     <label for="color">Couleur</label>
-                    <input name="color" type="color" />
+                    <input name="color" type="color" [(ngModel)]="newCharacter.color"/>
                 </div>
             </div>
-            <button mat-button>Créer</button>
+            <button mat-button (click)="createCharacter()">Créer</button>
         </div>
 
         <div class="piece-form-select">
@@ -43,12 +43,14 @@
                 <mat-icon fontIcon="person"></mat-icon>
                 <div class="piece-form-select-container-select">
                     <label for="name">Nom</label>
-                    <select name="name">
-                        <option>test</option>
+                    <select name="name" [(ngModel)]="selectedAssignCharacter">
+                        <ng-container *ngFor="let character of scenario.characters">
+                            <option [ngValue]="character" *ngIf="notAlreadyAssigned(character)">{{character.name}}</option>
+                        </ng-container>
                     </select>
                 </div>
             </div>
-            <button mat-button>Sélectionner</button>
+            <button mat-button (click)="assignCharacter()">Sélectionner</button>
         </div>
 
         <div class="piece-form-delete">
@@ -57,18 +59,17 @@
                 <mat-icon fontIcon="person_off"></mat-icon>
                 <div class="piece-form-delete-container-select">
                     <label for="name">Nom</label>
-                    <select name="name">
-                        <option>test</option>
+                    <select name="name" [(ngModel)]="selectedDeleteCharacterIndex">
+                        <option [ngValue]="i" *ngFor="let character of scenario.characters, let i = index">{{character.name}}</option>
                     </select>
                 </div>
             </div>
-            <button mat-button>Supprimer</button>
+            <button mat-button (click)="deleteCharacter()">Supprimer</button>
         </div>
 
         <div>
             <div class="piece-form-title">Personnage(s) utilisé(s)</div>
-            <app-character></app-character>
-            <app-character></app-character>
+            <app-character [task]="task" [character]="character" [index]="i" *ngFor="let character of task.characters, let i = index"></app-character>
         </div>
 
     </div>

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

 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';
 
 @Component({
@@ -8,11 +10,50 @@ import { Task } from 'src/app/class/task/task';
 })
 export class CharactersComponent implements OnInit {
 
+  @Input() scenario: Scenario = new Scenario();
   @Input() task: Task = new Task('normal');
+  newCharacter: Character = new Character();
+  selectedAssignCharacter!: Character | undefined;
+  selectedDeleteCharacterIndex!: number;
 
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  createCharacter(): void {
+    if (this.newCharacter.name != '') {
+      this.scenario.characters.push(this.newCharacter);
+      this.newCharacter = new Character();
+    }
+  }
+
+  deleteCharacter(): void {
+    if (this.selectedDeleteCharacterIndex != undefined) {
+      this.scenario.missions.forEach(mission => {
+        mission.roles.forEach(role => {
+          role.tasks.forEach(inlineTask => {
+            inlineTask.forEach(task => {
+              let index: number | undefined = task?.characters.findIndex(character => character == this.scenario.characters[this.selectedDeleteCharacterIndex]);
+              if (typeof index !== 'undefined' && index !== -1) {
+                task?.characters.splice(index, 1);
+              }
+            });
+          });
+        });
+      });
+      this.scenario.characters.splice(this.selectedDeleteCharacterIndex, 1);
+    }
+  }
+
+  assignCharacter(): void {
+    if (this.selectedAssignCharacter != undefined) {
+      this.task.characters.push(this.selectedAssignCharacter);
+      this.selectedAssignCharacter = undefined;
+    }
+  }
+
+  notAlreadyAssigned(character: Character): boolean {
+    return !this.task.characters.includes(character);
+  }
 }

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

@@ -7,7 +7,7 @@
             </div>
         </div>
         <div class="piece-form-textarea">
-            <textarea></textarea>
+            <textarea [(ngModel)]="task.interrupt"></textarea>
         </div>    
     </div>
 </div>
\ No newline at end of file

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

@@ -4,13 +4,13 @@
             <mat-icon fontIcon="refresh"></mat-icon>
             <div class="piece-form-header-for">
                 <label>Répéter</label>
-                <input type="text"/>
+                <input type="text" [(ngModel)]="task.repeat.iteration"/>
                 <label>fois</label>
             </div>
         </div>
         <div class="piece-form-while">
             <label>ou jusqu'à ce que :</label>
-            <textarea></textarea>
+            <textarea [(ngModel)]="task.repeat.while"></textarea>
         </div>    
     </div>
 </div>
\ No newline at end of file

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

 <div class="piece">
     <div class="piece-form">
         <div class="piece-title">Occurrence du rôle</div>
-        <div class="piece-form-occurrence">
+        <div class="piece-form-occurrence" *ngFor="let occurence of role.occurences, let i = index">
             <div class="piece-form-occurrence-text">
-                <input type="text"/>
+                <input type="text" [(ngModel)]="occurence.iteration"/>
                 <label> entre </label>
-                <input type="text"/>
+                <input type="text" [(ngModel)]="occurence.min"/>
                 <label> et </label>
-                <input type="text"/>
+                <input type="text" [(ngModel)]="occurence.max"/>
                 <label> joueurs</label>  
             </div>
-            <button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
+            <button mat-button (click)="removeOccurrence(i)"><mat-icon fontIcon="remove"></mat-icon></button>
         </div>
-        <div class="piece-form-occurrence">
-            <div class="piece-form-occurrence-text">
-                <input type="text"/>
-                <label> entre </label>
-                <input type="text"/>
-                <label> et </label>
-                <input type="text"/>
-                <label> joueurs</label>  
-            </div>
-            <button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
-        </div>
-        <button mat-button class="piece-form-add"><mat-icon fontIcon="add"></mat-icon></button>
+        <button mat-button class="piece-form-add" (click)="addOccurrence()"><mat-icon fontIcon="add"></mat-icon></button>
     </div>
 </div>
\ No newline at end of file

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';
 
 @Component({
@@ -15,4 +16,12 @@ export class RoleOccurenceComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  addOccurrence(): void {
+    this.role.occurences.push(new RoleOccurrence());
+  }
+
+  removeOccurrence(index: number): void {
+    this.role.occurences.splice(index, 1);
+  }
+
 }

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

-<div class="piece">
+<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%)'">
     <div class="piece-form">
         <div class="piece-title">Tâche liée au rôle supplémentaire</div>
+        <!--
         <div class="piece-form-checkbox">
             <input type="checkbox" [(ngModel)]="checkbox"/>
             <label>Oui</label>
         </div>
-        <div class="piece-form-select" *ngIf="checkbox">
+        œ-->
+        <div class="piece-form-select">
             <label>Rôle</label>
-            <select>
-                <option>Rôle 1</option>
+            <select [(ngModel)]="task.supplementaryRole">
+                <option selected [ngValue]="undefined">Aucun</option>
+                <ng-container *ngFor="let supplementaryRole of role.supplementaryRoles">
+                    <option [ngValue]="supplementaryRole">{{supplementaryRole.name}}</option>
+                </ng-container>
             </select>
         </div>
     </div>

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

@@ -4,7 +4,7 @@
     width: 300px;
     height: 100px;
     position: relative;
-    background: 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%);
+    //background: 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%);
     border: solid black 1px;
     border-radius: 10px;
 
@@ -23,7 +23,7 @@
         }
 
         &-select {
-            margin-top: 5px;
+            margin-top: 15px;
             margin-left: 10px;
             width: 100%;
 

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';
 
 @Component({
   selector: 'app-supplementary-task',
@@ -9,12 +10,10 @@ import { Task } from 'src/app/class/task/task';
 export class SupplementaryTaskComponent implements OnInit {
 
   @Input() task: Task = new Task('normal');
+  @Input() role: Role = new Role();
 
   constructor() { }
 
   ngOnInit(): void {
   }
-
-  checkbox: boolean = false;
-
 }