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

SES-124 Created ability cards

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.css
View File

@ -3,9 +3,29 @@
height: 480px;
}
#main>.mat-card{
padding: 0px;
padding: 0;
}
.diagonal-line{
width:100px;
background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%);
width:50px;
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;
}

21
SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html
View File

@ -1,19 +1,24 @@
<div *ngIf="ability" id="main">
<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}}
<div class="diagonal-line"></div>
{{ability.modification}}
Mod: {{ability.modification > 0? '+' + ability.modification : '-' + ability.modification}}
<div class="diagonal-line"></div>
{{ability.name}}
<div *ngIf="ability.canSaveThrows" class="diagonal-line"></div>
<div *ngIf="ability.canSaveThrows">
{{ability.savingthrows}}
<div *ngIf="ability.canSaveThrows" class="diagonal-line" style="margin-left: auto"></div>
<div *ngIf="ability.canSaveThrows" style="margin-right: 10px">
ST: {{ability.savingthrows > 0? '+' + ability.savingthrows : '-' + ability.savingthrows}}
</div>
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-content>
<mat-divider [style.border-top-color]="'black'"></mat-divider>
<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>
</div>

25
SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.spec.ts
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();
});
});

6
SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.ts
View File

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

6
SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
View File

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

13
SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
View File

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

2
SessionCompanion/SessionCompanion/ClientApp/src/styles.css
View File

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