SES-156 added routing for creating character

This commit is contained in:
Natalia Gawron 2021-01-22 19:46:09 +01:00
parent 844137b551
commit 9c41f51820
9 changed files with 86 additions and 4 deletions

View File

@ -5,6 +5,7 @@ import { RegistrationComponent } from './app/components/registration/registratio
import {GameMasterDashboardComponent} from './app/components/game-master-dashboard/game-master-dashboard.component'; import {GameMasterDashboardComponent} from './app/components/game-master-dashboard/game-master-dashboard.component';
import {PlayerDashboardComponent} from './app/components/player-dashboard/player-dashboard.component'; import {PlayerDashboardComponent} from './app/components/player-dashboard/player-dashboard.component';
import { SelectCharacterComponent } from './app/components/select-character/select-character.component'; import { SelectCharacterComponent } from './app/components/select-character/select-character.component';
import {CreateCharacterComponent} from "./app/components/create-character/create-character.component";
const routes: Routes = [ const routes: Routes = [
{ {
@ -37,6 +38,11 @@ const routes: Routes = [
component: SelectCharacterComponent, component: SelectCharacterComponent,
pathMatch: 'full' pathMatch: 'full'
}, },
{
path: 'create-character',
component: CreateCharacterComponent,
pathMatch: 'full'
},
]; ];
export const appRoutingModule = RouterModule.forRoot(routes); export const appRoutingModule = RouterModule.forRoot(routes);

View File

@ -62,6 +62,7 @@ import { MessageDialogComponent } from './shared/message-dialog/message-dialog.c
import { GameMasterTurntrackerComponent } from './components/game-master-turntracker/game-master-turntracker.component'; import { GameMasterTurntrackerComponent } from './components/game-master-turntracker/game-master-turntracker.component';
import { DragDropModule } from '@angular/cdk/drag-drop'; import { DragDropModule } from '@angular/cdk/drag-drop';
import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog/choose-monster-dialog.component'; import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog/choose-monster-dialog.component';
import { CreateCharacterComponent } from './components/create-character/create-character.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -90,6 +91,7 @@ import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog
MessageDialogComponent, MessageDialogComponent,
GameMasterTurntrackerComponent, GameMasterTurntrackerComponent,
ChooseMonsterDialogComponent, ChooseMonsterDialogComponent,
CreateCharacterComponent,
], ],
imports: [ imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@ -151,6 +153,7 @@ import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog
MessageDialogComponent, MessageDialogComponent,
GameMasterTurntrackerComponent, GameMasterTurntrackerComponent,
ChooseMonsterDialogComponent, ChooseMonsterDialogComponent,
CreateCharacterComponent,
], ],
}) })
export class AppModule {} export class AppModule {}

View File

@ -0,0 +1,8 @@
<p>create-character works!</p>
<button
id="create-character-submit-button"
mat-raised-button
class="btn-primary form-container"
(click)="onCreateCharacterButton()">
CONTINUE
</button>

View File

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

View File

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

View File

@ -69,3 +69,8 @@ input {
padding-top: 5%; padding-top: 5%;
} }
} }
.mat-divider--custom-style {
background-color: #9e8b6e;
box-shadow: 0 1px 0 0 #d8d8d8;
}

View File

@ -1,15 +1,26 @@
<div class="container"> <div class="container">
<mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon> <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
<div class="primary-text header">Select character</div> <div *ngFor="let character of charactersList" class="primary-text header">Select character</div>
<mat-divider *ngFor="let character of charactersList" class="mat-divider--custom-style"></mat-divider>
<mat-list> <mat-list>
<mat-divider></mat-divider>
<mat-list-item *ngFor="let character of charactersList"> <mat-list-item *ngFor="let character of charactersList">
<mat-icon mat-list-icon>account_circle</mat-icon> <mat-icon mat-list-icon>account_circle</mat-icon>
<div mat-line>{{character.name}}</div> <div mat-line (click)="onCharacterClick(character.id)">{{character.name}}</div>
<mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick(character.id)">arrow_forward</mat-icon> <mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick(character.id)">arrow_forward</mat-icon>
<div mat-line> {{character.className}} level: {{character.level}}</div> <div mat-line> {{character.className}} level: {{character.level}}</div>
<mat-divider></mat-divider> <mat-divider class="mat-divider--custom-style"></mat-divider>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
<div *ngFor="let character of charactersList" class="primary-text header">or</div>
<div class="primary-text header">Create character</div>
<mat-divider class="mat-divider--custom-style"></mat-divider>
<mat-list>
<mat-list-item>
<mat-icon mat-list-icon>account_circle</mat-icon>
<div mat-line>Create character</div>
<mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCreateCharacter()">arrow_forward</mat-icon>
</mat-list-item>
</mat-list>
<mat-divider class="mat-divider--custom-style"></mat-divider>
</div> </div>

View File

@ -46,4 +46,8 @@ export class SelectCharacterComponent implements OnInit {
this.store.dispatch(new ClearUserId()); this.store.dispatch(new ClearUserId());
this.router.navigate(['login']); this.router.navigate(['login']);
} }
onCreateCharacter() {
this.router.navigate(['create-character']);
}
} }