Skip to content

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

characters sider-pieces

parent 21c7e2bc
Show whitespace changes
Inline Side-by-side
Showing with 449 additions and 3 deletions
src/app/app.component.html
View file @ c2ba6f7e
......@@ -47,6 +47,7 @@
<div class="container-sider">
<app-comments class="container-sider-element"></app-comments>
<app-repeat class="container-sider-element"></app-repeat>
<app-characters class="container-sider-element"></app-characters>
</div>
......
src/app/app.module.ts
View file @ c2ba6f7e
......@@ -18,6 +18,8 @@ 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/random-event/random-event.component';
import { CharactersComponent } from './sider-pieces/characters/characters.component';
import { CharacterComponent } from './components/character/character.component';
import { DragScrollDirective } from './directives/drag-scroll.directive';
import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive';
......@@ -37,7 +39,9 @@ import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive
CommentsComponent,
RepeatComponent,
CommentComponent,
RandomEventComponent
RandomEventComponent,
CharactersComponent,
CharacterComponent
],
imports: [
BrowserModule,
......
src/app/components/character/character.component.html 0 → 100644
View file @ c2ba6f7e
<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 @ c2ba6f7e
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 @ c2ba6f7e
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/components/character/character.component.ts 0 → 100644
View file @ c2ba6f7e
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-character',
templateUrl: './character.component.html',
styleUrls: ['./character.component.scss']
})
export class CharacterComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.html
View file @ c2ba6f7e
......@@ -10,7 +10,7 @@
<div class="piece-form">
<div class="piece-form-title">Objectif pédagogique</div>
<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&#10;- Apprendre à coopérer"></textarea>
</div>
<div class="piece-form-footer">Sorbonne Université, LIP6 - IMT Nord Europe</div>
......
src/app/sider-pieces/characters/characters.component.html 0 → 100644
View file @ c2ba6f7e
<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 @ c2ba6f7e
.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 @ c2ba6f7e
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 @ c2ba6f7e
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/repeat/repeat.component.scss
View file @ c2ba6f7e
......@@ -47,7 +47,7 @@
flex-direction: column;
textarea {
padding: 10px;
padding: 5px 10px 5px 10px;
margin-top: 10px;
resize: vertical;
border: none;
......
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