<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
[class]="pieceDetailsService.piece == role ? 'isActive' : 'border'">
<div class="piece-attach piece-attach-left-top"></div>
<div class="piece-attach piece-attach-right"></div>
<div class="piece-attach piece-attach-left-bottom"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="add" (click)="onClickAdd()"
matTooltip="Ajouter un rôle."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"
matTooltip="Effacer le contenu de cette tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="delete" (click)="onClickDelete()" *ngIf="canDelete()"
matTooltip="Supprimer la tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
<div class="piece-form">
<div class="piece-form-title">{{role.intitule ? role.intitule : 'Role '+(i+1)}}</div>
<mat-icon class="piece-form-comment" fontIcon="comment" *ngIf="role.comments.length > 0"></mat-icon>
<img src="../../../assets/background-images/role_opacity0.png" draggable="false" *ngIf="i == 0"/>
<img src="../../../assets/background-images/role2_opacity0.png" draggable="false" *ngIf="i == 1"/>
<div class="piece-form-intitule">
<label for="intitule">Intitulé</label>
<input name="intitule" type="text" [(ngModel)]="role.intitule" placeholder="Développeur/euse web"
matTooltip="Nom de ce rôle."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
</div>
<div class="piece-form-name">
<label for="name">Nom de la quête</label>
<input name="name" type="text" [(ngModel)]="role.questName" placeholder="Intégration de site web"
matTooltip="En 2-3 mots, l'intitulé de la quête de ce rôle"
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
</div>
<div class="piece-form-description">
<label for="description">Description</label>
<textarea name="description" [(ngModel)]="role.description"
matTooltip="Élément précis sur ce rôle si nécessaire."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
</div>
<div class="piece-form-objectives">
<label for="objective">Objectif(s) pédagoqique(s)</label>
<div class="piece-form-objectives-objective" *ngFor="let objective of role.educationnalObjectives, let i = index">
<input name="objective" type="text" [(ngModel)]="role.educationnalObjectives[i].objective" placeholder="Nom de l'objectif"
matTooltip="Les objectifs visés pour ce rôle en particulier"
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
<button mat-button *ngIf="role.educationnalObjectives.length > 1" (click)="removeEducationnalObjective(i)"><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<button mat-button class="piece-form-objectives-add" (click)="addEducationnalObjective()"><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" *ngFor="let reward of role.rewards, let i = index">
<div class="piece-form-rewards-reward-type">
<label>Type</label>
<select [(ngModel)]="reward.type" (change)="changeRewardType(i, reward.type)"
matTooltip="Ce que le rôle va obtenir à la fin de sa quête (gagner en compétence, gagner un objet, débloquer une quête, …)"
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
<option value="quest">Débuter une nouvelle quête</option>
<option value="skill">Travailler un champ de compétence</option>
<!--<option value="character">Récupérer le contact d'un PNJ</option>-->
<option value="objective">Atteindre un objectif pédagoqique</option>
<option value="objects">Récupérer un objet</option>
<!--<option value="discuss">Changer de discussion</option>-->
<option value="other">Autre</option>
</select>
</div>
<div class="piece-form-rewards-reward-objects" *ngIf="reward.type == 'objects'">
<div class="piece-form-rewards-reward-objects-object" *ngFor="let object of getObjectsReward(i).objects, let j = index">
<input type="number" [(ngModel)]="object.number"/>
<input type="text" [(ngModel)]="object.name" placeholder="Nom de l'objet"/>
<button mat-button (click)="removeObject(i,j)"><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<button mat-button class="piece-form-rewards-reward-objects-add" (click)="addObject(i)"><mat-icon fontIcon="add"></mat-icon></button>
</div>
<!--
<div class="piece-form-rewards-reward-character" *ngIf="reward.type == 'character'">
<select [(ngModel)]="getCharacterReward(i).character">
<option [ngValue]="character" *ngFor="let character of scenario.characters">{{character.name}}</option>
</select>
<button mat-button (click)="removeReward(i)"><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<div class="piece-form-rewards-reward-discussion" *ngIf="reward.type == 'discuss'">
<select>
<option>Discussion 1</option>
</select>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div>
-->
<div class="piece-form-rewards-reward-skill" *ngIf="reward.type == 'skill'">
<input type="number" [(ngModel)]="getSkillReward(i).quantity"/>
<select [(ngModel)]="getSkillReward(i).skill">
<ng-container *ngFor="let skill of role.ressources">
<option [ngValue]="skill" *ngIf="skill.type == 'attribut'">{{skill.name}}</option>
</ng-container>
</select>
<button mat-button (click)="removeReward(i)"><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<div class="piece-form-rewards-reward-quest" *ngIf="reward.type == 'quest'">
<select (change)="changeQuestReward(i, $event)">
<ng-container *ngFor="let mission of scenario.missions; let indexMission = index">
<ng-container *ngFor="let quest of mission.roles; let indexRole = index">
<option [ngValue]="quest.questName" [selected]="getQuestReward(i).intitule == quest.intitule && getQuestReward(i).questName == quest.questName"
*ngIf="role.intitule && quest.questName && role.intitule == quest.intitule && role.questName != quest.questName">
{{quest.questName}}
</option>
</ng-container>
</ng-container>
</select>
<button mat-button (click)="removeReward(i)"><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<div class="piece-form-rewards-reward-objective" *ngIf="reward.type == 'objective'">
<select [(ngModel)]="getObjectiveReward(i).objective">
<option [ngValue]="objective" *ngFor="let objective of role.educationnalObjectives">{{objective.objective}}</option>
</select>
<button mat-button (click)="removeReward(i)"><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<div class="piece-form-rewards-reward-other" *ngIf="reward.type == 'other'">
<textarea [(ngModel)]="getOtherReward(i).text"></textarea>
<button mat-button (click)="removeReward(i)"><mat-icon fontIcon="remove"></mat-icon></button>
</div>
</div>
<div class="piece-form-rewards-add">
<button mat-button (click)="addReward()"><mat-icon fontIcon="add"></mat-icon></button>
</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 [(ngModel)]="role.stuff"
matTooltip="Si le rôle a une tenue particulière ou des objets spécifiques"
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
</div>
</div>
<div class="piece-form-ressources"
matTooltip="Objets, ressources disponibles pour ce rôle"
matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
<div class="piece-form-title">Ressources & compétences</div>
<div class="piece-form-ressources-ressource" *ngFor="let ressource of role.ressources, let i = index">
<div class="piece-form-ressources-ressource-name">
<label for="name">Nom</label>
<input name="name" type="text" [(ngModel)]="ressource.name"/>
</div>
<div class="piece-form-ressources-ressource-quantity">
<label for="quantity">Nombre / stats</label>
<input name="quantity" type="text" [(ngModel)]="ressource.number">
</div>
<div class="piece-form-ressources-ressource-quantity">
<label for="type">Type</label>
<select name="type" [(ngModel)]="ressource.type">
<option value="ressource">Ressource / Objet</option>
<option value="attribut">Compétence</option>
</select>
</div>
<button mat-button><mat-icon fontIcon="remove" (click)="removeRessource(i)"></mat-icon></button>
</div>
<button mat-button class="piece-form-ressources-add" (click)="addRessource()"><mat-icon fontIcon="add"></mat-icon></button>
</div>
<div class="piece-form-title">Rôle supplémentaire</div>
<div class="piece-form-supplementary" [style.background]="'linear-gradient(302deg, '+supplementaryRole.color+' 0%, '+supplementaryRole.color+' 50%, #9ad5ec 50%, #9ad5ec 100%)'"
*ngFor="let supplementaryRole of role.supplementaryRoles, let i = index">
<div class="piece-form-supplementary-form">
<div>
<div class="piece-form-supplementary-form-name">
<label for="name">Nom</label>
<input name="name" type="text" [(ngModel)]="supplementaryRole.name"
matTooltip="Intitulé du rôle supplémentaire"
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
</div>
<div class="piece-form-supplementary-form-color">
<label for="color">Couleur</label>
<input name="color" type="color" [(ngModel)]="supplementaryRole.color"/>
</div>
<div class="piece-form-supplementary-form-textarea">
<label for="objectives">Objectifs</label>
<textarea name="objectives" [(ngModel)]="supplementaryRole.objectives"
matTooltip="Objectifs (pédagogiques) de ce rôle supplémentaire"
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
</div>
<div class="piece-form-supplementary-form-textarea">
<label for="skills">Compétences</label>
<textarea name="skills" [(ngModel)]="supplementaryRole.skills"
matTooltip="Compétences spécifiques à ce rôle pour effectuer les tâches qui lui seront liées (même couleur)"
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
</div>
<div class="piece-form-supplementary-form-textarea">
<label for="rules">Règles</label>
<textarea name="rules" [(ngModel)]="supplementaryRole.rules"
matTooltip="Règles spécifiques à ce rôle (a-t-il des contraintes ou des droits, accès supplémentaires ?)"
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
</div>
<button mat-button (click)="removeSupplementaryRole(i)"><mat-icon fontIcon="remove"></mat-icon></button>
</div>
</div>
</div>
<button mat-button class="piece-form-supplementary-form-add" (click)="addSupplementaryRole()"><mat-icon fontIcon="add"></mat-icon></button>
</div>
</div>