Skip to content

R
RLG Maker
Commit 6139d84c authored by Romain DELEAU's avatar Romain DELEAU
Browse files
Options

implement missions and mission step

parent 40ff4a8d
Hide whitespace changes
Inline Side-by-side
Showing with 23 additions and 76 deletions
src/app/app.component.html
View file @ 6139d84c
......@@ -9,13 +9,15 @@
</div>
<div class="container-scenario-main-missions">
<div class="container-scenario-main-missions-mission">
<div class="container-scenario-main-missions-mission" *ngFor="let mission of this.scenario.missions">
<div class="container-scenario-chronologie">
<div class="container-scenario-chronologie-title">Chronologie générale de la mission</div>
<div class="container-scenario-chronologie-steps">
<app-step [style.z-index]="2"></app-step>
<app-step [style.z-index]="1"></app-step>
<div *ngFor="let step of mission.chronologie, let i = index" [style.z-index]="mission.chronologie.length-i">
<app-step *ngIf="step != null" [step]="step"></app-step>
<div [style.width]="'400px'" *ngIf="step == null"></div>
</div>
</div>
</div>
......@@ -70,66 +72,6 @@
</div>
</div>
</div>
<div class="container-scenario-main-missions-mission">
<div class="container-scenario-chronologie">
<div class="container-scenario-chronologie-title">Chronologie générale de la mission</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 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 style="display: flex;">
<div class="container-scenario-main-missions-mission-missionPieces" [style.z-index]="3">
<app-educational-objective></app-educational-objective>
<app-mission-context [style.z-index]="2"></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]="2"></app-task>
<app-task [style.z-index]="1"></app-task>
</div>
<div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
[style.z-index]="2">
<app-annexe-task [style.z-index]="2"></app-annexe-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 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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
......
src/app/app.component.ts
View file @ 6139d84c
import { Component } from '@angular/core';
import { Scenario } from './class/scenario/scenario';
import { Step } from './class/step/step';
@Component({
selector: 'app-root',
......@@ -9,9 +10,11 @@ import { Scenario } from './class/scenario/scenario';
export class AppComponent {
title = 'RLG Maker';
constructor() { }
scenario: Scenario;
scenario: Scenario = new Scenario();
constructor() {
this.scenario = new Scenario();
}
test() {
console.log(this.scenario);
......
src/app/class/step/step.ts
View file @ 6139d84c
export class Step {
description: string = '';
durarion: number = 1;
duration: number = 1;
durationUnit: string = 'UT';
comments: Comment[] = [];
}
src/app/pieces/step/step.component.html
View file @ 6139d84c
......@@ -10,11 +10,11 @@
<div class="piece-form">
<div class="piece-form-title">Étape 1</div>
<textarea></textarea>
<textarea [(ngModel)]="step.description"></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()">
<input name="duration" type="text" [(ngModel)]="step.duration" (input)="durationChange()"/>
<select name="duration" [(ngModel)]="step.durationUnit" (change)="durationChange()">
<option value="UT">UT</option>
<option value="min">min</option>
<option value="tours">tours</option>
......
src/app/pieces/step/step.component.ts
View file @ 6139d84c
import { Component, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { Step } from 'src/app/class/step/step';
@Component({
selector: 'app-step',
......@@ -7,14 +8,15 @@ import { Component, OnInit } from '@angular/core';
})
export class StepComponent implements OnInit {
@Input() step: Step = new Step;
displayMenu: string = 'hide';
pieceWidth = '400px';
duration = 1;
durationUnit = 'UT';
constructor() { }
ngOnInit(): void {
this.durationChange();
}
onClickDots(): void {
......@@ -30,10 +32,10 @@ export class StepComponent implements OnInit {
}
durationChange(): void {
if(this.durationUnit === 'UT') {
if(this.duration >= 1 && this.duration <= 10) {
this.pieceWidth = (this.duration*400)+'px';
} else if(this.duration > 10) {
if(this.step.durationUnit === 'UT') {
if(this.step.duration >= 1 && this.step.duration <= 10) {
this.pieceWidth = (this.step.duration*400)+'px';
} else if(this.step.duration > 10) {
this.pieceWidth = '4000px';
} else {
this.pieceWidth = '400px';
......
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