Skip to content

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

add chronologie by mission and by role

parent 7db6e4ca
Hide whitespace changes
Inline Side-by-side
Showing with 134 additions and 81 deletions
src/app/app.component.html
View file @ dbf96472
......@@ -2,14 +2,6 @@
<div class="container-appDragScroll" appDragScroll>
<div class="container-appMouseWheelZoom" appMouseWheelZoom>
<div class="container-scenario-chronologie">
<div class="container-scenario-chronologie-title">Chronologie</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-main">
<div class="container-scenario-main-gamePieces" [style.z-index]="4">
<app-game-educationnal-objective></app-game-educationnal-objective>
......@@ -18,40 +10,58 @@
<div class="container-scenario-main-missions">
<div class="container-scenario-main-missions-mission">
<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 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-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 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>
<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 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>
......@@ -59,40 +69,59 @@
</div>
<div class="container-scenario-main-missions-mission">
<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 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-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 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>
<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 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>
......
src/app/app.component.scss
View file @ dbf96472
......@@ -24,11 +24,14 @@
transform-origin: top left;
padding: 60px 5px 10px 5px;
margin-right: 7px;
margin-top: 900px;
}
&-scenario {
&-chronologie {
margin-bottom: 100px;
position: relative;
left: 800px;
&-title {
font-family: 'Glacial Indifference Bold';
......@@ -57,8 +60,10 @@
&-mission {
display: flex;
flex-direction: row;
flex-direction: column;
margin-bottom: 100px;
position: relative;
top: -868px;
&-missionPieces {
display: flex;
......
src/app/pieces/step/step.component.html
View file @ dbf96472
<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece-attach piece-attach-right"></div>
<div class="piece-attach piece-attach-left"></div>
......@@ -13,8 +13,8 @@
<textarea></textarea>
<div class="piece-form-duration">
<label for="duration">Durée</label>
<input name="duration" type="text"/>
<select name="duration">
<input name="duration" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
<select name="duration" [(ngModel)]="durationUnit" (change)="durationChange()">
<option value="UT">UT</option>
<option value="min">min</option>
<option value="tours">tours</option>
......
src/app/pieces/step/step.component.scss
View file @ dbf96472
......@@ -5,6 +5,7 @@
height: 300px;
position: relative;
background-color: var(--piece-background-color);
transition: all 0.5s ease;
&-menu {
position: absolute;
......@@ -94,7 +95,7 @@
background-image: url("../../../assets/background-images/step.png");
background-position: center;
background-repeat: no-repeat;
background-size: 30%;
background-size: 100px;
}
&-duration {
......
src/app/pieces/step/step.component.ts
View file @ dbf96472
......@@ -7,13 +7,16 @@ import { Component, OnInit } from '@angular/core';
})
export class StepComponent implements OnInit {
displayMenu: string = 'hide';
pieceWidth = '400px';
duration = 1;
durationUnit = 'UT';
constructor() { }
ngOnInit(): void {
}
displayMenu: string = 'hide';
onClickComments(): void {
}
......@@ -26,4 +29,18 @@ 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) {
this.pieceWidth = '4000px';
} else {
this.pieceWidth = '400px';
}
} else {
this.pieceWidth = '400px';
}
}
}
src/app/pieces/task/task.component.ts
View file @ dbf96472
......@@ -7,11 +7,6 @@ import { Component, OnInit } from '@angular/core';
})
export class TaskComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
displayMenu: string = 'hide';
displaySymbolChoice: string = 'hide';
displayPrequires: string = 'hide';
......@@ -22,10 +17,16 @@ export class TaskComponent implements OnInit {
symbol: string = ''; // A changer quand implémentation des données
symbolColor: string = ''; //A changer quand implémentation des données
constructor() { }
ngOnInit(): void {
}
durationChange(): void {
if(this.durationUnit === 'UT') {
if(this.duration >= 1 && this.duration <= 10) {
if(this.duration >= 1 && this.duration <= 10) {
this.pieceWidth = (this.duration*400)+'px';
} else if(this.duration > 10) {
this.pieceWidth = '4000px';
......
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