s426135/session-companion
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

SES-156 WIP - step 2 - creating character

Browse Source
This commit is contained in:
Natalia Gawron 2021-01-22 22:09:41 +01:00
parent 706b2aa0fa
commit 4ede197d83
9 changed files with 154 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts
View File

@ -6,6 +6,7 @@ import {GameMasterDashboardComponent} from './app/components/game-master-dashboa
import {PlayerDashboardComponent} from './app/components/player-dashboard/player-dashboard.component';
import { SelectCharacterComponent } from './app/components/select-character/select-character.component';
import {CreateCharacterComponent} from "./app/components/create-character/create-character.component";
import {PersonalizeTemplateComponent} from "./app/components/personalize-template/personalize-template.component";
const routes: Routes = [
{
@ -39,10 +40,15 @@ const routes: Routes = [
pathMatch: 'full'
},
{
path: 'create-character',
path: 'create-character-step-1',
component: CreateCharacterComponent,
pathMatch: 'full'
},
{
path: 'create-character-step-2',
component: PersonalizeTemplateComponent,
pathMatch: 'full'
}
];
export const appRoutingModule = RouterModule.forRoot(routes);

3
SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
View File

@ -63,6 +63,7 @@ import { GameMasterTurntrackerComponent } from './components/game-master-turntra
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog/choose-monster-dialog.component';
import { CreateCharacterComponent } from './components/create-character/create-character.component';
import { PersonalizeTemplateComponent } from './components/personalize-template/personalize-template.component';
@NgModule({
declarations: [
@ -92,6 +93,7 @@ import { CreateCharacterComponent } from './components/create-character/create-c
GameMasterTurntrackerComponent,
ChooseMonsterDialogComponent,
CreateCharacterComponent,
PersonalizeTemplateComponent,
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@ -154,6 +156,7 @@ import { CreateCharacterComponent } from './components/create-character/create-c
GameMasterTurntrackerComponent,
ChooseMonsterDialogComponent,
CreateCharacterComponent,
PersonalizeTemplateComponent,
],
})
export class AppModule {}

10
SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html
View File

@ -1,6 +1,7 @@
<div class="container">
<mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
<div class="primary-text header">Create character from Template</div>
<div class="primary-text header">Create character</div>
<div class="primary-text header">Step 1 - Choose one of template</div>
<mat-divider class="mat-divider--custom-style"></mat-divider>
<mat-list>
<mat-list-item *ngFor="let character of charactersTemplateList">
@ -11,11 +12,4 @@
<mat-divider class="mat-divider--custom-style"></mat-divider>
</mat-list-item>
</mat-list>
<!--<button
id="create-character-submit-button"
mat-raised-button
class="btn-primary form-container"
(click)="onCreateCharacterButton()">
CONTINUE
</button>-->
</div>

7
SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts
View File

@ -7,7 +7,7 @@ import { ErrorResponse } from '../../../types/ErrorResponse';
import { HttpErrorResponse } from '@angular/common/http';
import { CharacterFromTemplatesViewModel } from '../../../types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel';
import { CharacterService } from '../../../services/character.service';
import {AddCharacterId, CreateCharacterFromTemplate} from "../../store/actions/player.action";
import { CreateCharacterFromTemplate } from '../../store/actions/player.action';
@Component({
selector: 'app-create-character',
@ -23,16 +23,13 @@ export class CreateCharacterComponent implements OnInit {
this.getTemplateCharacters();
}
onCreateCharacterButton() {
this.router.navigate(['select-character']);
}
onArrowBackClick() {
this.router.navigate(['select-character']);
}
onCharacterClick() {
this.store.dispatch(new CreateCharacterFromTemplate);
this.router.navigate(['create-character-step-2']);
}
getTemplateCharacters() {

77
SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.css Normal file
View File

@ -0,0 +1,77 @@
@import '../../../styles.css';
mat-form-field {
color: #df7c0f;
}
:host {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
input {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.container {
margin: 5%;
display: flex;
flex-direction: column;
}
.container h1 {
margin-bottom: 1rem;
}
.form-container {
padding: 10px;
margin: 5px;
}
.primary-text {
height: 100px;
color: #df7c0f;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1%;
margin: 1%;
}
.header {
font-size: 20px;
}
.mat-divider--custom-style {
background-color: #9e8b6e;
box-shadow: 0 1px 0 0 #d8d8d8;
}
@media (max-width: 400px) {
.container {
margin-left: 0%;
width: 300px;
padding-top: 5%;
}
}
@media (min-width: 401px) {
.container {
margin-left: 1%;
width: 450px;
padding-top: 10%;
}
}
@media (min-width: 768px) {
.container {
width: 550px;
padding-top: 5%;
}
}

12
SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.html Normal file
View File

@ -0,0 +1,12 @@
<div class="container">
<mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
<div class="primary-text header">Create character</div>
<div class="primary-text header">Step 2 - Personalize template</div>
<button
id="create-character-submit-button"
mat-raised-button
class="btn-primary form-container"
(click)="onCreateCharacterButton()">
CONTINUE
</button>
</div>

25
SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PersonalizeTemplateComponent } from './personalize-template.component';
describe('PersonalizeTemplateComponent', () => {
let component: PersonalizeTemplateComponent;
let fixture: ComponentFixture<PersonalizeTemplateComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PersonalizeTemplateComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PersonalizeTemplateComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

24
SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.ts Normal file
View File

@ -0,0 +1,24 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-personalize-template',
templateUrl: './personalize-template.component.html',
styleUrls: ['./personalize-template.component.css']
})
export class PersonalizeTemplateComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
}
onCreateCharacterButton() {
this.router.navigate(['select-character']);
}
onArrowBackClick() {
this.router.navigate(['create-character-step-1']);
}
}

2
SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts
View File

@ -48,6 +48,6 @@ export class SelectCharacterComponent implements OnInit {
}
onCreateCharacter() {
this.router.navigate(['create-character']);
this.router.navigate(['create-character-step-1']);
}
}