Skip to content

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

Merge branch 'data_structure_v2' into data_structure

parents ad1a4907 a6e6c15f
Show whitespace changes
Inline Side-by-side
Showing with 4727 additions and 122 deletions
README.md
View file @ b0d43ca4
# RLGTool # RLGMaker
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.5. This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.5.
......
angular.json
View file @ b0d43ca4
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
"version": 1, "version": 1,
"newProjectRoot": "projects", "newProjectRoot": "projects",
"projects": { "projects": {
"RLGTool": { "RLGMaker": {
"projectType": "application", "projectType": "application",
"schematics": { "schematics": {
"@schematics/angular:component": { "@schematics/angular:component": {
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
"build": { "build": {
"builder": "@angular-devkit/build-angular:browser", "builder": "@angular-devkit/build-angular:browser",
"options": { "options": {
"outputPath": "dist/rlgtool", "outputPath": "dist/rlgmaker",
"index": "src/index.html", "index": "src/index.html",
"main": "src/main.ts", "main": "src/main.ts",
"polyfills": "src/polyfills.ts", "polyfills": "src/polyfills.ts",
...@@ -70,10 +70,10 @@ ...@@ -70,10 +70,10 @@
"builder": "@angular-devkit/build-angular:dev-server", "builder": "@angular-devkit/build-angular:dev-server",
"configurations": { "configurations": {
"production": { "production": {
"browserTarget": "RLGTool:build:production" "browserTarget": "RLGMaker:build:production"
}, },
"development": { "development": {
"browserTarget": "RLGTool:build:development" "browserTarget": "RLGMaker:build:development"
} }
}, },
"defaultConfiguration": "development" "defaultConfiguration": "development"
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
"extract-i18n": { "extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n", "builder": "@angular-devkit/build-angular:extract-i18n",
"options": { "options": {
"browserTarget": "RLGTool:build" "browserTarget": "RLGMaker:build"
} }
}, },
"test": { "test": {
......
karma.conf.js
View file @ b0d43ca4
...@@ -25,7 +25,7 @@ module.exports = function (config) { ...@@ -25,7 +25,7 @@ module.exports = function (config) {
suppressAll: true // removes the duplicated traces suppressAll: true // removes the duplicated traces
}, },
coverageReporter: { coverageReporter: {
dir: require('path').join(__dirname, './coverage/rlgtool'), dir: require('path').join(__dirname, './coverage/rlgmaker'),
subdir: '.', subdir: '.',
reporters: [ reporters: [
{ type: 'html' }, { type: 'html' },
......
package-lock.json
View file @ b0d43ca4
{ {
"name": "rlgtool", "name": "rlgmaker",
"version": "0.0.0", "version": "0.0.0",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "rlgtool", "name": "rlgmaker",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@angular/animations": "^14.0.0", "@angular/animations": "^14.0.0",
......
package.json
View file @ b0d43ca4
{ {
"name": "rlgtool", "name": "rlgmaker",
"version": "0.0.0", "version": "0.0.0",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
......
src/app/app.component.html
View file @ b0d43ca4
<div style="display: flex;"> <div class="container">
<div class="container-appDragScroll" appDragScroll>
<div class="container-appMouseWheelZoom" appMouseWheelZoom>
<div style="display: flex; flex-direction: column;" [style.z-index]="4"> <div class="container-scenario-main">
<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>
<app-game-context [style.z-index]="2"></app-game-context> <app-game-context [style.z-index]="2"></app-game-context>
</div> </div>
<div style="display: flex; flex-direction: column;" [style.z-index]="3"> <div class="container-scenario-main-missions">
<app-educational-objective></app-educational-objective> <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> <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]="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 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 class="container-scenario-main-missions-mission">
<app-role [style.z-index]="2" ></app-role> <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> <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>
</div>
<app-annexe-task [style.z-index]="0"></app-annexe-task> <div class="container-sider">
<app-rules class="container-sider-element"></app-rules>
<app-role-occurence class="container-sider-element"></app-role-occurence>
<app-supplementary-task class="container-sider-element"></app-supplementary-task>
<app-repeat class="container-sider-element"></app-repeat>
<app-interupt class="container-sider-element"></app-interupt>
<app-characters class="container-sider-element"></app-characters>
<app-comments class="container-sider-element"></app-comments>
</div>
<div class="container-settings">
<div class="container-settings-mode">
<input name="unity" type="checkbox" />
<label for="unity">Intégrer le jeu sous Unity</label>
</div>
<button mat-mini-fab color="white"><mat-icon fontIcon="download_file"></mat-icon></button>
<button mat-mini-fab color="white"><mat-icon fontIcon="upload-file"></mat-icon></button>
</div>
</div> </div>
\ No newline at end of file
src/app/app.component.scss
View file @ b0d43ca4
.container {
display: flex;
flex-direction: row;
z-index: 1;
&-appDragScroll {
position: absolute;
height: 100%;
width: calc(100% - 322px);
left: 0;
right: 5px;
top: 0px;
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
&-appDragScroll::-webkit-scrollbar {
display: none;
}
&-appMouseWheelZoom {
position: relative;
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';
font-size: 20px;
margin-bottom: 10px;
}
&-steps {
display: flex;
flex-direction: row;
}
}
&-main {
display: flex;
flex-direction: row;
&-gamePieces {
display: flex;
flex-direction: column;
}
&-missions {
display: flex;
flex-direction: column;
&-mission {
display: flex;
flex-direction: column;
margin-bottom: 100px;
position: relative;
top: -868px;
&-missionPieces {
display: flex;
flex-direction: column;
}
&-roles {
display: flex;
flex-direction: column;
&-role {
display: flex;
flex-direction: row;
&-tasks {
display: flex;
flex-direction: column;
&-inlineTasks {
display: flex;
flex-direction: row;
}
}
}
}
}
}
}
}
&-sider {
height: 100%;
width: 320px;
background-color: #e3e3e3;
position: fixed;
right: 0;
top: 0;
z-index: 2;
border-left: solid black 3px;
align-items: center;
overflow: scroll;
box-shadow: -20px 0px 25px rgba(0, 0, 0, 0.3);
&-element {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
}
&-settings {
position: fixed;
width: 300px;
right: 350px;
display: flex;
flex-direction: row;
justify-content: space-between;
z-index: 2;
&-mode {
width: 150px;
background-color: white;
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
padding: 5px;
border-radius: 10px;
text-align: center;
}
button {
width: 50px;
height: 50px;
}
}
}
\ No newline at end of file
src/app/app.component.spec.ts
View file @ b0d43ca4
...@@ -20,16 +20,16 @@ describe('AppComponent', () => { ...@@ -20,16 +20,16 @@ describe('AppComponent', () => {
expect(app).toBeTruthy(); expect(app).toBeTruthy();
}); });
it(`should have as title 'RLG Tool'`, () => { it(`should have as title 'RLG Maker'`, () => {
const fixture = TestBed.createComponent(AppComponent); const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance; const app = fixture.componentInstance;
expect(app.title).toEqual('RLG Tool'); expect(app.title).toEqual('RLG Maker');
}); });
it('should render title', () => { it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent); const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges(); fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement; const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('.content span')?.textContent).toContain('RLG Tool app is running!'); expect(compiled.querySelector('.content span')?.textContent).toContain('RLG Maker app is running!');
}); });
}); });
src/app/app.component.ts
View file @ b0d43ca4
...@@ -6,7 +6,7 @@ import { Component } from '@angular/core'; ...@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss']
}) })
export class AppComponent { export class AppComponent {
title = 'RLG Tool'; title = 'RLG Maker';
range(n: number): number[] { range(n: number): number[] {
return Array.from(Array(n), (_, i) => i); return Array.from(Array(n), (_, i) => i);
......
src/app/app.module.ts
View file @ b0d43ca4
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { EducationalObjectiveComponent } from './pieces/educational-objective/educational-objective.component'; import { EducationalObjectiveComponent } from './pieces/educational-objective/educational-objective.component';
import { RoleComponent } from './pieces/role/role.component'; import { RoleComponent } from './pieces/role/role.component';
import { MissionContextComponent } from './pieces/mission-context/mission-context.component'; import { MissionContextComponent } from './pieces/mission-context/mission-context.component';
import { GameEducationnalObjectiveComponent } from './pieces/game-educationnal-objective/game-educationnal-objective.component'; import { GameEducationnalObjectiveComponent } from './pieces/game-educationnal-objective/game-educationnal-objective.component';
import { GameContextComponent } from './pieces/game-context/game-context.component'; import { GameContextComponent } from './pieces/game-context/game-context.component';
import { TaskComponent } from './pieces/task/task.component'; import { TaskComponent } from './pieces/tasks/task/task.component';
import { AnnexeTaskComponent } from './pieces/annexe-task/annexe-task.component'; import { AnnexeTaskComponent } from './pieces/tasks/annexe-task/annexe-task.component';
import { CommentsComponent } from './sider-pieces/comments/comments.component';
import { RepeatComponent } from './sider-pieces/repeat/repeat.component';
import { CommentComponent } from './components/comment/comment.component';
import { RandomEventComponent } from './pieces/tasks/random-event/random-event.component';
import { CharactersComponent } from './sider-pieces/characters/characters.component';
import { CharacterComponent } from './components/character/character.component';
import { RulesComponent } from './sider-pieces/rules/rules.component';
import { StepComponent } from './pieces/step/step.component';
import { FinalTaskComponent } from './pieces/tasks/final-task/final-task.component';
import { RepeatTaskComponent } from './pieces/tasks/repeat-task/repeat-task.component';
import { InteruptComponent } from './sider-pieces/interupt/interupt.component';
import { OptionnalTaskComponent } from './pieces/tasks/optionnal-task/optionnal-task.component';
import { RoleOccurenceComponent } from './sider-pieces/role-occurence/role-occurence.component';
import { SupplementaryTaskComponent } from './sider-pieces/supplementary-task/supplementary-task.component';
import { FormsModule } from '@angular/forms'; import { DragScrollDirective } from './directives/drag-scroll.directive';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive';
import { MatIconModule } from '@angular/material/icon';
@NgModule({ @NgModule({
declarations: [ declarations: [
...@@ -24,7 +41,23 @@ import { MatIconModule } from '@angular/material/icon'; ...@@ -24,7 +41,23 @@ import { MatIconModule } from '@angular/material/icon';
GameEducationnalObjectiveComponent, GameEducationnalObjectiveComponent,
GameContextComponent, GameContextComponent,
TaskComponent, TaskComponent,
AnnexeTaskComponent AnnexeTaskComponent,
DragScrollDirective,
MouseWheelZoomDirective,
CommentsComponent,
RepeatComponent,
CommentComponent,
RandomEventComponent,
CharactersComponent,
CharacterComponent,
RulesComponent,
StepComponent,
FinalTaskComponent,
RepeatTaskComponent,
InteruptComponent,
OptionnalTaskComponent,
RoleOccurenceComponent,
SupplementaryTaskComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
...@@ -32,6 +65,7 @@ import { MatIconModule } from '@angular/material/icon'; ...@@ -32,6 +65,7 @@ import { MatIconModule } from '@angular/material/icon';
FormsModule, FormsModule,
BrowserAnimationsModule, BrowserAnimationsModule,
MatIconModule, MatIconModule,
MatButtonModule
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]
......
src/app/components/character/character.component.html 0 → 100644
View file @ b0d43ca4
<div class="character">
<div class="character-top">
<mat-icon fontIcon="person"></mat-icon>
<div class="character-top-name">
<label for="name">Nom</label>
<input name="name" type="text"/>
</div>
</div>
<div class="character-infos">
<div class="character-infos-description">
<label for="description">Description</label>
<textarea name="description"></textarea>
</div>
<!--
<div>
<div class="character-infos-phone">
<label for="phonenumber">N° tél.</label>
<input name="phonenumber" type="tel"/>
</div>
<div class="character-infos-title">
<label for="title">Titre</label>
<input name="title" type="text"/>
</div>
</div>
-->
<div class="character-infos-color">
<label for="color">Couleur</label>
<input name="color" type="color"/>
</div>
</div>
<button mat-button>Retirer de ma tâche</button>
</div>
\ No newline at end of file
src/app/components/character/character.component.scss 0 → 100644
View file @ b0d43ca4
label {
margin-right: 10px;
}
input[type="text"],
input[type="tel"] {
border: none;
border-radius: 10px;
height: 20px;
padding: 5px 5px 5px 5px;
}
input[type="color"] {
border: none;
border-radius: 10px;
background-color: white;
}
textarea {
border: none;
border-radius: 10px;
min-height: 50px;
max-height: 100px;
resize: vertical;
padding: 5px 10px 5px 10px;
}
select {
border-radius: 10px;
background-color: white;
border: none;
padding: 5px 10px 5px 10px;
}
mat-icon {
transform: scale(2);
color: white;
margin-left: 10px;
margin-right: 20px;
}
button {
margin-top: 5px;
background-color: white;
border-radius: 10px;
position: relative;
left: 100%;
transform: translateX(-100%);
}
.character {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid black 1px;
&-top {
display: flex;
flex-direction: row;
width: 100%;
&-name {
display: flex;
justify-content: flex-end;
input {
width: 75%;
}
}
}
&-infos {
margin-top: 10px;
&-description {
display: flex;
flex-direction: column;
}
&-phone {
display: flex;
margin-top: 5px;
justify-content: space-between;
}
&-title {
display: flex;
margin-top: 5px;
justify-content: space-between;
}
&-color {
margin-top: 5px;
}
}
}
\ No newline at end of file
src/app/components/character/character.component.spec.ts 0 → 100644
View file @ b0d43ca4
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CharacterComponent } from './character.component';
describe('CharacterComponent', () => {
let component: CharacterComponent;
let fixture: ComponentFixture<CharacterComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ CharacterComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(CharacterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pieces/annexe-task/annexe-task.component.ts → src/app/components/character/character.component.ts
View file @ b0d43ca4
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
@Component({ @Component({
selector: 'app-annexe-task', selector: 'app-character',
templateUrl: './annexe-task.component.html', templateUrl: './character.component.html',
styleUrls: ['./annexe-task.component.scss'] styleUrls: ['./character.component.scss']
}) })
export class AnnexeTaskComponent implements OnInit { export class CharacterComponent implements OnInit {
constructor() { } constructor() { }
......
src/app/components/comment/comment.component.html 0 → 100644
View file @ b0d43ca4
<div class="form">
<div class="form-comment">
<textarea [disabled]="true">Mon commentaire</textarea>
<div class="form-comment-buttons">
<button mat-button>Modifier</button>
<button mat-button>Supprimer</button>
</div>
</div>
<div class="form-answers">
<textarea [disabled]="true">Une réponse</textarea>
<div class="form-comment-buttons">
<button mat-button>Modifier</button>
<button mat-button>Supprimer</button>
</div>
</div>
<div class="form-newanswer">
<textarea></textarea>
<div class="form-newanswer-buttons">
<button mat-button>Répondre</button>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/comment/comment.component.scss 0 → 100644
View file @ b0d43ca4
textarea {
resize: vertical;
border-radius: 10px;
border: none;
min-height: 50px;
max-height: 200px;
padding: 5px 5px 5px 5px;
}
button {
background-color: white;
border-radius: 10px;
margin-left: 5px;
}
.form {
margin-bottom: 10px;
border-bottom: solid black 1px;
padding-bottom: 10px;
&-comment {
margin-bottom: 10px;
display: flex;
flex-direction: column;
textarea {
height: 100px;
resize: none;
}
&-buttons {
margin-top: 5px;
display: flex;
flex-direction: row;
position: relative;
justify-content: flex-end;
}
}
&-answers {
display: flex;
flex-direction: column;
margin-bottom: 10px;
textarea {
resize: none;
}
}
&-newanswer {
display: flex;
flex-direction: column;
&-buttons {
margin-top: 5px;
display: flex;
flex-direction: row;
position: relative;
justify-content: flex-end;
}
}
}
src/app/components/comment/comment.component.spec.ts 0 → 100644
View file @ b0d43ca4
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CommentComponent } from './comment.component';
describe('CommentComponent', () => {
let component: CommentComponent;
let fixture: ComponentFixture<CommentComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ CommentComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(CommentComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/components/comment/comment.component.ts 0 → 100644
View file @ b0d43ca4
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-comment',
templateUrl: './comment.component.html',
styleUrls: ['./comment.component.scss']
})
export class CommentComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
src/app/directives/drag-scroll.directive.spec.ts 0 → 100644
View file @ b0d43ca4
import { DragScrollDirective } from './drag-scroll.directive';
describe('DragScrollDirective', () => {
it('should create an instance', () => {
const directive = new DragScrollDirective();
expect(directive).toBeTruthy();
});
});
src/app/directives/drag-scroll.directive.ts 0 → 100644
View file @ b0d43ca4
import { Directive, HostListener, ElementRef } from '@angular/core';
@Directive({
selector: '[appDragScroll]'
})
export class DragScrollDirective {
private isMouseDown: boolean = false;
private startX: number = 0;
private startY: number = 0;
private element: HTMLElement;
constructor(private elementRef: ElementRef) {
this.element = elementRef.nativeElement;
}
@HostListener('mousedown', ['$event'])
onMouseDown(event: MouseEvent) {
this.isMouseDown = true;
this.startX = event.clientX;
this.startY = event.clientY;
this.element.style.cursor = 'grabbing';
}
@HostListener('mouseup', ['$event'])
onMouseUp(event: MouseEvent) {
this.isMouseDown = false;
this.element.style.cursor = 'grab';
}
@HostListener('mousemove', ['$event'])
onMouseMove(event: MouseEvent) {
if(this.isMouseDown) {
event.preventDefault();
const x = event.clientX - this.startX;
const y = event.clientY - this.startY;
this.element.scrollLeft -= x;
this.element.scrollTop -= y;
this.startX = event.clientX;
this.startY = event.clientY;
}
}
}
\ No newline at end of file
src/app/directives/mouse-wheel-zoom.directive.spec.ts 0 → 100644
View file @ b0d43ca4
import { MouseWheelZoomDirective } from './mouse-wheel-zoom.directive';
describe('MouseWheelZoomDirective', () => {
it('should create an instance', () => {
const directive = new MouseWheelZoomDirective();
expect(directive).toBeTruthy();
});
});
src/app/directives/mouse-wheel-zoom.directive.ts 0 → 100644
View file @ b0d43ca4
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appMouseWheelZoom]'
})
export class MouseWheelZoomDirective {
private zoom: number = 1;
private element: HTMLElement;
constructor(private elementRef: ElementRef) {
this.element = elementRef.nativeElement;
}
@HostListener('wheel', ['$event'])
onMouseWheel(event: WheelEvent) {
event.preventDefault();
const zoomLevel = event.deltaY < 0 ? 0.1 : -0.1;
this.zoom += zoomLevel;
this.element.style.transform = `scale(${this.zoom})`;
}
}
\ No newline at end of file
src/app/pieces/annexe-task/annexe-task.component.html deleted 100644 → 0
View file @ ad1a4907
<div class="piece">
<div class="piece-attach piece-attach-left"></div>
<div class="piece-attach piece-attach-right"></div>
<div class="piece-form">
<h1>Annexe Task</h1>
</div>
</div>
src/app/pieces/educational-objective/educational-objective.component.html
View file @ b0d43ca4
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<div class="piece-form-title">Objectif pédagogique</div> <div class="piece-form-title">Objectif pédagogique</div>
<div class="piece-form-objective"> <div class="piece-form-objective">
<label for="objective">Commun pour la mission 1</label> <label for="objective">Commun pour la mission 1</label>
<textarea name="objective" placeholder="Comprendre la dépendance de chaque rôle pour atteindre ses objectifs"></textarea> <textarea name="objective" placeholder="Comprendre les rôles impliqués dans la conception d'un site web"></textarea>
</div> </div>
</div> </div>
......
src/app/pieces/educational-objective/educational-objective.component.scss
View file @ b0d43ca4
...@@ -84,7 +84,6 @@ ...@@ -84,7 +84,6 @@
&-title { &-title {
margin-top: 20px; margin-top: 20px;
font-size: 25px; font-size: 25px;
//font-weight: bold;
font-family: 'Glacial Indifference Bold'; font-family: 'Glacial Indifference Bold';
} }
&-objective{ &-objective{
...@@ -104,10 +103,11 @@ ...@@ -104,10 +103,11 @@
resize: none; resize: none;
flex-grow: 1; flex-grow: 1;
margin-bottom: 25px; margin-bottom: 25px;
background-image: url("../../../assets/target.png"); background-image: url("../../../assets/background-images/obj2.png");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 30%; background-size: 30%;
font-size: 15px;
} }
} }
} }
......
src/app/pieces/game-context/game-context.component.html
View file @ b0d43ca4
...@@ -24,11 +24,11 @@ ...@@ -24,11 +24,11 @@
</div> </div>
<div class="piece-form-intrigue"> <div class="piece-form-intrigue">
<label for="intrigue">Intrigue</label> <label for="intrigue">Intrigue</label>
<textarea name="intrigue" placeholder="Vous habitez et travaillez dans un village et devez réussir à le faire vivre et prospérer. Si vous échouez, un riche promoteur risque de raser le village pour en faire un aéroport"></textarea> <textarea name="intrigue" placeholder="Vous êtes stagiaire dans une agence de communication et devez faire vos preuves pour être embauché.e"></textarea>
</div> </div>
<div class="piece-form-other"> <div class="piece-form-other">
<label for="other">Autre</label> <label for="other">Autre</label>
<textarea name="other" placeholder="Test"></textarea> <textarea name="other"></textarea>
</div> </div>
</div> </div>
......
src/app/pieces/game-context/game-context.component.scss
View file @ b0d43ca4
...@@ -86,6 +86,7 @@ ...@@ -86,6 +86,7 @@
border-radius: 10px; border-radius: 10px;
border: none; border: none;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
font-size: 15px;
} }
textarea { textarea {
border-radius: 20px; border-radius: 20px;
...@@ -93,6 +94,7 @@ ...@@ -93,6 +94,7 @@
border: none; border: none;
resize: none; resize: none;
flex-grow: 1; flex-grow: 1;
font-size: 15px;
} }
&-title { &-title {
margin-top: 20px; margin-top: 20px;
...@@ -118,12 +120,24 @@ ...@@ -118,12 +120,24 @@
margin-top: 10px; margin-top: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
textarea {
background-image: url("../../../assets/background-images/graal.png");
background-position: center;
background-repeat: no-repeat;
background-size: 30%;
}
} }
&-other { &-other {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 25px; margin-bottom: 25px;
height: 40%; height: 40%;
textarea {
background-image: url("../../../assets/background-images/autre.png");
background-position: center;
background-repeat: no-repeat;
background-size: 30%;
}
} }
} }
......
src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.html
View file @ b0d43ca4
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
<div class="piece-form"> <div class="piece-form">
<div class="piece-form-title">Objectif pédagogique</div> <div class="piece-form-title">Objectif pédagogique</div>
<div class="piece-form-objective"> <div class="piece-form-objective">
<label for="objective">Commun pour la mission 1</label> <label for="objective">Commun pour le jeu</label>
<textarea name="objective" placeholder="- Améliorer les softskills"></textarea> <textarea name="objective" placeholder="- Améliorer les softskills&#10;- Apprendre à coopérer"></textarea>
</div> </div>
<div class="piece-form-footer">Sorbonne Université, LIP6 - IMT Nord Europe</div> <div class="piece-form-footer">Sorbonne Université, LIP6 - IMT Nord Europe</div>
</div> </div>
......
src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.scss
View file @ b0d43ca4
...@@ -94,10 +94,11 @@ ...@@ -94,10 +94,11 @@
resize: none; resize: none;
flex-grow: 1; flex-grow: 1;
margin-bottom: 5px; margin-bottom: 5px;
background-image: url("../../../assets/chest.png"); background-image: url("../../../assets/background-images/objGnrl.png");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 30%; background-size: 30%;
font-size: 15px;
} }
} }
&-footer { &-footer {
......
src/app/pieces/mission-context/mission-context.component.html
View file @ b0d43ca4
...@@ -17,11 +17,15 @@ ...@@ -17,11 +17,15 @@
</div> </div>
<div class="piece-form-intrigue"> <div class="piece-form-intrigue">
<label for="intrigue">Intrigue</label> <label for="intrigue">Intrigue</label>
<textarea name="intrigue" placeholder="Faites prospérer les commerces essentiels du centre ville pour redresser l’économie du village et attirer de nouveaux habitants"></textarea> <textarea name="intrigue" placeholder="Concevez un site web ergonomique pour votre premier client"></textarea>
</div> </div>
<div class="piece-form-other"> <div class="piece-form-communication">
<label for="other">Autre</label> <label for="communication">Moyen(s) de communication</label>
<textarea name="other" placeholder="Test"></textarea> <textarea name="communication"></textarea>
</div>
<div class="piece-form-divers">
<label for="divers">Divers</label>
<textarea name="divers"></textarea>
</div> </div>
</div> </div>
</div> </div>
src/app/pieces/mission-context/mission-context.component.scss
View file @ b0d43ca4
...@@ -22,17 +22,21 @@ ...@@ -22,17 +22,21 @@
display: flex; display: flex;
padding: 15px 20px 15px 20px; padding: 15px 20px 15px 20px;
justify-content: space-around; justify-content: space-around;
mat-icon { mat-icon {
cursor: pointer; cursor: pointer;
transform: scale(1.1); transform: scale(1.1);
} }
mat-icon:hover { mat-icon:hover {
opacity: 0.75; opacity: 0.75;
} }
} }
&-menu.show { &-menu.show {
transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0);
} }
&-menu.hide { &-menu.hide {
transform: translateX(-50%) translateY(100%); transform: translateX(-50%) translateY(100%);
} }
...@@ -42,6 +46,7 @@ ...@@ -42,6 +46,7 @@
border-top: solid black 1px; border-top: solid black 1px;
border-right: solid black 1px; border-right: solid black 1px;
border-bottom: solid black 1px; border-bottom: solid black 1px;
&-right { &-right {
position: absolute; position: absolute;
width: 20px; width: 20px;
...@@ -51,6 +56,7 @@ ...@@ -51,6 +56,7 @@
right: -20px; right: -20px;
transform: translateY(-50%); transform: translateY(-50%);
} }
&-left { &-left {
&-top { &-top {
position: absolute; position: absolute;
...@@ -61,6 +67,7 @@ ...@@ -61,6 +67,7 @@
left: -0px; left: -0px;
transform: translateY(-50%); transform: translateY(-50%);
} }
&-bottom { &-bottom {
position: absolute; position: absolute;
width: 20px; width: 20px;
...@@ -81,47 +88,75 @@ ...@@ -81,47 +88,75 @@
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
z-index: 2; z-index: 2;
label { label {
font-size: 20px; font-size: 20px;
font-weight: lighter; font-weight: lighter;
margin-top: 10px; margin-top: 10px;
margin-bottom: 5px; margin-bottom: 5px;
} }
input { input {
height: 40px; height: 40px;
border-radius: 10px; border-radius: 10px;
border: none; border: none;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
font-size: 15px;
} }
textarea { textarea {
border-radius: 20px; border-radius: 20px;
padding: 10px; padding: 10px;
border: none; border: none;
resize: none; resize: none;
flex-grow: 1; flex-grow: 1;
font-size: 15px;
} }
&-title { &-title {
margin-top: 20px; margin-top: 20px;
font-size: 25px; font-size: 25px;
//font-weight: bold; //font-weight: bold;
font-family: 'Glacial Indifference Bold'; font-family: 'Glacial Indifference Bold';
} }
&-duration { &-duration {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 10px; margin-top: 10px;
} }
&-intrigue{
height: 55%; &-intrigue {
height: 35%;
margin-top: 10px; margin-top: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
textarea {
background-image: url("../../../assets/background-images/contexte.png");
background-position: center;
background-repeat: no-repeat;
background-size: 30%;
}
}
&-communication {
display: flex;
flex-direction: column;
height: 20%;
textarea {
background-image: url("../../../assets/background-images/com.png");
background-position: center;
background-repeat: no-repeat;
background-size: 30%;
}
} }
&-other {
&-divers {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 25px; height: 20%;
height: 30%;
} }
} }
} }
......
src/app/pieces/role/role.component.html
View file @ b0d43ca4
...@@ -11,21 +11,85 @@ ...@@ -11,21 +11,85 @@
<div class="piece-form"> <div class="piece-form">
<div class="piece-form-title">Rôle 1</div> <div class="piece-form-title">Rôle 1</div>
<img src="../../../assets/background-images/role.png"/>
<div class="piece-form-intitule"> <div class="piece-form-intitule">
<label for="intitule">Intitulé</label> <label for="intitule">Intitulé</label>
<input name="intitule" type="text" placeholder="Organisateur de goûters d'anniversaire"/> <input name="intitule" type="text" placeholder="Développeur/euse web"/>
</div> </div>
<div class="piece-form-name"> <div class="piece-form-name">
<label for="name">Nom de la quête</label> <label for="name">Nom de la quête</label>
<input name="name" type="text" placeholder="Fête d'anniversaire"/> <input name="name" type="text" placeholder="Intégration de site web"/>
</div>
<div class="piece-form-description">
<label for="description">Description</label>
<textarea name="description"></textarea>
</div> </div>
<div class="piece-form-objective"> <div class="piece-form-objective">
<label for="objective">Objectif(s) pédagoqique(s)</label> <label for="objective">Objectif(s) pédagoqique(s)</label>
<textarea name="objective" placeholder="- Savoir préparer une fête"></textarea> <input name="objective" type="text" placeholder="Nom de l'objectif"/>
<input name="objective" type="text" placeholder="Nom de l'objectif"/>
<button mat-button><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">
<label>Type</label>
<select>
<option>test</option>
</select>
</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>
</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-name">
<label for="name">Nom</label>
<input name="name" type="text"/>
</div>
<div class="piece-form-ressources-ressource-quantity">
<label for="quantity">Nombre / stats</label>
<input name="quantity" type="text">
</div>
<div class="piece-form-ressources-ressource-quantity">
<label for="type">Type</label>
<input name="type" type="text">
</div>
</div>
<button mat-button><mat-icon fontIcon="add"></mat-icon></button>
</div>
<div class="piece-form-supplementary">
<div class="piece-form-title">Rôle supplémentaire</div>
<div>
<div class="piece-form-supplementary-name">
<label for="name">Nom</label>
<input name="name" type="text"/>
</div>
<div class="piece-form-supplementary-textarea">
<label for="objectives">Objectifs</label>
<textarea name="objectives"></textarea>
</div>
<div class="piece-form-supplementary-textarea">
<label for="skills">Compétences</label>
<textarea name="skills"></textarea>
</div>
<div class="piece-form-supplementary-textarea">
<label for="rules">Règles</label>
<textarea nam="rules"></textarea>
</div>
</div> </div>
<div class="piece-form-reward"> <button mat-button><mat-icon fontIcon="add"></mat-icon></button>
<label for="reward">Récompenses</label>
<textarea name="reward" placeholder="- Gagner en compétence en événementiel"></textarea>
</div> </div>
</div> </div>
</div> </div>
src/app/pieces/role/role.component.scss
View file @ b0d43ca4
...@@ -2,9 +2,8 @@ ...@@ -2,9 +2,8 @@
--piece-background-color: #9ad5ec; --piece-background-color: #9ad5ec;
width: 400px; width: 400px;
height: 800px;
position: relative; position: relative;
background-color: var(--piece-background-color); background: linear-gradient(303deg, rgb(2, 0, 36) 0%, rgb(2, 0, 36) 25%, #9ad5ec 25%, #9ad5ec 100%);
&-menu { &-menu {
position: absolute; position: absolute;
...@@ -22,23 +21,28 @@ ...@@ -22,23 +21,28 @@
display: flex; display: flex;
padding: 15px 20px 15px 20px; padding: 15px 20px 15px 20px;
justify-content: space-around; justify-content: space-around;
mat-icon { mat-icon {
cursor: pointer; cursor: pointer;
transform: scale(1.1); transform: scale(1.1);
} }
mat-icon:hover { mat-icon:hover {
opacity: 0.75; opacity: 0.75;
} }
} }
&-menu.show { &-menu.show {
transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0);
} }
&-menu.hide { &-menu.hide {
transform: translateX(-50%) translateY(100%); transform: translateX(-50%) translateY(100%);
} }
&-attach { &-attach {
z-index: 1; z-index: 1;
&-left { &-left {
&-top { &-top {
border-right: solid black 1px; border-right: solid black 1px;
...@@ -51,6 +55,7 @@ ...@@ -51,6 +55,7 @@
transform: translateY(-50%); transform: translateY(-50%);
left: -25px; left: -25px;
} }
&-bottom { &-bottom {
border-top: solid black 1px; border-top: solid black 1px;
border-right: solid black 1px; border-right: solid black 1px;
...@@ -64,6 +69,7 @@ ...@@ -64,6 +69,7 @@
left: 0px; left: 0px;
} }
} }
&-right { &-right {
border-top: solid black 1px; border-top: solid black 1px;
border-right: solid black 1px; border-right: solid black 1px;
...@@ -76,6 +82,7 @@ ...@@ -76,6 +82,7 @@
top: 200px; top: 200px;
} }
} }
&-form { &-form {
height: 100%; height: 100%;
padding: 0px 10px 0px 35px; padding: 0px 10px 0px 35px;
...@@ -84,58 +91,203 @@ ...@@ -84,58 +91,203 @@
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
z-index: 2; z-index: 2;
label { label {
font-size: 20px; font-size: 20px;
font-weight: lighter; font-weight: lighter;
margin-top: 10px; margin-top: 10px;
margin-bottom: 5px; margin-bottom: 5px;
} }
input { input {
height: 40px; height: 40px;
border-radius: 10px; border-radius: 10px;
border: none; border: none;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
font-size: 15px;
} }
textarea { textarea {
border-radius: 20px; border-radius: 20px;
padding: 10px; padding: 10px;
border: none; border: none;
resize: none; resize: none;
flex-grow: 1; flex-grow: 1;
font-size: 15px;
}
img {
width: 20%;
position: absolute;
right: 5px;
top: 5px;
} }
&-title { &-title {
margin-top: 20px; margin-top: 20px;
font-size: 25px; font-size: 25px;
//font-weight: bold;
font-family: 'Glacial Indifference Bold'; font-family: 'Glacial Indifference Bold';
} }
&-intitule { &-intitule {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 10px; margin-top: 10px;
} }
&-name { &-name {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
&-description {
display: flex;
flex-direction: column;
textarea {
height: 100px;
}
}
&-objective { &-objective {
height: 40%;
margin-top: 10px; margin-top: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
input {
margin-top: 5px;
}
button {
position: relative;
width: 50px;
height: 50px;
background-color: white;
left: 100%;
transform: translateX(-100%);
margin-top: 5px;
border-radius: 10px;
mat-icon {
transform: scale(1.3);
}
}
}
&-rewards {
display: flex;
flex-direction: column;
&-reward {
display: flex;
flex-direction: row;
justify-content: space-between;
select {
height: 50px;
border: none;
border-radius: 10px;
background-color: white;
width: 80%;
}
}
}
&-personnalization {
&-appearance {
display: flex;
flex-direction: column;
height: 150px;
textarea { textarea {
margin-bottom: 5px; background-image: url("../../../assets/background-images/equipment.png");
background-image: url("../../../assets/alchemist.png");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 30%; background-size: 30%;
} }
} }
&-reward { }
&-ressources {
display: flex;
flex-direction: column;
&-ressource {
margin-top: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
div {
display: flex;
flex-direction: row;
margin-bottom: 5px;
justify-content: space-between;
}
input {
width: 50%;
}
&-name {
input {
background-image: url("../../../assets/background-images/object.png");
background-position: center;
background-repeat: no-repeat;
background-size: 20%;
}
}
}
button {
position: relative;
width: 50px;
height: 50px;
background-color: white;
left: 100%;
transform: translateX(-100%);
margin-top: 5px;
border-radius: 10px;
mat-icon {
transform: scale(1.3);
}
}
}
&-supplementary {
margin-bottom: 25px; margin-bottom: 25px;
height: 40%;
&-name {
margin-top: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
&-textarea {
display: flex;
flex-direction: column;
textarea {
height: 100px;
}
}
button {
position: relative;
width: 50px;
height: 50px;
background-color: white;
left: 100%;
transform: translateX(-100%);
margin-top: 5px;
border-radius: 10px;
mat-icon {
transform: scale(1.3);
}
}
} }
} }
} }
......
src/app/pieces/step/step.component.html 0 → 100644
View file @ b0d43ca4
<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>
<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" [(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>
</select>
</div>
</div>
</div>
\ No newline at end of file
src/app/pieces/step/step.component.scss 0 → 100644
View file @ b0d43ca4
.piece {
--piece-background-color: #acc9fc;
width: 400px;
height: 300px;
position: relative;
background-color: var(--piece-background-color);
transition: all 0.5s ease;
&-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: 100px;
}
&-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 @ b0d43ca4
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 @ b0d43ca4
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-step',
templateUrl: './step.component.html',
styleUrls: ['./step.component.scss']
})
export class StepComponent implements OnInit {
displayMenu: string = 'hide';
pieceWidth = '400px';
duration = 1;
durationUnit = 'UT';
constructor() { }
ngOnInit(): void {
}
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
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/tasks/annexe-task/annexe-task.component.html 0 → 100644
View file @ b0d43ca4
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece-attach piece-attach-left"></div>
<div class="piece-attach piece-attach-right"></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>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
</div>
<div class="piece-prerequires" [class]="displayPrequires">
<div class="piece-prerequires-prerequires">
<label class="piece-prerequires-title">Antécédents</label>
<div class="piece-prerequires-form">
<div class="piece-prerequires-prerequires-element">
<input name="antecedent" type="checkbox" value="true"/>
<label for="antecedent">EX1</label>
</div>
<div class="piece-prerequires-prerequires-element">
<input name="antecedent" type="checkbox"/>
<label for="antecedent">EX2</label>
</div>
</div>
</div>
<div class="piece-prerequires-ressources">
<label class="piece-prerequires-title">Ressources & attributs</label>
<div class="piece-prerequires-form">
<div class="piece-prerequires-ressources-element">
<div class="piece-prerequires-ressources-element-checkbox">
<input name="ressource" type="checkbox"/>
<label for="ressource">Pain</label>
</div>
<div class="piece-prerequires-ressources-element-quantity">
<select name="ressource">
<option><</option>
<option><=</option>
<option>=</option>
<option>>=</option>
<option>></option>
</select>
<input type="text" value="1"/>
</div>
</div>
<div class="piece-prerequires-ressources-element">
<div class="piece-prerequires-ressources-element-checkbox">
<input name="ressource" type="checkbox"/>
<label for="ressource">Citron</label>
</div>
<div class="piece-prerequires-ressources-element-quantity">
<select name="ressource">
<option><</option>
<option><=</option>
<option>=</option>
<option>>=</option>
<option>></option>
</select>
<input type="text" value="1"/>
</div>
</div>
</div>
</div>
</div>
<div class="piece-form">
<div class="piece-form-top">
<input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
<div class="piece-form-top-title">Tâche annexe</div>
</div>
<textarea class="piece-form-content" placeholder="Vérifier ses connaissances sur les formulaires PHP"></textarea>
<div class="piece-form-bottom">
<button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
Prérequis
</button>
<div class="piece-form-bottom-duration">
<input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
<select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
<option selected value="UT">UT</option>
<option value="min">min</option>
<option value="tours">tours</option>
</select>
</div>
</div>
</div>
</div>
src/app/pieces/tasks/annexe-task/annexe-task.component.scss 0 → 100644
View file @ b0d43ca4
.piece {
--piece-background-color: #bccecc;
width: 400px;
height: 400px;
position: relative;
background-color: var(--piece-background-color);
transition: all 0.5s ease;
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
top: -50px;
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%);
}
&-prerequires {
position: absolute;
width: 350px;
height: 150px;
background-color: #f7f7f7;
z-index: -1;
bottom: 0;
left: 25px;
border: solid black 1px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
transition: transform 0.5s ease;
border-top: none;
display: flex;
flex-direction: row;
&-title {
margin-left: auto;
margin-right: auto;
font-family: 'Glacial Indifference Bold';
font-size: 14px;
}
&-form {
display: flex;
flex-direction: column;
overflow: scroll;
}
&-prerequires {
position: relative;
border-right: solid #a3a3a3 1px;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 90%;
border-bottom-left-radius: 10px;
display: flex;
flex-direction: column;
}
&-ressources {
width: 50%;
height: 90%;
border-bottom-right-radius: 10px;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 90%;
border-bottom-left-radius: 10px;
display: flex;
flex-direction: column;
&-element {
display: flex;
flex-direction: row;
width: 100%;
margin-top: 5px;
&-checkbox {
position: relative;
width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-quantity {
position: relative;
width: 50%;
display: flex;
padding-right: 5px;
justify-content: flex-end;
input {
width: 20px;
border: none;
border-radius: 10px;
text-align: center;
}
select {
width: 40px;
background-color: white;
border: none;
border-radius: 10px;
margin-right: 5px;
}
}
}
}
}
&-prerequires.show {
transform: translateY(100%);
}
&-attach {
z-index: 1;
&-right {
border-top: solid black 1px;
border-right: solid black 1px;
width: 40px;
height: 40px;
background-color: var(--piece-background-color);
transform: translateY(-50%) rotate(45deg);
position: absolute;
right: -20px;
top: 200px;
}
&-left {
border-top: solid black 1px;
border-right: solid black 1px;
width: 40px;
height: 40px;
background-color: var(--background-color);
transform: translateY(-50%) rotate(45deg);
position: absolute;
left: -20px;
top: 200px;
}
}
&-form {
height: 100%;
padding: 0px 10px 0px 35px;
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
z-index: 2;
input {
height: 40px;
border-radius: 10px;
border: none;
padding: 5px 10px 5px 10px;
font-size: 15px;
}
textarea {
border-radius: 20px;
padding: 10px;
border: none;
resize: none;
flex-grow: 1;
font-size: 15px;
background-image: url("../../../../assets/background-images/annexe.png");
background-position: center;
background-repeat: no-repeat;
background-size: 100px;
}
select {
background-color: white;
border: none;
height: 50px;
border-radius: 10px;
padding: 5px 10px 5px 10px;
}
&-top {
margin-top: 20px;
display: flex;
flex-direction: row;
&-identifier {
width: 50px;
text-align: center;
}
&-title {
font-size: 25px;
font-family: 'Glacial Indifference Bold';
position: relative;
margin-left: 10px;
}
&-symbol {
width: 50px;
height: 50px;
background-color: white;
border-radius: 10px;
cursor: pointer;
mat-icon {
transform: scale(1.3);
overflow: visible;
}
}
}
&-content {
margin-top: 10px;
height: 100%;
margin-bottom: 10px;
}
&-bottom {
display: flex;
flex-direction: row;
margin-bottom: 10px;
justify-content: space-between;
&-duration {
display: flex;
input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: 20px;
text-align: center;
z-index: 2;
}
select {
width: 60px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
z-index: 1;
}
}
&-prerequires {
width: 100px;
height: 50px;
background-color: white;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: 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/tasks/annexe-task/annexe-task.component.ts 0 → 100644
View file @ b0d43ca4
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-annexe-task',
templateUrl: './annexe-task.component.html',
styleUrls: ['./annexe-task.component.scss']
})
export class AnnexeTaskComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
displayMenu: string = 'hide';
displayPrequires: string = 'hide';
durationUnit: string = 'UT';
duration: number = 1;
pieceWidth: string = '400px';
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';
}
}
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
onClickDots(): void {
}
changeDisplayPrerequires(): void {
if(this.displayPrequires == 'show') {
this.displayPrequires = 'hide';
} else {
this.displayPrequires = 'show';
}
}
}
src/app/pieces/tasks/final-task/final-task.component.html 0 → 100644
View file @ b0d43ca4
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<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>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
</div>
<div class="piece-symbolchoice" [class]="displaySymbolChoice">
<div class="piece-symbolchoice-header">
<label>Choisir un symbole de tâche commune :</label>
<div><mat-icon fontIcon="delete" (click)="setSymbol('','')"></mat-icon></div>
</div>
<div class="piece-symbolchoice-symbols">
<mat-icon [style.color]="'#d79297'" fontIcon="favorite" (click)="setSymbol('favorite','#d79297')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="diamond" (click)="setSymbol('diamond','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#e9ec54'" fontIcon="star" (click)="setSymbol('star','#e9ec54')"></mat-icon>
<mat-icon [style.color]="'#f5cee3'" fontIcon="hexagon" (click)="setSymbol('hexagon','#f5cee3')"></mat-icon>
<mat-icon [style.color]="'#d3d2d2'" fontIcon="add" (click)="setSymbol('add','#d3d2d2')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="circle" (click)="setSymbol('circle','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#b6cc87'" fontIcon="eco" (click)="setSymbol('eco','#b6cc87')"></mat-icon>
<mat-icon [style.color]="'#d0bbdb'" fontIcon="play_arrow" (click)="setSymbol('play_arrow','#d0bbdb')"></mat-icon>
<mat-icon [style.color]="'#8b7e64'" fontIcon="remove" (click)="setSymbol('remove','#8b7e64')"></mat-icon>
</div>
<div class="piece-symbolchoice-symbols">
<mat-icon [style.color]="'#d79297'" fontIcon="square" (click)="setSymbol('square','#d79297')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#e9ec54'" fontIcon="square" (click)="setSymbol('square','#e9ec54')"></mat-icon>
<mat-icon [style.color]="'#f5cee3'" fontIcon="square" (click)="setSymbol('square','#f5cee3')"></mat-icon>
<mat-icon [style.color]="'#d3d2d2'" fontIcon="square" (click)="setSymbol('square','#d3d2d2')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#b6cc87'" fontIcon="square" (click)="setSymbol('square','#b6cc87')"></mat-icon>
<mat-icon [style.color]="'#d0bbdb'" fontIcon="square" (click)="setSymbol('square','#d0bbdb')"></mat-icon>
<mat-icon [style.color]="'#8b7e64'" fontIcon="square" (click)="setSymbol('square','#8b7e64')"></mat-icon>
</div>
</div>
<div class="piece-prerequires" [class]="displayPrequires">
<div class="piece-prerequires-prerequires">
<label class="piece-prerequires-title">Antécédents</label>
<div class="piece-prerequires-form">
<div class="piece-prerequires-prerequires-element">
<input name="antecedent" type="checkbox" value="true"/>
<label for="antecedent">EX1</label>
</div>
<div class="piece-prerequires-prerequires-element">
<input name="antecedent" type="checkbox"/>
<label for="antecedent">EX2</label>
</div>
</div>
</div>
<div class="piece-prerequires-ressources">
<label class="piece-prerequires-title">Ressources & attributs</label>
<div class="piece-prerequires-form">
<div class="piece-prerequires-ressources-element">
<div class="piece-prerequires-ressources-element-checkbox">
<input name="ressource" type="checkbox"/>
<label for="ressource">Pain</label>
</div>
<div class="piece-prerequires-ressources-element-quantity">
<select name="ressource">
<option><</option>
<option><=</option>
<option>=</option>
<option>>=</option>
<option>></option>
</select>
<input type="text" value="1"/>
</div>
</div>
<div class="piece-prerequires-ressources-element">
<div class="piece-prerequires-ressources-element-checkbox">
<input name="ressource" type="checkbox"/>
<label for="ressource">Citron</label>
</div>
<div class="piece-prerequires-ressources-element-quantity">
<select name="ressource">
<option><</option>
<option><=</option>
<option>=</option>
<option>>=</option>
<option>></option>
</select>
<input type="text" value="1"/>
</div>
</div>
</div>
</div>
</div>
<div class="piece-form">
<div class="piece-form-top">
<input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
<div class="piece-form-top-title">Tâche finale</div>
<button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
<mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
</button>
</div>
<textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
<div class="piece-form-bottom">
<button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
Prérequis
</button>
<div class="piece-form-bottom-duration">
<input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
<select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
<option selected value="UT">UT</option>
<option value="min">min</option>
<option value="tours">tours</option>
</select>
</div>
</div>
</div>
</div>
src/app/pieces/tasks/final-task/final-task.component.scss 0 → 100644
View file @ b0d43ca4
.piece {
--piece-background-color: #b28386;
width: 400px;
height: 400px;
position: relative;
background-color: var(--piece-background-color);
transition: all 0.5s ease;
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
top: -50px;
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%);
}
&-symbolchoice {
position: absolute;
background-color: #f7f7f7;
width: 300px;
height: 100px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border: solid black 1px;
border-left: none;
padding: 10px;
right: 0;
top: 5px;
z-index: -1;
transition: transform 0.5s ease;
label {
font-size: 14px;
}
mat-icon {
cursor: pointer;
transform: scale(1.2);
}
mat-icon:hover {
opacity: 0.75;
}
&-header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
&-symbols {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 10px;
}
}
&-symbolchoice.show {
transform: translateX(100%);
}
&-prerequires {
position: absolute;
width: 350px;
height: 150px;
background-color: #f7f7f7;
z-index: -1;
bottom: 0;
left: 25px;
border: solid black 1px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
transition: transform 0.5s ease;
border-top: none;
display: flex;
flex-direction: row;
&-title {
margin-left: auto;
margin-right: auto;
font-family: 'Glacial Indifference Bold';
font-size: 14px;
}
&-form {
display: flex;
flex-direction: column;
overflow: scroll;
}
&-prerequires {
position: relative;
border-right: solid #a3a3a3 1px;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 90%;
border-bottom-left-radius: 10px;
display: flex;
flex-direction: column;
}
&-ressources {
width: 50%;
height: 90%;
border-bottom-right-radius: 10px;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 90%;
border-bottom-left-radius: 10px;
display: flex;
flex-direction: column;
&-element {
display: flex;
flex-direction: row;
width: 100%;
margin-top: 5px;
&-checkbox {
position: relative;
width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-quantity {
position: relative;
width: 50%;
display: flex;
padding-right: 5px;
justify-content: flex-end;
input {
width: 20px;
border: none;
border-radius: 10px;
text-align: center;
}
select {
width: 40px;
background-color: white;
border: none;
border-radius: 10px;
margin-right: 5px;
}
}
}
}
}
&-prerequires.show {
transform: translateY(100%);
}
&-attach {
z-index: 1;
&-left {
border-top: solid black 1px;
border-right: solid black 1px;
width: 40px;
height: 40px;
background-color: var(--background-color);
transform: translateY(-50%) rotate(45deg);
position: absolute;
left: -20px;
top: 200px;
}
}
&-form {
height: 100%;
padding: 0px 10px 0px 35px;
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
z-index: 2;
input {
height: 40px;
border-radius: 10px;
border: none;
padding: 5px 10px 5px 10px;
font-size: 15px;
}
textarea {
border-radius: 20px;
padding: 10px;
border: none;
resize: none;
flex-grow: 1;
font-size: 15px;
background-image: url("../../../../assets/background-images/final.png");
background-position: center;
background-repeat: no-repeat;
background-size: 100px;
}
select {
background-color: white;
border: none;
height: 50px;
border-radius: 10px;
padding: 5px 10px 5px 10px;
}
&-top {
margin-top: 20px;
display: flex;
flex-direction: row;
&-identifier {
width: 50px;
text-align: center;
}
&-title {
font-size: 25px;
font-family: 'Glacial Indifference Bold';
position: relative;
margin-left: 10px;
}
&-symbol {
width: 50px;
height: 50px;
background-color: white;
border-radius: 10px;
cursor: pointer;
position: absolute;
right: 10px;
mat-icon {
transform: scale(1.3);
overflow: visible;
}
}
}
&-content {
margin-top: 10px;
height: 100%;
margin-bottom: 10px;
}
&-bottom {
display: flex;
flex-direction: row;
margin-bottom: 10px;
justify-content: space-between;
&-duration {
display: flex;
input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: 20px;
text-align: center;
z-index: 2;
}
select {
width: 60px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
z-index: 1;
}
}
&-prerequires {
width: 100px;
height: 50px;
background-color: white;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: 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/tasks/final-task/final-task.component.spec.ts 0 → 100644
View file @ b0d43ca4
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FinalTaskComponent } from './final-task.component';
describe('FinalTaskComponent', () => {
let component: FinalTaskComponent;
let fixture: ComponentFixture<FinalTaskComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ FinalTaskComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(FinalTaskComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pieces/tasks/final-task/final-task.component.ts 0 → 100644
View file @ b0d43ca4
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-final-task',
templateUrl: './final-task.component.html',
styleUrls: ['./final-task.component.scss']
})
export class FinalTaskComponent implements OnInit {
displayMenu: string = 'hide';
displaySymbolChoice: string = 'hide';
displayPrequires: string = 'hide';
durationUnit: string = 'UT';
duration: number = 1;
pieceWidth: string = '400px';
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) {
this.pieceWidth = (this.duration*400)+'px';
} else if(this.duration > 10) {
this.pieceWidth = '4000px';
} else {
this.pieceWidth = '400px';
}
} else {
this.pieceWidth = '400px';
}
}
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
onClickDots(): void {
}
changeDisplaySymbolChoice(): void {
if(this.displaySymbolChoice == 'show') {
this.displaySymbolChoice = 'hide';
} else {
this.displaySymbolChoice = 'show';
}
}
setSymbol(symbol: string, symbolColor: string): void {
this.symbol = symbol;
this.symbolColor = symbolColor;
this.displaySymbolChoice = 'hide';
}
changeDisplayPrerequires(): void {
if(this.displayPrequires == 'show') {
this.displayPrequires = 'hide';
} else {
this.displayPrequires = 'show';
}
}
}
src/app/pieces/tasks/optionnal-task/optionnal-task.component.html 0 → 100644
View file @ b0d43ca4
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece-attach piece-attach-left"></div>
<div class="piece-attach piece-attach-right"></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>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
</div>
<div class="piece-symbolchoice" [class]="displaySymbolChoice">
<div class="piece-symbolchoice-header">
<label>Choisir un symbole de tâche commune :</label>
<div><mat-icon fontIcon="delete" (click)="setSymbol('','')"></mat-icon></div>
</div>
<div class="piece-symbolchoice-symbols">
<mat-icon [style.color]="'#d79297'" fontIcon="favorite" (click)="setSymbol('favorite','#d79297')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="diamond" (click)="setSymbol('diamond','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#e9ec54'" fontIcon="star" (click)="setSymbol('star','#e9ec54')"></mat-icon>
<mat-icon [style.color]="'#f5cee3'" fontIcon="hexagon" (click)="setSymbol('hexagon','#f5cee3')"></mat-icon>
<mat-icon [style.color]="'#d3d2d2'" fontIcon="add" (click)="setSymbol('add','#d3d2d2')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="circle" (click)="setSymbol('circle','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#b6cc87'" fontIcon="eco" (click)="setSymbol('eco','#b6cc87')"></mat-icon>
<mat-icon [style.color]="'#d0bbdb'" fontIcon="play_arrow" (click)="setSymbol('play_arrow','#d0bbdb')"></mat-icon>
<mat-icon [style.color]="'#8b7e64'" fontIcon="remove" (click)="setSymbol('remove','#8b7e64')"></mat-icon>
</div>
<div class="piece-symbolchoice-symbols">
<mat-icon [style.color]="'#d79297'" fontIcon="square" (click)="setSymbol('square','#d79297')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#e9ec54'" fontIcon="square" (click)="setSymbol('square','#e9ec54')"></mat-icon>
<mat-icon [style.color]="'#f5cee3'" fontIcon="square" (click)="setSymbol('square','#f5cee3')"></mat-icon>
<mat-icon [style.color]="'#d3d2d2'" fontIcon="square" (click)="setSymbol('square','#d3d2d2')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#b6cc87'" fontIcon="square" (click)="setSymbol('square','#b6cc87')"></mat-icon>
<mat-icon [style.color]="'#d0bbdb'" fontIcon="square" (click)="setSymbol('square','#d0bbdb')"></mat-icon>
<mat-icon [style.color]="'#8b7e64'" fontIcon="square" (click)="setSymbol('square','#8b7e64')"></mat-icon>
</div>
</div>
<div class="piece-prerequires" [class]="displayPrequires">
<div class="piece-prerequires-prerequires">
<label class="piece-prerequires-title">Antécédents</label>
<div class="piece-prerequires-form">
<div class="piece-prerequires-prerequires-element">
<input name="antecedent" type="checkbox" value="true"/>
<label for="antecedent">EX1</label>
</div>
<div class="piece-prerequires-prerequires-element">
<input name="antecedent" type="checkbox"/>
<label for="antecedent">EX2</label>
</div>
</div>
</div>
<div class="piece-prerequires-ressources">
<label class="piece-prerequires-title">Ressources & attributs</label>
<div class="piece-prerequires-form">
<div class="piece-prerequires-ressources-element">
<div class="piece-prerequires-ressources-element-checkbox">
<input name="ressource" type="checkbox"/>
<label for="ressource">Pain</label>
</div>
<div class="piece-prerequires-ressources-element-quantity">
<select name="ressource">
<option><</option>
<option><=</option>
<option>=</option>
<option>>=</option>
<option>></option>
</select>
<input type="text" value="1"/>
</div>
</div>
<div class="piece-prerequires-ressources-element">
<div class="piece-prerequires-ressources-element-checkbox">
<input name="ressource" type="checkbox"/>
<label for="ressource">Citron</label>
</div>
<div class="piece-prerequires-ressources-element-quantity">
<select name="ressource">
<option><</option>
<option><=</option>
<option>=</option>
<option>>=</option>
<option>></option>
</select>
<input type="text" value="1"/>
</div>
</div>
</div>
</div>
</div>
<div class="piece-form">
<div class="piece-form-top">
<input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
<div class="piece-form-top-title">Tâche<br>optionnelle</div>
<button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
<mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
</button>
</div>
<textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
<div class="piece-form-bottom">
<button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
Prérequis
</button>
<div class="piece-form-bottom-duration">
<input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
<select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
<option selected value="UT">UT</option>
<option value="min">min</option>
<option value="tours">tours</option>
</select>
</div>
</div>
</div>
</div>
src/app/pieces/task/task.component.scss → src/app/pieces/tasks/optionnal-task/optionnal-task.component.scss
View file @ b0d43ca4
.piece { .piece {
--piece-background-color: #b9dfe3; --piece-background-color: #e8e3b3;
width: 400px; width: 400px;
height: 400px; height: 400px;
...@@ -23,17 +23,21 @@ ...@@ -23,17 +23,21 @@
display: flex; display: flex;
padding: 15px 20px 15px 20px; padding: 15px 20px 15px 20px;
justify-content: space-around; justify-content: space-around;
mat-icon { mat-icon {
cursor: pointer; cursor: pointer;
transform: scale(1.1); transform: scale(1.1);
} }
mat-icon:hover { mat-icon:hover {
opacity: 0.75; opacity: 0.75;
} }
} }
&-menu.show { &-menu.show {
transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0);
} }
&-menu.hide { &-menu.hide {
transform: translateX(-50%) translateY(100%); transform: translateX(-50%) translateY(100%);
} }
...@@ -46,6 +50,7 @@ ...@@ -46,6 +50,7 @@
border-top-right-radius: 10px; border-top-right-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
border: solid black 1px; border: solid black 1px;
border-left: none;
padding: 10px; padding: 10px;
right: 0; right: 0;
top: 5px; top: 5px;
...@@ -55,14 +60,22 @@ ...@@ -55,14 +60,22 @@
label { label {
font-size: 14px; font-size: 14px;
} }
mat-icon { mat-icon {
cursor: pointer; cursor: pointer;
transform: scale(1.2); transform: scale(1.2);
} }
mat-icon:hover { mat-icon:hover {
opacity: 0.75; opacity: 0.75;
} }
&-header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
&-symbols { &-symbols {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -70,13 +83,113 @@ ...@@ -70,13 +83,113 @@
margin-top: 10px; margin-top: 10px;
} }
} }
&-symbolchoice.show { &-symbolchoice.show {
transform: translateX(100%); transform: translateX(100%);
} }
&-prerequires {
position: absolute;
width: 350px;
height: 150px;
background-color: #f7f7f7;
z-index: -1;
bottom: 0;
left: 25px;
border: solid black 1px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
transition: transform 0.5s ease;
border-top: none;
display: flex;
flex-direction: row;
&-title {
margin-left: auto;
margin-right: auto;
font-family: 'Glacial Indifference Bold';
font-size: 14px;
}
&-form {
display: flex;
flex-direction: column;
overflow: scroll;
}
&-prerequires {
position: relative;
border-right: solid #a3a3a3 1px;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 90%;
border-bottom-left-radius: 10px;
display: flex;
flex-direction: column;
}
&-ressources {
width: 50%;
height: 90%;
border-bottom-right-radius: 10px;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 90%;
border-bottom-left-radius: 10px;
display: flex;
flex-direction: column;
&-element {
display: flex;
flex-direction: row;
width: 100%;
margin-top: 5px;
&-checkbox {
position: relative;
width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-quantity {
position: relative;
width: 50%;
display: flex;
padding-right: 5px;
justify-content: flex-end;
input {
width: 20px;
border: none;
border-radius: 10px;
text-align: center;
}
select {
width: 40px;
background-color: white;
border: none;
border-radius: 10px;
margin-right: 5px;
}
}
}
}
}
&-prerequires.show {
transform: translateY(100%);
}
&-attach { &-attach {
z-index: 1; z-index: 1;
&-left {
&-right {
border-top: solid black 1px; border-top: solid black 1px;
border-right: solid black 1px; border-right: solid black 1px;
width: 40px; width: 40px;
...@@ -88,7 +201,7 @@ ...@@ -88,7 +201,7 @@
top: 200px; top: 200px;
} }
&-right { &-left {
border-top: solid black 1px; border-top: solid black 1px;
border-right: solid black 1px; border-right: solid black 1px;
width: 40px; width: 40px;
...@@ -109,19 +222,24 @@ ...@@ -109,19 +222,24 @@
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
z-index: 2; z-index: 2;
input { input {
height: 40px; height: 40px;
border-radius: 10px; border-radius: 10px;
border: none; border: none;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
font-size: 15px;
} }
textarea { textarea {
border-radius: 20px; border-radius: 20px;
padding: 10px; padding: 10px;
border: none; border: none;
resize: none; resize: none;
flex-grow: 1; flex-grow: 1;
font-size: 15px;
} }
select { select {
background-color: white; background-color: white;
border: none; border: none;
...@@ -129,50 +247,55 @@ ...@@ -129,50 +247,55 @@
border-radius: 10px; border-radius: 10px;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
} }
&-top { &-top {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between;
&-identifier { &-identifier {
width: 50px; width: 50px;
text-align: center; text-align: center;
} }
&-title { &-title {
font-size: 25px; font-size: 25px;
//font-weight: bold;
font-family: 'Glacial Indifference Bold'; font-family: 'Glacial Indifference Bold';
position: relative;
margin-left: 10px;
} }
&-symbol { &-symbol {
width: 50px; width: 50px;
height: 40px; height: 50px;
background-color: white; background-color: white;
border-radius: 10px; border-radius: 10px;
padding: 5px 10px 5px 10px;
cursor: pointer; cursor: pointer;
position: absolute;
right: 10px;
mat-icon { mat-icon {
position: relative; transform: scale(1.3);
left: 50%;
height: 50%;
transform: translateX(-50%) translateY(50%) scale(1.3);
overflow: visible; overflow: visible;
} }
} }
&-symbol:hover{
opacity: 0.75;
}
} }
&-content { &-content {
margin-top: 10px; margin-top: 10px;
height: 100%; height: 100%;
margin-bottom: 10px; margin-bottom: 10px;
} }
&-bottom { &-bottom {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-bottom: 10px; margin-bottom: 10px;
justify-content: space-between; justify-content: space-between;
&-duration { &-duration {
display: flex;
input { input {
border-top-right-radius: 0px; border-top-right-radius: 0px;
border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
...@@ -180,6 +303,7 @@ ...@@ -180,6 +303,7 @@
text-align: center; text-align: center;
z-index: 2; z-index: 2;
} }
select { select {
width: 60px; width: 60px;
border-top-left-radius: 0px; border-top-left-radius: 0px;
...@@ -187,6 +311,17 @@ ...@@ -187,6 +311,17 @@
z-index: 1; z-index: 1;
} }
} }
&-prerequires {
width: 100px;
height: 50px;
background-color: white;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
} }
} }
} }
......
src/app/pieces/tasks/optionnal-task/optionnal-task.component.spec.ts 0 → 100644
View file @ b0d43ca4
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { OptionnalTaskComponent } from './optionnal-task.component';
describe('OptionnalTaskComponent', () => {
let component: OptionnalTaskComponent;
let fixture: ComponentFixture<OptionnalTaskComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ OptionnalTaskComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(OptionnalTaskComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pieces/tasks/optionnal-task/optionnal-task.component.ts 0 → 100644
View file @ b0d43ca4
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-optionnal-task',
templateUrl: './optionnal-task.component.html',
styleUrls: ['./optionnal-task.component.scss']
})
export class OptionnalTaskComponent implements OnInit {
displayMenu: string = 'hide';
displaySymbolChoice: string = 'hide';
displayPrequires: string = 'hide';
durationUnit: string = 'UT';
duration: number = 1;
pieceWidth: string = '400px';
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) {
this.pieceWidth = (this.duration*400)+'px';
} else if(this.duration > 10) {
this.pieceWidth = '4000px';
} else {
this.pieceWidth = '400px';
}
} else {
this.pieceWidth = '400px';
}
}
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
onClickDots(): void {
}
changeDisplaySymbolChoice(): void {
if(this.displaySymbolChoice == 'show') {
this.displaySymbolChoice = 'hide';
} else {
this.displaySymbolChoice = 'show';
}
}
setSymbol(symbol: string, symbolColor: string): void {
this.symbol = symbol;
this.symbolColor = symbolColor;
this.displaySymbolChoice = 'hide';
}
changeDisplayPrerequires(): void {
if(this.displayPrequires == 'show') {
this.displayPrequires = 'hide';
} else {
this.displayPrequires = 'show';
}
}
}
src/app/pieces/tasks/random-event/random-event.component.html 0 → 100644
View file @ b0d43ca4
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece-attach piece-attach-left"></div>
<div class="piece-attach piece-attach-right"></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>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
</div>
<div class="piece-symbolchoice" [class]="displaySymbolChoice">
<div class="piece-symbolchoice-header">
<label>Choisir un symbole de tâche commune :</label>
<div><mat-icon fontIcon="delete" (click)="setSymbol('','')"></mat-icon></div>
</div>
<div class="piece-symbolchoice-symbols">
<mat-icon [style.color]="'#d79297'" fontIcon="favorite" (click)="setSymbol('favorite','#d79297')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="diamond" (click)="setSymbol('diamond','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#e9ec54'" fontIcon="star" (click)="setSymbol('star','#e9ec54')"></mat-icon>
<mat-icon [style.color]="'#f5cee3'" fontIcon="hexagon" (click)="setSymbol('hexagon','#f5cee3')"></mat-icon>
<mat-icon [style.color]="'#d3d2d2'" fontIcon="add" (click)="setSymbol('add','#d3d2d2')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="circle" (click)="setSymbol('circle','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#b6cc87'" fontIcon="eco" (click)="setSymbol('eco','#b6cc87')"></mat-icon>
<mat-icon [style.color]="'#d0bbdb'" fontIcon="play_arrow" (click)="setSymbol('play_arrow','#d0bbdb')"></mat-icon>
<mat-icon [style.color]="'#8b7e64'" fontIcon="remove" (click)="setSymbol('remove','#8b7e64')"></mat-icon>
</div>
<div class="piece-symbolchoice-symbols">
<mat-icon [style.color]="'#d79297'" fontIcon="square" (click)="setSymbol('square','#d79297')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#e9ec54'" fontIcon="square" (click)="setSymbol('square','#e9ec54')"></mat-icon>
<mat-icon [style.color]="'#f5cee3'" fontIcon="square" (click)="setSymbol('square','#f5cee3')"></mat-icon>
<mat-icon [style.color]="'#d3d2d2'" fontIcon="square" (click)="setSymbol('square','#d3d2d2')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#b6cc87'" fontIcon="square" (click)="setSymbol('square','#b6cc87')"></mat-icon>
<mat-icon [style.color]="'#d0bbdb'" fontIcon="square" (click)="setSymbol('square','#d0bbdb')"></mat-icon>
<mat-icon [style.color]="'#8b7e64'" fontIcon="square" (click)="setSymbol('square','#8b7e64')"></mat-icon>
</div>
</div>
<div class="piece-prerequires" [class]="displayPrequires">
<div class="piece-prerequires-prerequires">
<label class="piece-prerequires-title">Antécédents</label>
<div class="piece-prerequires-form">
<div class="piece-prerequires-prerequires-element">
<input name="antecedent" type="checkbox" value="true"/>
<label for="antecedent">EX1</label>
</div>
<div class="piece-prerequires-prerequires-element">
<input name="antecedent" type="checkbox"/>
<label for="antecedent">EX2</label>
</div>
</div>
</div>
<div class="piece-prerequires-ressources">
<label class="piece-prerequires-title">Ressources & attributs</label>
<div class="piece-prerequires-form">
<div class="piece-prerequires-ressources-element">
<div class="piece-prerequires-ressources-element-checkbox">
<input name="ressource" type="checkbox"/>
<label for="ressource">Pain</label>
</div>
<div class="piece-prerequires-ressources-element-quantity">
<select name="ressource">
<option><</option>
<option><=</option>
<option>=</option>
<option>>=</option>
<option>></option>
</select>
<input type="text" value="1"/>
</div>
</div>
<div class="piece-prerequires-ressources-element">
<div class="piece-prerequires-ressources-element-checkbox">
<input name="ressource" type="checkbox"/>
<label for="ressource">Citron</label>
</div>
<div class="piece-prerequires-ressources-element-quantity">
<select name="ressource">
<option><</option>
<option><=</option>
<option>=</option>
<option>>=</option>
<option>></option>
</select>
<input type="text" value="1"/>
</div>
</div>
</div>
</div>
</div>
<div class="piece-form">
<div class="piece-form-top">
<input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
<div class="piece-form-top-title">Événement<br>aléatoire</div>
<button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
<mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
</button>
</div>
<textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
<div class="piece-form-bottom">
<button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
Prérequis
</button>
<div class="piece-form-bottom-duration">
<input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
<select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
<option selected value="UT">UT</option>
<option value="min">min</option>
<option value="tours">tours</option>
</select>
</div>
</div>
</div>
</div>
src/app/pieces/tasks/random-event/random-event.component.scss 0 → 100644
View file @ b0d43ca4
.piece {
--piece-background-color: #bfdaa3;
width: 400px;
height: 400px;
position: relative;
background-color: var(--piece-background-color);
transition: all 0.5s ease;
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
top: -50px;
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%);
}
&-symbolchoice {
position: absolute;
background-color: #f7f7f7;
width: 300px;
height: 100px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border: solid black 1px;
border-left: none;
padding: 10px;
right: 0;
top: 5px;
z-index: -1;
transition: transform 0.5s ease;
label {
font-size: 14px;
}
mat-icon {
cursor: pointer;
transform: scale(1.2);
}
mat-icon:hover {
opacity: 0.75;
}
&-header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
&-symbols {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 10px;
}
}
&-symbolchoice.show {
transform: translateX(100%);
}
&-prerequires {
position: absolute;
width: 350px;
height: 150px;
background-color: #f7f7f7;
z-index: -1;
bottom: 0;
left: 25px;
border: solid black 1px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
transition: transform 0.5s ease;
border-top: none;
display: flex;
flex-direction: row;
&-title {
margin-left: auto;
margin-right: auto;
font-family: 'Glacial Indifference Bold';
font-size: 14px;
}
&-form {
display: flex;
flex-direction: column;
overflow: scroll;
}
&-prerequires {
position: relative;
border-right: solid #a3a3a3 1px;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 90%;
border-bottom-left-radius: 10px;
display: flex;
flex-direction: column;
}
&-ressources {
width: 50%;
height: 90%;
border-bottom-right-radius: 10px;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 90%;
border-bottom-left-radius: 10px;
display: flex;
flex-direction: column;
&-element {
display: flex;
flex-direction: row;
width: 100%;
margin-top: 5px;
&-checkbox {
position: relative;
width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-quantity {
position: relative;
width: 50%;
display: flex;
padding-right: 5px;
justify-content: flex-end;
input {
width: 20px;
border: none;
border-radius: 10px;
text-align: center;
}
select {
width: 40px;
background-color: white;
border: none;
border-radius: 10px;
margin-right: 5px;
}
}
}
}
}
&-prerequires.show {
transform: translateY(100%);
}
&-attach {
z-index: 1;
&-right {
border-top: solid black 1px;
border-right: solid black 1px;
width: 40px;
height: 40px;
background-color: var(--piece-background-color);
transform: translateY(-50%) rotate(45deg);
position: absolute;
right: -20px;
top: 200px;
}
&-left {
border-top: solid black 1px;
border-right: solid black 1px;
width: 40px;
height: 40px;
background-color: var(--background-color);
transform: translateY(-50%) rotate(45deg);
position: absolute;
left: -20px;
top: 200px;
}
}
&-form {
height: 100%;
padding: 0px 10px 0px 35px;
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
z-index: 2;
input {
height: 40px;
border-radius: 10px;
border: none;
padding: 5px 10px 5px 10px;
font-size: 15px;
}
textarea {
border-radius: 20px;
padding: 10px;
border: none;
resize: none;
flex-grow: 1;
font-size: 15px;
background-image: url("../../../../assets/background-images/event.png");
background-position: center;
background-repeat: no-repeat;
background-size: 100px;
}
select {
background-color: white;
border: none;
height: 50px;
border-radius: 10px;
padding: 5px 10px 5px 10px;
}
&-top {
margin-top: 20px;
display: flex;
flex-direction: row;
&-identifier {
width: 50px;
text-align: center;
}
&-title {
font-size: 25px;
font-family: 'Glacial Indifference Bold';
position: relative;
margin-left: 10px;
}
&-symbol {
width: 50px;
height: 50px;
background-color: white;
border-radius: 10px;
cursor: pointer;
position: absolute;
right: 10px;
mat-icon {
transform: scale(1.3);
overflow: visible;
}
}
}
&-content {
margin-top: 10px;
height: 100%;
margin-bottom: 10px;
}
&-bottom {
display: flex;
flex-direction: row;
margin-bottom: 10px;
justify-content: space-between;
&-duration {
display: flex;
input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: 20px;
text-align: center;
z-index: 2;
}
select {
width: 60px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
z-index: 1;
}
}
&-prerequires {
width: 100px;
height: 50px;
background-color: white;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: 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/tasks/random-event/random-event.component.spec.ts 0 → 100644
View file @ b0d43ca4
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RandomEventComponent } from './random-event.component';
describe('RandomEventComponent', () => {
let component: RandomEventComponent;
let fixture: ComponentFixture<RandomEventComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ RandomEventComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(RandomEventComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pieces/tasks/random-event/random-event.component.ts 0 → 100644
View file @ b0d43ca4
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-random-event',
templateUrl: './random-event.component.html',
styleUrls: ['./random-event.component.scss']
})
export class RandomEventComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
displayMenu: string = 'hide';
displaySymbolChoice: string = 'hide';
displayPrequires: string = 'hide';
durationUnit: string = 'UT';
duration: number = 1;
pieceWidth: string = '400px';
symbol: string = ''; // A changer quand implémentation des données
symbolColor: string = ''; //A changer quand implémentation des données
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';
}
}
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
onClickDots(): void {
}
changeDisplaySymbolChoice(): void {
if(this.displaySymbolChoice == 'show') {
this.displaySymbolChoice = 'hide';
} else {
this.displaySymbolChoice = 'show';
}
}
setSymbol(symbol: string, symbolColor: string): void {
this.symbol = symbol;
this.symbolColor = symbolColor;
this.displaySymbolChoice = 'hide';
}
changeDisplayPrerequires(): void {
if(this.displayPrequires == 'show') {
this.displayPrequires = 'hide';
} else {
this.displayPrequires = 'show';
}
}
}
src/app/pieces/tasks/repeat-task/repeat-task.component.html 0 → 100644
View file @ b0d43ca4
<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<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>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
</div>
<div class="piece-form">
<label>Recommencer<br>le tour jusqu'à ce que :</label>
<textarea></textarea>
</div>
</div>
src/app/pieces/annexe-task/annexe-task.component.scss → src/app/pieces/tasks/repeat-task/repeat-task.component.scss
View file @ b0d43ca4
.piece { .piece {
--piece-background-color: #bccecc; --piece-background-color: #abbcc6;
width: 400px; width: 400px;
height: 400px; height: 400px;
position: relative; position: relative;
background-color: var(--piece-background-color); background-color: var(--piece-background-color);
//border: solid black 2px; transition: all 0.5s ease;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
&-attach { &-menu {
z-index: 1;
&-left {
border-top: solid black 1px;
border-right: solid black 1px;
width: 40px;
height: 40px;
background-color: var(--piece-background-color);
transform: translateY(-50%) rotate(45deg);
position: absolute; position: absolute;
right: -20px; width: 150px;
top: 200px; height: 50px;
background-color: #f7f7f7;
z-index: -1;
top: -50px;
left: 30%;
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;
}
} }
&-right { &-menu.show {
transform: translateX(-50%) translateY(0);
}
&-menu.hide {
transform: translateX(-50%) translateY(100%);
}
&-attach {
z-index: 1;
&-left {
border-top: solid black 1px; border-top: solid black 1px;
border-right: solid black 1px; border-right: solid black 1px;
width: 40px; width: 40px;
...@@ -31,13 +57,35 @@ ...@@ -31,13 +57,35 @@
position: absolute; position: absolute;
left: -20px; left: -20px;
top: 200px; top: 200px;
//transform: translateY(-50%);
} }
} }
&-form { &-form {
display: flex; height: 100%;
padding: 0px 10px 0px 35px;
position: relative; position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
z-index: 2;
label {
margin-top: 15%;
font-family: 'Glacial Indifference Bold';
margin-bottom: 10px;
text-align: center;
width: 70%;
font-size: 17px;
}
textarea {
width: 80%;
border: none;
border-radius: 10px;
resize: none;
height: 50%;
font-size: 15px;
}
} }
} }
...@@ -49,4 +97,6 @@ ...@@ -49,4 +97,6 @@
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
border: 1px solid black; border: 1px solid black;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
} }
\ No newline at end of file
src/app/pieces/tasks/repeat-task/repeat-task.component.spec.ts 0 → 100644
View file @ b0d43ca4
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RepeatTaskComponent } from './repeat-task.component';
describe('RepeatTaskComponent', () => {
let component: RepeatTaskComponent;
let fixture: ComponentFixture<RepeatTaskComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ RepeatTaskComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(RepeatTaskComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pieces/tasks/repeat-task/repeat-task.component.ts 0 → 100644
View file @ b0d43ca4
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-repeat-task',
templateUrl: './repeat-task.component.html',
styleUrls: ['./repeat-task.component.scss']
})
export class RepeatTaskComponent implements OnInit {
displayMenu: string = 'hide';
constructor() { }
ngOnInit(): void {
}
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
onClickDots(): void {
}
}
src/app/pieces/task/task.component.html → src/app/pieces/tasks/task/task.component.html
View file @ b0d43ca4
...@@ -10,7 +10,10 @@ ...@@ -10,7 +10,10 @@
</div> </div>
<div class="piece-symbolchoice" [class]="displaySymbolChoice"> <div class="piece-symbolchoice" [class]="displaySymbolChoice">
<div class="piece-symbolchoice-header">
<label>Choisir un symbole de tâche commune :</label> <label>Choisir un symbole de tâche commune :</label>
<div><mat-icon fontIcon="delete" (click)="setSymbol('','')"></mat-icon></div>
</div>
<div class="piece-symbolchoice-symbols"> <div class="piece-symbolchoice-symbols">
<mat-icon [style.color]="'#d79297'" fontIcon="favorite" (click)="setSymbol('favorite','#d79297')"></mat-icon> <mat-icon [style.color]="'#d79297'" fontIcon="favorite" (click)="setSymbol('favorite','#d79297')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="diamond" (click)="setSymbol('diamond','#9ad5ec')"></mat-icon> <mat-icon [style.color]="'#9ad5ec'" fontIcon="diamond" (click)="setSymbol('diamond','#9ad5ec')"></mat-icon>
...@@ -33,23 +36,74 @@ ...@@ -33,23 +36,74 @@
<mat-icon [style.color]="'#d0bbdb'" fontIcon="square" (click)="setSymbol('square','#d0bbdb')"></mat-icon> <mat-icon [style.color]="'#d0bbdb'" fontIcon="square" (click)="setSymbol('square','#d0bbdb')"></mat-icon>
<mat-icon [style.color]="'#8b7e64'" fontIcon="square" (click)="setSymbol('square','#8b7e64')"></mat-icon> <mat-icon [style.color]="'#8b7e64'" fontIcon="square" (click)="setSymbol('square','#8b7e64')"></mat-icon>
</div> </div>
</div>
<div class="piece-prerequires" [class]="displayPrequires">
<div class="piece-prerequires-prerequires">
<label class="piece-prerequires-title">Antécédents</label>
<div class="piece-prerequires-form">
<div class="piece-prerequires-prerequires-element">
<input name="antecedent" type="checkbox" value="true"/>
<label for="antecedent">EX1</label>
</div>
<div class="piece-prerequires-prerequires-element">
<input name="antecedent" type="checkbox"/>
<label for="antecedent">EX2</label>
</div>
</div>
</div>
<div class="piece-prerequires-ressources">
<label class="piece-prerequires-title">Ressources & attributs</label>
<div class="piece-prerequires-form">
<div class="piece-prerequires-ressources-element">
<div class="piece-prerequires-ressources-element-checkbox">
<input name="ressource" type="checkbox"/>
<label for="ressource">Pain</label>
</div>
<div class="piece-prerequires-ressources-element-quantity">
<select name="ressource">
<option><</option>
<option><=</option>
<option>=</option>
<option>>=</option>
<option>></option>
</select>
<input type="text" value="1"/>
</div>
</div>
<div class="piece-prerequires-ressources-element">
<div class="piece-prerequires-ressources-element-checkbox">
<input name="ressource" type="checkbox"/>
<label for="ressource">Citron</label>
</div>
<div class="piece-prerequires-ressources-element-quantity">
<select name="ressource">
<option><</option>
<option><=</option>
<option>=</option>
<option>>=</option>
<option>></option>
</select>
<input type="text" value="1"/>
</div>
</div>
</div>
</div>
</div> </div>
<div class="piece-form"> <div class="piece-form">
<div class="piece-form-top"> <div class="piece-form-top">
<input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/> <input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
<div class="piece-form-top-title">Tâche</div> <div class="piece-form-top-title">Tâche</div>
<div class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()"> <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
<mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon> <mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
</button>
</div> </div>
</div> <textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
<textarea class="piece-form-content" placeholder="Acheter des citrons"></textarea>
<div class="piece-form-bottom"> <div class="piece-form-bottom">
<select class="piece-form-bottom-antecedent" name="antecedent"> <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
<option selected value="0">/</option> Prérequis
<option value="1">1</option> </button>
</select>
<div class="piece-form-bottom-duration"> <div class="piece-form-bottom-duration">
<input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/> <input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
<select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()"> <select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
......
src/app/pieces/tasks/task/task.component.scss 0 → 100644
View file @ b0d43ca4
.piece {
--piece-background-color: #b9dfe3;
width: 400px;
height: 400px;
position: relative;
background-color: var(--piece-background-color);
transition: all 0.5s ease;
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
top: -50px;
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%);
}
&-symbolchoice {
position: absolute;
background-color: #f7f7f7;
width: 300px;
height: 100px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border: solid black 1px;
border-left: none;
padding: 10px;
right: 0;
top: 5px;
z-index: -1;
transition: transform 0.5s ease;
label {
font-size: 14px;
}
mat-icon {
cursor: pointer;
transform: scale(1.2);
}
mat-icon:hover {
opacity: 0.75;
}
&-header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
&-symbols {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 10px;
}
}
&-symbolchoice.show {
transform: translateX(100%);
}
&-prerequires {
position: absolute;
width: 350px;
height: 150px;
background-color: #f7f7f7;
z-index: -1;
bottom: 0;
left: 25px;
border: solid black 1px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
transition: transform 0.5s ease;
border-top: none;
display: flex;
flex-direction: row;
&-title {
margin-left: auto;
margin-right: auto;
font-family: 'Glacial Indifference Bold';
font-size: 14px;
}
&-form {
display: flex;
flex-direction: column;
overflow: scroll;
}
&-prerequires {
position: relative;
border-right: solid #a3a3a3 1px;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 90%;
border-bottom-left-radius: 10px;
display: flex;
flex-direction: column;
}
&-ressources {
width: 50%;
height: 90%;
border-bottom-right-radius: 10px;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 90%;
border-bottom-left-radius: 10px;
display: flex;
flex-direction: column;
&-element {
display: flex;
flex-direction: row;
width: 100%;
margin-top: 5px;
&-checkbox {
position: relative;
width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-quantity {
position: relative;
width: 50%;
display: flex;
padding-right: 5px;
justify-content: flex-end;
input {
width: 20px;
border: none;
border-radius: 10px;
text-align: center;
}
select {
width: 40px;
background-color: white;
border: none;
border-radius: 10px;
margin-right: 5px;
}
}
}
}
}
&-prerequires.show {
transform: translateY(100%);
}
&-attach {
z-index: 1;
&-right {
border-top: solid black 1px;
border-right: solid black 1px;
width: 40px;
height: 40px;
background-color: var(--piece-background-color);
transform: translateY(-50%) rotate(45deg);
position: absolute;
right: -20px;
top: 200px;
}
&-left {
border-top: solid black 1px;
border-right: solid black 1px;
width: 40px;
height: 40px;
background-color: var(--background-color);
transform: translateY(-50%) rotate(45deg);
position: absolute;
left: -20px;
top: 200px;
}
}
&-form {
height: 100%;
padding: 0px 10px 0px 35px;
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
z-index: 2;
input {
height: 40px;
border-radius: 10px;
border: none;
padding: 5px 10px 5px 10px;
font-size: 15px;
}
textarea {
border-radius: 20px;
padding: 10px;
border: none;
resize: none;
flex-grow: 1;
font-size: 15px;
background-image: url("../../../../assets/background-images/tache.png");
background-position: center;
background-repeat: no-repeat;
background-size: 100px;
}
select {
background-color: white;
border: none;
height: 50px;
border-radius: 10px;
padding: 5px 10px 5px 10px;
}
&-top {
margin-top: 20px;
display: flex;
flex-direction: row;
&-identifier {
width: 50px;
text-align: center;
}
&-title {
font-size: 25px;
font-family: 'Glacial Indifference Bold';
position: relative;
margin-left: 10px;
}
&-symbol {
width: 50px;
height: 50px;
background-color: white;
border-radius: 10px;
cursor: pointer;
position: absolute;
right: 10px;
mat-icon {
transform: scale(1.3);
overflow: visible;
}
}
}
&-content {
margin-top: 10px;
height: 100%;
margin-bottom: 10px;
}
&-bottom {
display: flex;
flex-direction: row;
margin-bottom: 10px;
justify-content: space-between;
&-duration {
display: flex;
input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: 20px;
text-align: center;
z-index: 2;
}
select {
width: 60px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
z-index: 1;
}
}
&-prerequires {
width: 100px;
height: 50px;
background-color: white;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: 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/task/task.component.ts → src/app/pieces/tasks/task/task.component.ts
View file @ b0d43ca4
...@@ -7,13 +7,9 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,13 +7,9 @@ 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';
durationUnit: string = 'UT'; durationUnit: string = 'UT';
duration: number = 1; duration: number = 1;
...@@ -22,14 +18,20 @@ export class TaskComponent implements OnInit { ...@@ -22,14 +18,20 @@ 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) { 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'; this.pieceWidth = '400px';
} else if(this.duration == 2) {
this.pieceWidth = '800px';
} else if(this.duration >= 3) {
this.pieceWidth = '1200px';
} }
} else { } else {
this.pieceWidth = '400px'; this.pieceWidth = '400px';
...@@ -66,6 +68,14 @@ export class TaskComponent implements OnInit { ...@@ -66,6 +68,14 @@ export class TaskComponent implements OnInit {
this.displaySymbolChoice = 'hide'; this.displaySymbolChoice = 'hide';
} }
changeDisplayPrerequires(): void {
if(this.displayPrequires == 'show') {
this.displayPrequires = 'hide';
} else {
this.displayPrequires = 'show';
}
}
} }
src/app/sider-pieces/characters/characters.component.html 0 → 100644
View file @ b0d43ca4
<div class="piece">
<div class="piece-form">
<div class="piece-form-create">
<div class="piece-form-title">Créer un nouveau personnage</div>
<div class="piece-form-create-top">
<mat-icon fontIcon="person_add"></mat-icon>
<div class="piece-form-create-top-name">
<label for="name">Nom</label>
<input name="name" type="text" />
</div>
</div>
<div class="piece-form-create-infos">
<div class="piece-form-create-infos-description">
<label for="description">Description</label>
<textarea name="description"></textarea>
</div>
<!--
<div>
<div class="piece-form-create-infos-phone">
<label for="phonenumber">N° tél.</label>
<input name="phonenumber" type="tel"/>
</div>
<div class="piece-form-create-infos-title">
<label for="title">Titre</label>
<input name="title" type="text"/>
</div>
</div>
-->
<div class="piece-form-create-infos-color">
<label for="color">Couleur</label>
<input name="color" type="color" />
</div>
</div>
<button mat-button>Créer</button>
</div>
<div class="piece-form-select">
<div class="piece-form-title">Sélectionner un personnage déjà créé</div>
<div class="piece-form-select-container">
<mat-icon fontIcon="person"></mat-icon>
<div class="piece-form-select-container-select">
<label for="name">Nom</label>
<select name="name">
<option>test</option>
</select>
</div>
</div>
<button mat-button>Sélectionner</button>
</div>
<div class="piece-form-delete">
<div class="piece-form-title">Supprimer un personnage</div>
<div class="piece-form-delete-container">
<mat-icon fontIcon="person_off"></mat-icon>
<div class="piece-form-delete-container-select">
<label for="name">Nom</label>
<select name="name">
<option>test</option>
</select>
</div>
</div>
<button mat-button>Supprimer</button>
</div>
<div>
<div class="piece-form-title">Personnage(s) utilisé(s)</div>
<app-character></app-character>
<app-character></app-character>
</div>
</div>
</div>
\ No newline at end of file
src/app/sider-pieces/characters/characters.component.scss 0 → 100644
View file @ b0d43ca4
.piece {
--piece-background-color: #ce7b66;
width: 300px;
position: relative;
background-color: var(--piece-background-color);
border: solid black 1px;
border-radius: 10px;
label {
margin-right: 10px;
}
input[type="text"],
input[type="tel"] {
border: none;
border-radius: 10px;
height: 20px;
padding: 5px 5px 5px 5px;
}
input[type="color"] {
border: none;
border-radius: 10px;
background-color: white;
}
textarea {
border: none;
border-radius: 10px;
min-height: 50px;
max-height: 100px;
resize: vertical;
padding: 5px 10px 5px 10px;
}
select {
border-radius: 10px;
background-color: white;
border: none;
padding: 5px 10px 5px 10px;
//height: 20px;
}
mat-icon {
transform: scale(2);
color: white;
margin-left: 10px;
margin-right: 20px;
}
button {
margin-top: 5px;
background-color: white;
border-radius: 10px;
position: relative;
left: 100%;
transform: translateX(-100%);
}
&-form {
margin: 10px 5px 10px 5px;
display: flex;
flex-direction: column;
&-title {
font-family: "Glacial Indifference Bold";
margin-bottom: 10px;
}
&-create {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid black 1px;
&-top {
display: flex;
flex-direction: row;
width: 100%;
&-name {
display: flex;
justify-content: flex-end;
input {
width: 75%;
}
}
}
&-infos {
margin-top: 10px;
&-description {
display: flex;
flex-direction: column;
}
&-phone {
display: flex;
margin-top: 5px;
justify-content: space-between;
}
&-title {
display: flex;
margin-top: 5px;
justify-content: space-between;
}
&-color {
margin-top: 5px;
}
}
}
&-select {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid black 1px;
&-container {
display: flex;
flex-direction: row;
width: 100%;
&-select {
display: flex;
flex-direction: row;
select {
width: 200px;
}
}
}
}
&-delete {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid black 1px;
&-container {
display: flex;
flex-direction: row;
width: 100%;
&-select {
display: flex;
flex-direction: row;
select {
width: 200px;
}
}
}
}
}
}
\ No newline at end of file
src/app/sider-pieces/characters/characters.component.spec.ts 0 → 100644
View file @ b0d43ca4
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CharactersComponent } from './characters.component';
describe('CharactersComponent', () => {
let component: CharactersComponent;
let fixture: ComponentFixture<CharactersComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ CharactersComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(CharactersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/sider-pieces/characters/characters.component.ts 0 → 100644
View file @ b0d43ca4
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-characters',
templateUrl: './characters.component.html',
styleUrls: ['./characters.component.scss']
})
export class CharactersComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
src/app/sider-pieces/comments/comments.component.html 0 → 100644
View file @ b0d43ca4
<div class="piece">
<div class="piece-form">
<div class="piece-form-title">Commentaires</div>
<div class="piece-form-comments">
<app-comment></app-comment>
</div>
<div class="piece-form-newcomment">
<div class="piece-form-newcomment-form">
<label>Nouveau commentaire</label>
<textarea></textarea>
</div>
<button mat-button>Ajouter un commentaire</button>
</div>
</div>
</div>
\ No newline at end of file
src/app/sider-pieces/comments/comments.component.scss 0 → 100644
View file @ b0d43ca4
.piece {
--piece-background-color: #f3ed97;
width: 300px;
position: relative;
background-color: var(--piece-background-color);
border: solid black 1px;
border-radius: 10px;
label {
margin-bottom: 10px;
}
textarea {
resize: vertical;
border-radius: 10px;
border: none;
min-height: 50px;
max-height: 200px;
padding: 5px 5px 5px 5px;
}
button {
border-radius: 10px;
background-color: white;
margin-top: 5px;
}
&-form {
margin: 10px 5px 10px 5px;
display: flex;
flex-direction: column;
&-title {
font-family: "Glacial Indifference Bold";
margin-bottom: 10px;
}
&-newcomment {
&-form {
display: flex;
flex-direction: column;
}
button {
position: relative;
left: 100%;
transform: translateX(-100%);
}
}
}
}
\ No newline at end of file
src/app/sider-pieces/comments/comments.component.spec.ts 0 → 100644
View file @ b0d43ca4
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CommentsComponent } from './comments.component';
describe('CommentsComponent', () => {
let component: CommentsComponent;
let fixture: ComponentFixture<CommentsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ CommentsComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(CommentsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/sider-pieces/comments/comments.component.ts 0 → 100644
View file @ b0d43ca4
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-comments',
templateUrl: './comments.component.html',
styleUrls: ['./comments.component.scss']
})
export class CommentsComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
src/app/sider-pieces/interupt/interupt.component.html 0 → 100644
View file @ b0d43ca4
<div class="piece">
<div class="piece-form">
<div class="piece-form-header">
<mat-icon fontIcon="front_hand"></mat-icon>
<div class="piece-form-header-label">
<label>Interruption de la tâche</label>
</div>
</div>
<div class="piece-form-textarea">
<textarea></textarea>
</div>
</div>
</div>
\ No newline at end of file
src/app/sider-pieces/interupt/interupt.component.scss 0 → 100644
View file @ b0d43ca4
.piece {
--piece-background-color: #f7c9cf;
width: 300px;
position: relative;
background-color: var(--piece-background-color);
border: solid black 1px;
border-radius: 10px;
&-form {
position: relative;
text-align: center;
margin: 10px 5px 10px 5px;
&-header {
display: flex;
flex-direction: row;
mat-icon {
position: absolute;
transform: scale(1.5);
color: white;
}
&-label {
display: flex;
flex-direction: row;
position: relative;
left: 50%;
transform: translateX(-50%);
font-family: 'Glacial Indifference Bold';
}
}
&-textarea {
display: flex;
flex-direction: column;
margin-top: 20px;
textarea {
padding: 5px 10px 5px 10px;
margin-top: 10px;
resize: vertical;
border: none;
border-radius: 10px;
flex-grow: 1;
min-height: 50px;
max-height: 100px;
background-image: url("../../../assets/background-images/interruption.png");
background-position: center;
background-repeat: no-repeat;
background-size: 20%;
}
}
}
}
\ No newline at end of file
src/app/sider-pieces/interupt/interupt.component.spec.ts 0 → 100644
View file @ b0d43ca4
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { InteruptComponent } from './interupt.component';
describe('InteruptComponent', () => {
let component: InteruptComponent;
let fixture: ComponentFixture<InteruptComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ InteruptComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(InteruptComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/sider-pieces/interupt/interupt.component.ts 0 → 100644
View file @ b0d43ca4
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-interupt',
templateUrl: './interupt.component.html',
styleUrls: ['./interupt.component.scss']
})
export class InteruptComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
src/app/sider-pieces/repeat/repeat.component.html 0 → 100644
View file @ b0d43ca4
<div class="piece">
<div class="piece-form">
<div class="piece-form-header">
<mat-icon fontIcon="refresh"></mat-icon>
<div class="piece-form-header-for">
<label>Répéter</label>
<input type="text"/>
<label>fois</label>
</div>
</div>
<div class="piece-form-while">
<label>ou jusqu'à ce que :</label>
<textarea></textarea>
</div>
</div>
</div>
\ No newline at end of file
src/app/sider-pieces/repeat/repeat.component.scss 0 → 100644
View file @ b0d43ca4
.piece {
--piece-background-color: #a6c9ec;
width: 300px;
position: relative;
background-color: var(--piece-background-color);
border: solid black 1px;
border-radius: 10px;
&-form {
position: relative;
text-align: center;
margin: 10px 5px 10px 5px;
&-header {
display: flex;
flex-direction: row;
mat-icon {
position: absolute;
transform: scale(1.5);
color: white;
}
&-for {
display: flex;
flex-direction: row;
position: relative;
left: 50%;
transform: translateX(-50%);
input {
width: 25px;
border: none;
border-radius: 10px;
background-color: white;
margin-left: 5px;
margin-right: 5px;
text-align: center;
}
}
}
&-while {
display: flex;
flex-direction: column;
textarea {
padding: 5px 10px 5px 10px;
margin-top: 10px;
resize: vertical;
border: none;
border-radius: 10px;
flex-grow: 1;
min-height: 50px;
max-height: 100px;
background-image: url("../../../assets/background-images/repeat.png");
background-position: center;
background-repeat: no-repeat;
background-size: 20%;
}
}
}
}
\ No newline at end of file
src/app/sider-pieces/repeat/repeat.component.spec.ts 0 → 100644
View file @ b0d43ca4
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RepeatComponent } from './repeat.component';
describe('RepeatComponent', () => {
let component: RepeatComponent;
let fixture: ComponentFixture<RepeatComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ RepeatComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(RepeatComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/sider-pieces/repeat/repeat.component.ts 0 → 100644
View file @ b0d43ca4
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-repeat',
templateUrl: './repeat.component.html',
styleUrls: ['./repeat.component.scss']
})
export class RepeatComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
src/app/sider-pieces/role-occurence/role-occurence.component.html 0 → 100644
View file @ b0d43ca4
<div class="piece">
<div class="piece-form">
<div class="piece-title">Occurrence du rôle</div>
<div class="piece-form-occurrence">
<input type="text"/>
<label> entre </label>
<input type="text"/>
<label> et </label>
<input type="text"/>
<label> joueurs</label>
</div>
<div class="piece-form-occurrence">
<input type="text"/>
<label> entre </label>
<input type="text"/>
<label> et </label>
<input type="text"/>
<label> joueurs</label>
</div>
<button mat-button><mat-icon fontIcon="add"></mat-icon></button>
</div>
</div>
\ No newline at end of file
src/app/sider-pieces/role-occurence/role-occurence.component.scss 0 → 100644
View file @ b0d43ca4
.piece {
--piece-background-color: #e5c5ac;
width: 300px;
position: relative;
background-color: var(--piece-background-color);
border: solid black 1px;
border-radius: 10px;
&-title {
font-family: 'Glacial Indifference Bold';
margin-bottom: 10px;
}
&-form {
margin: 10px 5px 10px 5px;
display: flex;
flex-direction: column;
input {
width: 25px;
border: none;
border-radius: 10px;
margin-left: 5px;
margin-right: 5px;
}
button {
margin-top: 10px;
border: none;
background-color: white;
border-radius: 10px;
}
&-occurence {
display: flex;
}
}
}
\ No newline at end of file
src/app/sider-pieces/role-occurence/role-occurence.component.spec.ts 0 → 100644
View file @ b0d43ca4
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RoleOccurenceComponent } from './role-occurence.component';
describe('RoleOccurenceComponent', () => {
let component: RoleOccurenceComponent;
let fixture: ComponentFixture<RoleOccurenceComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ RoleOccurenceComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(RoleOccurenceComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/sider-pieces/role-occurence/role-occurence.component.ts 0 → 100644
View file @ b0d43ca4
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-role-occurence',
templateUrl: './role-occurence.component.html',
styleUrls: ['./role-occurence.component.scss']
})
export class RoleOccurenceComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
src/app/sider-pieces/rules/rules.component.html 0 → 100644
View file @ b0d43ca4
<div class="piece">
<div class="piece-form">
<div class="piece-form-rules">
<div class="piece-form-title">Règles du jeu</div>
<textarea></textarea>
</div>
<div class="piece-form-ressources">
<div class="piece-form-title">Ressources / objets</div>
<div class="piece-form-ressources-object">
<div class="piece-form-ressources-object-infos">
<div class="piece-form-ressources-object-infos-name">
<label for="name">Nom</label>
<input name="name" type="text"/>
</div>
<div class="piece-form-ressources-object-infos-quantity">
<label for="quantity">Quantité</label>
<input name="quantity" type="text"/>
</div>
</div>
<div class="piece-form-ressources-object-infos">
<div class="piece-form-ressources-object-infos-name">
<label for="name">Nom</label>
<input name="name" type="text"/>
</div>
<div class="piece-form-ressources-object-infos-quantity">
<label for="quantity">Quantité</label>
<input name="quantity" type="text"/>
</div>
</div>
<button mat-button><mat-icon fontIcon="add"></mat-icon></button>
</div>
</div>
<div class="piece-form-validate">
<button mat-button>Valider</button>
</div>
</div>
</div>
\ No newline at end of file
src/app/sider-pieces/rules/rules.component.scss 0 → 100644
View file @ b0d43ca4
.piece {
--piece-background-color: #c6c2bd;
width: 300px;
position: relative;
background-color: var(--piece-background-color);
border: solid black 1px;
border-radius: 10px;
&-form {
margin: 10px 5px 10px 5px;
display: flex;
flex-direction: column;
button {
border-radius: 10px;
background-color: white;
}
&-title {
font-family: "Glacial Indifference Bold";
margin-bottom: 10px;
}
&-rules {
display: flex;
flex-direction: column;
margin-bottom: 10px;
textarea {
background-image: url("../../../assets/background-images/rules.png");
background-position: center;
background-repeat: no-repeat;
background-size: 30%;
border-radius: 10px;
border: none;
resize: vertical;
min-height: 100px;
max-height: 200px;
padding: 5px 5px 5px 5px;
}
}
&-ressources {
input {
height: 30px;
border: none;
border-radius: 10px;
background-color: white;
width: 150px;
}
&-object {
display: flex;
flex-direction: column;
justify-content: space-between;
&-infos {
margin-bottom: 10px;
&-name {
display: flex;
flex-direction: row;
justify-content: space-between;
}
&-quantity {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 5px;
}
}
}
}
&-validate {
display: flex;
flex-direction: row;
justify-content: flex-end;
button {
margin-top: 10px;
}
}
}
}
\ No newline at end of file
src/app/sider-pieces/rules/rules.component.spec.ts 0 → 100644
View file @ b0d43ca4
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RulesComponent } from './rules.component';
describe('RulesComponent', () => {
let component: RulesComponent;
let fixture: ComponentFixture<RulesComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ RulesComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(RulesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/sider-pieces/rules/rules.component.ts 0 → 100644
View file @ b0d43ca4
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-rules',
templateUrl: './rules.component.html',
styleUrls: ['./rules.component.scss']
})
export class RulesComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
src/app/sider-pieces/supplementary-task/supplementary-task.component.html 0 → 100644
View file @ b0d43ca4
<div class="piece">
<div class="piece-form">
<div class="piece-title">Tâche liée au rôle supplémentaire</div>
<div class="piece-form-checkbox">
<input type="checkbox"/>
<label>Oui</label>
</div>
</div>
</div>
\ No newline at end of file
src/app/sider-pieces/supplementary-task/supplementary-task.component.scss 0 → 100644
View file @ b0d43ca4
.piece {
--piece-background-color: #e5c5ac;
width: 300px;
height: 100px;
position: relative;
background: linear-gradient(165deg, rgba(154,213,236,1) 0%, rgba(154,213,236,1) 55%, rgba(0,0,0,1) 55%, rgba(0,0,0,1) 100%);
border: solid black 1px;
border-radius: 10px;
&-title {
font-family: 'Glacial Indifference Bold';
margin-bottom: 10px;
}
&-form {
margin: 10px 5px 10px 5px;
input {
width: 25px;
border: none;
border-radius: 10px;
}
}
}
\ No newline at end of file
src/app/sider-pieces/supplementary-task/supplementary-task.component.spec.ts 0 → 100644
View file @ b0d43ca4
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SupplementaryTaskComponent } from './supplementary-task.component';
describe('SupplementaryTaskComponent', () => {
let component: SupplementaryTaskComponent;
let fixture: ComponentFixture<SupplementaryTaskComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ SupplementaryTaskComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(SupplementaryTaskComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/sider-pieces/supplementary-task/supplementary-task.component.ts 0 → 100644
View file @ b0d43ca4
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-supplementary-task',
templateUrl: './supplementary-task.component.html',
styleUrls: ['./supplementary-task.component.scss']
})
export class SupplementaryTaskComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
src/index.html
View file @ b0d43ca4
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>RLG Tool</title> <title>RLG Maker</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
......
src/styles.scss
View file @ b0d43ca4
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
} }
body { body {
margin-top: 60px; //margin-top: 60px;
background-color: var(--background-color); background-color: var(--background-color);
font-family: 'Glacial Indifference', sans-serif; font-family: 'Glacial Indifference', sans-serif;
//transform: scale(0.9); //transform: scale(0.9);
......
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