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