SES-135 connected method with backend, fixed card with stats UI

This commit is contained in:
Natalia Gawron 2021-01-10 00:01:59 +01:00
parent 145491fd2a
commit 3627f987da
10 changed files with 107 additions and 51 deletions

View File

@ -35,6 +35,7 @@ import { CharacterService } from '../services/character.service';
import { AbilityCardComponent } from './components/ability-card/ability-card.component'; import { AbilityCardComponent } from './components/ability-card/ability-card.component';
import { GameMasterSpellsTableComponent } from './components/game-master-spells-table/game-master-spells-table.component'; import { GameMasterSpellsTableComponent } from './components/game-master-spells-table/game-master-spells-table.component';
import { GameMasterArmorsTableComponent } from './components/game-master-armors-table/game-master-armors-table.component'; import { GameMasterArmorsTableComponent } from './components/game-master-armors-table/game-master-armors-table.component';
import { AbilitiesComponent } from './components/abilities/abilities.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -48,6 +49,7 @@ import { GameMasterArmorsTableComponent } from './components/game-master-armors-
AbilityCardComponent, AbilityCardComponent,
GameMasterSpellsTableComponent, GameMasterSpellsTableComponent,
GameMasterArmorsTableComponent, GameMasterArmorsTableComponent,
AbilitiesComponent,
], ],
imports: [ imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@ -79,6 +81,7 @@ import { GameMasterArmorsTableComponent } from './components/game-master-armors-
entryComponents: [ entryComponents: [
GameMasterSpellsTableComponent, GameMasterSpellsTableComponent,
GameMasterArmorsTableComponent, GameMasterArmorsTableComponent,
AbilitiesComponent,
], ],
}) })
export class AppModule {} export class AppModule {}

View File

@ -0,0 +1,6 @@
<div *ngFor="let ability of characterStats">
<app-ability-card [ability]="ability"
[headStyle]="{bgColor: '#e9cca7', textColor: '#102028'}"
[contentStyle]="{bgColor: '#102028', textColor: 'white'}">
</app-ability-card>
</div>

View File

@ -0,0 +1,38 @@
import { Component, OnInit } from '@angular/core';
import {CharacterStatsViewModel} from "../../../types/viewmodels/character-viewmodels/CharacterStatsViewModel";
import {Store} from "@ngrx/store";
import {AppState} from "../../store/models/app-state.model";
import {CharacterService} from "../../../services/character.service";
import {first} from "rxjs/operators";
import {ErrorResponse} from "../../../types/ErrorResponse";
import {HttpErrorResponse} from "@angular/common/http";
@Component({
selector: 'app-abilities',
templateUrl: './abilities.component.html',
styleUrls: ['./abilities.component.css']
})
export class AbilitiesComponent implements OnInit {
characterStats: CharacterStatsViewModel[];
constructor(private store: Store<AppState>, private characterService: CharacterService) {}
ngOnInit() {
this.getCharacterStats();
}
getCharacterStats() {
this.store.select( s => s.playerStore.characterId).pipe(first()).subscribe((characterId) => {
this.characterService.getCharacterStats(2).pipe(first()).subscribe((characterStats) => {
console.log(characterStats)
this.characterStats = characterStats;
}, (error: ErrorResponse | HttpErrorResponse) => {
if (error instanceof HttpErrorResponse) {
error = error.error as ErrorResponse;
}
console.error(error.message);
});
})
}
}

View File

@ -1,14 +1,50 @@
.cardContainerClass {
border: 6px solid white;
border-radius: 10px;
box-shadow: 0 0 10px gold;
}
#main{ #main{
width: 480px; width: 480px;
height: 480px; padding-bottom: 15px;
} }
@media (max-width: 468px) {
#main {
width: 340px;
}
}
@media (min-width: 468px) and (max-width: 768px) {
#main {
width: 420px;
}
}
@media (min-width: 768px) {
#main {
width: 480px;
}
}
#main>.mat-card{ #main>.mat-card{
padding: 0; padding: 0;
} }
.diagonal-line{ .diagonal-line{
width:50px; width:50px;
background:linear-gradient(45deg,rgb(16 32 40 / 0%) 49%,black,#ffffff00 51%); background:linear-gradient(45deg,rgb(16 32 40 / 0%) 49%,white,#ffffff00 51%);
} }
#ability-card-header {
font-weight: 600;
}
@media (max-width: 468px) {
#ability-card-header {
font-size: 11px;
}
}
#ability-card-content{ #ability-card-content{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -17,14 +53,14 @@
padding-bottom: 10px; padding-bottom: 10px;
} }
#skill-btn{ #skill-btn{
border-color: black; border: 2px solid #9e814d;
flex: 1 0 auto; flex: 1 0 auto;
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
#skill-btn-divider{ #skill-btn-divider{
border-left: black 1px solid; border-left: #9e814d 2px solid;
padding-right: 10px; padding-right: 10px;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;

View File

@ -1,5 +1,5 @@
<div *ngIf="ability" id="main"> <div *ngIf="ability" id="main">
<mat-card> <mat-card class="cardContainerClass">
<mat-card-header id="ability-card-header" [style.background]="headStyle.bgColor" [style.color]="headStyle.textColor"> <mat-card-header id="ability-card-header" [style.background]="headStyle.bgColor" [style.color]="headStyle.textColor">
{{ability.value}} {{ability.value}}
<div class="diagonal-line"></div> <div class="diagonal-line"></div>

View File

@ -1,5 +1,6 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/AbilityViewModel'; import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/AbilityViewModel';
import {CharacterStatsViewModel} from "../../../types/viewmodels/character-viewmodels/CharacterStatsViewModel";
@Component({ @Component({
selector: 'app-ability-card', selector: 'app-ability-card',
@ -7,7 +8,7 @@ import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/A
styleUrls: ['./ability-card.component.css'], styleUrls: ['./ability-card.component.css'],
}) })
export class AbilityCardComponent implements OnInit { export class AbilityCardComponent implements OnInit {
@Input() ability: AbilityViewModel; @Input() ability: CharacterStatsViewModel;
@Input() headStyle: { bgColor: string; textColor: string }; @Input() headStyle: { bgColor: string; textColor: string };
@Input() contentStyle: { bgColor: string; textColor: string }; @Input() contentStyle: { bgColor: string; textColor: string };

View File

@ -53,7 +53,9 @@
</mat-nav-list> </mat-nav-list>
</mat-sidenav> </mat-sidenav>
<mat-sidenav-content class="content"> <mat-sidenav-content class="content">
<app-ability-card class="ability_card_container" [ability]="ability" [contentStyle]="{bgColor: 'red', textColor: 'white'}" [headStyle]="{bgColor: 'red', textColor: 'white'}"></app-ability-card> <div class="ability_card_container">
<ng-container *ngComponentOutlet="middleComponent"></ng-container>
</div>
</mat-sidenav-content> </mat-sidenav-content>
</mat-sidenav-container> </mat-sidenav-container>
</div> </div>

View File

@ -1,12 +1,6 @@
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import { AbilityViewModel } from "../../../types/viewmodels/ability-viewmodels/AbilityViewModel"; import {AbilitiesComponent} from "../abilities/abilities.component";
import {AppState} from "../../store/models/app-state.model";
import {Store} from "@ngrx/store";
import {first} from "rxjs/operators";
import {CharacterService} from "../../../services/character.service";
import {CharacterStatsViewModel} from "../../../types/viewmodels/character-viewmodels/CharacterStatsViewModel";
import {ErrorResponse} from "../../../types/ErrorResponse";
import {HttpErrorResponse} from "@angular/common/http";
@Component({ @Component({
selector: 'app-player-dashboard', selector: 'app-player-dashboard',
@ -14,47 +8,23 @@ import {HttpErrorResponse} from "@angular/common/http";
styleUrls: ['./player-dashboard.component.css'], styleUrls: ['./player-dashboard.component.css'],
}) })
export class PlayerDashboardComponent implements OnInit { export class PlayerDashboardComponent implements OnInit {
middleComponent;
isExpanded = false; isExpanded = false;
selected = false; selected = false;
characterStats: CharacterStatsViewModel[];
constructor(private store: Store<AppState>, private characterService: CharacterService) {}
ngOnInit() { ngOnInit() {
this.getCharacterStats(); this.SwitchMiddleComponent('AbilitiesComponent');
}
ability: AbilityViewModel = {
id: 1,
name: 'Strength',
value: 18,
modification: 2,
canSaveThrows: true,
savingThrows: 1,
skills: [
{
name: 'Throw',
value: 1,
can: false
}
]
}
getCharacterStats() {
this.store.select( s => s.playerStore.characterId).pipe(first()).subscribe((characterId) => {
this.characterService.getCharacterStats(characterId).pipe(first()).subscribe((characterStats) => {
this.characterStats = characterStats;
}, (error: ErrorResponse | HttpErrorResponse) => {
if (error instanceof HttpErrorResponse) {
error = error.error as ErrorResponse;
}
console.error(error.message);
});
})
} }
toggle() { toggle() {
this.isExpanded = !this.isExpanded; this.isExpanded = !this.isExpanded;
} }
SwitchMiddleComponent(componentName: string) {
switch(componentName){
case 'AbilitiesComponent':
this.middleComponent = AbilitiesComponent;
}
}
} }

View File

@ -5,9 +5,9 @@ export interface CharacterStatsViewModel {
modification: number; modification: number;
savingThrows: number; savingThrows: number;
canSaveThrows: boolean; canSaveThrows: boolean;
skills: { skills: [{
name: string; name: string;
value: number; value: number;
can: boolean; can: boolean;
}; }];
} }