Merge branch 'data_structure_v2' into data_structure

README.md

-# RLGTool
+# RLGMaker
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.5.
 

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "RLGTool": {
+    "RLGMaker": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -17,7 +17,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/rlgtool",
+            "outputPath": "dist/rlgmaker",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -70,10 +70,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "RLGTool:build:production"
+              "browserTarget": "RLGMaker:build:production"
             },
             "development": {
-              "browserTarget": "RLGTool:build:development"
+              "browserTarget": "RLGMaker:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -81,7 +81,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "RLGTool:build"
+            "browserTarget": "RLGMaker:build"
           }
         },
         "test": {

karma.conf.js

@@ -25,7 +25,7 @@ module.exports = function (config) {
       suppressAll: true // removes the duplicated traces
     },
     coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/rlgtool'),
+      dir: require('path').join(__dirname, './coverage/rlgmaker'),
       subdir: '.',
       reporters: [
         { type: 'html' },

package-lock.json

 {
-  "name": "rlgtool",
+  "name": "rlgmaker",
   "version": "0.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "rlgtool",
+      "name": "rlgmaker",
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "^14.0.0",

package.json

 {
-  "name": "rlgtool",
+  "name": "rlgmaker",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",

src/app/app.component.scss

+.container {
+    display: flex;
+    flex-direction: row;
+    z-index: 1;
+
+    &-appDragScroll {
+        position: absolute;
+        height: 100%;
+        width: calc(100% - 322px);
+        left: 0;
+        right: 5px;
+        top: 0px;
+        overflow: scroll;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+
+    &-appDragScroll::-webkit-scrollbar {
+        display: none;
+    }
+
+    &-appMouseWheelZoom {
+        position: relative;
+        transform-origin: top left;
+        padding: 60px 5px 10px 5px;
+        margin-right: 7px;
+        margin-top: 900px;
+    }
+
+    &-scenario {
+        &-chronologie {
+            margin-bottom: 100px;
+            position: relative;
+            left: 800px;
+
+            &-title {
+                font-family: 'Glacial Indifference Bold';
+                font-size: 20px;
+                margin-bottom: 10px;
+            }
+
+            &-steps {
+                display: flex;
+                flex-direction: row;
+            }
+        }
+
+        &-main {
+            display: flex;
+            flex-direction: row;
+
+            &-gamePieces {
+                display: flex;
+                flex-direction: column;
+            }
+
+            &-missions {
+                display: flex;
+                flex-direction: column;
+
+                &-mission {
+                    display: flex;
+                    flex-direction: column;
+                    margin-bottom: 100px;
+                    position: relative;
+                    top: -868px;
+
+                    &-missionPieces {
+                        display: flex;
+                        flex-direction: column;
+                    }
+
+                    &-roles {
+                        display: flex;
+                        flex-direction: column;
+
+                        &-role {
+                            display: flex;
+                            flex-direction: row;
+
+                            &-tasks {
+                                display: flex;
+                                flex-direction: column;
+
+                                &-inlineTasks {
+                                    display: flex;
+                                    flex-direction: row;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &-sider {
+        height: 100%;
+        width: 320px;
+        background-color: #e3e3e3;
+        position: fixed;
+        right: 0;
+        top: 0;
+        z-index: 2;
+        border-left: solid black 3px;
+        align-items: center;
+        overflow: scroll;
+        box-shadow: -20px 0px 25px rgba(0, 0, 0, 0.3);
+
+        &-element {
+            margin-top: 10px;
+            margin-bottom: 10px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+    }
+
+    &-settings {
+        position: fixed;
+        width: 300px;
+        right: 350px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        z-index: 2;
+
+        &-mode {
+            width: 150px;
+            background-color: white;
+            box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+            padding: 5px;
+            border-radius: 10px;
+            text-align: center;
+        }
+
+        button {
+            width: 50px;
+            height: 50px;
+        }
+    }
+}
\ No newline at end of file

src/app/app.component.spec.ts

@@ -20,16 +20,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'RLG Tool'`, () => {
+  it(`should have as title 'RLG Maker'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('RLG Tool');
+    expect(app.title).toEqual('RLG Maker');
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('RLG Tool app is running!');
+    expect(compiled.querySelector('.content span')?.textContent).toContain('RLG Maker app is running!');
   });
 });

src/app/app.component.ts

@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'RLG Tool';
+  title = 'RLG Maker';
 
   range(n: number): number[] {
     return Array.from(Array(n), (_, i) => i);

src/app/app.module.ts

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
 import { AppRoutingModule } from './app-routing.module';
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
 import { AppComponent } from './app.component';
 import { EducationalObjectiveComponent } from './pieces/educational-objective/educational-objective.component';
 import { RoleComponent } from './pieces/role/role.component';
 import { MissionContextComponent } from './pieces/mission-context/mission-context.component';
 import { GameEducationnalObjectiveComponent } from './pieces/game-educationnal-objective/game-educationnal-objective.component';
 import { GameContextComponent } from './pieces/game-context/game-context.component';
-import { TaskComponent } from './pieces/task/task.component';
-import { AnnexeTaskComponent } from './pieces/annexe-task/annexe-task.component';
+import { TaskComponent } from './pieces/tasks/task/task.component';
+import { AnnexeTaskComponent } from './pieces/tasks/annexe-task/annexe-task.component';
+import { CommentsComponent } from './sider-pieces/comments/comments.component';
+import { RepeatComponent } from './sider-pieces/repeat/repeat.component'; 
+import { CommentComponent } from './components/comment/comment.component';
+import { RandomEventComponent } from './pieces/tasks/random-event/random-event.component';
+import { CharactersComponent } from './sider-pieces/characters/characters.component';
+import { CharacterComponent } from './components/character/character.component';
+import { RulesComponent } from './sider-pieces/rules/rules.component';
+import { StepComponent } from './pieces/step/step.component';
+import { FinalTaskComponent } from './pieces/tasks/final-task/final-task.component';
+import { RepeatTaskComponent } from './pieces/tasks/repeat-task/repeat-task.component';
+import { InteruptComponent } from './sider-pieces/interupt/interupt.component';
+import { OptionnalTaskComponent } from './pieces/tasks/optionnal-task/optionnal-task.component';
+import { RoleOccurenceComponent } from './sider-pieces/role-occurence/role-occurence.component';
+import { SupplementaryTaskComponent } from './sider-pieces/supplementary-task/supplementary-task.component';
 
-import { FormsModule } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatIconModule } from '@angular/material/icon'; 
+import { DragScrollDirective } from './directives/drag-scroll.directive';
+import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive';
 
 @NgModule({
   declarations: [
@@ -24,7 +41,23 @@ import { MatIconModule } from '@angular/material/icon';
     GameEducationnalObjectiveComponent,
     GameContextComponent,
     TaskComponent,
-    AnnexeTaskComponent
+    AnnexeTaskComponent,
+    DragScrollDirective,
+    MouseWheelZoomDirective,
+    CommentsComponent,
+    RepeatComponent,
+    CommentComponent,
+    RandomEventComponent,
+    CharactersComponent,
+    CharacterComponent,
+    RulesComponent,
+    StepComponent,
+    FinalTaskComponent,
+    RepeatTaskComponent,
+    InteruptComponent,
+    OptionnalTaskComponent,
+    RoleOccurenceComponent,
+    SupplementaryTaskComponent
   ],
   imports: [
     BrowserModule,
@@ -32,6 +65,7 @@ import { MatIconModule } from '@angular/material/icon';
     FormsModule,
     BrowserAnimationsModule,
     MatIconModule,
+    MatButtonModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

+<div class="character">
+    <div class="character-top">
+        <mat-icon fontIcon="person"></mat-icon>
+        <div class="character-top-name">
+            <label for="name">Nom</label>
+            <input name="name" type="text"/>                    
+        </div>
+    </div>
+    <div class="character-infos">
+        <div class="character-infos-description">
+            <label for="description">Description</label>
+            <textarea name="description"></textarea>
+        </div>
+
+        <!--
+        <div>
+            <div class="character-infos-phone">
+                <label for="phonenumber">N° tél.</label>
+                <input name="phonenumber" type="tel"/>                    
+            </div>
+            <div class="character-infos-title">
+                <label for="title">Titre</label>
+                <input name="title" type="text"/>
+            </div>                    
+        </div>
+        -->
+
+        <div class="character-infos-color">
+            <label for="color">Couleur</label>
+            <input name="color" type="color"/>
+        </div>
+    </div>
+    <button mat-button>Retirer de ma tâche</button>
+</div>
\ No newline at end of file

src/app/components/character/character.component.scss

+label {
+    margin-right: 10px;
+}
+
+input[type="text"],
+input[type="tel"] {
+    border: none;
+    border-radius: 10px;
+    height: 20px;
+    padding: 5px 5px 5px 5px;
+}
+
+input[type="color"] {
+    border: none;
+    border-radius: 10px;
+    background-color: white;
+}
+
+textarea {
+    border: none;
+    border-radius: 10px;
+    min-height: 50px;
+    max-height: 100px;
+    resize: vertical;
+    padding: 5px 10px 5px 10px;
+}
+
+select {
+    border-radius: 10px;
+    background-color: white;
+    border: none;
+    padding: 5px 10px 5px 10px;
+}
+
+mat-icon {
+    transform: scale(2);
+    color: white;
+    margin-left: 10px;
+    margin-right: 20px;
+}
+
+button {
+    margin-top: 5px;
+    background-color: white;
+    border-radius: 10px;
+    position: relative;
+    left: 100%;
+    transform: translateX(-100%);
+}
+
+.character {
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: solid black 1px;
+
+    &-top {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+
+        &-name {
+            display: flex;
+            justify-content: flex-end;
+
+            input {
+                width: 75%;
+            }
+        }
+    }
+
+    &-infos {
+        margin-top: 10px;
+
+        &-description {
+            display: flex;
+            flex-direction: column;
+        }
+
+        &-phone {
+            display: flex;
+            margin-top: 5px;
+            justify-content: space-between;
+        }
+
+        &-title {
+            display: flex;
+            margin-top: 5px;
+            justify-content: space-between;
+        }
+
+        &-color {
+            margin-top: 5px;
+        }
+    }
+}
\ No newline at end of file

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CharacterComponent } from './character.component';
+
+describe('CharacterComponent', () => {
+  let component: CharacterComponent;
+  let fixture: ComponentFixture<CharacterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CharacterComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CharacterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pieces/annexe-task/annexe-task.component.ts → src/app/components/character/character.component.ts

 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-annexe-task',
-  templateUrl: './annexe-task.component.html',
-  styleUrls: ['./annexe-task.component.scss']
+  selector: 'app-character',
+  templateUrl: './character.component.html',
+  styleUrls: ['./character.component.scss']
 })
-export class AnnexeTaskComponent implements OnInit {
+export class CharacterComponent implements OnInit {
 
   constructor() { }
 

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

+<div class="form">
+    <div class="form-comment">
+        <textarea [disabled]="true">Mon commentaire</textarea>
+        <div class="form-comment-buttons">
+            <button mat-button>Modifier</button>
+            <button mat-button>Supprimer</button>
+        </div>  
+    </div>
+
+    <div class="form-answers">
+        <textarea [disabled]="true">Une réponse</textarea>
+        <div class="form-comment-buttons">
+            <button mat-button>Modifier</button>
+            <button mat-button>Supprimer</button>
+        </div>  
+    </div>
+    
+    <div class="form-newanswer">
+        <textarea></textarea>
+        <div class="form-newanswer-buttons">
+           <button mat-button>Répondre</button> 
+        </div>
+        
+    </div>
+</div>
\ No newline at end of file

src/app/components/comment/comment.component.scss

+textarea {
+    resize: vertical;
+    border-radius: 10px;
+    border: none;
+    min-height: 50px;
+    max-height: 200px;
+    padding: 5px 5px 5px 5px;
+}
+
+button {
+    background-color: white;
+    border-radius: 10px;                
+    margin-left: 5px;
+}
+
+.form {
+    margin-bottom: 10px;
+    border-bottom: solid black 1px;
+    padding-bottom: 10px;
+
+    &-comment {
+        margin-bottom: 10px;
+        display: flex;
+        flex-direction: column;
+
+        textarea {
+            height: 100px;
+            resize: none;
+        }
+
+        &-buttons {
+            margin-top: 5px;
+            display: flex;
+            flex-direction: row;
+            position: relative;
+            justify-content: flex-end;
+        }
+    }
+    
+    &-answers {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 10px;
+
+        textarea {
+            resize: none;
+        }
+    }
+
+    &-newanswer {
+        display: flex;
+        flex-direction: column;
+
+        &-buttons {
+            margin-top: 5px;
+            display: flex;
+            flex-direction: row;
+            position: relative;
+            justify-content: flex-end;
+        }
+    }
+}

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentComponent } from './comment.component';
+
+describe('CommentComponent', () => {
+  let component: CommentComponent;
+  let fixture: ComponentFixture<CommentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CommentComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CommentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-comment',
+  templateUrl: './comment.component.html',
+  styleUrls: ['./comment.component.scss']
+})
+export class CommentComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/directives/drag-scroll.directive.spec.ts

+import { DragScrollDirective } from './drag-scroll.directive';
+
+describe('DragScrollDirective', () => {
+  it('should create an instance', () => {
+    const directive = new DragScrollDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/directives/drag-scroll.directive.ts

+import { Directive, HostListener, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[appDragScroll]'
+})
+export class DragScrollDirective {
+  private isMouseDown: boolean = false;
+  private startX: number = 0;
+  private startY: number = 0;
+  private element: HTMLElement;
+
+  constructor(private elementRef: ElementRef) {
+    this.element = elementRef.nativeElement;
+  }
+
+  @HostListener('mousedown', ['$event'])
+  onMouseDown(event: MouseEvent) {
+    this.isMouseDown = true;
+    this.startX = event.clientX;
+    this.startY = event.clientY;
+    this.element.style.cursor = 'grabbing';
+  }
+
+  @HostListener('mouseup', ['$event'])
+  onMouseUp(event: MouseEvent) {
+    this.isMouseDown = false;
+    this.element.style.cursor = 'grab';
+  }
+
+  @HostListener('mousemove', ['$event'])
+  onMouseMove(event: MouseEvent) {
+    if(this.isMouseDown) {
+      event.preventDefault();
+      const x = event.clientX - this.startX;
+      const y = event.clientY - this.startY;
+      this.element.scrollLeft -= x;
+      this.element.scrollTop -= y;
+      this.startX = event.clientX;
+      this.startY = event.clientY;
+    }
+  }
+}
\ No newline at end of file

src/app/directives/mouse-wheel-zoom.directive.spec.ts

+import { MouseWheelZoomDirective } from './mouse-wheel-zoom.directive';
+
+describe('MouseWheelZoomDirective', () => {
+  it('should create an instance', () => {
+    const directive = new MouseWheelZoomDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/directives/mouse-wheel-zoom.directive.ts

+import { Directive, ElementRef, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[appMouseWheelZoom]'
+})
+export class MouseWheelZoomDirective {
+
+  private zoom: number = 1;
+  private element: HTMLElement;
+
+  constructor(private elementRef: ElementRef) {
+    this.element = elementRef.nativeElement;
+  }
+
+  @HostListener('wheel', ['$event'])
+  onMouseWheel(event: WheelEvent) {
+    event.preventDefault();
+    const zoomLevel = event.deltaY < 0 ? 0.1 : -0.1;
+    this.zoom += zoomLevel;
+    this.element.style.transform = `scale(${this.zoom})`;
+  }
+}
\ No newline at end of file

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

-<div class="piece">
-    <div class="piece-attach piece-attach-left"></div>
-    <div class="piece-attach piece-attach-right"></div>
-
-    <div class="piece-form">
-        <h1>Annexe Task</h1>
-    </div>
-</div>

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

@@ -13,7 +13,7 @@
         <div class="piece-form-title">Objectif pédagogique</div>
         <div class="piece-form-objective">
             <label for="objective">Commun pour la mission 1</label>
-            <textarea name="objective" placeholder="Comprendre la dépendance de chaque rôle pour atteindre ses objectifs"></textarea>
+            <textarea name="objective" placeholder="Comprendre les rôles impliqués dans la conception d'un site web"></textarea>
         </div>
             
     </div>

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

@@ -84,7 +84,6 @@
         &-title {
             margin-top: 20px;
             font-size: 25px;
-            //font-weight: bold;
             font-family: 'Glacial Indifference Bold';
         }
         &-objective{
@@ -104,10 +103,11 @@
                 resize: none;
                 flex-grow: 1;
                 margin-bottom: 25px;
-                background-image: url("../../../assets/target.png");
+                background-image: url("../../../assets/background-images/obj2.png");
                 background-position: center;
                 background-repeat: no-repeat;
                 background-size: 30%;
+                font-size: 15px;
             }
         }
     }

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

@@ -24,11 +24,11 @@
         </div>
         <div class="piece-form-intrigue">
             <label for="intrigue">Intrigue</label>
-            <textarea name="intrigue" placeholder="Vous habitez et travaillez dans un village et devez réussir à le faire vivre et prospérer. Si vous échouez, un riche promoteur risque de raser le village pour en faire un aéroport"></textarea>  
+            <textarea name="intrigue" placeholder="Vous êtes stagiaire dans une agence de communication et devez faire vos preuves pour être embauché.e"></textarea>  
         </div>
         <div class="piece-form-other">
             <label for="other">Autre</label>
-            <textarea name="other" placeholder="Test"></textarea>  
+            <textarea name="other"></textarea>  
         </div> 
     </div>
 

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

@@ -86,6 +86,7 @@
             border-radius: 10px;
             border: none;
             padding: 5px 10px 5px 10px;
+            font-size: 15px;
         }
         textarea {
             border-radius: 20px;
@@ -93,6 +94,7 @@
             border: none;
             resize: none;
             flex-grow: 1;
+            font-size: 15px;
         }
         &-title {
             margin-top: 20px;
@@ -118,12 +120,24 @@
             margin-top: 10px;
             display: flex;
             flex-direction: column;
+            textarea {
+                background-image: url("../../../assets/background-images/graal.png");
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: 30%;
+            }
         }
         &-other {
             display: flex;
             flex-direction: column;
             margin-bottom: 25px;
             height: 40%;
+            textarea {
+                background-image: url("../../../assets/background-images/autre.png");
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: 30%;
+            }
         }
     }
 

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

@@ -10,8 +10,8 @@
     <div class="piece-form">
         <div class="piece-form-title">Objectif pédagogique</div>
         <div class="piece-form-objective">
-            <label for="objective">Commun pour la mission 1</label>
-            <textarea name="objective" placeholder="- Améliorer les softskills"></textarea>
+            <label for="objective">Commun pour le jeu</label>
+            <textarea name="objective" placeholder="- Améliorer les softskills&#10;- Apprendre à coopérer"></textarea>
         </div>
         <div class="piece-form-footer">Sorbonne Université, LIP6 - IMT Nord Europe</div>
     </div>

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

@@ -94,10 +94,11 @@
                 resize: none;
                 flex-grow: 1;
                 margin-bottom: 5px;
-                background-image: url("../../../assets/chest.png");
+                background-image: url("../../../assets/background-images/objGnrl.png");
                 background-position: center;
                 background-repeat: no-repeat;
                 background-size: 30%;
+                font-size: 15px;
             }
         }
         &-footer {

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

@@ -17,11 +17,15 @@
         </div>
         <div class="piece-form-intrigue">
             <label for="intrigue">Intrigue</label>
-            <textarea name="intrigue" placeholder="Faites prospérer les commerces essentiels du centre ville pour redresser l’économie du village et attirer de nouveaux habitants"></textarea>  
+            <textarea name="intrigue" placeholder="Concevez un site web ergonomique pour votre premier client"></textarea>  
+        </div>
+        <div class="piece-form-communication">
+            <label for="communication">Moyen(s) de communication</label>
+            <textarea name="communication"></textarea>
+        </div>
+        <div class="piece-form-divers">
+            <label for="divers">Divers</label>
+            <textarea name="divers"></textarea>
         </div>
-        <div class="piece-form-other">
-            <label for="other">Autre</label>
-            <textarea name="other" placeholder="Test"></textarea>  
-        </div> 
     </div>
 </div>

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

 .piece {
-    --piece-background-color: #eac19b; 
+    --piece-background-color: #eac19b;
 
     width: 400px;
     height: 800px;
@@ -22,17 +22,21 @@
         display: flex;
         padding: 15px 20px 15px 20px;
         justify-content: space-around;
+
         mat-icon {
             cursor: pointer;
             transform: scale(1.1);
         }
+
         mat-icon:hover {
             opacity: 0.75;
         }
     }
+
     &-menu.show {
         transform: translateX(-50%) translateY(0);
     }
+
     &-menu.hide {
         transform: translateX(-50%) translateY(100%);
     }
@@ -42,6 +46,7 @@
         border-top: solid black 1px;
         border-right: solid black 1px;
         border-bottom: solid black 1px;
+
         &-right {
             position: absolute;
             width: 20px;
@@ -51,6 +56,7 @@
             right: -20px;
             transform: translateY(-50%);
         }
+
         &-left {
             &-top {
                 position: absolute;
@@ -61,6 +67,7 @@
                 left: -0px;
                 transform: translateY(-50%);
             }
+
             &-bottom {
                 position: absolute;
                 width: 20px;
@@ -81,47 +88,75 @@
         flex-direction: column;
         align-items: stretch;
         z-index: 2;
+
         label {
             font-size: 20px;
             font-weight: lighter;
             margin-top: 10px;
             margin-bottom: 5px;
-        }  
+        }
+
         input {
             height: 40px;
             border-radius: 10px;
             border: none;
             padding: 5px 10px 5px 10px;
+            font-size: 15px;
         }
+
         textarea {
             border-radius: 20px;
             padding: 10px;
             border: none;
             resize: none;
             flex-grow: 1;
+            font-size: 15px;
         }
+
         &-title {
             margin-top: 20px;
             font-size: 25px;
             //font-weight: bold;
             font-family: 'Glacial Indifference Bold';
         }
+
         &-duration {
             display: flex;
             flex-direction: column;
             margin-top: 10px;
         }
-        &-intrigue{
-            height: 55%;
+
+        &-intrigue {
+            height: 35%;
             margin-top: 10px;
             display: flex;
             flex-direction: column;
+
+            textarea {
+                background-image: url("../../../assets/background-images/contexte.png");
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: 30%;
+            }
         }
-        &-other {
+
+        &-communication {
+            display: flex;
+            flex-direction: column;
+            height: 20%;
+
+            textarea {
+                background-image: url("../../../assets/background-images/com.png");
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: 30%;
+            }
+        }
+
+        &-divers {
             display: flex;
             flex-direction: column;
-            margin-bottom: 25px;
-            height: 30%;
+            height: 20%;
         }
     }
 }

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

@@ -11,21 +11,85 @@
 
     <div class="piece-form">
         <div class="piece-form-title">Rôle 1</div>
+        <img src="../../../assets/background-images/role.png"/>
         <div class="piece-form-intitule">
             <label for="intitule">Intitulé</label>
-            <input name="intitule" type="text" placeholder="Organisateur de goûters d'anniversaire"/>   
+            <input name="intitule" type="text" placeholder="Développeur/euse web"/>   
         </div>
         <div class="piece-form-name">
             <label for="name">Nom de la quête</label>
-            <input name="name" type="text" placeholder="Fête d'anniversaire"/>   
+            <input name="name" type="text" placeholder="Intégration de site web"/>   
+        </div>
+        <div class="piece-form-description">
+            <label for="description">Description</label>
+            <textarea name="description"></textarea>
         </div>
         <div class="piece-form-objective">
             <label for="objective">Objectif(s) pédagoqique(s)</label>
-            <textarea name="objective" placeholder="- Savoir préparer une fête"></textarea>  
+            <input name="objective" type="text" placeholder="Nom de l'objectif"/>
+            <input name="objective" type="text" placeholder="Nom de l'objectif"/>
+            <button mat-button><mat-icon fontIcon="add"></mat-icon></button>
+        </div>
+        <div class="piece-form-rewards">
+            <label for="reward">Récompense(s)</label>
+            <div class="piece-form-rewards-reward">
+                <label>Type</label>
+                <select>
+                    <option>test</option>
+                </select>
+            </div>  
+        </div>
+
+
+        <div class="piece-form-personnalization">
+            <div class="piece-form-title">Personnalisation</div>
+            <div class="piece-form-personnalization-appearance">
+                <label>Apparence, équipement</label>
+                <textarea></textarea>
+            </div>
+        </div>
+
+        <div class="piece-form-ressources">
+            <div class="piece-form-title">Ressources & compétences</div>
+            <div class="piece-form-ressources-ressource">
+                <div class="piece-form-ressources-ressource-name">
+                    <label for="name">Nom</label>
+                    <input name="name" type="text"/>
+                </div>
+                <div class="piece-form-ressources-ressource-quantity">
+                    <label for="quantity">Nombre / stats</label>
+                    <input name="quantity" type="text">
+                </div>
+                <div class="piece-form-ressources-ressource-quantity">
+                    <label for="type">Type</label>
+                    <input name="type" type="text">
+                </div>    
+            </div>
+            <button mat-button><mat-icon fontIcon="add"></mat-icon></button>
+        </div>
+
+        
+        <div class="piece-form-supplementary">
+            <div class="piece-form-title">Rôle supplémentaire</div>
+            <div>
+                <div class="piece-form-supplementary-name">
+                    <label for="name">Nom</label>
+                    <input name="name" type="text"/>
+                </div>
+                <div class="piece-form-supplementary-textarea">
+                    <label for="objectives">Objectifs</label>
+                    <textarea name="objectives"></textarea>
+                </div>
+                <div class="piece-form-supplementary-textarea">
+                    <label for="skills">Compétences</label>
+                    <textarea name="skills"></textarea>
+                </div>
+                <div class="piece-form-supplementary-textarea">
+                    <label for="rules">Règles</label>
+                    <textarea nam="rules"></textarea>
+                </div>
+            </div>
+            <button mat-button><mat-icon fontIcon="add"></mat-icon></button>
         </div>
-        <div class="piece-form-reward">
-            <label for="reward">Récompenses</label>
-            <textarea name="reward" placeholder="- Gagner en compétence en événementiel"></textarea>  
-        </div> 
     </div>
 </div>

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

@@ -2,9 +2,8 @@
     --piece-background-color: #9ad5ec;
 
     width: 400px;
-    height: 800px;
     position: relative;
-    background-color: var(--piece-background-color);
+    background: linear-gradient(303deg, rgb(2, 0, 36) 0%, rgb(2, 0, 36) 25%, #9ad5ec 25%, #9ad5ec 100%);
 
     &-menu {
         position: absolute;
@@ -22,23 +21,28 @@
         display: flex;
         padding: 15px 20px 15px 20px;
         justify-content: space-around;
+
         mat-icon {
             cursor: pointer;
             transform: scale(1.1);
         }
+
         mat-icon:hover {
             opacity: 0.75;
         }
     }
+
     &-menu.show {
         transform: translateX(-50%) translateY(0);
     }
+
     &-menu.hide {
         transform: translateX(-50%) translateY(100%);
     }
 
     &-attach {
         z-index: 1;
+
         &-left {
             &-top {
                 border-right: solid black 1px;
@@ -51,6 +55,7 @@
                 transform: translateY(-50%);
                 left: -25px;
             }
+
             &-bottom {
                 border-top: solid black 1px;
                 border-right: solid black 1px;
@@ -64,6 +69,7 @@
                 left: 0px;
             }
         }
+
         &-right {
             border-top: solid black 1px;
             border-right: solid black 1px;
@@ -76,6 +82,7 @@
             top: 200px;
         }
     }
+
     &-form {
         height: 100%;
         padding: 0px 10px 0px 35px;
@@ -84,58 +91,203 @@
         flex-direction: column;
         align-items: stretch;
         z-index: 2;
+
         label {
             font-size: 20px;
             font-weight: lighter;
             margin-top: 10px;
             margin-bottom: 5px;
-        }  
+        }
+
         input {
             height: 40px;
             border-radius: 10px;
             border: none;
             padding: 5px 10px 5px 10px;
+            font-size: 15px;
         }
+
         textarea {
             border-radius: 20px;
             padding: 10px;
             border: none;
             resize: none;
             flex-grow: 1;
+            font-size: 15px;
+        }
+
+        img {
+            width: 20%;
+            position: absolute;
+            right: 5px;
+            top: 5px;
         }
+
         &-title {
             margin-top: 20px;
             font-size: 25px;
-            //font-weight: bold;
             font-family: 'Glacial Indifference Bold';
         }
+
         &-intitule {
             display: flex;
             flex-direction: column;
             margin-top: 10px;
         }
+
         &-name {
             display: flex;
             flex-direction: column;
         }
+
+        &-description {
+            display: flex;
+            flex-direction: column;
+
+            textarea {
+                height: 100px;
+            }
+        }
+
         &-objective {
-            height: 40%;
             margin-top: 10px;
             display: flex;
             flex-direction: column;
-            textarea {
-                margin-bottom: 5px;
-                background-image: url("../../../assets/alchemist.png");
-                background-position: center;
-                background-repeat: no-repeat;
-                background-size: 30%;
+
+            input {
+                margin-top: 5px;
+            }
+
+            button {
+                position: relative;
+                width: 50px;
+                height: 50px;
+                background-color: white;
+                left: 100%;
+                transform: translateX(-100%);
+                margin-top: 5px;
+                border-radius: 10px;
+
+                mat-icon {
+                    transform: scale(1.3);
+                }
             }
         }
-        &-reward {
+
+        &-rewards {
             display: flex;
             flex-direction: column;
+
+            &-reward {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+
+                select {
+                    height: 50px;
+                    border: none;
+                    border-radius: 10px;
+                    background-color: white;
+                    width: 80%;
+                }
+            }
+        }
+
+        &-personnalization {
+            &-appearance {
+                display: flex;
+                flex-direction: column;
+                height: 150px;
+
+                textarea {
+                    background-image: url("../../../assets/background-images/equipment.png");
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 30%;
+                }
+            }
+        }
+
+        &-ressources {
+            display: flex;
+            flex-direction: column;
+
+            &-ressource {
+                margin-top: 10px;
+                display: flex;
+                flex-direction: column;
+
+                div {
+                    display: flex;
+                    flex-direction: row;
+                    margin-bottom: 5px;
+                    justify-content: space-between;
+                }
+
+                input {
+                    width: 50%;
+                }
+
+                &-name {
+                    input {
+                        background-image: url("../../../assets/background-images/object.png");
+                        background-position: center;
+                        background-repeat: no-repeat;
+                        background-size: 20%;
+                    }
+                }
+            }
+
+            button {
+                position: relative;
+                width: 50px;
+                height: 50px;
+                background-color: white;
+                left: 100%;
+                transform: translateX(-100%);
+                margin-top: 5px;
+                border-radius: 10px;
+
+                mat-icon {
+                    transform: scale(1.3);
+                }
+            }
+        }
+
+        &-supplementary {
             margin-bottom: 25px;
-            height: 40%;
+
+            &-name {
+                margin-top: 10px;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+
+            }
+            
+            &-textarea {
+                display: flex;
+                flex-direction: column;
+
+                textarea {
+                    height: 100px;
+                }
+            }
+
+            button {
+                position: relative;
+                width: 50px;
+                height: 50px;
+                background-color: white;
+                left: 100%;
+                transform: translateX(-100%);
+                margin-top: 5px;
+                border-radius: 10px;
+
+                mat-icon {
+                    transform: scale(1.3);
+                }
+            }
         }
     }
 }

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

+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+    <div class="piece-attach piece-attach-right"></div>
+    <div class="piece-attach piece-attach-left"></div>
+
+    <div class="piece-menu" [class]="displayMenu">
+        <mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
+        <mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
+    </div>
+
+    <div class="piece-form">
+        <div class="piece-form-title">Étape 1</div>
+        <textarea></textarea>
+        <div class="piece-form-duration">
+            <label for="duration">Durée</label>
+            <input name="duration" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
+            <select name="duration" [(ngModel)]="durationUnit" (change)="durationChange()">
+                <option value="UT">UT</option>
+                <option value="min">min</option>
+                <option value="tours">tours</option>
+            </select>
+        </div>
+    </div>
+</div>
\ No newline at end of file

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

+.piece {
+    --piece-background-color: #acc9fc;
+
+    width: 400px;
+    height: 300px;
+    position: relative;
+    background-color: var(--piece-background-color);
+    transition: all 0.5s ease;
+
+    &-menu {
+        position: absolute;
+        width: 150px;
+        height: 50px;
+        background-color: #f7f7f7;
+        z-index: -1;
+        top: -51px;
+        left: 50%;
+        transform: translateX(-50%);
+        transition: transform 0.5s ease;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        border: solid black 1px;
+        display: flex;
+        padding: 15px 20px 15px 20px;
+        justify-content: space-around;
+
+        mat-icon {
+            cursor: pointer;
+            transform: scale(1.1);
+        }
+
+        mat-icon:hover {
+            opacity: 0.75;
+        }
+    }
+
+    &-menu.show {
+        transform: translateX(-50%) translateY(0);
+    }
+
+    &-menu.hide {
+        transform: translateX(-50%) translateY(100%);
+    }
+
+    &-attach {
+        z-index: 1;
+        border-right: solid black 1px;
+        border-top: solid black 1px;
+
+        &-right {
+            width: 50px;
+            height: 50px;
+            position: absolute;
+            right: -25px;
+            top: 50%;
+            transform: translateY(-50%) rotateZ(45deg);
+            background-color: var(--piece-background-color);
+        }
+
+        &-left {
+            background-color: var(--background-color);
+            position: absolute;
+            width: 50px;
+            height: 50px;
+            left: -25px;
+            top: 50%;
+            transform: translateY(-50%) rotateZ(45deg);
+
+        }
+    }
+
+    &-form {
+        height: 100%;
+        padding: 0px 10px 0px 40px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        z-index: 2;
+
+        &-title {
+            margin-top: 10px;
+            font-size: 25px;
+            font-family: 'Glacial Indifference Bold';
+        }
+
+        textarea {
+            margin-top: 5px;
+            padding: 10px;
+            height: 60%;
+            border-radius: 10px;
+            border: none;
+            resize: none;
+            font-size: 15px;
+            background-image: url("../../../assets/background-images/step.png");
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 100px;
+        }
+
+        &-duration {
+
+            margin-top: 10px;
+
+            label {
+                font-size: 20px;
+                margin-right: 5px;
+            }
+
+            input {
+                border: none;
+                height: 30px;
+                width: 50px;
+                border-top-left-radius: 10px;
+                border-bottom-left-radius: 10px;
+                text-align: right;
+            }
+
+            select {
+                background-color: white;
+                border-top-right-radius: 10px;
+                border-bottom-right-radius: 10px;
+                border: none;
+                height: 32px;
+                width: 50px;
+                text-align: center;
+            }
+        }
+    }
+}
+
+.piece::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: 1px solid black;
+}
\ No newline at end of file

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StepComponent } from './step.component';
+
+describe('StepComponent', () => {
+  let component: StepComponent;
+  let fixture: ComponentFixture<StepComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StepComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(StepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-step',
+  templateUrl: './step.component.html',
+  styleUrls: ['./step.component.scss']
+})
+export class StepComponent implements OnInit {
+
+  displayMenu: string = 'hide';
+  pieceWidth = '400px';
+  duration = 1;
+  durationUnit = 'UT';
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onClickComments(): void {
+    
+  }
+
+  onClickAdd(): void {
+    
+  }
+
+  onClickErase(): void {
+    
+  }
+
+  durationChange(): void {
+    if(this.durationUnit === 'UT') {
+      if(this.duration >= 1 && this.duration <= 10) {
+        this.pieceWidth = (this.duration*400)+'px';
+      } else if(this.duration > 10) {
+        this.pieceWidth = '4000px';
+      } else {
+        this.pieceWidth = '400px';
+      }
+    } else {
+      this.pieceWidth = '400px';
+    }
+  }
+
+}

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

+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+    <div class="piece-attach piece-attach-left"></div>
+    <div class="piece-attach piece-attach-right"></div>
+
+    <div class="piece-menu" [class]="displayMenu">
+        <mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
+        <mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
+        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+    </div>
+
+    <div class="piece-prerequires" [class]="displayPrequires">
+        <div class="piece-prerequires-prerequires">
+            <label class="piece-prerequires-title">Antécédents</label>
+            <div class="piece-prerequires-form">
+                <div class="piece-prerequires-prerequires-element">
+                    <input name="antecedent" type="checkbox" value="true"/>
+                    <label for="antecedent">EX1</label> 
+                </div>
+                <div class="piece-prerequires-prerequires-element">
+                    <input name="antecedent" type="checkbox"/>
+                    <label for="antecedent">EX2</label>
+                </div>
+            </div>
+        </div>
+        <div class="piece-prerequires-ressources">
+            <label class="piece-prerequires-title">Ressources & attributs</label>
+            <div class="piece-prerequires-form">
+                <div class="piece-prerequires-ressources-element">
+                    <div class="piece-prerequires-ressources-element-checkbox">
+                        <input name="ressource" type="checkbox"/>
+                        <label for="ressource">Pain</label>   
+                    </div>
+                    <div class="piece-prerequires-ressources-element-quantity">
+                        <select name="ressource">
+                            <option><</option>
+                            <option><=</option>
+                            <option>=</option>
+                            <option>>=</option>
+                            <option>></option>
+                        </select>
+                        <input type="text" value="1"/> 
+                    </div>
+                </div>
+                <div class="piece-prerequires-ressources-element">
+                    <div class="piece-prerequires-ressources-element-checkbox">
+                        <input name="ressource" type="checkbox"/>
+                        <label for="ressource">Citron</label>   
+                    </div>
+                    <div class="piece-prerequires-ressources-element-quantity">
+                        <select name="ressource">
+                            <option><</option>
+                            <option><=</option>
+                            <option>=</option>
+                            <option>>=</option>
+                            <option>></option>
+                        </select>
+                        <input type="text" value="1"/> 
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="piece-form">
+        <div class="piece-form-top">
+            <input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
+            <div class="piece-form-top-title">Tâche annexe</div> 
+        </div>
+        <textarea class="piece-form-content" 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>
+            <div class="piece-form-bottom-duration">
+                <input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
+                <select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
+                    <option selected value="UT">UT</option>
+                    <option value="min">min</option>
+                    <option value="tours">tours</option> 
+                </select>
+            </div>
+        </div>
+
+    </div>
+</div>

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

+.piece {
+    --piece-background-color: #bccecc;
+
+    width: 400px;
+    height: 400px;
+    position: relative;
+    background-color: var(--piece-background-color);
+    transition: all 0.5s ease;
+
+    &-menu {
+        position: absolute;
+        width: 150px;
+        height: 50px;
+        background-color: #f7f7f7;
+        z-index: -1;
+        top: -50px;
+        left: 50%;
+        transform: translateX(-50%);
+        transition: transform 0.5s ease;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        border: solid black 1px;
+        display: flex;
+        padding: 15px 20px 15px 20px;
+        justify-content: space-around;
+
+        mat-icon {
+            cursor: pointer;
+            transform: scale(1.1);
+        }
+
+        mat-icon:hover {
+            opacity: 0.75;
+        }
+    }
+
+    &-menu.show {
+        transform: translateX(-50%) translateY(0);
+    }
+
+    &-menu.hide {
+        transform: translateX(-50%) translateY(100%);
+    }
+
+    &-prerequires {
+        position: absolute;
+        width: 350px;
+        height: 150px;
+        background-color: #f7f7f7;
+        z-index: -1;
+        bottom: 0;
+        left: 25px;
+        border: solid black 1px;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        transition: transform 0.5s ease;
+        border-top: none;
+        display: flex;
+        flex-direction: row;
+
+        &-title {
+            margin-left: auto;
+            margin-right: auto;
+            font-family: 'Glacial Indifference Bold';
+            font-size: 14px;
+        }
+
+        &-form {
+            display: flex;
+            flex-direction: column;
+            overflow: scroll;
+        }
+
+        &-prerequires {
+            position: relative;
+            border-right: solid #a3a3a3 1px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 50%;
+            height: 90%;
+            border-bottom-left-radius: 10px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        &-ressources {
+            width: 50%;
+            height: 90%;
+            border-bottom-right-radius: 10px;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 50%;
+            height: 90%;
+            border-bottom-left-radius: 10px;
+            display: flex;
+            flex-direction: column;
+
+            &-element {
+                display: flex;
+                flex-direction: row;
+                width: 100%;
+                margin-top: 5px;
+
+                &-checkbox {
+                    position: relative;
+                    width: 50%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                &-quantity {
+                    position: relative;
+                    width: 50%;
+                    display: flex;
+                    padding-right: 5px;
+                    justify-content: flex-end;
+
+                    input {
+                        width: 20px;
+                        border: none;
+                        border-radius: 10px;
+                        text-align: center;
+                    }
+
+                    select {
+                        width: 40px;
+                        background-color: white;
+                        border: none;
+                        border-radius: 10px;
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+    }
+
+    &-prerequires.show {
+        transform: translateY(100%);
+    }
+
+    &-attach {
+        z-index: 1;
+
+        &-right {
+            border-top: solid black 1px;
+            border-right: solid black 1px;
+            width: 40px;
+            height: 40px;
+            background-color: var(--piece-background-color);
+            transform: translateY(-50%) rotate(45deg);
+            position: absolute;
+            right: -20px;
+            top: 200px;
+        }
+
+        &-left {
+            border-top: solid black 1px;
+            border-right: solid black 1px;
+            width: 40px;
+            height: 40px;
+            background-color: var(--background-color);
+            transform: translateY(-50%) rotate(45deg);
+            position: absolute;
+            left: -20px;
+            top: 200px;
+        }
+    }
+
+    &-form {
+        height: 100%;
+        padding: 0px 10px 0px 35px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        z-index: 2;
+
+        input {
+            height: 40px;
+            border-radius: 10px;
+            border: none;
+            padding: 5px 10px 5px 10px;
+            font-size: 15px;
+        }
+
+        textarea {
+            border-radius: 20px;
+            padding: 10px;
+            border: none;
+            resize: none;
+            flex-grow: 1;
+            font-size: 15px;
+            background-image: url("../../../../assets/background-images/annexe.png");
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 100px;
+        }
+
+        select {
+            background-color: white;
+            border: none;
+            height: 50px;
+            border-radius: 10px;
+            padding: 5px 10px 5px 10px;
+        }
+
+        &-top {
+            margin-top: 20px;
+            display: flex;
+            flex-direction: row;
+            &-identifier {
+                width: 50px;
+                text-align: center;
+            }
+
+            &-title {
+                font-size: 25px;
+                font-family: 'Glacial Indifference Bold';
+                position: relative;
+                margin-left: 10px;
+            }
+
+            &-symbol {
+                width: 50px;
+                height: 50px;
+                background-color: white;
+                border-radius: 10px;
+                cursor: pointer;
+
+                mat-icon {
+                    transform: scale(1.3);
+                    overflow: visible;
+                }
+            }
+        }
+
+        &-content {
+            margin-top: 10px;
+            height: 100%;
+            margin-bottom: 10px;
+        }
+
+        &-bottom {
+            display: flex;
+            flex-direction: row;
+            margin-bottom: 10px;
+            justify-content: space-between;
+
+            &-duration {
+                display: flex;
+
+                input {
+                    border-top-right-radius: 0px;
+                    border-bottom-right-radius: 0px;
+                    width: 20px;
+                    text-align: center;
+                    z-index: 2;
+                }
+
+                select {
+                    width: 60px;
+                    border-top-left-radius: 0px;
+                    border-bottom-left-radius: 0px;
+                    z-index: 1;
+                }
+            }
+
+            &-prerequires {
+                width: 100px;
+                height: 50px;
+                background-color: white;
+                border-radius: 10px;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+    }
+}
+
+.piece::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: 1px solid black;
+}
\ No newline at end of file

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-annexe-task',
+  templateUrl: './annexe-task.component.html',
+  styleUrls: ['./annexe-task.component.scss']
+})
+export class AnnexeTaskComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  displayMenu: string = 'hide';
+  displayPrequires: string = 'hide';
+
+  durationUnit: string = 'UT';
+  duration: number = 1;
+  pieceWidth: string = '400px';
+  
+  durationChange(): void {
+    if(this.durationUnit === 'UT') {
+      if(this.duration >= 1  && this.duration <= 10) {
+        this.pieceWidth = (this.duration*400)+'px';
+      } else if(this.duration > 10) {
+        this.pieceWidth = '4000px';
+      } else {
+        this.pieceWidth = '400px';
+      }
+    } else {
+      this.pieceWidth = '400px';
+    }
+  }
+
+  onClickComments(): void {
+    
+  }
+
+  onClickAdd(): void {
+    
+  }
+
+  onClickErase(): void {
+    
+  } 
+
+  onClickDots(): void {
+    
+  }
+
+  changeDisplayPrerequires(): void {
+    if(this.displayPrequires == 'show') {
+      this.displayPrequires = 'hide';
+    } else {
+      this.displayPrequires = 'show';
+    }
+  }
+
+}

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

+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+    <div class="piece-attach piece-attach-left"></div>
+
+    <div class="piece-menu" [class]="displayMenu">
+        <mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
+        <mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
+        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+    </div>
+
+    <div class="piece-symbolchoice" [class]="displaySymbolChoice">
+        <div class="piece-symbolchoice-header">
+            <label>Choisir un symbole de tâche commune :</label>
+            <div><mat-icon fontIcon="delete" (click)="setSymbol('','')"></mat-icon></div>
+        </div>
+        <div class="piece-symbolchoice-symbols">
+            <mat-icon [style.color]="'#d79297'" fontIcon="favorite" (click)="setSymbol('favorite','#d79297')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="diamond" (click)="setSymbol('diamond','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#e9ec54'" fontIcon="star" (click)="setSymbol('star','#e9ec54')"></mat-icon>
+            <mat-icon [style.color]="'#f5cee3'" fontIcon="hexagon" (click)="setSymbol('hexagon','#f5cee3')"></mat-icon>
+            <mat-icon [style.color]="'#d3d2d2'" fontIcon="add" (click)="setSymbol('add','#d3d2d2')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="circle" (click)="setSymbol('circle','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#b6cc87'" fontIcon="eco" (click)="setSymbol('eco','#b6cc87')"></mat-icon>
+            <mat-icon [style.color]="'#d0bbdb'" fontIcon="play_arrow" (click)="setSymbol('play_arrow','#d0bbdb')"></mat-icon>
+            <mat-icon [style.color]="'#8b7e64'" fontIcon="remove" (click)="setSymbol('remove','#8b7e64')"></mat-icon>
+        </div>
+        <div class="piece-symbolchoice-symbols">
+            <mat-icon [style.color]="'#d79297'" fontIcon="square" (click)="setSymbol('square','#d79297')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#e9ec54'" fontIcon="square" (click)="setSymbol('square','#e9ec54')"></mat-icon>
+            <mat-icon [style.color]="'#f5cee3'" fontIcon="square" (click)="setSymbol('square','#f5cee3')"></mat-icon>
+            <mat-icon [style.color]="'#d3d2d2'" fontIcon="square" (click)="setSymbol('square','#d3d2d2')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#b6cc87'" fontIcon="square" (click)="setSymbol('square','#b6cc87')"></mat-icon>
+            <mat-icon [style.color]="'#d0bbdb'" fontIcon="square" (click)="setSymbol('square','#d0bbdb')"></mat-icon>
+            <mat-icon [style.color]="'#8b7e64'" fontIcon="square" (click)="setSymbol('square','#8b7e64')"></mat-icon>
+        </div>
+    </div>
+
+    <div class="piece-prerequires" [class]="displayPrequires">
+        <div class="piece-prerequires-prerequires">
+            <label class="piece-prerequires-title">Antécédents</label>
+            <div class="piece-prerequires-form">
+                <div class="piece-prerequires-prerequires-element">
+                    <input name="antecedent" type="checkbox" value="true"/>
+                    <label for="antecedent">EX1</label> 
+                </div>
+                <div class="piece-prerequires-prerequires-element">
+                    <input name="antecedent" type="checkbox"/>
+                    <label for="antecedent">EX2</label>
+                </div>
+            </div>
+        </div>
+        <div class="piece-prerequires-ressources">
+            <label class="piece-prerequires-title">Ressources & attributs</label>
+            <div class="piece-prerequires-form">
+                <div class="piece-prerequires-ressources-element">
+                    <div class="piece-prerequires-ressources-element-checkbox">
+                        <input name="ressource" type="checkbox"/>
+                        <label for="ressource">Pain</label>   
+                    </div>
+                    <div class="piece-prerequires-ressources-element-quantity">
+                        <select name="ressource">
+                            <option><</option>
+                            <option><=</option>
+                            <option>=</option>
+                            <option>>=</option>
+                            <option>></option>
+                        </select>
+                        <input type="text" value="1"/> 
+                    </div>
+                </div>
+                <div class="piece-prerequires-ressources-element">
+                    <div class="piece-prerequires-ressources-element-checkbox">
+                        <input name="ressource" type="checkbox"/>
+                        <label for="ressource">Citron</label>   
+                    </div>
+                    <div class="piece-prerequires-ressources-element-quantity">
+                        <select name="ressource">
+                            <option><</option>
+                            <option><=</option>
+                            <option>=</option>
+                            <option>>=</option>
+                            <option>></option>
+                        </select>
+                        <input type="text" value="1"/> 
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="piece-form">
+        <div class="piece-form-top">
+            <input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
+            <div class="piece-form-top-title">Tâche finale</div>
+            <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
+                <mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
+            </button>    
+        </div>
+        <textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
+        <div class="piece-form-bottom">
+            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
+                Prérequis
+            </button>
+            <div class="piece-form-bottom-duration">
+                <input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
+                <select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
+                    <option selected value="UT">UT</option>
+                    <option value="min">min</option>
+                    <option value="tours">tours</option> 
+                </select>
+            </div>
+        </div>
+
+    </div>
+</div>

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

+.piece {
+    --piece-background-color: #b28386;
+
+    width: 400px;
+    height: 400px;
+    position: relative;
+    background-color: var(--piece-background-color);
+    transition: all 0.5s ease;
+
+    &-menu {
+        position: absolute;
+        width: 150px;
+        height: 50px;
+        background-color: #f7f7f7;
+        z-index: -1;
+        top: -50px;
+        left: 50%;
+        transform: translateX(-50%);
+        transition: transform 0.5s ease;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        border: solid black 1px;
+        display: flex;
+        padding: 15px 20px 15px 20px;
+        justify-content: space-around;
+
+        mat-icon {
+            cursor: pointer;
+            transform: scale(1.1);
+        }
+
+        mat-icon:hover {
+            opacity: 0.75;
+        }
+    }
+
+    &-menu.show {
+        transform: translateX(-50%) translateY(0);
+    }
+
+    &-menu.hide {
+        transform: translateX(-50%) translateY(100%);
+    }
+
+    &-symbolchoice {
+        position: absolute;
+        background-color: #f7f7f7;
+        width: 300px;
+        height: 100px;
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border: solid black 1px;
+        border-left: none;
+        padding: 10px;
+        right: 0;
+        top: 5px;
+        z-index: -1;
+        transition: transform 0.5s ease;
+
+        label {
+            font-size: 14px;
+        }
+
+        mat-icon {
+            cursor: pointer;
+            transform: scale(1.2);
+        }
+
+        mat-icon:hover {
+            opacity: 0.75;
+        }
+
+        &-header {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+
+        &-symbols {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            margin-top: 10px;
+        }
+    }
+
+    &-symbolchoice.show {
+        transform: translateX(100%);
+    }
+
+    &-prerequires {
+        position: absolute;
+        width: 350px;
+        height: 150px;
+        background-color: #f7f7f7;
+        z-index: -1;
+        bottom: 0;
+        left: 25px;
+        border: solid black 1px;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        transition: transform 0.5s ease;
+        border-top: none;
+        display: flex;
+        flex-direction: row;
+
+        &-title {
+            margin-left: auto;
+            margin-right: auto;
+            font-family: 'Glacial Indifference Bold';
+            font-size: 14px;
+        }
+
+        &-form {
+            display: flex;
+            flex-direction: column;
+            overflow: scroll;
+        }
+
+        &-prerequires {
+            position: relative;
+            border-right: solid #a3a3a3 1px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 50%;
+            height: 90%;
+            border-bottom-left-radius: 10px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        &-ressources {
+            width: 50%;
+            height: 90%;
+            border-bottom-right-radius: 10px;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 50%;
+            height: 90%;
+            border-bottom-left-radius: 10px;
+            display: flex;
+            flex-direction: column;
+
+            &-element {
+                display: flex;
+                flex-direction: row;
+                width: 100%;
+                margin-top: 5px;
+
+                &-checkbox {
+                    position: relative;
+                    width: 50%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                &-quantity {
+                    position: relative;
+                    width: 50%;
+                    display: flex;
+                    padding-right: 5px;
+                    justify-content: flex-end;
+
+                    input {
+                        width: 20px;
+                        border: none;
+                        border-radius: 10px;
+                        text-align: center;
+                    }
+
+                    select {
+                        width: 40px;
+                        background-color: white;
+                        border: none;
+                        border-radius: 10px;
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+    }
+
+    &-prerequires.show {
+        transform: translateY(100%);
+    }
+
+    &-attach {
+        z-index: 1;
+
+        &-left {
+            border-top: solid black 1px;
+            border-right: solid black 1px;
+            width: 40px;
+            height: 40px;
+            background-color: var(--background-color);
+            transform: translateY(-50%) rotate(45deg);
+            position: absolute;
+            left: -20px;
+            top: 200px;
+        }
+    }
+
+    &-form {
+        height: 100%;
+        padding: 0px 10px 0px 35px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        z-index: 2;
+
+        input {
+            height: 40px;
+            border-radius: 10px;
+            border: none;
+            padding: 5px 10px 5px 10px;
+            font-size: 15px;
+        }
+
+        textarea {
+            border-radius: 20px;
+            padding: 10px;
+            border: none;
+            resize: none;
+            flex-grow: 1;
+            font-size: 15px;
+            background-image: url("../../../../assets/background-images/final.png");
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 100px;
+        }
+
+        select {
+            background-color: white;
+            border: none;
+            height: 50px;
+            border-radius: 10px;
+            padding: 5px 10px 5px 10px;
+        }
+
+        &-top {
+            margin-top: 20px;
+            display: flex;
+            flex-direction: row;
+
+            &-identifier {
+                width: 50px;
+                text-align: center;
+            }
+
+            &-title {
+                font-size: 25px;
+                font-family: 'Glacial Indifference Bold';
+                position: relative;
+                margin-left: 10px;
+            }
+
+            &-symbol {
+                width: 50px;
+                height: 50px;
+                background-color: white;
+                border-radius: 10px;
+                cursor: pointer;
+                position: absolute;
+                right: 10px;
+
+                mat-icon {
+                    transform: scale(1.3);
+                    overflow: visible;
+                }
+            }
+        }
+
+        &-content {
+            margin-top: 10px;
+            height: 100%;
+            margin-bottom: 10px;
+        }
+
+        &-bottom {
+            display: flex;
+            flex-direction: row;
+            margin-bottom: 10px;
+            justify-content: space-between;
+
+            &-duration {
+                display: flex;
+
+                input {
+                    border-top-right-radius: 0px;
+                    border-bottom-right-radius: 0px;
+                    width: 20px;
+                    text-align: center;
+                    z-index: 2;
+                }
+
+                select {
+                    width: 60px;
+                    border-top-left-radius: 0px;
+                    border-bottom-left-radius: 0px;
+                    z-index: 1;
+                }
+            }
+
+            &-prerequires {
+                width: 100px;
+                height: 50px;
+                background-color: white;
+                border-radius: 10px;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+    }
+}
+
+.piece::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: 1px solid black;
+}
\ No newline at end of file

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FinalTaskComponent } from './final-task.component';
+
+describe('FinalTaskComponent', () => {
+  let component: FinalTaskComponent;
+  let fixture: ComponentFixture<FinalTaskComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FinalTaskComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FinalTaskComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-final-task',
+  templateUrl: './final-task.component.html',
+  styleUrls: ['./final-task.component.scss']
+})
+export class FinalTaskComponent implements OnInit {
+
+  displayMenu: string = 'hide';
+  displaySymbolChoice: string = 'hide';
+  displayPrequires: string = 'hide';
+
+  durationUnit: string = 'UT';
+  duration: number = 1;
+  pieceWidth: string = '400px';
+
+  symbol: string = ''; // A changer quand implémentation des données
+  symbolColor: string = ''; //A changer quand implémentation des données
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  
+  durationChange(): void {
+    if(this.durationUnit === 'UT') {
+      if(this.duration >= 1 && this.duration <= 10) {
+        this.pieceWidth = (this.duration*400)+'px';
+      } else if(this.duration > 10) {
+        this.pieceWidth = '4000px';
+      } else {
+        this.pieceWidth = '400px';
+      }
+    } else {
+      this.pieceWidth = '400px';
+    }
+  }
+
+  onClickComments(): void {
+    
+  }
+
+  onClickAdd(): void {
+    
+  }
+
+  onClickErase(): void {
+    
+  } 
+
+  onClickDots(): void {
+    
+  }
+
+  changeDisplaySymbolChoice(): void {
+    if(this.displaySymbolChoice == 'show') {
+      this.displaySymbolChoice = 'hide';
+    } else {
+      this.displaySymbolChoice = 'show';
+    }
+  }
+
+  setSymbol(symbol: string, symbolColor: string): void {
+    this.symbol = symbol;
+    this.symbolColor = symbolColor;
+    this.displaySymbolChoice = 'hide';
+  }
+
+  changeDisplayPrerequires(): void {
+    if(this.displayPrequires == 'show') {
+      this.displayPrequires = 'hide';
+    } else {
+      this.displayPrequires = 'show';
+    }
+  }
+
+}

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

+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+    <div class="piece-attach piece-attach-left"></div>
+    <div class="piece-attach piece-attach-right"></div>
+
+    <div class="piece-menu" [class]="displayMenu">
+        <mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
+        <mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
+        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+    </div>
+
+    <div class="piece-symbolchoice" [class]="displaySymbolChoice">
+        <div class="piece-symbolchoice-header">
+            <label>Choisir un symbole de tâche commune :</label>
+            <div><mat-icon fontIcon="delete" (click)="setSymbol('','')"></mat-icon></div>
+        </div>
+        <div class="piece-symbolchoice-symbols">
+            <mat-icon [style.color]="'#d79297'" fontIcon="favorite" (click)="setSymbol('favorite','#d79297')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="diamond" (click)="setSymbol('diamond','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#e9ec54'" fontIcon="star" (click)="setSymbol('star','#e9ec54')"></mat-icon>
+            <mat-icon [style.color]="'#f5cee3'" fontIcon="hexagon" (click)="setSymbol('hexagon','#f5cee3')"></mat-icon>
+            <mat-icon [style.color]="'#d3d2d2'" fontIcon="add" (click)="setSymbol('add','#d3d2d2')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="circle" (click)="setSymbol('circle','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#b6cc87'" fontIcon="eco" (click)="setSymbol('eco','#b6cc87')"></mat-icon>
+            <mat-icon [style.color]="'#d0bbdb'" fontIcon="play_arrow" (click)="setSymbol('play_arrow','#d0bbdb')"></mat-icon>
+            <mat-icon [style.color]="'#8b7e64'" fontIcon="remove" (click)="setSymbol('remove','#8b7e64')"></mat-icon>
+        </div>
+        <div class="piece-symbolchoice-symbols">
+            <mat-icon [style.color]="'#d79297'" fontIcon="square" (click)="setSymbol('square','#d79297')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#e9ec54'" fontIcon="square" (click)="setSymbol('square','#e9ec54')"></mat-icon>
+            <mat-icon [style.color]="'#f5cee3'" fontIcon="square" (click)="setSymbol('square','#f5cee3')"></mat-icon>
+            <mat-icon [style.color]="'#d3d2d2'" fontIcon="square" (click)="setSymbol('square','#d3d2d2')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#b6cc87'" fontIcon="square" (click)="setSymbol('square','#b6cc87')"></mat-icon>
+            <mat-icon [style.color]="'#d0bbdb'" fontIcon="square" (click)="setSymbol('square','#d0bbdb')"></mat-icon>
+            <mat-icon [style.color]="'#8b7e64'" fontIcon="square" (click)="setSymbol('square','#8b7e64')"></mat-icon>
+        </div>
+    </div>
+
+    <div class="piece-prerequires" [class]="displayPrequires">
+        <div class="piece-prerequires-prerequires">
+            <label class="piece-prerequires-title">Antécédents</label>
+            <div class="piece-prerequires-form">
+                <div class="piece-prerequires-prerequires-element">
+                    <input name="antecedent" type="checkbox" value="true"/>
+                    <label for="antecedent">EX1</label> 
+                </div>
+                <div class="piece-prerequires-prerequires-element">
+                    <input name="antecedent" type="checkbox"/>
+                    <label for="antecedent">EX2</label>
+                </div>
+            </div>
+        </div>
+        <div class="piece-prerequires-ressources">
+            <label class="piece-prerequires-title">Ressources & attributs</label>
+            <div class="piece-prerequires-form">
+                <div class="piece-prerequires-ressources-element">
+                    <div class="piece-prerequires-ressources-element-checkbox">
+                        <input name="ressource" type="checkbox"/>
+                        <label for="ressource">Pain</label>   
+                    </div>
+                    <div class="piece-prerequires-ressources-element-quantity">
+                        <select name="ressource">
+                            <option><</option>
+                            <option><=</option>
+                            <option>=</option>
+                            <option>>=</option>
+                            <option>></option>
+                        </select>
+                        <input type="text" value="1"/> 
+                    </div>
+                </div>
+                <div class="piece-prerequires-ressources-element">
+                    <div class="piece-prerequires-ressources-element-checkbox">
+                        <input name="ressource" type="checkbox"/>
+                        <label for="ressource">Citron</label>   
+                    </div>
+                    <div class="piece-prerequires-ressources-element-quantity">
+                        <select name="ressource">
+                            <option><</option>
+                            <option><=</option>
+                            <option>=</option>
+                            <option>>=</option>
+                            <option>></option>
+                        </select>
+                        <input type="text" value="1"/> 
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="piece-form">
+        <div class="piece-form-top">
+            <input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
+            <div class="piece-form-top-title">Tâche<br>optionnelle</div>
+            <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
+                <mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
+            </button>    
+        </div>
+        <textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
+        <div class="piece-form-bottom">
+            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
+                Prérequis
+            </button>
+            <div class="piece-form-bottom-duration">
+                <input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
+                <select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
+                    <option selected value="UT">UT</option>
+                    <option value="min">min</option>
+                    <option value="tours">tours</option> 
+                </select>
+            </div>
+        </div>
+
+    </div>
+</div>

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

 .piece {
-    --piece-background-color: #b9dfe3;
+    --piece-background-color: #e8e3b3;
 
     width: 400px;
     height: 400px;
@@ -23,17 +23,21 @@
         display: flex;
         padding: 15px 20px 15px 20px;
         justify-content: space-around;
+
         mat-icon {
             cursor: pointer;
             transform: scale(1.1);
         }
+
         mat-icon:hover {
             opacity: 0.75;
         }
     }
+
     &-menu.show {
         transform: translateX(-50%) translateY(0);
     }
+
     &-menu.hide {
         transform: translateX(-50%) translateY(100%);
     }
@@ -46,23 +50,32 @@
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;
         border: solid black 1px;
+        border-left: none;
         padding: 10px;
         right: 0;
         top: 5px;
         z-index: -1;
         transition: transform 0.5s ease;
-        
+
         label {
             font-size: 14px;
         }
+
         mat-icon {
             cursor: pointer;
             transform: scale(1.2);
         }
+
         mat-icon:hover {
             opacity: 0.75;
         }
 
+        &-header {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+
         &-symbols {
             display: flex;
             flex-direction: row;
@@ -70,13 +83,113 @@
             margin-top: 10px;
         }
     }
+
     &-symbolchoice.show {
         transform: translateX(100%);
     }
 
+    &-prerequires {
+        position: absolute;
+        width: 350px;
+        height: 150px;
+        background-color: #f7f7f7;
+        z-index: -1;
+        bottom: 0;
+        left: 25px;
+        border: solid black 1px;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        transition: transform 0.5s ease;
+        border-top: none;
+        display: flex;
+        flex-direction: row;
+
+        &-title {
+            margin-left: auto;
+            margin-right: auto;
+            font-family: 'Glacial Indifference Bold';
+            font-size: 14px;
+        }
+
+        &-form {
+            display: flex;
+            flex-direction: column;
+            overflow: scroll;
+        }
+
+        &-prerequires {
+            position: relative;
+            border-right: solid #a3a3a3 1px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 50%;
+            height: 90%;
+            border-bottom-left-radius: 10px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        &-ressources {
+            width: 50%;
+            height: 90%;
+            border-bottom-right-radius: 10px;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 50%;
+            height: 90%;
+            border-bottom-left-radius: 10px;
+            display: flex;
+            flex-direction: column;
+
+            &-element {
+                display: flex;
+                flex-direction: row;
+                width: 100%;
+                margin-top: 5px;
+
+                &-checkbox {
+                    position: relative;
+                    width: 50%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                &-quantity {
+                    position: relative;
+                    width: 50%;
+                    display: flex;
+                    padding-right: 5px;
+                    justify-content: flex-end;
+
+                    input {
+                        width: 20px;
+                        border: none;
+                        border-radius: 10px;
+                        text-align: center;
+                    }
+
+                    select {
+                        width: 40px;
+                        background-color: white;
+                        border: none;
+                        border-radius: 10px;
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+    }
+
+    &-prerequires.show {
+        transform: translateY(100%);
+    }
+
     &-attach {
         z-index: 1;
-        &-left {
+
+        &-right {
             border-top: solid black 1px;
             border-right: solid black 1px;
             width: 40px;
@@ -88,7 +201,7 @@
             top: 200px;
         }
 
-        &-right {
+        &-left {
             border-top: solid black 1px;
             border-right: solid black 1px;
             width: 40px;
@@ -109,19 +222,24 @@
         flex-direction: column;
         align-items: stretch;
         z-index: 2;
+
         input {
             height: 40px;
             border-radius: 10px;
             border: none;
             padding: 5px 10px 5px 10px;
+            font-size: 15px;
         }
+
         textarea {
             border-radius: 20px;
             padding: 10px;
             border: none;
             resize: none;
             flex-grow: 1;
+            font-size: 15px;
         }
+
         select {
             background-color: white;
             border: none;
@@ -129,50 +247,55 @@
             border-radius: 10px;
             padding: 5px 10px 5px 10px;
         }
+
         &-top {
             margin-top: 20px;
             display: flex;
             flex-direction: row;
-            justify-content: space-between;
+
             &-identifier {
                 width: 50px;
                 text-align: center;
             }
+
             &-title {
                 font-size: 25px;
-                //font-weight: bold;
                 font-family: 'Glacial Indifference Bold';
+                position: relative;
+                margin-left: 10px;
             }
+
             &-symbol {
                 width: 50px;
-                height: 40px;
+                height: 50px;
                 background-color: white;
                 border-radius: 10px;
-                padding: 5px 10px 5px 10px;
                 cursor: pointer;
+                position: absolute;
+                right: 10px;
+
                 mat-icon {
-                    position: relative;
-                    left: 50%;
-                    height: 50%;
-                    transform: translateX(-50%) translateY(50%) scale(1.3);
+                    transform: scale(1.3);
                     overflow: visible;
                 }
             }
-            &-symbol:hover{
-                opacity: 0.75;
-            }
         }
+
         &-content {
             margin-top: 10px;
             height: 100%;
             margin-bottom: 10px;
         }
+
         &-bottom {
             display: flex;
             flex-direction: row;
             margin-bottom: 10px;
             justify-content: space-between;
+
             &-duration {
+                display: flex;
+
                 input {
                     border-top-right-radius: 0px;
                     border-bottom-right-radius: 0px;
@@ -180,6 +303,7 @@
                     text-align: center;
                     z-index: 2;
                 }
+
                 select {
                     width: 60px;
                     border-top-left-radius: 0px;
@@ -187,6 +311,17 @@
                     z-index: 1;
                 }
             }
+
+            &-prerequires {
+                width: 100px;
+                height: 50px;
+                background-color: white;
+                border-radius: 10px;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
         }
     }
 }

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OptionnalTaskComponent } from './optionnal-task.component';
+
+describe('OptionnalTaskComponent', () => {
+  let component: OptionnalTaskComponent;
+  let fixture: ComponentFixture<OptionnalTaskComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OptionnalTaskComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(OptionnalTaskComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-optionnal-task',
+  templateUrl: './optionnal-task.component.html',
+  styleUrls: ['./optionnal-task.component.scss']
+})
+export class OptionnalTaskComponent implements OnInit {
+
+  displayMenu: string = 'hide';
+  displaySymbolChoice: string = 'hide';
+  displayPrequires: string = 'hide';
+
+  durationUnit: string = 'UT';
+  duration: number = 1;
+  pieceWidth: string = '400px';
+
+  symbol: string = ''; // A changer quand implémentation des données
+  symbolColor: string = ''; //A changer quand implémentation des données
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  
+  durationChange(): void {
+    if(this.durationUnit === 'UT') {
+      if(this.duration >= 1 && this.duration <= 10) {
+        this.pieceWidth = (this.duration*400)+'px';
+      } else if(this.duration > 10) {
+        this.pieceWidth = '4000px';
+      } else {
+        this.pieceWidth = '400px';
+      }
+    } else {
+      this.pieceWidth = '400px';
+    }
+  }
+
+  onClickComments(): void {
+    
+  }
+
+  onClickAdd(): void {
+    
+  }
+
+  onClickErase(): void {
+    
+  } 
+
+  onClickDots(): void {
+    
+  }
+
+  changeDisplaySymbolChoice(): void {
+    if(this.displaySymbolChoice == 'show') {
+      this.displaySymbolChoice = 'hide';
+    } else {
+      this.displaySymbolChoice = 'show';
+    }
+  }
+
+  setSymbol(symbol: string, symbolColor: string): void {
+    this.symbol = symbol;
+    this.symbolColor = symbolColor;
+    this.displaySymbolChoice = 'hide';
+  }
+
+  changeDisplayPrerequires(): void {
+    if(this.displayPrequires == 'show') {
+      this.displayPrequires = 'hide';
+    } else {
+      this.displayPrequires = 'show';
+    }
+  }
+
+}

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

+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+    <div class="piece-attach piece-attach-left"></div>
+    <div class="piece-attach piece-attach-right"></div>
+
+    <div class="piece-menu" [class]="displayMenu">
+        <mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
+        <mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
+        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+    </div>
+
+    <div class="piece-symbolchoice" [class]="displaySymbolChoice">
+        <div class="piece-symbolchoice-header">
+            <label>Choisir un symbole de tâche commune :</label>
+            <div><mat-icon fontIcon="delete" (click)="setSymbol('','')"></mat-icon></div>
+        </div>
+        <div class="piece-symbolchoice-symbols">
+            <mat-icon [style.color]="'#d79297'" fontIcon="favorite" (click)="setSymbol('favorite','#d79297')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="diamond" (click)="setSymbol('diamond','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#e9ec54'" fontIcon="star" (click)="setSymbol('star','#e9ec54')"></mat-icon>
+            <mat-icon [style.color]="'#f5cee3'" fontIcon="hexagon" (click)="setSymbol('hexagon','#f5cee3')"></mat-icon>
+            <mat-icon [style.color]="'#d3d2d2'" fontIcon="add" (click)="setSymbol('add','#d3d2d2')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="circle" (click)="setSymbol('circle','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#b6cc87'" fontIcon="eco" (click)="setSymbol('eco','#b6cc87')"></mat-icon>
+            <mat-icon [style.color]="'#d0bbdb'" fontIcon="play_arrow" (click)="setSymbol('play_arrow','#d0bbdb')"></mat-icon>
+            <mat-icon [style.color]="'#8b7e64'" fontIcon="remove" (click)="setSymbol('remove','#8b7e64')"></mat-icon>
+        </div>
+        <div class="piece-symbolchoice-symbols">
+            <mat-icon [style.color]="'#d79297'" fontIcon="square" (click)="setSymbol('square','#d79297')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#e9ec54'" fontIcon="square" (click)="setSymbol('square','#e9ec54')"></mat-icon>
+            <mat-icon [style.color]="'#f5cee3'" fontIcon="square" (click)="setSymbol('square','#f5cee3')"></mat-icon>
+            <mat-icon [style.color]="'#d3d2d2'" fontIcon="square" (click)="setSymbol('square','#d3d2d2')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#b6cc87'" fontIcon="square" (click)="setSymbol('square','#b6cc87')"></mat-icon>
+            <mat-icon [style.color]="'#d0bbdb'" fontIcon="square" (click)="setSymbol('square','#d0bbdb')"></mat-icon>
+            <mat-icon [style.color]="'#8b7e64'" fontIcon="square" (click)="setSymbol('square','#8b7e64')"></mat-icon>
+        </div>
+    </div>
+
+    <div class="piece-prerequires" [class]="displayPrequires">
+        <div class="piece-prerequires-prerequires">
+            <label class="piece-prerequires-title">Antécédents</label>
+            <div class="piece-prerequires-form">
+                <div class="piece-prerequires-prerequires-element">
+                    <input name="antecedent" type="checkbox" value="true"/>
+                    <label for="antecedent">EX1</label> 
+                </div>
+                <div class="piece-prerequires-prerequires-element">
+                    <input name="antecedent" type="checkbox"/>
+                    <label for="antecedent">EX2</label>
+                </div>
+            </div>
+        </div>
+        <div class="piece-prerequires-ressources">
+            <label class="piece-prerequires-title">Ressources & attributs</label>
+            <div class="piece-prerequires-form">
+                <div class="piece-prerequires-ressources-element">
+                    <div class="piece-prerequires-ressources-element-checkbox">
+                        <input name="ressource" type="checkbox"/>
+                        <label for="ressource">Pain</label>   
+                    </div>
+                    <div class="piece-prerequires-ressources-element-quantity">
+                        <select name="ressource">
+                            <option><</option>
+                            <option><=</option>
+                            <option>=</option>
+                            <option>>=</option>
+                            <option>></option>
+                        </select>
+                        <input type="text" value="1"/> 
+                    </div>
+                </div>
+                <div class="piece-prerequires-ressources-element">
+                    <div class="piece-prerequires-ressources-element-checkbox">
+                        <input name="ressource" type="checkbox"/>
+                        <label for="ressource">Citron</label>   
+                    </div>
+                    <div class="piece-prerequires-ressources-element-quantity">
+                        <select name="ressource">
+                            <option><</option>
+                            <option><=</option>
+                            <option>=</option>
+                            <option>>=</option>
+                            <option>></option>
+                        </select>
+                        <input type="text" value="1"/> 
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="piece-form">
+        <div class="piece-form-top">
+            <input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
+            <div class="piece-form-top-title">Événement<br>aléatoire</div>
+            <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
+                <mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
+            </button>    
+        </div>
+        <textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
+        <div class="piece-form-bottom">
+            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
+                Prérequis
+            </button>
+            <div class="piece-form-bottom-duration">
+                <input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
+                <select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
+                    <option selected value="UT">UT</option>
+                    <option value="min">min</option>
+                    <option value="tours">tours</option> 
+                </select>
+            </div>
+        </div>
+
+    </div>
+</div>

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

+.piece {
+    --piece-background-color: #bfdaa3;
+
+    width: 400px;
+    height: 400px;
+    position: relative;
+    background-color: var(--piece-background-color);
+    transition: all 0.5s ease;
+
+    &-menu {
+        position: absolute;
+        width: 150px;
+        height: 50px;
+        background-color: #f7f7f7;
+        z-index: -1;
+        top: -50px;
+        left: 50%;
+        transform: translateX(-50%);
+        transition: transform 0.5s ease;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        border: solid black 1px;
+        display: flex;
+        padding: 15px 20px 15px 20px;
+        justify-content: space-around;
+
+        mat-icon {
+            cursor: pointer;
+            transform: scale(1.1);
+        }
+
+        mat-icon:hover {
+            opacity: 0.75;
+        }
+    }
+
+    &-menu.show {
+        transform: translateX(-50%) translateY(0);
+    }
+
+    &-menu.hide {
+        transform: translateX(-50%) translateY(100%);
+    }
+
+    &-symbolchoice {
+        position: absolute;
+        background-color: #f7f7f7;
+        width: 300px;
+        height: 100px;
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border: solid black 1px;
+        border-left: none;
+        padding: 10px;
+        right: 0;
+        top: 5px;
+        z-index: -1;
+        transition: transform 0.5s ease;
+
+        label {
+            font-size: 14px;
+        }
+
+        mat-icon {
+            cursor: pointer;
+            transform: scale(1.2);
+        }
+
+        mat-icon:hover {
+            opacity: 0.75;
+        }
+
+        &-header {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+
+        &-symbols {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            margin-top: 10px;
+        }
+    }
+
+    &-symbolchoice.show {
+        transform: translateX(100%);
+    }
+
+    &-prerequires {
+        position: absolute;
+        width: 350px;
+        height: 150px;
+        background-color: #f7f7f7;
+        z-index: -1;
+        bottom: 0;
+        left: 25px;
+        border: solid black 1px;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        transition: transform 0.5s ease;
+        border-top: none;
+        display: flex;
+        flex-direction: row;
+
+        &-title {
+            margin-left: auto;
+            margin-right: auto;
+            font-family: 'Glacial Indifference Bold';
+            font-size: 14px;
+        }
+
+        &-form {
+            display: flex;
+            flex-direction: column;
+            overflow: scroll;
+        }
+
+        &-prerequires {
+            position: relative;
+            border-right: solid #a3a3a3 1px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 50%;
+            height: 90%;
+            border-bottom-left-radius: 10px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        &-ressources {
+            width: 50%;
+            height: 90%;
+            border-bottom-right-radius: 10px;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 50%;
+            height: 90%;
+            border-bottom-left-radius: 10px;
+            display: flex;
+            flex-direction: column;
+
+            &-element {
+                display: flex;
+                flex-direction: row;
+                width: 100%;
+                margin-top: 5px;
+
+                &-checkbox {
+                    position: relative;
+                    width: 50%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                &-quantity {
+                    position: relative;
+                    width: 50%;
+                    display: flex;
+                    padding-right: 5px;
+                    justify-content: flex-end;
+
+                    input {
+                        width: 20px;
+                        border: none;
+                        border-radius: 10px;
+                        text-align: center;
+                    }
+
+                    select {
+                        width: 40px;
+                        background-color: white;
+                        border: none;
+                        border-radius: 10px;
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+    }
+
+    &-prerequires.show {
+        transform: translateY(100%);
+    }
+
+    &-attach {
+        z-index: 1;
+
+        &-right {
+            border-top: solid black 1px;
+            border-right: solid black 1px;
+            width: 40px;
+            height: 40px;
+            background-color: var(--piece-background-color);
+            transform: translateY(-50%) rotate(45deg);
+            position: absolute;
+            right: -20px;
+            top: 200px;
+        }
+
+        &-left {
+            border-top: solid black 1px;
+            border-right: solid black 1px;
+            width: 40px;
+            height: 40px;
+            background-color: var(--background-color);
+            transform: translateY(-50%) rotate(45deg);
+            position: absolute;
+            left: -20px;
+            top: 200px;
+        }
+    }
+
+    &-form {
+        height: 100%;
+        padding: 0px 10px 0px 35px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        z-index: 2;
+
+        input {
+            height: 40px;
+            border-radius: 10px;
+            border: none;
+            padding: 5px 10px 5px 10px;
+            font-size: 15px;
+        }
+
+        textarea {
+            border-radius: 20px;
+            padding: 10px;
+            border: none;
+            resize: none;
+            flex-grow: 1;
+            font-size: 15px;
+            background-image: url("../../../../assets/background-images/event.png");
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 100px;
+        }
+
+        select {
+            background-color: white;
+            border: none;
+            height: 50px;
+            border-radius: 10px;
+            padding: 5px 10px 5px 10px;
+        }
+
+        &-top {
+            margin-top: 20px;
+            display: flex;
+            flex-direction: row;
+
+            &-identifier {
+                width: 50px;
+                text-align: center;
+            }
+
+            &-title {
+                font-size: 25px;
+                font-family: 'Glacial Indifference Bold';
+                position: relative;
+                margin-left: 10px;
+            }
+
+            &-symbol {
+                width: 50px;
+                height: 50px;
+                background-color: white;
+                border-radius: 10px;
+                cursor: pointer;
+                position: absolute;
+                right: 10px;
+
+                mat-icon {
+                    transform: scale(1.3);
+                    overflow: visible;
+                }
+            }
+        }
+
+        &-content {
+            margin-top: 10px;
+            height: 100%;
+            margin-bottom: 10px;
+        }
+
+        &-bottom {
+            display: flex;
+            flex-direction: row;
+            margin-bottom: 10px;
+            justify-content: space-between;
+
+            &-duration {
+                display: flex;
+
+                input {
+                    border-top-right-radius: 0px;
+                    border-bottom-right-radius: 0px;
+                    width: 20px;
+                    text-align: center;
+                    z-index: 2;
+                }
+
+                select {
+                    width: 60px;
+                    border-top-left-radius: 0px;
+                    border-bottom-left-radius: 0px;
+                    z-index: 1;
+                }
+            }
+
+            &-prerequires {
+                width: 100px;
+                height: 50px;
+                background-color: white;
+                border-radius: 10px;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+    }
+}
+
+.piece::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: 1px solid black;
+}
\ No newline at end of file

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RandomEventComponent } from './random-event.component';
+
+describe('RandomEventComponent', () => {
+  let component: RandomEventComponent;
+  let fixture: ComponentFixture<RandomEventComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RandomEventComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RandomEventComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-random-event',
+  templateUrl: './random-event.component.html',
+  styleUrls: ['./random-event.component.scss']
+})
+export class RandomEventComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  displayMenu: string = 'hide';
+  displaySymbolChoice: string = 'hide';
+  displayPrequires: string = 'hide';
+
+  durationUnit: string = 'UT';
+  duration: number = 1;
+  pieceWidth: string = '400px';
+
+  symbol: string = ''; // A changer quand implémentation des données
+  symbolColor: string = ''; //A changer quand implémentation des données
+  
+  durationChange(): void {
+    if(this.durationUnit === 'UT') {
+      if(this.duration >= 1  && this.duration <= 10) {
+        this.pieceWidth = (this.duration*400)+'px';
+      } else if(this.duration > 10) {
+        this.pieceWidth = '4000px';
+      } else {
+        this.pieceWidth = '400px';
+      }
+    } else {
+      this.pieceWidth = '400px';
+    }
+  }
+
+  onClickComments(): void {
+    
+  }
+
+  onClickAdd(): void {
+    
+  }
+
+  onClickErase(): void {
+    
+  } 
+
+  onClickDots(): void {
+    
+  }
+
+  changeDisplaySymbolChoice(): void {
+    if(this.displaySymbolChoice == 'show') {
+      this.displaySymbolChoice = 'hide';
+    } else {
+      this.displaySymbolChoice = 'show';
+    }
+  }
+
+  setSymbol(symbol: string, symbolColor: string): void {
+    this.symbol = symbol;
+    this.symbolColor = symbolColor;
+    this.displaySymbolChoice = 'hide';
+  }
+
+  changeDisplayPrerequires(): void {
+    if(this.displayPrequires == 'show') {
+      this.displayPrequires = 'hide';
+    } else {
+      this.displayPrequires = 'show';
+    }
+  }
+
+}

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

+<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+    <div class="piece-attach piece-attach-left"></div>
+
+    <div class="piece-menu" [class]="displayMenu">
+        <mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
+        <mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
+        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
+        <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
+    </div>
+
+    <div class="piece-form">
+        <label>Recommencer<br>le tour jusqu'à ce que :</label>
+        <textarea></textarea>
+    </div>
+</div>

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

 .piece {
-    --piece-background-color: #bccecc;
+    --piece-background-color: #abbcc6;
 
     width: 400px;
     height: 400px;
     position: relative;
     background-color: var(--piece-background-color);
-    //border: solid black 2px;
+    transition: all 0.5s ease;
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+
+    &-menu {
+        position: absolute;
+        width: 150px;
+        height: 50px;
+        background-color: #f7f7f7;
+        z-index: -1;
+        top: -50px;
+        left: 30%;
+        transform: translateX(-50%);
+        transition: transform 0.5s ease;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        border: solid black 1px;
+        display: flex;
+        padding: 15px 20px 15px 20px;
+        justify-content: space-around;
+
+        mat-icon {
+            cursor: pointer;
+            transform: scale(1.1);
+        }
+
+        mat-icon:hover {
+            opacity: 0.75;
+        }
+    }
+
+    &-menu.show {
+        transform: translateX(-50%) translateY(0);
+    }
+
+    &-menu.hide {
+        transform: translateX(-50%) translateY(100%);
+    }
 
     &-attach {
         z-index: 1;
-        &-left {
-            border-top: solid black 1px;
-            border-right: solid black 1px;
-            width: 40px;
-            height: 40px;
-            background-color: var(--piece-background-color);
-            transform: translateY(-50%) rotate(45deg);
-            position: absolute;
-            right: -20px;
-            top: 200px;
-        }
 
-        &-right {
+        &-left {
             border-top: solid black 1px;
             border-right: solid black 1px;
             width: 40px;
@@ -31,13 +57,35 @@
             position: absolute;
             left: -20px;
             top: 200px;
-            //transform: translateY(-50%);
         }
     }
 
     &-form {
-        display: flex;
+        height: 100%;
+        padding: 0px 10px 0px 35px;
         position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        z-index: 2;
+
+        label {
+            margin-top: 15%;
+            font-family: 'Glacial Indifference Bold';
+            margin-bottom: 10px;
+            text-align: center;
+            width: 70%;
+            font-size: 17px;
+        }
+
+        textarea {
+            width: 80%;
+            border: none;
+            border-radius: 10px;
+            resize: none;
+            height: 50%;
+            font-size: 15px;
+        }
     }
 }
 
@@ -49,4 +97,6 @@
     right: 0px;
     bottom: 0px;
     border: 1px solid black;
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
 }
\ No newline at end of file

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RepeatTaskComponent } from './repeat-task.component';
+
+describe('RepeatTaskComponent', () => {
+  let component: RepeatTaskComponent;
+  let fixture: ComponentFixture<RepeatTaskComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RepeatTaskComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RepeatTaskComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-repeat-task',
+  templateUrl: './repeat-task.component.html',
+  styleUrls: ['./repeat-task.component.scss']
+})
+export class RepeatTaskComponent implements OnInit {
+
+  displayMenu: string = 'hide';
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onClickComments(): void {
+    
+  }
+
+  onClickAdd(): void {
+    
+  }
+
+  onClickErase(): void {
+    
+  } 
+
+  onClickDots(): void {
+    
+  }
+}

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

@@ -10,7 +10,10 @@
     </div>
 
     <div class="piece-symbolchoice" [class]="displaySymbolChoice">
-        <label>Choisir un symbole de tâche commune :</label>
+        <div class="piece-symbolchoice-header">
+            <label>Choisir un symbole de tâche commune :</label>
+            <div><mat-icon fontIcon="delete" (click)="setSymbol('','')"></mat-icon></div>
+        </div>
         <div class="piece-symbolchoice-symbols">
             <mat-icon [style.color]="'#d79297'" fontIcon="favorite" (click)="setSymbol('favorite','#d79297')"></mat-icon>
             <mat-icon [style.color]="'#9ad5ec'" fontIcon="diamond" (click)="setSymbol('diamond','#9ad5ec')"></mat-icon>
@@ -33,23 +36,74 @@
             <mat-icon [style.color]="'#d0bbdb'" fontIcon="square" (click)="setSymbol('square','#d0bbdb')"></mat-icon>
             <mat-icon [style.color]="'#8b7e64'" fontIcon="square" (click)="setSymbol('square','#8b7e64')"></mat-icon>
         </div>
+    </div>
 
+    <div class="piece-prerequires" [class]="displayPrequires">
+        <div class="piece-prerequires-prerequires">
+            <label class="piece-prerequires-title">Antécédents</label>
+            <div class="piece-prerequires-form">
+                <div class="piece-prerequires-prerequires-element">
+                    <input name="antecedent" type="checkbox" value="true"/>
+                    <label for="antecedent">EX1</label> 
+                </div>
+                <div class="piece-prerequires-prerequires-element">
+                    <input name="antecedent" type="checkbox"/>
+                    <label for="antecedent">EX2</label>
+                </div>
+            </div>
+        </div>
+        <div class="piece-prerequires-ressources">
+            <label class="piece-prerequires-title">Ressources & attributs</label>
+            <div class="piece-prerequires-form">
+                <div class="piece-prerequires-ressources-element">
+                    <div class="piece-prerequires-ressources-element-checkbox">
+                        <input name="ressource" type="checkbox"/>
+                        <label for="ressource">Pain</label>   
+                    </div>
+                    <div class="piece-prerequires-ressources-element-quantity">
+                        <select name="ressource">
+                            <option><</option>
+                            <option><=</option>
+                            <option>=</option>
+                            <option>>=</option>
+                            <option>></option>
+                        </select>
+                        <input type="text" value="1"/> 
+                    </div>
+                </div>
+                <div class="piece-prerequires-ressources-element">
+                    <div class="piece-prerequires-ressources-element-checkbox">
+                        <input name="ressource" type="checkbox"/>
+                        <label for="ressource">Citron</label>   
+                    </div>
+                    <div class="piece-prerequires-ressources-element-quantity">
+                        <select name="ressource">
+                            <option><</option>
+                            <option><=</option>
+                            <option>=</option>
+                            <option>>=</option>
+                            <option>></option>
+                        </select>
+                        <input type="text" value="1"/> 
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
     <div class="piece-form">
         <div class="piece-form-top">
             <input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
             <div class="piece-form-top-title">Tâche</div>
-            <div class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
+            <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
                 <mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
-            </div>    
+            </button>    
         </div>
-        <textarea class="piece-form-content" placeholder="Acheter des citrons"></textarea>
+        <textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
         <div class="piece-form-bottom">
-            <select class="piece-form-bottom-antecedent" name="antecedent">
-                <option selected value="0">/</option>
-                <option value="1">1</option> 
-            </select>
+            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
+                Prérequis
+            </button>
             <div class="piece-form-bottom-duration">
                 <input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
                 <select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">

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

+.piece {
+    --piece-background-color: #b9dfe3;
+
+    width: 400px;
+    height: 400px;
+    position: relative;
+    background-color: var(--piece-background-color);
+    transition: all 0.5s ease;
+
+    &-menu {
+        position: absolute;
+        width: 150px;
+        height: 50px;
+        background-color: #f7f7f7;
+        z-index: -1;
+        top: -50px;
+        left: 50%;
+        transform: translateX(-50%);
+        transition: transform 0.5s ease;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        border: solid black 1px;
+        display: flex;
+        padding: 15px 20px 15px 20px;
+        justify-content: space-around;
+
+        mat-icon {
+            cursor: pointer;
+            transform: scale(1.1);
+        }
+
+        mat-icon:hover {
+            opacity: 0.75;
+        }
+    }
+
+    &-menu.show {
+        transform: translateX(-50%) translateY(0);
+    }
+
+    &-menu.hide {
+        transform: translateX(-50%) translateY(100%);
+    }
+
+    &-symbolchoice {
+        position: absolute;
+        background-color: #f7f7f7;
+        width: 300px;
+        height: 100px;
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border: solid black 1px;
+        border-left: none;
+        padding: 10px;
+        right: 0;
+        top: 5px;
+        z-index: -1;
+        transition: transform 0.5s ease;
+
+        label {
+            font-size: 14px;
+        }
+
+        mat-icon {
+            cursor: pointer;
+            transform: scale(1.2);
+        }
+
+        mat-icon:hover {
+            opacity: 0.75;
+        }
+
+        &-header {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+
+        &-symbols {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            margin-top: 10px;
+        }
+    }
+
+    &-symbolchoice.show {
+        transform: translateX(100%);
+    }
+
+    &-prerequires {
+        position: absolute;
+        width: 350px;
+        height: 150px;
+        background-color: #f7f7f7;
+        z-index: -1;
+        bottom: 0;
+        left: 25px;
+        border: solid black 1px;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        transition: transform 0.5s ease;
+        border-top: none;
+        display: flex;
+        flex-direction: row;
+
+        &-title {
+            margin-left: auto;
+            margin-right: auto;
+            font-family: 'Glacial Indifference Bold';
+            font-size: 14px;
+        }
+
+        &-form {
+            display: flex;
+            flex-direction: column;
+            overflow: scroll;
+        }
+
+        &-prerequires {
+            position: relative;
+            border-right: solid #a3a3a3 1px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 50%;
+            height: 90%;
+            border-bottom-left-radius: 10px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        &-ressources {
+            width: 50%;
+            height: 90%;
+            border-bottom-right-radius: 10px;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 50%;
+            height: 90%;
+            border-bottom-left-radius: 10px;
+            display: flex;
+            flex-direction: column;
+
+            &-element {
+                display: flex;
+                flex-direction: row;
+                width: 100%;
+                margin-top: 5px;
+
+                &-checkbox {
+                    position: relative;
+                    width: 50%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                &-quantity {
+                    position: relative;
+                    width: 50%;
+                    display: flex;
+                    padding-right: 5px;
+                    justify-content: flex-end;
+
+                    input {
+                        width: 20px;
+                        border: none;
+                        border-radius: 10px;
+                        text-align: center;
+                    }
+
+                    select {
+                        width: 40px;
+                        background-color: white;
+                        border: none;
+                        border-radius: 10px;
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+    }
+
+    &-prerequires.show {
+        transform: translateY(100%);
+    }
+
+    &-attach {
+        z-index: 1;
+
+        &-right {
+            border-top: solid black 1px;
+            border-right: solid black 1px;
+            width: 40px;
+            height: 40px;
+            background-color: var(--piece-background-color);
+            transform: translateY(-50%) rotate(45deg);
+            position: absolute;
+            right: -20px;
+            top: 200px;
+        }
+
+        &-left {
+            border-top: solid black 1px;
+            border-right: solid black 1px;
+            width: 40px;
+            height: 40px;
+            background-color: var(--background-color);
+            transform: translateY(-50%) rotate(45deg);
+            position: absolute;
+            left: -20px;
+            top: 200px;
+        }
+    }
+
+    &-form {
+        height: 100%;
+        padding: 0px 10px 0px 35px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        z-index: 2;
+
+        input {
+            height: 40px;
+            border-radius: 10px;
+            border: none;
+            padding: 5px 10px 5px 10px;
+            font-size: 15px;
+        }
+
+        textarea {
+            border-radius: 20px;
+            padding: 10px;
+            border: none;
+            resize: none;
+            flex-grow: 1;
+            font-size: 15px;
+            background-image: url("../../../../assets/background-images/tache.png");
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 100px;
+        }
+
+        select {
+            background-color: white;
+            border: none;
+            height: 50px;
+            border-radius: 10px;
+            padding: 5px 10px 5px 10px;
+        }
+
+        &-top {
+            margin-top: 20px;
+            display: flex;
+            flex-direction: row;
+
+            &-identifier {
+                width: 50px;
+                text-align: center;
+            }
+
+            &-title {
+                font-size: 25px;
+                font-family: 'Glacial Indifference Bold';
+                position: relative;
+                margin-left: 10px;
+            }
+
+            &-symbol {
+                width: 50px;
+                height: 50px;
+                background-color: white;
+                border-radius: 10px;
+                cursor: pointer;
+                position: absolute;
+                right: 10px;
+
+                mat-icon {
+                    transform: scale(1.3);
+                    overflow: visible;
+                }
+            }
+        }
+
+        &-content {
+            margin-top: 10px;
+            height: 100%;
+            margin-bottom: 10px;
+        }
+
+        &-bottom {
+            display: flex;
+            flex-direction: row;
+            margin-bottom: 10px;
+            justify-content: space-between;
+
+            &-duration {
+                display: flex;
+
+                input {
+                    border-top-right-radius: 0px;
+                    border-bottom-right-radius: 0px;
+                    width: 20px;
+                    text-align: center;
+                    z-index: 2;
+                }
+
+                select {
+                    width: 60px;
+                    border-top-left-radius: 0px;
+                    border-bottom-left-radius: 0px;
+                    z-index: 1;
+                }
+            }
+
+            &-prerequires {
+                width: 100px;
+                height: 50px;
+                background-color: white;
+                border-radius: 10px;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+    }
+}
+
+.piece::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: 1px solid black;
+}
\ No newline at end of file

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

@@ -7,13 +7,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TaskComponent implements OnInit {
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
   displayMenu: string = 'hide';
   displaySymbolChoice: string = 'hide';
+  displayPrequires: string = 'hide';
 
   durationUnit: string = 'UT';
   duration: number = 1;
@@ -21,15 +17,21 @@ export class TaskComponent implements OnInit {
 
   symbol: string = ''; // A changer quand implémentation des données
   symbolColor: string = ''; //A changer quand implémentation des données
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
   
   durationChange(): void {
     if(this.durationUnit === 'UT') {
-      if(this.duration <= 1) {
+      if(this.duration >= 1 && this.duration <= 10) {
+        this.pieceWidth = (this.duration*400)+'px';
+      } else if(this.duration > 10) {
+        this.pieceWidth = '4000px';
+      } else {
         this.pieceWidth = '400px';
-      } else if(this.duration == 2) {
-        this.pieceWidth = '800px';
-      } else if(this.duration >= 3) {
-        this.pieceWidth = '1200px';
       }
     } else {
       this.pieceWidth = '400px';
@@ -66,6 +68,14 @@ export class TaskComponent implements OnInit {
     this.displaySymbolChoice = 'hide';
   }
 
+  changeDisplayPrerequires(): void {
+    if(this.displayPrequires == 'show') {
+      this.displayPrequires = 'hide';
+    } else {
+      this.displayPrequires = 'show';
+    }
+  }
+
 }
 
 

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

+<div class="piece">
+    <div class="piece-form">
+
+        <div class="piece-form-create">
+            <div class="piece-form-title">Créer un nouveau personnage</div>
+            <div class="piece-form-create-top">
+                <mat-icon fontIcon="person_add"></mat-icon>
+                <div class="piece-form-create-top-name">
+                    <label for="name">Nom</label>
+                    <input name="name" type="text" />
+                </div>
+            </div>
+            <div class="piece-form-create-infos">
+                <div class="piece-form-create-infos-description">
+                    <label for="description">Description</label>
+                    <textarea name="description"></textarea>
+                </div>
+
+                <!--
+                <div>
+                    <div class="piece-form-create-infos-phone">
+                        <label for="phonenumber">N° tél.</label>
+                        <input name="phonenumber" type="tel"/>                    
+                    </div>
+                    <div class="piece-form-create-infos-title">
+                        <label for="title">Titre</label>
+                        <input name="title" type="text"/>
+                    </div>                    
+                </div>
+                -->
+
+                <div class="piece-form-create-infos-color">
+                    <label for="color">Couleur</label>
+                    <input name="color" type="color" />
+                </div>
+            </div>
+            <button mat-button>Créer</button>
+        </div>
+
+        <div class="piece-form-select">
+            <div class="piece-form-title">Sélectionner un personnage déjà créé</div>
+            <div class="piece-form-select-container">
+                <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>
+                </div>
+            </div>
+            <button mat-button>Sélectionner</button>
+        </div>
+
+        <div class="piece-form-delete">
+            <div class="piece-form-title">Supprimer un personnage</div>
+            <div class="piece-form-delete-container">
+                <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>
+                </div>
+            </div>
+            <button mat-button>Supprimer</button>
+        </div>
+
+        <div>
+            <div class="piece-form-title">Personnage(s) utilisé(s)</div>
+            <app-character></app-character>
+            <app-character></app-character>
+        </div>
+
+    </div>
+</div>
\ No newline at end of file

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

+.piece {
+    --piece-background-color: #ce7b66;
+
+    width: 300px;
+    position: relative;
+    background-color: var(--piece-background-color);
+    border: solid black 1px;
+    border-radius: 10px;
+
+    label {
+        margin-right: 10px;
+    }
+
+    input[type="text"],
+    input[type="tel"] {
+        border: none;
+        border-radius: 10px;
+        height: 20px;
+        padding: 5px 5px 5px 5px;
+    }
+
+    input[type="color"] {
+        border: none;
+        border-radius: 10px;
+        background-color: white;
+    }
+
+    textarea {
+        border: none;
+        border-radius: 10px;
+        min-height: 50px;
+        max-height: 100px;
+        resize: vertical;
+        padding: 5px 10px 5px 10px;
+    }
+
+    select {
+        border-radius: 10px;
+        background-color: white;
+        border: none;
+        padding: 5px 10px 5px 10px;
+        //height: 20px;
+    }
+
+    mat-icon {
+        transform: scale(2);
+        color: white;
+        margin-left: 10px;
+        margin-right: 20px;
+    }
+
+    button {
+        margin-top: 5px;
+        background-color: white;
+        border-radius: 10px;
+        position: relative;
+        left: 100%;
+        transform: translateX(-100%);
+    }
+
+    &-form {
+        margin: 10px 5px 10px 5px;
+        display: flex;
+        flex-direction: column;
+
+        &-title {
+            font-family: "Glacial Indifference Bold";
+            margin-bottom: 10px;
+        }
+
+        &-create {
+            margin-bottom: 10px;
+            padding-bottom: 10px;
+            border-bottom: solid black 1px;
+
+            &-top {
+                display: flex;
+                flex-direction: row;
+                width: 100%;
+
+                &-name {
+                    display: flex;
+                    justify-content: flex-end;
+
+                    input {
+                        width: 75%;
+                    }
+                }
+            }
+
+            &-infos {
+                margin-top: 10px;
+
+                &-description {
+                    display: flex;
+                    flex-direction: column;
+                }
+
+                &-phone {
+                    display: flex;
+                    margin-top: 5px;
+                    justify-content: space-between;
+                }
+
+                &-title {
+                    display: flex;
+                    margin-top: 5px;
+                    justify-content: space-between;
+                }
+
+                &-color {
+                    margin-top: 5px;
+                }
+            }
+        }
+
+        &-select {
+            margin-bottom: 10px;
+            padding-bottom: 10px;
+            border-bottom: solid black 1px;
+
+            &-container {
+                display: flex;
+                flex-direction: row;
+                width: 100%;
+
+                &-select {
+                    display: flex;
+                    flex-direction: row;
+
+                    select {
+                        width: 200px;
+
+                    }
+                }
+
+            }
+        }
+
+        &-delete {
+            margin-bottom: 10px;
+            padding-bottom: 10px;
+            border-bottom: solid black 1px;
+
+            &-container {
+                display: flex;
+                flex-direction: row;
+                width: 100%;
+
+                &-select {
+                    display: flex;
+                    flex-direction: row;
+
+                    select {
+                        width: 200px;
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CharactersComponent } from './characters.component';
+
+describe('CharactersComponent', () => {
+  let component: CharactersComponent;
+  let fixture: ComponentFixture<CharactersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CharactersComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CharactersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-characters',
+  templateUrl: './characters.component.html',
+  styleUrls: ['./characters.component.scss']
+})
+export class CharactersComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

+<div class="piece">
+    <div class="piece-form">
+        <div class="piece-form-title">Commentaires</div>
+
+        <div class="piece-form-comments">
+            <app-comment></app-comment>
+        </div>
+
+        <div class="piece-form-newcomment">
+            <div class="piece-form-newcomment-form">
+                <label>Nouveau commentaire</label>
+                <textarea></textarea>
+            </div>
+            <button mat-button>Ajouter un commentaire</button>
+        </div>
+
+    </div>
+</div>
\ No newline at end of file

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

+.piece {
+    --piece-background-color: #f3ed97;
+
+    width: 300px;
+    position: relative;
+    background-color: var(--piece-background-color);
+    border: solid black 1px;
+    border-radius: 10px;
+
+    label {
+        margin-bottom: 10px;
+    }
+
+    textarea {
+        resize: vertical;
+        border-radius: 10px;
+        border: none;
+        min-height: 50px;
+        max-height: 200px;
+        padding: 5px 5px 5px 5px;
+    }
+
+    button {
+        border-radius: 10px;
+        background-color: white;
+        margin-top: 5px;
+    }
+
+    &-form {
+        margin: 10px 5px 10px 5px;
+        display: flex;
+        flex-direction: column;
+
+        &-title {
+            font-family: "Glacial Indifference Bold";
+            margin-bottom: 10px;
+        }
+        
+        &-newcomment {
+
+            &-form {
+                display: flex;
+                flex-direction: column;
+            }
+
+            button {
+                position: relative;
+                left: 100%;
+                transform: translateX(-100%);
+            }
+        }
+    }
+}
\ No newline at end of file

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentsComponent } from './comments.component';
+
+describe('CommentsComponent', () => {
+  let component: CommentsComponent;
+  let fixture: ComponentFixture<CommentsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CommentsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CommentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-comments',
+  templateUrl: './comments.component.html',
+  styleUrls: ['./comments.component.scss']
+})
+export class CommentsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

+<div class="piece">
+    <div class="piece-form">
+        <div class="piece-form-header">
+            <mat-icon fontIcon="front_hand"></mat-icon>
+            <div class="piece-form-header-label">
+                <label>Interruption de la tâche</label>
+            </div>
+        </div>
+        <div class="piece-form-textarea">
+            <textarea></textarea>
+        </div>    
+    </div>
+</div>
\ No newline at end of file

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

+.piece {
+    --piece-background-color: #f7c9cf;
+
+    width: 300px;
+    position: relative;
+    background-color: var(--piece-background-color);
+    border: solid black 1px;
+    border-radius: 10px;
+
+    &-form {
+        position: relative;
+        text-align: center;
+        margin: 10px 5px 10px 5px;
+
+        &-header {
+            display: flex;
+            flex-direction: row;
+
+            mat-icon {
+                position: absolute;
+                transform: scale(1.5);
+                color: white;
+            }
+
+            &-label {
+                display: flex;
+                flex-direction: row;
+                position: relative;
+                left: 50%;
+                transform: translateX(-50%);
+                font-family: 'Glacial Indifference Bold';
+            }
+        }
+
+        &-textarea {
+            display: flex;
+            flex-direction: column;
+            margin-top: 20px;
+
+            textarea {
+                padding: 5px 10px 5px 10px;
+                margin-top: 10px;
+                resize: vertical;
+                border: none;
+                border-radius: 10px;
+                flex-grow: 1;
+                min-height: 50px;
+                max-height: 100px;
+                background-image: url("../../../assets/background-images/interruption.png");
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: 20%;
+            }
+        }
+    }
+}
\ No newline at end of file

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InteruptComponent } from './interupt.component';
+
+describe('InteruptComponent', () => {
+  let component: InteruptComponent;
+  let fixture: ComponentFixture<InteruptComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ InteruptComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(InteruptComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-interupt',
+  templateUrl: './interupt.component.html',
+  styleUrls: ['./interupt.component.scss']
+})
+export class InteruptComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

+<div class="piece">
+    <div class="piece-form">
+        <div class="piece-form-header">
+            <mat-icon fontIcon="refresh"></mat-icon>
+            <div class="piece-form-header-for">
+                <label>Répéter</label>
+                <input type="text"/>
+                <label>fois</label>
+            </div>
+        </div>
+        <div class="piece-form-while">
+            <label>ou jusqu'à ce que :</label>
+            <textarea></textarea>
+        </div>    
+    </div>
+</div>
\ No newline at end of file

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RepeatComponent } from './repeat.component';
+
+describe('RepeatComponent', () => {
+  let component: RepeatComponent;
+  let fixture: ComponentFixture<RepeatComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RepeatComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RepeatComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+<div class="piece">
+    <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"/>
+            <label>Oui</label>
+        </div>
+    </div>
+</div>
\ No newline at end of file