rewards types

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

@@ -33,10 +33,54 @@
         <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 class="piece-form-rewards-reward-type">
+                    <label>Type</label>
+                    <select [(ngModel)]="rewardType">
+                        <option value="1">Débuter une nouvelle quête</option>
+                        <option value="2">Travailler un champ de compétence</option>
+                        <option value="3">Récupérer le contact d'un PNJ</option>
+                        <option value="4">Atteindre un objectif pédagoqique</option>
+                        <option value="5">Récupérer un objet</option>
+                        <option value="6">Changer de discussion</option>
+                        <option value="7">Autre</option>
+                    </select>                    
+                </div>
+
+
+                <div class="piece-form-rewards-reward-objects" *ngIf="rewardType == 5">
+                    <div class="piece-form-rewards-reward-objects-object">
+                        <input type="number"/>
+                        <input type="text" placeholder="Nom de l'objet"/>
+                    </div>
+                    <button mat-button><mat-icon fontIcon="add"></mat-icon></button>
+                </div>
+                <div class="piece-form-rewards-reward-character" *ngIf="rewardType == 3">
+                    <select>
+                        <option>Personnage 1</option>
+                    </select>
+                </div>
+                <div class="piece-form-rewards-reward-discussion" *ngIf="rewardType == 6">
+                    <select>
+                        <option>Discussion 1</option>
+                    </select>
+                </div>
+                <div class="piece-form-rewards-reward-skill" *ngIf="rewardType == 2">
+                    <input type="number"/>
+                    <select>
+                        <option>Compétence 1</option>
+                    </select>
+                </div>
+                <div class="piece-form-rewards-reward-quest" *ngIf="rewardType == 1">
+                    <select>
+                        <option>Quête 1</option>
+                    </select>
+                </div>
+                <div class="piece-form-rewards-reward-objective" *ngIf="rewardType == 4">
+                    <select>
+                        <option>Objectif pédagoqique 1</option>
+                    </select>
+                </div>
+
             </div>  
         </div>
 

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

@@ -178,17 +178,98 @@
             display: flex;
             flex-direction: column;
 
+            button {
+                position: relative;
+                width: 50px;
+                height: 50px;
+                background-color: white;
+                left: 100%;
+                transform: translateX(-100%);
+                border-radius: 10px;
+                margin-bottom: 5px;
+
+                mat-icon {
+                    transform: scale(1.3);
+                }
+            }
+
             &-reward {
                 display: flex;
-                flex-direction: row;
-                justify-content: space-between;
+                flex-direction: column;
 
                 select {
                     height: 50px;
                     border: none;
                     border-radius: 10px;
                     background-color: white;
-                    width: 80%;
+                    width: 100%;
+                }
+
+                input[type="number"] {
+                    width: 15%;
+                }
+
+                input[type="text"] {
+                    width: 100%;
+                }
+
+                &-type {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-between;
+                    margin-bottom: 5px;
+
+                    select {
+                        width: 80%;
+                    }
+                }
+
+                &-objects {
+                    display: flex;
+                    flex-direction: column;
+
+                    &-object {
+                        display: flex;
+                        flex-direction: row;
+                        margin-bottom: 5px;
+                        
+                        input[type="text"] {
+                            margin-left: 5px;
+                        }
+                    }
+                }
+
+                &-character {
+                    display: flex;
+                    flex-direction: row;
+                    margin-bottom: 5px;
+                }
+
+                &-discussion {
+                    display: flex;
+                    flex-direction: row;
+                    margin-bottom: 5px;
+                }
+
+                &-skill {
+                    display: flex;
+                    flex-direction: row;
+                    margin-bottom: 5px;
+                    
+                    select {
+                        margin-left: 5px;
+                    }
+                }
+
+                &-quest {
+                    display: flex;
+                    flex-direction: row;
+                    margin-bottom: 5px;
+                }
+
+                &-objective {
+                    display: flex;
+                    flex-direction: row;
                 }
             }
         }

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

@@ -13,6 +13,7 @@ export class RoleComponent implements OnInit {
   }
 
   displayMenu: string = 'hide';
+  rewardType: number = 0;
 
   onClickComments(): void {