SES-124 Created ability cards

This commit is contained in:
Łukasz Góreczny 2021-01-02 19:53:03 +01:00
parent 543bc41f3f
commit 9296e1713b
7 changed files with 44 additions and 55 deletions

View File

@ -3,9 +3,29 @@
height: 480px; height: 480px;
} }
#main>.mat-card{ #main>.mat-card{
padding: 0px; padding: 0;
} }
.diagonal-line{ .diagonal-line{
width:100px; width:50px;
background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%); background:linear-gradient(45deg,rgb(16 32 40 / 0%) 49%,black,#ffffff00 51%);
}
#ability-card-content{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-top: 10px;
padding-bottom: 10px;
}
#skill-btn{
border-color: black;
flex: 1 0 auto;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
#skill-btn-divider{
border-left: black 1px solid;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
} }

View File

@ -1,19 +1,24 @@
<div *ngIf="ability" id="main"> <div *ngIf="ability" id="main">
<mat-card> <mat-card>
<mat-card-header id="ability-card-header"> <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>
{{ability.modification}} Mod: {{ability.modification > 0? '+' + ability.modification : '-' + ability.modification}}
<div class="diagonal-line"></div> <div class="diagonal-line"></div>
{{ability.name}} {{ability.name}}
<div *ngIf="ability.canSaveThrows" class="diagonal-line"></div> <div *ngIf="ability.canSaveThrows" class="diagonal-line" style="margin-left: auto"></div>
<div *ngIf="ability.canSaveThrows"> <div *ngIf="ability.canSaveThrows" style="margin-right: 10px">
{{ability.savingthrows}} ST: {{ability.savingthrows > 0? '+' + ability.savingthrows : '-' + ability.savingthrows}}
</div> </div>
</mat-card-header> </mat-card-header>
<mat-divider></mat-divider> <mat-divider [style.border-top-color]="'black'"></mat-divider>
<mat-card-content> <mat-card-content id="ability-card-content" [style.background]="contentStyle.bgColor" [style.color]="contentStyle.textColor">
<a mat-stroked-button *ngFor="let skill of ability.skills" id="skill-btn">
{{skill.name}}
&nbsp; &nbsp;
<span id="skill-btn-divider"></span>
{{skill.value > 0? '+' + skill.value : '-' + skill.value}}
</a>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div> </div>

View File

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

View File

@ -8,8 +8,12 @@ import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/A
}) })
export class AbilityCardComponent implements OnInit { export class AbilityCardComponent implements OnInit {
@Input() ability: AbilityViewModel; @Input() ability: AbilityViewModel;
@Input() headStyle: { bgColor: string; textColor: string };
@Input() contentStyle: { bgColor: string; textColor: string };
constructor() {} constructor() {}
ngOnInit() {} ngOnInit() {
this.ability.skills.sort((a, b) => (a.name > b.name ? 1 : -1));
}
} }

View File

@ -1,5 +1 @@
<p></p>
<p></p>
<p></p>
<p></p>
<app-ability-card [ability]="test"></app-ability-card>

View File

@ -1,5 +1,4 @@
import { Component, OnInit } from '@angular/core'; import { Component } from '@angular/core';
import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/AbilityViewModel';
@Component({ @Component({
selector: 'app-player-dashboard', selector: 'app-player-dashboard',
@ -9,16 +8,6 @@ import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/A
export class PlayerDashboardComponent { export class PlayerDashboardComponent {
isExpanded = false; isExpanded = false;
test: AbilityViewModel = {
id: 1,
name: 'Dexterity',
value: 20,
modification: 3,
savingthrows: 1,
canSaveThrows: false,
skills: [],
};
collapse() { collapse() {
this.isExpanded = false; this.isExpanded = false;
} }

View File

@ -70,7 +70,7 @@
} }
mat-divider { mat-divider {
border-top-color: #e9cca7 !important; border-top-color: #e9cca7;
} }
.arrow-select { .arrow-select {