SES-135 connected method with backend, fixed card with stats UI
This commit is contained in:
parent
145491fd2a
commit
3627f987da
@ -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 {}
|
||||||
|
@ -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>
|
@ -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);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -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;
|
||||||
|
@ -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>
|
||||||
|
@ -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 };
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
};
|
}];
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user