Skip to content

R
RLG Maker
Commit 7327d477 authored by Romain DELEAU's avatar Romain DELEAU
Browse files
Options

implement role

parent 0ad05cee
Hide whitespace changes
Inline Side-by-side
Showing with 288 additions and 129 deletions
src/app/app.component.html
View file @ 7327d477
......@@ -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
View file @ 7327d477
......@@ -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
View file @ 7327d477
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
View file @ 7327d477
export class Ressource {
name: string = '';
number: string = '';
type: string = '';
number: string = '1';
type: string = 'ressource';
}
src/app/class/rewards/character-reward/character-reward.ts
View file @ 7327d477
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
View file @ 7327d477
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
View file @ 7327d477
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 0 → 100644
View file @ 7327d477
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 0 → 100644
View file @ 7327d477
import { Reward } from "../reward";
export class OtherReward extends Reward {
constructor() {
super('other');
}
text: string = '';
}
src/app/class/rewards/quest-reward/quest-reward.ts
View file @ 7327d477
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
View file @ 7327d477
export interface Reward {
export abstract class Reward {
constructor(type: string) {
this.type = type;
}
type: string;
}
src/app/class/rewards/skill-reward/skill-reward.ts
View file @ 7327d477
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 0 → 100644
View file @ 7327d477
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 0 → 100644
View file @ 7327d477
export class RoleEducationnalObjective {
objective: string = "";
}
src/app/class/role/role.ts
View file @ 7327d477
......@@ -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
View file @ 7327d477
export class SupplementaryRole {
name: string = '';
color: string = '';
color: string = '#000000';
objectives: string = '';
skills: string = '';
rules: string = '';
......
src/app/pieces/role/role.component.html
View file @ 7327d477
......@@ -15,156 +15,149 @@
<img src="../../../assets/background-images/role.png"/>
<div class="piece-form-intitule">
<label for="intitule">Intitulé</label>
<input name="intitule" type="text" placeholder="Développeur/euse web"/>
<input name="intitule" type="text" [(ngModel)]="role.intitule" 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="Intégration de site web"/>
<input name="name" type="text" [(ngModel)]="role.questName" placeholder="Intégration de site web"/>
</div>
<div class="piece-form-description">
<label for="description">Description</label>
<textarea name="description"></textarea>
<textarea name="description" [(ngModel)]="role.description"></textarea>
</div>
<div class="piece-form-objectives">
<label for="objective">Objectif(s) pédagoqique(s)</label>
<div class="piece-form-objectives-objective">
<input name="objective" type="text" placeholder="Nom de l'objectif"/>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
<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"/>
<button mat-button *ngIf="role.educationnalObjectives.length > 1" (click)="removeEducationnalObjective(i)"><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<div class="piece-form-objectives-objective">
<input name="objective" type="text" placeholder="Nom de l'objectif"/>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<button mat-button class="piece-form-objectives-add"><mat-icon fontIcon="add"></mat-icon></button>
<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">
<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)]="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 [(ngModel)]="reward.type" (change)="changeRewardType(i, reward.type)">
<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="rewardType == 5">
<div class="piece-form-rewards-reward-objects-object">
<input type="number"/>
<input type="text" placeholder="Nom de l'objet"/>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
<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"><mat-icon fontIcon="add"></mat-icon></button>
<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="rewardType == 3">
<select>
<div class="piece-form-rewards-reward-character" *ngIf="reward.type == 'character'">
<select [(ngModel)]="getCharacterReward(i).character">
<option>Personnage 1</option>
</select>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
<button mat-button (click)="removeReward(i)"><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<div class="piece-form-rewards-reward-discussion" *ngIf="rewardType == 6">
<!--
<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="rewardType == 2">
-->
<div class="piece-form-rewards-reward-skill" *ngIf="reward.type == 'skill'">
<input type="number"/>
<select>
<select [(ngModel)]="getSkillReward(i).skill">
<option>Compétence 1</option>
</select>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
<button mat-button (click)="removeReward(i)"><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<div class="piece-form-rewards-reward-quest" *ngIf="rewardType == 1">
<select>
<div class="piece-form-rewards-reward-quest" *ngIf="reward.type == 'quest'">
<select [(ngModel)]="getQuestReward(i).quest">
<option>Quête 1</option>
</select>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
<button mat-button (click)="removeReward(i)"><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<div class="piece-form-rewards-reward-objective" *ngIf="rewardType == 4">
<select>
<div class="piece-form-rewards-reward-objective" *ngIf="reward.type == 'objective'">
<select [(ngModel)]="getObjectiveReward(i).name">
<option>Objectif pédagoqique 1</option>
</select>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<div class="piece-form-rewards-reward-other" *ngIf="rewardType == 7">
<textarea></textarea>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
<button mat-button (click)="removeReward(i)"><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<div class="piece-form-rewards-reward-add" *ngIf="rewardType != 0">
<button mat-button><mat-icon fontIcon="add"></mat-icon></button>
<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></textarea>
<textarea [(ngModel)]="role.stuff"></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" *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"/>
<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">
<input name="quantity" type="text" [(ngModel)]="ressource.number">
</div>
<div class="piece-form-ressources-ressource-quantity">
<label for="type">Type</label>
<select name="type">
<option value="1">Ressource / Objet</option>
<option value="2">Attribut</option>
<select name="type" [(ngModel)]="ressource.type">
<option value="ressource">Ressource / Objet</option>
<option value="attribut">Attribut</option>
</select>
</div>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
<button mat-button><mat-icon fontIcon="remove" (click)="removeRessource(i)"></mat-icon></button>
</div>
<button mat-button class="piece-form-ressources-add"><mat-icon fontIcon="add"></mat-icon></button>
<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">
<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"/>
<input name="name" type="text" [(ngModel)]="supplementaryRole.name"/>
</div>
<div class="piece-form-supplementary-form-color">
<label for="color">Couleur</label>
<input name="color" type="color"/>
<input name="color" type="color" [(ngModel)]="supplementaryRole.color"/>
</div>
<div class="piece-form-supplementary-form-textarea">
<label for="objectives">Objectifs</label>
<textarea name="objectives"></textarea>
<textarea name="objectives" [(ngModel)]="supplementaryRole.objectives"></textarea>
</div>
<div class="piece-form-supplementary-form-textarea">
<label for="skills">Compétences</label>
<textarea name="skills"></textarea>
<textarea name="skills" [(ngModel)]="supplementaryRole.skills"></textarea>
</div>
<div class="piece-form-supplementary-form-textarea">
<label for="rules">Règles</label>
<textarea name="rules"></textarea>
<textarea name="rules" [(ngModel)]="supplementaryRole.rules"></textarea>
</div>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
<button mat-button (click)="removeSupplementaryRole(i)"><mat-icon fontIcon="remove"></mat-icon></button>
</div>
</div>
</div>
<button class="piece-form-supplementary-form-add" mat-button><mat-icon fontIcon="add"></mat-icon></button>
<button mat-button class="piece-form-supplementary-form-add" (click)="addSupplementaryRole()"><mat-icon fontIcon="add"></mat-icon></button>
</div>
</div>
src/app/pieces/role/role.component.scss
View file @ 7327d477
......@@ -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
View file @ 7327d477
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);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment