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

SES-156 create character from template

Browse Source
This commit is contained in:
Natalia Gawron 2021-01-23 20:39:42 +01:00
parent 4ede197d83
commit 4f94e86a7c
13 changed files with 268 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css
View File

@ -61,6 +61,14 @@ input {
}
}
@media (max-width: 400px) {
.container {
margin-left: 0%;
width: 300px;
padding-top: 5%;
}
}
@media (min-width: 401px) {
.container {
margin-left: 1%;

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

@ -6,8 +6,8 @@
<mat-list>
<mat-list-item *ngFor="let character of charactersTemplateList">
<mat-icon mat-list-icon>account_circle</mat-icon>
<div mat-line (click)="onCharacterClick()">{{character.name}}</div>
<mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick()">arrow_forward</mat-icon>
<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>
<div mat-line> {{character.class}}, {{character.race}}</div>
<mat-divider class="mat-divider--custom-style"></mat-divider>
</mat-list-item>

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

@ -7,28 +7,43 @@ 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 { CreateCharacterFromTemplate } from '../../store/actions/player.action';
import {
ChooseTemplateToCreateCharacter,
ClearCharacterId,
} from '../../store/actions/player.action';
@Component({
selector: 'app-create-character',
templateUrl: './create-character.component.html',
styleUrls: ['./create-character.component.css']
styleUrls: ['./create-character.component.css'],
})
export class CreateCharacterComponent implements OnInit {
charactersTemplateList: CharacterFromTemplatesViewModel[];
constructor(private router: Router, private store: Store<AppState>, private characterService: CharacterService) { }
constructor(
private router: Router,
private store: Store<AppState>,
private characterService: CharacterService
) {}
ngOnInit() {
this.getTemplateCharacters();
}
onArrowBackClick() {
this.router.navigate(['select-character']);
this.store
.select((s) => s.playerStore.characterId)
.pipe(first())
.subscribe((characterId) => {
if (characterId !== null) {
this.store.dispatch(new ClearCharacterId());
}
this.router.navigate(['select-character']);
});
}
onCharacterClick() {
this.store.dispatch(new CreateCharacterFromTemplate);
onCharacterClick(characterId: number) {
this.store.dispatch(new ChooseTemplateToCreateCharacter({ characterId }));
this.router.navigate(['create-character-step-2']);
}

18
SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.html
View File

@ -1,7 +1,23 @@
<div class="container">
<div [formGroup]="personalizeTemplateFormGroup" 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>
<mat-form-field class="form-container">
<input
id="newName"
matInput
formControlName="newName"
placeholder="New character name"
type="text"
name="newName">
<mat-error *ngIf="personalizeTemplateFormGroup?.get('newName').hasError('required')">
If the field is left blank, your character will have the default name
</mat-error>
<mat-icon matSuffix>person</mat-icon>
</mat-form-field>
<mat-error *ngIf="apiError">
{{apiErrorMessage}}
</mat-error>
<button
id="create-character-submit-button"
mat-raised-button

61
SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.ts
View File

@ -1,24 +1,71 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
import { CharacterService } from '../../../services/character.service';
import { ErrorResponse } from '../../../types/ErrorResponse';
import { HttpErrorResponse } from '@angular/common/http';
import { AppState } from '../../store/models/app-state.model';
import { Store } from '@ngrx/store';
import { first } from 'rxjs/operators';
@Component({
selector: 'app-personalize-template',
templateUrl: './personalize-template.component.html',
styleUrls: ['./personalize-template.component.css']
styleUrls: ['./personalize-template.component.css'],
})
export class PersonalizeTemplateComponent implements OnInit {
allSubscriptions = new Subscription();
apiError = false;
apiErrorMessage = '';
constructor(private router: Router) { }
constructor(
private router: Router,
private formBuilder: FormBuilder,
private characterService: CharacterService,
private store: Store<AppState>
) {}
ngOnInit() {
}
public personalizeTemplateFormGroup: FormGroup = this.formBuilder.group({
newName: ['', [Validators.required]],
});
ngOnInit() {}
onCreateCharacterButton() {
this.router.navigate(['select-character']);
this.store
.select((s) => {
return {
userId: s.appStore.userId,
characterId: s.playerStore.characterId,
};
})
.pipe(first())
.subscribe((result) => {
this.characterService
.createCharacterFromTemplate(
result.characterId,
result.userId,
this.personalizeTemplateFormGroup.value['newName']
)
.pipe(first())
.subscribe(
() => {
this.router.navigate(['select-character']);
},
(error: ErrorResponse | HttpErrorResponse) => {
console.error(error);
if (error instanceof HttpErrorResponse) {
error = error.error as ErrorResponse;
}
this.apiError = true;
this.apiErrorMessage = error.message;
}
);
});
}
onArrowBackClick() {
this.router.navigate(['create-character-step-1']);
}
}

16
SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts
View File

@ -13,22 +13,20 @@ import { AppState } from '../../store/models/app-state.model';
@Component({
selector: 'app-player-weapons-table',
templateUrl: './player-weapons-table.component.html',
styleUrls: ['./player-weapons-table.component.css']
styleUrls: ['./player-weapons-table.component.css'],
})
export class PlayerWeaponsTableComponent implements OnInit {
weapons: WeaponViewModel[];
displayedColumns: string[] = [
'name',
'weaponType',
'weight',
'cost',
];
displayedColumns: string[] = ['name', 'weaponType', 'weight', 'cost'];
dataSource: MatTableDataSource<WeaponViewModel>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor(private store: Store<AppState>, private equipmentService: EquipmentService) {}
constructor(
private store: Store<AppState>,
private equipmentService: EquipmentService
) {}
ngOnInit() {
this.getCharacterWeapons();
@ -40,7 +38,7 @@ export class PlayerWeaponsTableComponent implements OnInit {
.pipe(first())
.subscribe((characterId) => {
this.equipmentService
.getCharacterWeapons(1)
.getCharacterWeapons(characterId)
.pipe(first())
.subscribe(
(result) => {

3
SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html
View File

@ -38,7 +38,8 @@
required
placeholder="Confirm Password"
type="password"
name="confirmPassword"/>
name="confirmPassword"
(keyup.enter)="Register()"/>
<mat-icon matSuffix >lock</mat-icon>
<mat-error *ngIf="signUpFormGroup?.get('newAccount')['controls']?.confirmPassword?.hasError('required')">
Confirm your password

8
SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html
View File

@ -1,7 +1,8 @@
<div class="container">
<mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
<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>
<div *ngIf="charactersList != null && charactersList.length > 0">
<div class="primary-text header">Select character</div>
<mat-divider class="mat-divider--custom-style"></mat-divider>
<mat-list>
<mat-list-item *ngFor="let character of charactersList">
<mat-icon mat-list-icon>account_circle</mat-icon>
@ -11,7 +12,8 @@
<mat-divider class="mat-divider--custom-style"></mat-divider>
</mat-list-item>
</mat-list>
<div *ngFor="let character of charactersList" class="primary-text header">or</div>
<div class="primary-text header">or</div>
</div>
<div class="primary-text header">Create character</div>
<mat-divider class="mat-divider--custom-style"></mat-divider>
<mat-list>

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

@ -1,44 +1,57 @@
import {Component, OnInit} from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {first} from 'rxjs/operators';
import {ClearUserId} from '../../store/actions/app.actions';
import {ErrorResponse} from '../../../types/ErrorResponse';
import {HttpErrorResponse} from '@angular/common/http';
import {Store} from '@ngrx/store';
import {AppState} from '../../store/models/app-state.model';
import {CharacterService} from '../../../services/character.service';
import {CharacterForLoginViewModel} from '../../../types/viewmodels/character-viewmodels/CharacterForLoginViewModel';
import {AddCharacterId} from '../../store/actions/player.action';
import { first } from 'rxjs/operators';
import { ClearUserId } from '../../store/actions/app.actions';
import { ErrorResponse } from '../../../types/ErrorResponse';
import { HttpErrorResponse } from '@angular/common/http';
import { Store } from '@ngrx/store';
import { AppState } from '../../store/models/app-state.model';
import { CharacterService } from '../../../services/character.service';
import { CharacterForLoginViewModel } from '../../../types/viewmodels/character-viewmodels/CharacterForLoginViewModel';
import { AddCharacterId } from '../../store/actions/player.action';
@Component({
selector: 'app-select-character',
templateUrl: './select-character.component.html',
styleUrls: ['./select-character.component.css']
styleUrls: ['./select-character.component.css'],
})
export class SelectCharacterComponent implements OnInit {
charactersList: CharacterForLoginViewModel[];
constructor(private router: Router, private store: Store<AppState>, private characterService: CharacterService) {}
constructor(
private router: Router,
private store: Store<AppState>,
private characterService: CharacterService
) {}
ngOnInit() {
this.getUserCharactersList();
}
getUserCharactersList() {
this.store.select(s => s.appStore.userId).pipe(first()).subscribe((userId) => {
this.characterService.getUserCharactersList(userId).pipe(first()).subscribe((charactersList) => {
this.charactersList = charactersList;
}, (error: ErrorResponse | HttpErrorResponse) => {
if (error instanceof HttpErrorResponse) {
error = error.error as ErrorResponse;
}
console.error(error.message);
} );
});
this.store
.select((s) => s.appStore.userId)
.pipe(first())
.subscribe((userId) => {
this.characterService
.getUserCharactersList(userId)
.pipe(first())
.subscribe(
(charactersList) => {
this.charactersList = charactersList;
},
(error: ErrorResponse | HttpErrorResponse) => {
if (error instanceof HttpErrorResponse) {
error = error.error as ErrorResponse;
}
console.error(error.message);
}
);
});
}
onCharacterClick(characterId: number) {
this.store.dispatch(new AddCharacterId({characterId}));
this.store.dispatch(new AddCharacterId({ characterId }));
this.router.navigate(['player']);
}

4
SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html
View File

@ -26,7 +26,9 @@
required
placeholder="Password"
type="password"
name="password"/>
name="password"
(keyup.enter)="onLoginButtonClick()"
/>
<mat-icon matSuffix>lock</mat-icon>
<mat-error *ngIf="signInFormGroup?.get('signIn')['controls']?.password?.hasError('required')">
Password is required

11
SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/player.action.ts
View File

@ -3,6 +3,7 @@ import {Action} from '@ngrx/store';
export enum PlayerActionTypes {
ADD_CHARACTER_ID= '[PLAYER] Add character id',
CLEAR_CHARACTER_ID = '[PLAYER] Clear character id',
CHOOSE_TEMPLATE_TO_CREATE_CHARACTER = '[PLAYER] Choose template to create character',
CREATED_CHARACTER_FROM_TEMPLATE = '[PLAYER] Created character from template'
}
@ -22,6 +23,14 @@ export class ClearCharacterId implements Action {
}
}
export class ChooseTemplateToCreateCharacter implements Action {
readonly type = PlayerActionTypes.CHOOSE_TEMPLATE_TO_CREATE_CHARACTER;
constructor(public payload: {characterId: number}) {
}
}
export class CreateCharacterFromTemplate implements Action {
readonly type = PlayerActionTypes.CREATED_CHARACTER_FROM_TEMPLATE;
@ -30,4 +39,4 @@ export class CreateCharacterFromTemplate implements Action {
}
}
export type PlayerAction = AddCharacterId | ClearCharacterId | CreateCharacterFromTemplate;
export type PlayerAction = AddCharacterId | ClearCharacterId | ChooseTemplateToCreateCharacter | CreateCharacterFromTemplate;

2
SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/player.reducer.ts
View File

@ -9,6 +9,8 @@ export function PlayerReducer(state: PlayerStoreModel = initialState, action: Pl
switch (action.type) {
case PlayerActionTypes.ADD_CHARACTER_ID:
return {...state, characterId: action.payload.characterId};
case PlayerActionTypes.CHOOSE_TEMPLATE_TO_CREATE_CHARACTER:
return {...state, characterId: action.payload.characterId};
case PlayerActionTypes.CREATED_CHARACTER_FROM_TEMPLATE:
return {...state};
case PlayerActionTypes.CLEAR_CHARACTER_ID:

153
SessionCompanion/SessionCompanion/ClientApp/src/services/character.service.ts
View File

@ -1,17 +1,18 @@
import {Inject, Injectable} from '@angular/core';
import {HttpClient, HttpParams} from '@angular/common/http';
import {Observable, of, throwError} from 'rxjs';
import {ErrorResponse} from '../types/ErrorResponse';
import {Either} from '../types/Either';
import {CharacterForLoginViewModel} from '../types/viewmodels/character-viewmodels/CharacterForLoginViewModel';
import {switchMap, retry} from 'rxjs/operators';
import {LoggedCharactersViewModel} from '../types/viewmodels/character-viewmodels/LoggedCharactersViewModel';
import {CharacterStatsViewModel} from '../types/viewmodels/character-viewmodels/CharacterStatsViewModel';
import {CharacterFromTemplatesViewModel} from '../types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel';
import { Inject, Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { ErrorResponse } from '../types/ErrorResponse';
import { Either } from '../types/Either';
import { CharacterForLoginViewModel } from '../types/viewmodels/character-viewmodels/CharacterForLoginViewModel';
import { switchMap, retry } from 'rxjs/operators';
import { LoggedCharactersViewModel } from '../types/viewmodels/character-viewmodels/LoggedCharactersViewModel';
import { CharacterStatsViewModel } from '../types/viewmodels/character-viewmodels/CharacterStatsViewModel';
import { CharacterFromTemplatesViewModel } from '../types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel';
import { SuccessResponse } from '../types/SuccessResponse';
Injectable({
providedIn: 'root'
})
providedIn: 'root',
});
export class CharacterService {
private baseUrl = 'api/character/';
constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
@ -19,53 +20,101 @@ export class CharacterService {
}
getLoggedCharacters(): Observable<LoggedCharactersViewModel[]> {
return this.http.get<Either<LoggedCharactersViewModel[], ErrorResponse>>(this.baseUrl + 'loggedCharacters').pipe(
switchMap(response => {
if (response.isLeft) {
return of(response.left);
} else {
return throwError(response.right);
}
}),
retry(3)
);
return this.http
.get<Either<LoggedCharactersViewModel[], ErrorResponse>>(
this.baseUrl + 'loggedCharacters'
)
.pipe(
switchMap((response) => {
if (response.isLeft) {
return of(response.left);
} else {
return throwError(response.right);
}
}),
retry(3)
);
}
getUserCharactersList(userId: number): Observable<CharacterForLoginViewModel[]> {
const params = new HttpParams().set('userId', userId.toString())
return this.http.get<Either<CharacterForLoginViewModel[], ErrorResponse>>(this.baseUrl + 'userCharactersList', {params}).pipe(
switchMap(response => {
if (response.isLeft) {
return of(response.left);
} else {
return throwError(response.right);
}
})
);
getUserCharactersList(
userId: number
): Observable<CharacterForLoginViewModel[]> {
const params = new HttpParams().set('userId', userId.toString());
return this.http
.get<Either<CharacterForLoginViewModel[], ErrorResponse>>(
this.baseUrl + 'userCharactersList',
{ params }
)
.pipe(
switchMap((response) => {
if (response.isLeft) {
return of(response.left);
} else {
return throwError(response.right);
}
})
);
}
getCharacterStats(characterId: number): Observable<CharacterStatsViewModel[]> {
const params = new HttpParams().set('characterId', characterId.toString())
return this.http.get<Either<CharacterStatsViewModel[], ErrorResponse>>( this.baseUrl + 'characterStats', {params}).pipe(
switchMap( response => {
if (response.isLeft) {
return of(response.left);
} else {
return throwError(response.right);
}
})
);
getCharacterStats(
characterId: number
): Observable<CharacterStatsViewModel[]> {
const params = new HttpParams().set('characterId', characterId.toString());
return this.http
.get<Either<CharacterStatsViewModel[], ErrorResponse>>(
this.baseUrl + 'characterStats',
{ params }
)
.pipe(
switchMap((response) => {
if (response.isLeft) {
return of(response.left);
} else {
return throwError(response.right);
}
})
);
}
getTemplateCharacters(): Observable<CharacterFromTemplatesViewModel[]> {
return this.http.get<Either<CharacterFromTemplatesViewModel[], ErrorResponse>>(this.baseUrl + 'getTemplateCharacters').pipe(
switchMap(response => {
if (response.isLeft) {
return of(response.left);
} else {
return throwError(response.right);
}
}));
return this.http
.get<Either<CharacterFromTemplatesViewModel[], ErrorResponse>>(
this.baseUrl + 'getTemplateCharacters'
)
.pipe(
switchMap((response) => {
if (response.isLeft) {
return of(response.left);
} else {
return throwError(response.right);
}
})
);
}
createCharacterFromTemplate(
characterId: number,
userId: number,
newName: string
): Observable<SuccessResponse> {
const params = new HttpParams()
.set('characterId', characterId.toString())
.set('userId', userId.toString())
.set('newName', newName);
return this.http
.post<Either<SuccessResponse, ErrorResponse>>(
this.baseUrl + 'createCharacterFromTemplate',
null,
{ params }
)
.pipe(
switchMap((response) => {
if (response.isLeft) {
return of(response.left);
} else {
return throwError(response.right);
}
})
);
}
}