implement role

src/app/app.component.html

@@ -19,53 +19,52 @@
                                     <div [style.width]="'400px'" *ngIf="step == null"></div>
                                 </div>
                             </div>
-                        </div>
-
-                        <div class="container-scenario-chronologie">
-                            <div class="container-scenario-chronologie-title">Chronologie du rôle</div>
-                            <div class="container-scenario-chronologie-steps">
-                                <app-step [style.z-index]="2"></app-step>
-                                <app-step [style.z-index]="1"></app-step>
-                            </div>
-                        </div>                        
+                        </div>           
 
                         <div style="display: flex;">
+
                             <div class="container-scenario-main-missions-mission-missionPieces" [style.z-index]="3">
                                 <app-educational-objective [educationnalObjective]="mission.educationnalObjective"></app-educational-objective>
                                 <app-mission-context [style.z-index]="2" [missionContext]="mission.context"></app-mission-context>
                             </div>
 
                             <div class="container-scenario-main-missions-mission-roles" [style.z-index]="2">
-                                <div class="container-scenario-main-missions-mission-roles-role">
-                                    <app-role [style.z-index]="10"></app-role>
-                                    <div class="container-scenario-main-missions-mission-roles-role-tasks"
-                                        [style.z-index]="1">
-                                        <div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
-                                            [style.z-index]="2">
-                                            <app-task [style.z-index]="3"></app-task>
-                                            <app-task [style.z-index]="2"></app-task>
-                                            <app-repeat-task [style.z-index]="1"></app-repeat-task>
-                                        </div>
-                                        <div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
-                                            [style.z-index]="2">
-                                            <app-annexe-task [style.z-index]="3"></app-annexe-task>
-                                            <app-optionnal-task [style.z-index]="2"></app-optionnal-task>
-                                            <app-final-task [style.z-index]="1"></app-final-task>
-                                        </div>
-                                        <div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
-                                            [style.z-index]="2">
-                                            <app-random-event [style.z-index]="2"></app-random-event>
+                                <div class="container-scenario-main-missions-mission-roles-role" *ngFor="let role of mission.roles">
+
+                                    <div style="display: flex; flex-direction: column;">
+                                        <div class="container-scenario-main-missions-mission-roles-role-chronologie">
+                                            <div class="container-scenario-main-missions-mission-roles-role-chronologie-title">Chronologie du rôle</div>
+                                            <div class="container-scenario-main-missions-mission-roles-role-chronologie-steps">
+
+                                                <div *ngFor="let step of role.chronologie, let i = index" [style.z-index]="role.chronologie.length-i">
+                                                    <app-step *ngIf="step != null" [step]="step"></app-step>
+                                                    <div [style.width]="'400px'" *ngIf="step == null"></div>
+                                                </div>   
+
+                                            </div>
                                         </div>
-                                    </div>
-                                </div>
-                                <div class="container-scenario-main-missions-mission-roles-role">
-                                    <app-role [style.z-index]="10"></app-role>
-                                    <div class="container-scenario-main-missions-mission-roles-role-tasks"
-                                        [style.z-index]="1">
-                                        <div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks" [style.z-index]="2">
-                                            <app-task [style.z-index]="3"></app-task>
-                                            <app-annexe-task [style.z-index]="2"></app-annexe-task>
-                                            <app-random-event [style.z-index]="1"></app-random-event>
+
+                                        <div style="display: flex; flex-direction: row;">
+                                            <app-role [style.z-index]="2" [role]="role"></app-role>
+                                            <div class="container-scenario-main-missions-mission-roles-role-tasks"
+                                                [style.z-index]="1">
+                                                <div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
+                                                    [style.z-index]="2">
+                                                    <app-task [style.z-index]="3"></app-task>
+                                                    <app-task [style.z-index]="2"></app-task>
+                                                    <app-repeat-task [style.z-index]="1"></app-repeat-task>
+                                                </div>
+                                                <div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
+                                                    [style.z-index]="2">
+                                                    <app-annexe-task [style.z-index]="3"></app-annexe-task>
+                                                    <app-optionnal-task [style.z-index]="2"></app-optionnal-task>
+                                                    <app-final-task [style.z-index]="1"></app-final-task>
+                                                </div>
+                                                <div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
+                                                    [style.z-index]="2">
+                                                    <app-random-event [style.z-index]="2"></app-random-event>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>

src/app/app.component.scss

@@ -29,7 +29,7 @@
 
     &-scenario {
         &-chronologie {
-            margin-bottom: 100px;
+            margin-bottom: 400px;
             position: relative;
             left: 800px;
 
@@ -63,7 +63,7 @@
                     flex-direction: column;
                     margin-bottom: 100px;
                     position: relative;
-                    top: -868px;
+                    top: -734px;
 
                     &-missionPieces {
                         display: flex;
@@ -73,10 +73,30 @@
                     &-roles {
                         display: flex;
                         flex-direction: column;
+                        position: relative;
+                        top: -359px;
 
                         &-role {
                             display: flex;
                             flex-direction: row;
+                            margin-bottom: 50px;
+
+                            &-chronologie {
+                                margin-bottom: 25px;
+                                margin-left: 400px;
+                    
+                                &-title {
+                                    font-family: 'Glacial Indifference Bold';
+                                    font-size: 20px;
+                                    margin-bottom: 10px;
+                                }
+                    
+                                &-steps {
+                                    display: flex;
+                                    flex-direction: row;
+                                    height: 300px;
+                                }
+                            }
 
                             &-tasks {
                                 display: flex;

src/app/app.component.ts

 import { Component } from '@angular/core';
 import { Scenario } from './class/scenario/scenario';
-import { Step } from './class/step/step';
 
 @Component({
   selector: 'app-root',

src/app/class/ressource/ressource.ts

 export class Ressource {
 
     name: string = '';
-    number: string = '';
-    type: string = '';
+    number: string = '1';
+    type: string = 'ressource';
 }

src/app/class/rewards/character-reward/character-reward.ts

 import { Character } from "../../character/character";
 import { Reward } from "../reward";
 
-export class CharacterReward implements Reward {
+export class CharacterReward extends Reward {
+
+    constructor() {
+        super('character');
+    }
+
     character!: Character;
 }

src/app/class/rewards/objective-reward/objective-reward.ts

 import { Reward } from "../reward";
 
-export class ObjectiveReward implements Reward {
+export class ObjectiveReward extends Reward {
+
+    constructor() {
+        super('objective');
+    }
+
     name: string = '';
 }

src/app/class/rewards/objects-reward/objects-reward.ts

 import { Ressource } from "../../ressource/ressource";
 import { Reward } from "../reward";
 
-export class ObjectsReward implements Reward{
+export class ObjectsReward extends Reward{
+
+    constructor() {
+        super('objects');
+    }
+
     objects: Ressource[] = [new Ressource()];
 }

src/app/class/rewards/other-reward/other-reward.spec.ts

+import { OtherReward } from './other-reward';
+
+describe('OtherReward', () => {
+  it('should create an instance', () => {
+    expect(new OtherReward()).toBeTruthy();
+  });
+});

src/app/class/rewards/other-reward/other-reward.ts

+import { Reward } from "../reward";
+
+export class OtherReward extends Reward {
+
+    constructor() {
+        super('other');
+    }
+
+    text: string = '';
+
+}

src/app/class/rewards/quest-reward/quest-reward.ts

 import { Role } from "../../role/role";
 import { Reward } from "../reward";
 
-export class QuestReward implements Reward {
+export class QuestReward extends Reward {
+
+    constructor() {
+        super('quest');
+    }
+
     quest!: Role;
 }

src/app/class/rewards/reward.ts

-export interface Reward {
-    
+export abstract class Reward {
+
+    constructor(type: string) {
+        this.type = type;
+    }
+
+    type: string;
 }

src/app/class/rewards/skill-reward/skill-reward.ts

 import { Ressource } from "../../ressource/ressource";
 import { Reward } from "../reward";
 
-export class SkillReward implements Reward {
+export class SkillReward extends Reward {
+
+    constructor() {
+        super('skill');
+    }
+
     skill!: Ressource;
 }

src/app/class/role-educationnal-objective/role-educationnal-objective.spec.ts

+import { RoleEducationnalObjective } from './role-educationnal-objective';
+
+describe('RoleEducationnalObjective', () => {
+  it('should create an instance', () => {
+    expect(new RoleEducationnalObjective()).toBeTruthy();
+  });
+});

src/app/class/role-educationnal-objective/role-educationnal-objective.ts

+export class RoleEducationnalObjective {
+
+    objective: string = "";
+    
+}

src/app/class/role/role.ts

@@ -4,13 +4,14 @@ import { Ressource } from "../ressource/ressource";
 import { SupplementaryRole } from "../supplementary-role/supplementary-role";
 import { Reward } from "../rewards/reward";
 import { RoleOccurrence } from "../role-occurrence/role-occurrence";
+import { RoleEducationnalObjective } from "../role-educationnal-objective/role-educationnal-objective";
 
 export class Role {
 
     intitule: string = '';
     questName: string = '';
     description: string = '';
-    educationnalObjectives: string[] = [''];
+    educationnalObjectives: RoleEducationnalObjective[] = [new RoleEducationnalObjective()];
     rewards: Reward[] = [];
     stuff: string = '';
     ressources: Ressource[] = [];

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

 export class SupplementaryRole {
 
     name: string = '';
-    color: string = '';
+    color: string = '#000000';
     objectives: string = '';
     skills: string = '';
     rules: string = '';

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

@@ -204,9 +204,18 @@
                 }
             }
 
+            &-add {
+                margin-top: 10px;
+
+                button {
+                    width: 100%;
+                }
+            }
+
             &-reward {
                 display: flex;
                 flex-direction: column;
+                margin-top: 10px;
 
                 select {
                     height: 50px;
@@ -323,14 +332,6 @@
                         margin-top: 5px;
                     }
                 }
-
-                &-add {
-                    margin-top: 10px;
-
-                    button {
-                        width: 100%;
-                    }
-                }
             }
         }
 
@@ -408,7 +409,6 @@
 
         &-supplementary {
             padding-bottom: 10px;
-            background: linear-gradient(302deg, rgb(2, 0, 36) 0%, rgb(2, 0, 36) 50%, #9ad5ec 50%, #9ad5ec 100%);
             width: 398px;
             position: relative;
             left: -34px;

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Ressource } from 'src/app/class/ressource/ressource';
+import { CharacterReward } from 'src/app/class/rewards/character-reward/character-reward';
+import { ObjectiveReward } from 'src/app/class/rewards/objective-reward/objective-reward';
+import { ObjectsReward } from 'src/app/class/rewards/objects-reward/objects-reward';
+import { OtherReward } from 'src/app/class/rewards/other-reward/other-reward';
+import { QuestReward } from 'src/app/class/rewards/quest-reward/quest-reward';
+import { Reward } from 'src/app/class/rewards/reward';
+import { SkillReward } from 'src/app/class/rewards/skill-reward/skill-reward';
+import { RoleEducationnalObjective } from 'src/app/class/role-educationnal-objective/role-educationnal-objective';
+import { Role } from 'src/app/class/role/role';
+import { SupplementaryRole } from 'src/app/class/supplementary-role/supplementary-role';
 
 @Component({
   selector: 'app-role',
@@ -7,6 +18,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class RoleComponent implements OnInit {
 
+  @Input() role: Role = new Role();
+
   constructor() { }
 
   ngOnInit(): void {
@@ -31,4 +44,78 @@ export class RoleComponent implements OnInit {
     
   }
 
+  addEducationnalObjective(): void {
+    this.role.educationnalObjectives.push(new RoleEducationnalObjective());
+  }
+
+  removeEducationnalObjective(index: number): void {
+    this.role.educationnalObjectives.splice(index, 1);
+  }
+
+  addRessource(): void {
+    this.role.ressources.push(new Ressource());
+  }
+
+  removeRessource(index: number): void {
+    this.role.ressources.splice(index, 1);
+  }
+  
+  addSupplementaryRole(): void {
+    this.role.supplementaryRoles.push(new SupplementaryRole());
+  }
+
+  removeSupplementaryRole(index: number) {
+    this.role.supplementaryRoles.splice(index, 1);
+  }
+
+  addReward(): void {
+    this.role.rewards.push(new QuestReward());
+  }
+
+  changeRewardType(index: number, type: string): void {
+    switch(type) {
+      case 'objects': this.role.rewards[index] = new ObjectsReward(); break;
+      case 'quest': this.role.rewards[index] = new QuestReward(); break;
+      case 'skill': this.role.rewards[index] = new SkillReward(); break;
+      case 'objective': this.role.rewards[index] = new ObjectiveReward(); break;
+      case 'character': this.role.rewards[index] = new CharacterReward(); break;
+      case 'other': this.role.rewards[index] = new OtherReward(); break;
+    }
+  }
+
+  removeReward(index: number): void {
+    this.role.rewards.splice(index, 1);
+  }
+
+  getObjectiveReward(index: number): ObjectiveReward {
+    return this.role.rewards[index] as ObjectiveReward;
+  }
+
+  getQuestReward(index: number): QuestReward {
+    return this.role.rewards[index] as QuestReward;
+  }
+
+  getCharacterReward(index: number): CharacterReward {
+    return this.role.rewards[index] as CharacterReward;
+  }
+
+  getSkillReward(index: number): SkillReward {
+    return this.role.rewards[index] as SkillReward;
+  }
+
+  getOtherReward(index: number): OtherReward {
+    return this.role.rewards[index] as OtherReward;
+  }
+
+  getObjectsReward(index: number): ObjectsReward {
+    return this.role.rewards[index] as ObjectsReward;
+  }
+
+  addObject(index: number): void {
+    this.getObjectsReward(index).objects.push(new Ressource);
+  }
+
+  removeObject(i: number, j: number): void {
+    this.getObjectsReward(i).objects.splice(j, 1);
+  }
 }