Skip to content

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

add step piece

parent 2fd46e5b
Hide whitespace changes
Inline Side-by-side
Showing with 262 additions and 35 deletions
src/app/app.component.html
View file @ f35a2b89
<div class="container"> <div class="container">
<div class="container-main" appDragScroll> <div class="container-main" appDragScroll>
<div class="container-main-scenario" style="display: flex;" appMouseWheelZoom> <div class="container-main-scenario" style="display: flex; flex-direction: column;" appMouseWheelZoom>
<div style="display: flex; flex-direction: column;" [style.z-index]="4">
<app-game-educationnal-objective></app-game-educationnal-objective>
<app-game-context [style.z-index]="2"></app-game-context>
</div>
<div style="display: flex; flex-direction: column;" [style.z-index]="3"> <div style="margin-bottom: 100px;">
<app-educational-objective></app-educational-objective> <div style="font-family: 'Glacial Indifference Bold'; font-size: 20px;">Chronologie</div>
<div style="display: flex; flex-direction: row;">
<app-mission-context [style.z-index]="2"></app-mission-context> <app-step [style.z-index]="2"></app-step>
<app-step [style.z-index]="1"></app-step>
</div>
</div> </div>
<div [style.z-index]="2"> <div style="display: flex; flex-direction: row;">
<div style="display: flex;"> <div style="display: flex; flex-direction: column;" [style.z-index]="4">
<app-role [style.z-index]="10"></app-role> <app-game-educationnal-objective></app-game-educationnal-objective>
<div [style.z-index]="1"> <app-game-context [style.z-index]="2"></app-game-context>
<div style="display: flex;" [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; flex-direction: column;" [style.z-index]="3">
</div> <app-educational-objective></app-educational-objective>
<div style="display: flex;" [style.z-index]="2">
<app-annexe-task [style.z-index]="2"></app-annexe-task> <app-mission-context [style.z-index]="2"></app-mission-context>
</div>
<div style="display: flex;" [style.z-index]="2">
<app-random-event [style.z-index]="2"></app-random-event>
</div>
</div>
</div> </div>
<div style="display: flex;">
<app-role [style.z-index]="10"></app-role> <div [style.z-index]="2">
<div [style.z-index]="1"> <div style="display: flex;">
<div style="display: flex;" [style.z-index]="2"> <app-role [style.z-index]="10"></app-role>
<app-task [style.z-index]="3"></app-task> <div [style.z-index]="1">
<app-annexe-task [style.z-index]="2"></app-annexe-task> <div style="display: flex;" [style.z-index]="2">
<app-random-event [style.z-index]="1"></app-random-event> <app-task [style.z-index]="2"></app-task>
<app-task [style.z-index]="1"></app-task>
</div>
<div style="display: flex;" [style.z-index]="2">
<app-annexe-task [style.z-index]="2"></app-annexe-task>
</div>
<div style="display: flex;" [style.z-index]="2">
<app-random-event [style.z-index]="2"></app-random-event>
</div>
</div> </div>
</div> </div>
<div style="display: flex;">
<app-role [style.z-index]="10"></app-role>
<div [style.z-index]="1">
<div style="display: flex;" [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>
</div> </div>
......
src/app/app.module.ts
View file @ f35a2b89
...@@ -21,6 +21,7 @@ import { RandomEventComponent } from './pieces/random-event/random-event.compone ...@@ -21,6 +21,7 @@ import { RandomEventComponent } from './pieces/random-event/random-event.compone
import { CharactersComponent } from './sider-pieces/characters/characters.component'; import { CharactersComponent } from './sider-pieces/characters/characters.component';
import { CharacterComponent } from './components/character/character.component'; import { CharacterComponent } from './components/character/character.component';
import { RulesComponent } from './sider-pieces/rules/rules.component'; import { RulesComponent } from './sider-pieces/rules/rules.component';
import { StepComponent } from './pieces/step/step.component';
import { DragScrollDirective } from './directives/drag-scroll.directive'; import { DragScrollDirective } from './directives/drag-scroll.directive';
import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive'; import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive';
...@@ -43,7 +44,8 @@ import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive ...@@ -43,7 +44,8 @@ import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive
RandomEventComponent, RandomEventComponent,
CharactersComponent, CharactersComponent,
CharacterComponent, CharacterComponent,
RulesComponent RulesComponent,
StepComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
......
src/app/pieces/step/step.component.html 0 → 100644
View file @ f35a2b89
<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece-attach piece-attach-right"></div>
<div class="piece-attach piece-attach-left"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
<mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
</div>
<div class="piece-form">
<div class="piece-form-title">Étape 1</div>
<textarea></textarea>
<div class="piece-form-duration">
<label for="duration">Durée</label>
<input name="duration" type="text"/>
<select name="duration">
<option value="UT">UT</option>
<option value="min">min</option>
<option value="tours">tours</option>
</select>
</div>
</div>
</div>
\ No newline at end of file
src/app/pieces/step/step.component.scss 0 → 100644
View file @ f35a2b89
.piece {
--piece-background-color: #acc9fc;
width: 400px;
height: 300px;
position: relative;
background-color: var(--piece-background-color);
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
top: -51px;
left: 50%;
transform: translateX(-50%);
transition: transform 0.5s ease;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid black 1px;
display: flex;
padding: 15px 20px 15px 20px;
justify-content: space-around;
mat-icon {
cursor: pointer;
transform: scale(1.1);
}
mat-icon:hover {
opacity: 0.75;
}
}
&-menu.show {
transform: translateX(-50%) translateY(0);
}
&-menu.hide {
transform: translateX(-50%) translateY(100%);
}
&-attach {
z-index: 1;
border-right: solid black 1px;
border-top: solid black 1px;
&-right {
width: 50px;
height: 50px;
position: absolute;
right: -25px;
top: 50%;
transform: translateY(-50%) rotateZ(45deg);
background-color: var(--piece-background-color);
}
&-left {
background-color: var(--background-color);
position: absolute;
width: 50px;
height: 50px;
left: -25px;
top: 50%;
transform: translateY(-50%) rotateZ(45deg);
}
}
&-form {
height: 100%;
padding: 0px 10px 0px 40px;
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
z-index: 2;
&-title {
margin-top: 10px;
font-size: 25px;
font-family: 'Glacial Indifference Bold';
}
textarea {
margin-top: 5px;
padding: 10px;
height: 60%;
border-radius: 10px;
border: none;
resize: none;
font-size: 15px;
background-image: url("../../../assets/background-images/step.png");
background-position: center;
background-repeat: no-repeat;
background-size: 30%;
}
&-duration {
margin-top: 10px;
label {
font-size: 20px;
margin-right: 5px;
}
input {
border: none;
height: 30px;
width: 50px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
text-align: right;
}
select {
background-color: white;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border: none;
height: 32px;
width: 50px;
text-align: center;
}
}
}
}
.piece::after {
content: "";
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border: 1px solid black;
}
\ No newline at end of file
src/app/pieces/step/step.component.spec.ts 0 → 100644
View file @ f35a2b89
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { StepComponent } from './step.component';
describe('StepComponent', () => {
let component: StepComponent;
let fixture: ComponentFixture<StepComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ StepComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(StepComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pieces/step/step.component.ts 0 → 100644
View file @ f35a2b89
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-step',
templateUrl: './step.component.html',
styleUrls: ['./step.component.scss']
})
export class StepComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
displayMenu: string = 'hide';
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
}
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