character icon color and gradient on tasks

src/app/class/character/character.ts

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

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

@@ -108,7 +108,9 @@
             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-character" fontIcon="person" *ngIf="task.characters.length > 0"
+            [style.color]="task.characters.length == 1 ? task.characters[0].color : 'black'"
+            [style.background]="task.characters.length > 1 ? 'linear-gradient('+ task.characters[0].color +','+ task.characters[task.characters.length-1].color +')' : 'white'"></mat-icon>
             <mat-icon class="piece-form-bottom-interrupt" fontIcon="front_hand" *ngIf="task.interrupt != ''"></mat-icon>
             <div class="piece-form-bottom-duration"
             matTooltip="Durée de la tâche (en unité de temps, minutes ou tours)"

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

@@ -319,7 +319,6 @@
                 left: 40%;
                 bottom: 25px;
                 border-radius: 50%;
-                background-color: white;
                 padding: 4px;
             }
         }

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

@@ -141,7 +141,9 @@
             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-character" fontIcon="person" *ngIf="task.characters.length > 0"
+            [style.color]="task.characters.length == 1 ? task.characters[0].color : 'black'"
+            [style.background]="task.characters.length > 1 ? 'linear-gradient('+ task.characters[0].color +','+ task.characters[task.characters.length-1].color +')' : 'white'"></mat-icon>
             <mat-icon class="piece-form-interrupt" fontIcon="front_hand" *ngIf="task.interrupt != ''"></mat-icon>
             <div class="piece-form-bottom-duration"
             matTooltip="Durée de la tâche (en unité de temps, minutes ou tours)"

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

@@ -359,7 +359,6 @@
             left: 40%;
             bottom: 25px;
             border-radius: 50%;
-            background-color: white;
             padding: 4px;
         }
     }

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

@@ -142,7 +142,9 @@
             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-character" fontIcon="person" *ngIf="task.characters.length > 0"
+            [style.color]="task.characters.length == 1 ? task.characters[0].color : 'black'"
+            [style.background]="task.characters.length > 1 ? 'linear-gradient('+ task.characters[0].color +','+ task.characters[task.characters.length-1].color +')' : 'white'"></mat-icon>
             <mat-icon class="piece-form-interrupt" fontIcon="front_hand" *ngIf="task.interrupt != ''"></mat-icon>
             <div class="piece-form-bottom-duration"
             matTooltip="Durée de la tâche (en unité de temps, minutes ou tours)"

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

@@ -370,7 +370,6 @@
             left: 40%;
             bottom: 25px;
             border-radius: 50%;
-            background-color: white;
             padding: 4px;
         }
     }

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

@@ -130,7 +130,9 @@
             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-character" fontIcon="person" *ngIf="task.characters.length > 0"
+            [style.color]="task.characters.length == 1 ? task.characters[0].color : 'black'"
+            [style.background]="task.characters.length > 1 ? 'linear-gradient('+ task.characters[0].color +','+ task.characters[task.characters.length-1].color +')' : 'white'"></mat-icon>
             <mat-icon class="piece-form-bottom-interrupt" fontIcon="front_hand" *ngIf="task.interrupt != ''"></mat-icon>
             <div class="piece-form-bottom-duration"
             matTooltip="Durée de la tâche (en unité de temps, minutes ou tours)"

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

@@ -359,7 +359,6 @@
                 left: 40%;
                 bottom: 25px;
                 border-radius: 50%;
-                background-color: white;
                 padding: 4px;
             }
         }

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

@@ -25,6 +25,8 @@
     </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-character" fontIcon="person" *ngIf="task.characters.length > 0"
+    [style.color]="task.characters.length == 1 ? task.characters[0].color : 'black'"
+    [style.background]="task.characters.length > 1 ? 'linear-gradient('+ task.characters[0].color +','+ task.characters[task.characters.length-1].color +')' : 'white'"></mat-icon>
     <mat-icon class="piece-form-interrupt" fontIcon="front_hand" *ngIf="task.interrupt != ''"></mat-icon>
 </div>

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

@@ -115,7 +115,6 @@
             position: absolute;
             bottom: 35px;
             left: 150px;
-            background-color: white;
             padding: 4px;
             border-radius: 50%;
         }

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

@@ -140,7 +140,9 @@
             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-character" fontIcon="person" *ngIf="task.characters.length > 0"
+                [style.color]="task.characters.length == 1 ? task.characters[0].color : 'black'"
+                [style.background]="task.characters.length > 1 ? 'linear-gradient('+ task.characters[0].color +','+ task.characters[task.characters.length-1].color +')' : 'white'"></mat-icon>
             <mat-icon class="piece-form-bottom-interrupt" fontIcon="front_hand" *ngIf="task.interrupt != ''"></mat-icon>
             <div class="piece-form-bottom-duration"
             matTooltip="Durée de la tâche (en unité de temps, minutes ou tours)"

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

@@ -368,7 +368,6 @@
                 left: 40%;
                 bottom: 25px;
                 border-radius: 50%;
-                background-color: white;
                 padding: 4px;
             }
         }