dynamic UT

src/app/class/mission/mission.ts

@@ -36,6 +36,30 @@ export class Mission {
         }
     }
     
+    public equalizeLengths(): void {
+        this.unequalizeLenghts();
+
+        let maxLineLength: number = this.calcMaxLineLength()-1;
+
+        if (!(this.chronologie[maxLineLength - this.sumUT(this.chronologie)] instanceof Step)) {
+            this.chronologie[maxLineLength - this.sumUT(this.chronologie)] = null;
+        }
+
+        this.roles.forEach(role => {
+            if (!(role.chronologie[maxLineLength - this.sumUT(role.chronologie)] instanceof Step)) {
+                role.chronologie[maxLineLength - this.sumUT(role.chronologie)] = null;
+            }
+
+            role.tasks.forEach(inlineTasks => {
+                if (!(inlineTasks.some(task => task?.type == 'final') || inlineTasks.some(task => task?.type == 'repeat'))) {
+                    if (!(inlineTasks[maxLineLength - this.sumUT(inlineTasks)] instanceof Task)) {
+                        inlineTasks[maxLineLength - this.sumUT(inlineTasks)] = null;
+                    }
+                }
+            });
+        });
+    }
+
     public calcMaxLineLength(): number {
         let length: number = 0;
         let cpt: number = 0;
@@ -117,14 +141,14 @@ export class Mission {
         return length;
     }
 
-    public equalizeLengths(): void {
+    public unequalizeLenghts(): void {
         //Pour la chronologie
         if (this.chronologie.some(element => element instanceof Step)) {
-            let lastIndexStep = this.chronologie.length-1;
+            let lastIndexStep = this.chronologie.length - 1;
             while (!(this.chronologie[lastIndexStep] instanceof Step)) {
                 lastIndexStep--;
             }
-            this.chronologie.splice(lastIndexStep+1, this.chronologie.length);
+            this.chronologie.splice(lastIndexStep + 1, this.chronologie.length);
         } else {
             this.chronologie = [];
         }
@@ -133,11 +157,11 @@ export class Mission {
         this.roles.forEach(role => {
             // Pour la chronologie du role
             if (role.chronologie.some(element => element instanceof Step)) {
-                let lastIndexStep = role.chronologie.length-1;
+                let lastIndexStep = role.chronologie.length - 1;
                 while (!(role.chronologie[lastIndexStep] instanceof Step)) {
                     lastIndexStep--;
                 }
-                role.chronologie.splice(lastIndexStep+1, role.chronologie.length);
+                role.chronologie.splice(lastIndexStep + 1, role.chronologie.length);
             } else {
                 role.chronologie = [];
             }
@@ -145,80 +169,32 @@ export class Mission {
             // Pour les taches
             role.tasks.forEach((inlineTasks, index) => {
                 if (inlineTasks.some(element => element instanceof Task)) {
-                    let lastIndexTask = inlineTasks.length-1;
+                    let lastIndexTask = inlineTasks.length - 1;
                     while (!(inlineTasks[lastIndexTask] instanceof Task)) {
                         lastIndexTask--;
                     }
-                    inlineTasks.splice(lastIndexTask+1, inlineTasks.length);
+                    inlineTasks.splice(lastIndexTask + 1, inlineTasks.length);
                 } else {
                     role.tasks[index] = [];
                 }
             });
         });
-
-        //---------
-
-        let maxLineLength: number = this.calcMaxLineLength()-1;
-        if (!(this.chronologie[maxLineLength] instanceof Step)) {
-            this.chronologie[maxLineLength] = null;
     }
     
-        this.roles.forEach(role => {
-            if (!(role.chronologie[maxLineLength] instanceof Step)) {
-                role.chronologie[maxLineLength] = null;
-            }
-
-            role.tasks.forEach(inlineTasks => {
-                if (!(inlineTasks.some(task => task?.type == 'final') || inlineTasks.some(task => task?.type == 'repeat'))) {
-                    if (!(inlineTasks[maxLineLength] instanceof Task)) {
-                        inlineTasks[maxLineLength] = null;
-                    }
-                }
-            });
-        });
-
-        // DurationChange
-        /* 
-        let maxLineLength: number = this.calcMaxLineLength()-1;
-        if (!(this.chronologie[maxLineLength] instanceof Step)) {
-            this.chronologie[maxLineLength - this.sumUT(this.chronologie)] = null;
-        }
-
-        this.roles.forEach(role => {
-            if (!(role.chronologie[maxLineLength] instanceof Step)) {
-                role.chronologie[maxLineLength - this.sumUT(role.chronologie)] = null;
-            }
-
-            role.tasks.forEach(inlineTasks => {
-                if (!(inlineTasks[maxLineLength] instanceof Task)) {
-                    inlineTasks[maxLineLength - this.sumUT(inlineTasks)] = null;
-                }
-            });
-        });
-        */
-    }
-
-    // DurationChange
-    /*
-    sumUT(list: ((Step|null)|(Task|null))[]): number {
+    public sumUT(list: ((Step|null)|(Task|null))[]): number {
         let sum = 0;
-
         list.forEach(element => {
             if (element?.durationUnit == 'UT') {
-                console.log('UT OK');
                 if (element.duration > 1) {
-                    console.log('Duration < 1 OK');
                     if (element.duration>=10) {
-                        sum = sum + 10;
+                        sum = sum + 10-1;
                     } else {
-                        sum = sum + element.duration;
-                        console.log('addition : '+sum);
+                        sum = sum + element.duration-1;
                     }
                 }
             }
         });
-        console.log(sum);
         return sum;
     }
-    */
+    
 }

src/app/class/role/role.ts

@@ -62,8 +62,20 @@ export class Role {
             this.tasks[i][j] = this.tasks[i][j+1];
             this.tasks[i][j+1] = tmp;
         } else if (direction == 'top') {
-            this.tasks[i][j] = this.tasks[i-1][j];
-            this.tasks[i-1][j] = tmp;
+            if (this.tasks[i-1].some(element => element?.type == 'final' || element?.type == 'repeat')) {
+                if (this.tasks[i][j]?.type == 'final' || this.tasks[i][j]?.type == 'repeat') {
+                    this.tasks[i][j] = this.tasks[i-1][this.getLastTaskIndex(i-1)];
+                    this.tasks[i-1][this.getLastTaskIndex(i-1)] = tmp;
+                } else {
+                    let deplace = this.tasks[i-1][this.getLastTaskIndex(i-1)];
+                    this.tasks[i-1][this.getLastTaskIndex(i-1)] = tmp;
+                    this.tasks[i-1][this.getLastTaskIndex(i-1)+1] = deplace;
+                    this.tasks[i].splice(j, 1);
+                }
+            } else {
+                this.tasks[i-1][this.getLastTaskIndex(i-1)+1] = tmp;
+                this.tasks[i].splice(j, 1);
+            }
             if (!this.tasks[i].some(element => element instanceof Task)) {
                 this.tasks.splice(i,1);
             }
@@ -71,8 +83,20 @@ export class Role {
             if (this.tasks[i+2] == null) {
                 this.tasks[i+2] = [];
             }
-            this.tasks[i][j] = this.tasks[i+1][j];
-            this.tasks[i+1][j] = tmp;  
+            if (this.tasks[i+1].some(element => element?.type == 'final' || element?.type == 'repeat')) {
+                if (this.tasks[i][j]?.type == 'final' || this.tasks[i][j]?.type == 'repeat') {
+                    this.tasks[i][j] = this.tasks[i+1][this.getLastTaskIndex(i+1)];
+                    this.tasks[i+1][this.getLastTaskIndex(i+1)] = tmp;
+                } else {
+                    let deplace = this.tasks[i+1][this.getLastTaskIndex(i+1)];
+                    this.tasks[i+1][this.getLastTaskIndex(i+1)] = tmp;
+                    this.tasks[i+1][this.getLastTaskIndex(i+1)+1] = deplace;
+                    this.tasks[i].splice(j, 1);
+                }
+            } else {
+                this.tasks[i+1][this.getLastTaskIndex(i+1)+1] = tmp;
+                this.tasks[i].splice(j, 1);
+            }
         }
     }
 
@@ -86,4 +110,17 @@ export class Role {
             this.chronologie[i+1] = tmp;
         }
     }
+
+    public getLastTaskIndex(i: number): number {
+        let index: number;
+        if (this.tasks[i].some(element => element instanceof Task)) {
+            index = this.tasks[i].length-1 ;
+            while (!(this.tasks[i][index] instanceof Task)) {
+                index--;
+            }
+        } else {
+            index = 0;
+        }
+        return index;
+    }
 }

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

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
+<div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
     <div class="piece-attach piece-attach-right"></div>
     <div class="piece-attach piece-attach-left"></div>
 

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

@@ -5,7 +5,6 @@
     height: 300px;
     position: relative;
     background-color: var(--piece-background-color);
-    transition: all 0.5s ease;
 
     &-menu {
         position: absolute;

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

@@ -21,12 +21,51 @@ export class StepComponent implements OnInit {
   @Input() mission!: Mission;
 
   displayMenu: string = 'hide';
-  pieceWidth = '400px';
+  pieceWidth: number = 400;
 
   constructor(private pieceDetailsService: PieceDetailsService, public dialog: MatDialog, protected tooltipService: TooltipService) { }
 
   ngOnInit(): void {
-    this.durationChange();
+    this.setPieceWidth();
+    this.mission.equalizeLengths();
+  }
+  
+  durationChange(): void {
+    let beforeWidth: number = this.pieceWidth;
+    this.setPieceWidth();
+    let afterWidth: number = this.pieceWidth;
+    let difference: number;
+    // Increase
+    if (beforeWidth < afterWidth) {
+      difference = (afterWidth/beforeWidth)-1;
+      for(let k = 0; k < difference; k++) {
+        if (!(this.parent.chronologie[this.index+k+1] instanceof Step)) {
+          this.parent.chronologie.splice(this.index+k+1, 1);
+        }
+      }
+    }
+    // Decrease
+    if (afterWidth < beforeWidth) {
+      difference = (beforeWidth/afterWidth)-1
+      for (let k = 0; k < difference; k++) {
+        this.parent.chronologie.splice(this.index+k+1, 0, null);
+      }
+    }
+    this.mission.equalizeLengths();
+  }
+
+  setPieceWidth(): void {
+    if(this.step.durationUnit === 'UT') {
+      if(this.step.duration >= 1 && this.step.duration <= 10) {
+        this.pieceWidth = (this.step.duration*400);
+      } else if(this.step.duration > 10) {
+        this.pieceWidth = 4000;
+      } else {
+        this.pieceWidth = 400;
+      }
+    } else {
+      this.pieceWidth = 400;
+    }
   }
 
   onClickPiece(): void {
@@ -63,21 +102,4 @@ export class StepComponent implements OnInit {
     this.displayMenu = 'hide';
     this.mission.equalizeLengths();
   }
-
-  durationChange(): void {
-    /*
-    if(this.step.durationUnit === 'UT') {
-      if(this.step.duration >= 1 && this.step.duration <= 10) {
-        this.pieceWidth = (this.step.duration*400)+'px';
-      } else if(this.step.duration > 10) {
-        this.pieceWidth = '4000px';
-      } else {
-        this.pieceWidth = '400px';
-      }
-    } else {
-      this.pieceWidth = '400px';
-    }
-    */
-  }
-
 }
\ No newline at end of file

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

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
+<div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
     [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)'"
@@ -33,12 +33,12 @@
             <div class="piece-menu-directioncross-updownarrows">
                 <div class="piece-menu-updownarrows-up">
                     <mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top')"
-                    matTooltip="Décaler la tuile vers le haut."
+                    matTooltip="Décaler la tuile vers le haut (ceci placera la tuile à la fin de la ligne)."
                     matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>                
                 </div>
                 <div class="piece-menu-directioncross-updownarrows-down">
                     <mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom')"
-                    matTooltip="Décaler la tuile vers le bas."
+                    matTooltip="Décaler la tuile vers le bas (ceci placera la tuile à la fin de la ligne)."
                     matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
                 </div>
             </div>
@@ -121,15 +121,6 @@
             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()"
-            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"
-            [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)"
             matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
@@ -140,7 +131,15 @@
                     <option value="tours">tours</option> 
                 </select>
             </div>
+            <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>
+            <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>
         </div>
-
     </div>
 </div>

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

@@ -4,7 +4,6 @@
     width: 400px;
     height: 400px;
     position: relative;
-    transition: all 0.5s ease;
 
     &-menu {
         position: absolute;
@@ -74,7 +73,7 @@
         background-color: #f7f7f7;
         z-index: -1;
         bottom: 10px;
-        left: 45px;
+        right: 0;
         border: solid black 1px;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;

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

@@ -23,7 +23,7 @@ export class AnnexeTaskComponent implements OnInit {
   displaySymbolChoice: string = 'hide';
   displayPrequires: string = 'hide';
 
-  pieceWidth: string = '400px';
+  pieceWidth: number = 400;
 
   @Input() task: Task = new Task('normal');
   @Input() scenario: Scenario = new Scenario();
@@ -37,23 +37,46 @@ export class AnnexeTaskComponent implements OnInit {
   constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
 
   ngOnInit(): void {
-    this.durationChange();
+    this.setPieceWidth();
+    this.mission.equalizeLengths();
   }
   
   durationChange(): void {
-    /*
+    let beforeWidth: number = this.pieceWidth;
+    this.setPieceWidth();
+    let afterWidth: number = this.pieceWidth;
+    let difference: number;
+    // Increase
+    if (beforeWidth < afterWidth) {
+      difference = (afterWidth/beforeWidth)-1;
+      for(let k = 0; k < difference; k++) {
+        if (!(this.role.tasks[this.i][this.j+k+1] instanceof Task)) {
+          this.role.tasks[this.i].splice(this.j+k+1, 1);
+        }
+      }
+    }
+    // Decrease
+    if (afterWidth < beforeWidth) {
+      difference = (beforeWidth/afterWidth)-1
+      for (let k = 0; k < difference; k++) {
+        this.role.tasks[this.i].splice(this.j+k+1, 0, null);
+      }
+    }
+    this.mission.equalizeLengths();
+  }
+
+  setPieceWidth(): void {
     if(this.task.durationUnit === 'UT') {
       if(this.task.duration >= 1 && this.task.duration <= 10) {
-        this.pieceWidth = (this.task.duration*400)+'px';
+        this.pieceWidth = (this.task.duration*400);
       } else if(this.task.duration > 10) {
-        this.pieceWidth = '4000px';
+        this.pieceWidth = 4000;
       } else {
-        this.pieceWidth = '400px';
+        this.pieceWidth = 400;
       }
     } else {
-      this.pieceWidth = '400px';
+      this.pieceWidth = 400;
     }
-    */
   }
 
   onClickErase(): void {
@@ -149,7 +172,7 @@ export class AnnexeTaskComponent implements OnInit {
       this.displayPrequires = 'hide';
       this.displaySymbolChoice = 'hide';
       this.mission.equalizeLengths();
-    } else if (direction == 'bottom' && this.canMoveTo('bottom')) {
+    } else if (direction == 'bottom') {
       this.role.moveTask(this.i, this.j, direction);
       this.displayMenu = 'hide';
       this.displayPrequires = 'hide';
@@ -171,16 +194,6 @@ export class AnnexeTaskComponent implements OnInit {
     } else if (direction == 'top') {
       if (this.i == 0) {
         res = false;
-      } else if (this.role.tasks[this.i-1].slice(0, this.j).some(element => element?.type == 'final' || element?.type == 'repeat')) {
-        res = false;
-      } else if (this.role.tasks[this.i].some(element => element?.type == 'final' || element?.type == 'repeat') && (this.role.tasks[this.i-1][this.j]?.type == 'final' || this.role.tasks[this.i-1][this.j]?.type == 'repeat')) {
-        res = false;
-      }
-    } else if (direction == 'bottom') {
-      if (this.role.tasks[this.i+1].slice(0, this.j).some(element => element?.type == 'final' || element?.type == 'repeat')) {
-        res = false;
-      } else if (this.role.tasks[this.i].some(element => element?.type == 'final' || element?.type == 'repeat') && (this.role.tasks[this.i+1][this.j]?.type == 'final' || this.role.tasks[this.i+1][this.j]?.type == 'repeat')) {
-        res = false;
       }
     }
     return res;

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

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
+<div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
     [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)'"
@@ -32,12 +32,12 @@
             <div class="piece-menu-directioncross-updownarrows">
                 <div class="piece-menu-updownarrows-up">
                     <mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top')"
-                    matTooltip="Décaler la tuile vers le haut."
+                    matTooltip="Décaler la tuile vers le haut (ceci placera la tuile à la fin de la ligne)."
                     matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>                
                 </div>
                 <div class="piece-menu-directioncross-updownarrows-down">
                     <mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom')"
-                    matTooltip="Décaler la tuile vers le bas."
+                    matTooltip="Décaler la tuile vers le bas (ceci placera la tuile à la fin de la ligne)."
                     matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
                 </div>
             </div>
@@ -154,15 +154,6 @@
             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()"
-            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"
-            [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)"
             matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
@@ -173,7 +164,15 @@
                     <option value="tours">tours</option> 
                 </select>
             </div>
+            <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>
+            <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>
         </div>
-
     </div>
 </div>

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

@@ -4,7 +4,6 @@
     width: 400px;
     height: 400px;
     position: relative;
-    transition: all 0.5s ease;
 
     &-menu {
         position: absolute;
@@ -120,7 +119,7 @@
         background-color: #f7f7f7;
         z-index: -1;
         bottom: 10px;
-        left: 45px;
+        right: 0;
         border: solid black 1px;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;

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

@@ -23,7 +23,7 @@ export class FinalTaskComponent implements OnInit {
   displaySymbolChoice: string = 'hide';
   displayPrequires: string = 'hide';
 
-  pieceWidth: string = '400px';
+  pieceWidth: number = 400;
 
   @Input() task: Task = new Task('normal');
   @Input() scenario: Scenario = new Scenario();
@@ -37,23 +37,46 @@ export class FinalTaskComponent implements OnInit {
   constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
 
   ngOnInit(): void {
-    this.durationChange();
+    this.setPieceWidth();
+    this.mission.equalizeLengths();
   }
   
   durationChange(): void {
-    /*
+    let beforeWidth: number = this.pieceWidth;
+    this.setPieceWidth();
+    let afterWidth: number = this.pieceWidth;
+    let difference: number;
+    // Increase
+    if (beforeWidth < afterWidth) {
+      difference = (afterWidth/beforeWidth)-1;
+      for(let k = 0; k < difference; k++) {
+        if (!(this.role.tasks[this.i][this.j+k+1] instanceof Task)) {
+          this.role.tasks[this.i].splice(this.j+k+1, 1);
+        }
+      }
+    }
+    // Decrease
+    if (afterWidth < beforeWidth) {
+      difference = (beforeWidth/afterWidth)-1
+      for (let k = 0; k < difference; k++) {
+        this.role.tasks[this.i].splice(this.j+k+1, 0, null);
+      }
+    }
+    this.mission.equalizeLengths();
+  }
+
+  setPieceWidth(): void {
     if(this.task.durationUnit === 'UT') {
       if(this.task.duration >= 1 && this.task.duration <= 10) {
-        this.pieceWidth = (this.task.duration*400)+'px';
+        this.pieceWidth = (this.task.duration*400);
       } else if(this.task.duration > 10) {
-        this.pieceWidth = '4000px';
+        this.pieceWidth = 4000;
       } else {
-        this.pieceWidth = '400px';
+        this.pieceWidth = 400;
       }
     } else {
-      this.pieceWidth = '400px';
+      this.pieceWidth = 400;
     }
-    */
   }
 
   onClickErase(): void {
@@ -155,7 +178,7 @@ export class FinalTaskComponent implements OnInit {
       this.displayPrequires = 'hide';
       this.displaySymbolChoice = 'hide';
       this.mission.equalizeLengths();
-    } else if (direction == 'bottom' && this.canMoveTo('bottom')) {
+    } else if (direction == 'bottom') {
       this.role.moveTask(this.i, this.j, direction);
       this.displayMenu = 'hide';
       this.displayPrequires = 'hide';
@@ -173,18 +196,6 @@ export class FinalTaskComponent implements OnInit {
     } else if (direction == 'top') {
       if (this.i == 0) {
         res = false;
-      } else if (this.role.tasks[this.i - 1].some(element => element?.type == 'final' || element?.type == 'repeat')) {
-        let index: number = this.role.tasks[this.i - 1].findIndex(element => element?.type == 'final' || element?.type == 'repeat');
-        if (index != this.j) {
-          res = false;
-        }
-      }
-    } else if (direction == 'bottom') {
-      if (this.role.tasks[this.i + 1].some(element => element?.type == 'final' || element?.type == 'repeat')) {
-        let index: number = this.role.tasks[this.i + 1].findIndex(element => element?.type == 'final' || element?.type == 'repeat');
-        if (index != this.j) {
-          res = false;
-        }
       }
     }
     return res;

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

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
+<div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
     [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)'"
@@ -33,12 +33,12 @@
             <div class="piece-menu-directioncross-updownarrows">
                 <div class="piece-menu-updownarrows-up">
                     <mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top')"
-                    matTooltip="Décaler la tuile vers le haut."
+                    matTooltip="Décaler la tuile vers le haut (ceci placera la tuile à la fin de la ligne)."
                     matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>                
                 </div>
                 <div class="piece-menu-directioncross-updownarrows-down">
                     <mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom')"
-                    matTooltip="Décaler la tuile vers le bas."
+                    matTooltip="Décaler la tuile vers le bas (ceci placera la tuile à la fin de la ligne)."
                     matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
                 </div>
             </div>
@@ -155,15 +155,6 @@
             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()"
-            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"
-            [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)"
             matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
@@ -174,7 +165,15 @@
                     <option value="tours">tours</option> 
                 </select>
             </div>
+            <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>
+            <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>
         </div>
-
     </div>
 </div>

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

@@ -4,7 +4,6 @@
     width: 400px;
     height: 400px;
     position: relative;
-    transition: all 0.5s ease;
 
     &-menu {
         position: absolute;
@@ -120,7 +119,7 @@
         background-color: #f7f7f7;
         z-index: -1;
         bottom: 10px;
-        left: 45px;
+        right: 0;
         border: solid black 1px;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;

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

@@ -23,7 +23,7 @@ export class OptionnalTaskComponent implements OnInit {
   displaySymbolChoice: string = 'hide';
   displayPrequires: string = 'hide';
 
-  pieceWidth: string = '400px';
+  pieceWidth: number = 400;
 
   @Input() task: Task = new Task('normal');
   @Input() scenario: Scenario = new Scenario();
@@ -37,23 +37,46 @@ export class OptionnalTaskComponent implements OnInit {
   constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
 
   ngOnInit(): void {
-    this.durationChange();
+    this.setPieceWidth();
+    this.mission.equalizeLengths();
   }
   
   durationChange(): void {
-    /*
+    let beforeWidth: number = this.pieceWidth;
+    this.setPieceWidth();
+    let afterWidth: number = this.pieceWidth;
+    let difference: number;
+    // Increase
+    if (beforeWidth < afterWidth) {
+      difference = (afterWidth/beforeWidth)-1;
+      for(let k = 0; k < difference; k++) {
+        if (!(this.role.tasks[this.i][this.j+k+1] instanceof Task)) {
+          this.role.tasks[this.i].splice(this.j+k+1, 1);
+        }
+      }
+    }
+    // Decrease
+    if (afterWidth < beforeWidth) {
+      difference = (beforeWidth/afterWidth)-1
+      for (let k = 0; k < difference; k++) {
+        this.role.tasks[this.i].splice(this.j+k+1, 0, null);
+      }
+    }
+    this.mission.equalizeLengths();
+  }
+
+  setPieceWidth(): void {
     if(this.task.durationUnit === 'UT') {
       if(this.task.duration >= 1 && this.task.duration <= 10) {
-        this.pieceWidth = (this.task.duration*400)+'px';
+        this.pieceWidth = (this.task.duration*400);
       } else if(this.task.duration > 10) {
-        this.pieceWidth = '4000px';
+        this.pieceWidth = 4000;
       } else {
-        this.pieceWidth = '400px';
+        this.pieceWidth = 400;
       }
     } else {
-      this.pieceWidth = '400px';
+      this.pieceWidth = 400;
     }
-    */
   }
 
   onClickErase(): void {
@@ -169,7 +192,7 @@ export class OptionnalTaskComponent implements OnInit {
       this.displayPrequires = 'hide';
       this.displaySymbolChoice = 'hide';
       this.mission.equalizeLengths();
-    } else if (direction == 'bottom' && this.canMoveTo('bottom')) {
+    } else if (direction == 'bottom') {
       this.role.moveTask(this.i, this.j, direction);
       this.displayMenu = 'hide';
       this.displayPrequires = 'hide';
@@ -190,16 +213,6 @@ export class OptionnalTaskComponent implements OnInit {
     } else if (direction == 'top') {
       if (this.i == 0) {
         res = false;
-      } else if (this.role.tasks[this.i-1].slice(0, this.j).some(element => element?.type == 'final' || element?.type == 'repeat')) {
-        res = false;
-      } else if (this.role.tasks[this.i].some(element => element?.type == 'final' || element?.type == 'repeat') && (this.role.tasks[this.i-1][this.j]?.type == 'final' || this.role.tasks[this.i-1][this.j]?.type == 'repeat')) {
-        res = false;
-      }
-    } else if (direction == 'bottom') {
-      if (this.role.tasks[this.i+1].slice(0, this.j).some(element => element?.type == 'final' || element?.type == 'repeat')) {
-        res = false;
-      } else if (this.role.tasks[this.i].some(element => element?.type == 'final' || element?.type == 'repeat') && (this.role.tasks[this.i+1][this.j]?.type == 'final' || this.role.tasks[this.i+1][this.j]?.type == 'repeat')) {
-        res = false;
       }
     }
     return res;

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

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
+<div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
     [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)'">
@@ -21,12 +21,12 @@
             <div class="piece-menu-directioncross-updownarrows">
                 <div class="piece-menu-updownarrows-up">
                     <mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top')"
-                    matTooltip="Décaler la tuile vers le haut."
+                    matTooltip="Décaler la tuile vers le haut (ceci placera la tuile à la fin de la ligne)."
                     matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>                
                 </div>
                 <div class="piece-menu-directioncross-updownarrows-down">
                     <mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom')"
-                    matTooltip="Décaler la tuile vers le bas."
+                    matTooltip="Décaler la tuile vers le bas (ceci placera la tuile à la fin de la ligne)."
                     matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
                 </div>
             </div>
@@ -143,15 +143,6 @@
             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()"
-            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"
-            [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)"
             matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
@@ -162,7 +153,15 @@
                     <option value="tours">tours</option> 
                 </select>
             </div>
+            <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>
+            <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>
         </div>
-
     </div>
 </div>

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

@@ -4,7 +4,6 @@
     width: 400px;
     height: 400px;
     position: relative;
-    transition: all 0.5s ease;
 
     &-menu {
         position: absolute;
@@ -111,7 +110,7 @@
         background-color: #f7f7f7;
         z-index: -1;
         bottom: 10px;
-        left: 45px;
+        right: 0;
         border: solid black 1px;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;

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

@@ -23,7 +23,7 @@ export class RandomEventComponent implements OnInit {
   displaySymbolChoice: string = 'hide';
   displayPrequires: string = 'hide';
 
-  pieceWidth: string = '400px';
+  pieceWidth: number = 400;
 
   @Input() task: Task = new Task('normal');
   @Input() scenario: Scenario = new Scenario();
@@ -37,23 +37,46 @@ export class RandomEventComponent implements OnInit {
   constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
 
   ngOnInit(): void {
-    this.durationChange();
+    this.setPieceWidth();
+    this.mission.equalizeLengths();
   }
   
   durationChange(): void {
-    /*
+    let beforeWidth: number = this.pieceWidth;
+    this.setPieceWidth();
+    let afterWidth: number = this.pieceWidth;
+    let difference: number;
+    // Increase
+    if (beforeWidth < afterWidth) {
+      difference = (afterWidth/beforeWidth)-1;
+      for(let k = 0; k < difference; k++) {
+        if (!(this.role.tasks[this.i][this.j+k+1] instanceof Task)) {
+          this.role.tasks[this.i].splice(this.j+k+1, 1);
+        }
+      }
+    }
+    // Decrease
+    if (afterWidth < beforeWidth) {
+      difference = (beforeWidth/afterWidth)-1
+      for (let k = 0; k < difference; k++) {
+        this.role.tasks[this.i].splice(this.j+k+1, 0, null);
+      }
+    }
+    this.mission.equalizeLengths();
+  }
+
+  setPieceWidth(): void {
     if(this.task.durationUnit === 'UT') {
       if(this.task.duration >= 1 && this.task.duration <= 10) {
-        this.pieceWidth = (this.task.duration*400)+'px';
+        this.pieceWidth = (this.task.duration*400);
       } else if(this.task.duration > 10) {
-        this.pieceWidth = '4000px';
+        this.pieceWidth = 4000;
       } else {
-        this.pieceWidth = '400px';
+        this.pieceWidth = 400;
       }
     } else {
-      this.pieceWidth = '400px';
+      this.pieceWidth = 400;
     }
-    */
   }
 
   onClickErase(): void {
@@ -146,7 +169,7 @@ export class RandomEventComponent implements OnInit {
       this.displayPrequires = 'hide';
       this.displaySymbolChoice = 'hide';
       this.mission.equalizeLengths();
-    } else if (direction == 'bottom' && this.canMoveTo('bottom')) {
+    } else if (direction == 'bottom') {
       this.role.moveTask(this.i, this.j, direction);
       this.displayMenu = 'hide';
       this.displayPrequires = 'hide';
@@ -168,16 +191,6 @@ export class RandomEventComponent implements OnInit {
     } else if (direction == 'top') {
       if (this.i == 0) {
         res = false;
-      } else if (this.role.tasks[this.i-1].slice(0, this.j).some(element => element?.type == 'final' || element?.type == 'repeat')) {
-        res = false;
-      } else if (this.role.tasks[this.i].some(element => element?.type == 'final' || element?.type == 'repeat') && (this.role.tasks[this.i-1][this.j]?.type == 'final' || this.role.tasks[this.i-1][this.j]?.type == 'repeat')) {
-        res = false;
-      }
-    } else if (direction == 'bottom') {
-      if (this.role.tasks[this.i+1].slice(0, this.j).some(element => element?.type == 'final' || element?.type == 'repeat')) {
-        res = false;
-      } else if (this.role.tasks[this.i].some(element => element?.type == 'final' || element?.type == 'repeat') && (this.role.tasks[this.i+1][this.j]?.type == 'final' || this.role.tasks[this.i+1][this.j]?.type == 'repeat')) {
-        res = false;
       }
     }
     return res;

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

@@ -17,12 +17,12 @@
             <div class="piece-menu-directioncross-updownarrows">
                 <div class="piece-menu-updownarrows-up">
                     <mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top')"
-                    matTooltip="Décaler la tuile vers le haut."
+                    matTooltip="Décaler la tuile vers le haut (ceci placera la tuile à la fin de la ligne)."
                     matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>                
                 </div>
                 <div class="piece-menu-directioncross-updownarrows-down">
                     <mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom')"
-                    matTooltip="Décaler la tuile vers le bas."
+                    matTooltip="Décaler la tuile vers le bas (ceci placera la tuile à la fin de la ligne)."
                     matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
                 </div>
             </div>

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

@@ -5,7 +5,6 @@
     height: 400px;
     position: relative;
     background-color: var(--piece-background-color);
-    transition: all 0.5s ease;
     border-top-right-radius: 50%;
     border-bottom-right-radius: 50%;
 

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

@@ -77,7 +77,7 @@ export class RepeatTaskComponent implements OnInit {
       this.role.moveTask(this.i, this.j, direction);
       this.displayMenu = 'hide';
       this.mission.equalizeLengths();
-    } else if (direction == 'bottom' && this.canMoveTo('bottom')) {
+    } else if (direction == 'bottom') {
       this.role.moveTask(this.i, this.j, direction);
       this.displayMenu = 'hide';
       this.mission.equalizeLengths();

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

-<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
+<div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
     [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)'">
@@ -31,12 +31,12 @@
             <div class="piece-menu-directioncross-updownarrows">
                 <div class="piece-menu-updownarrows-up">
                     <mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top')"
-                    matTooltip="Décaler la tuile vers le haut."
+                    matTooltip="Décaler la tuile vers le haut (ceci placera la tuile à la fin de la ligne)."
                     matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>                
                 </div>
                 <div class="piece-menu-directioncross-updownarrows-down">
                     <mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom')"
-                    matTooltip="Décaler la tuile vers le bas."
+                    matTooltip="Décaler la tuile vers le bas (ceci placera la tuile à la fin de la ligne)."
                     matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
                 </div>
             </div>
@@ -153,15 +153,6 @@
             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()"
-            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"
-                [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)"
             matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
@@ -172,7 +163,15 @@
                     <option value="tours">tours</option> 
                 </select>
             </div>
+            <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>
+            <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>
         </div>
-
     </div>
 </div>

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

@@ -4,7 +4,6 @@
     width: 400px;
     height: 400px;
     position: relative;
-    transition: all 0.5s ease;
 
     &-menu {
         position: absolute;
@@ -121,7 +120,7 @@
         background-color: #f7f7f7;
         z-index: -1;
         bottom: 10px;
-        left: 45px;
+        right: 0;
         border: solid black 1px;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;

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

@@ -23,7 +23,7 @@ export class TaskComponent implements OnInit {
   displaySymbolChoice: string = 'hide';
   displayPrequires: string = 'hide';
 
-  pieceWidth: string = '400px';
+  pieceWidth: number = 400;
 
   @Input() task: Task = new Task('normal');
   @Input() scenario: Scenario = new Scenario();
@@ -37,23 +37,46 @@ export class TaskComponent implements OnInit {
   constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
 
   ngOnInit(): void {
-    this.durationChange();
+    this.setPieceWidth();
+    this.mission.equalizeLengths();
   }
   
   durationChange(): void {
-    /*
+    let beforeWidth: number = this.pieceWidth;
+    this.setPieceWidth();
+    let afterWidth: number = this.pieceWidth;
+    let difference: number;
+    // Increase
+    if (beforeWidth < afterWidth) {
+      difference = (afterWidth/beforeWidth)-1;
+      for(let k = 0; k < difference; k++) {
+        if (!(this.role.tasks[this.i][this.j+k+1] instanceof Task)) {
+          this.role.tasks[this.i].splice(this.j+k+1, 1);
+        }
+      }
+    }
+    // Decrease
+    if (afterWidth < beforeWidth) {
+      difference = (beforeWidth/afterWidth)-1
+      for (let k = 0; k < difference; k++) {
+        this.role.tasks[this.i].splice(this.j+k+1, 0, null);
+      }
+    }
+    this.mission.equalizeLengths();
+  }
+
+  setPieceWidth(): void {
     if(this.task.durationUnit === 'UT') {
       if(this.task.duration >= 1 && this.task.duration <= 10) {
-        this.pieceWidth = (this.task.duration*400)+'px';
+        this.pieceWidth = (this.task.duration*400);
       } else if(this.task.duration > 10) {
-        this.pieceWidth = '4000px';
+        this.pieceWidth = 4000;
       } else {
-        this.pieceWidth = '400px';
+        this.pieceWidth = 400;
       }
     } else {
-      this.pieceWidth = '400px';
+      this.pieceWidth = 400;
     }
-    */
   }
 
   onClickErase(): void {
@@ -169,7 +192,7 @@ export class TaskComponent implements OnInit {
       this.displayPrequires = 'hide';
       this.displaySymbolChoice = 'hide';
       this.mission.equalizeLengths();
-    } else if (direction == 'bottom' && this.canMoveTo('bottom')) {
+    } else if (direction == 'bottom') {
       this.role.moveTask(this.i, this.j, direction);
       this.displayMenu = 'hide';
       this.displayPrequires = 'hide';