Added base for ability cards

This commit is contained in:
Łukasz Góreczny 2021-01-01 22:14:01 +01:00
parent b35cca6091
commit 543bc41f3f
10 changed files with 107 additions and 3 deletions

View File

@ -26,6 +26,7 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import {environment} from '../environments/environment';
import {reducers} from './store/models/app-state.model';
import {CharacterService} from '../services/character.service';
import { AbilityCardComponent } from './components/ability-card/ability-card.component';
@NgModule({
declarations: [
@ -36,6 +37,7 @@ import {CharacterService} from '../services/character.service';
GameMasterDashboardComponent,
PlayerDashboardComponent,
SelectCharacterComponent,
AbilityCardComponent,
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),

View File

@ -0,0 +1,11 @@
#main{
width: 480px;
height: 480px;
}
#main>.mat-card{
padding: 0px;
}
.diagonal-line{
width:100px;
background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%);
}

View File

@ -0,0 +1,19 @@
<div *ngIf="ability" id="main">
<mat-card>
<mat-card-header id="ability-card-header">
{{ability.value}}
<div class="diagonal-line"></div>
{{ability.modification}}
<div class="diagonal-line"></div>
{{ability.name}}
<div *ngIf="ability.canSaveThrows" class="diagonal-line"></div>
<div *ngIf="ability.canSaveThrows">
{{ability.savingthrows}}
</div>
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-content>
</mat-card-content>
</mat-card>
</div>

View File

@ -0,0 +1,25 @@
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

@ -0,0 +1,15 @@
import { Component, Input, OnInit } from '@angular/core';
import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/AbilityViewModel';
@Component({
selector: 'app-ability-card',
templateUrl: './ability-card.component.html',
styleUrls: ['./ability-card.component.css'],
})
export class AbilityCardComponent implements OnInit {
@Input() ability: AbilityViewModel;
constructor() {}
ngOnInit() {}
}

View File

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

View File

@ -1,13 +1,24 @@
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/AbilityViewModel';
@Component({
selector: 'app-player-dashboard',
templateUrl: './player-dashboard.component.html',
styleUrls: ['./player-dashboard.component.css']
styleUrls: ['./player-dashboard.component.css'],
})
export class PlayerDashboardComponent {
isExpanded = false;
test: AbilityViewModel = {
id: 1,
name: 'Dexterity',
value: 20,
modification: 3,
savingthrows: 1,
canSaveThrows: false,
skills: [],
};
collapse() {
this.isExpanded = false;
}

View File

@ -10,5 +10,5 @@ export enum scIcon {
rogue = 'rogue',
Sorcerer = 'sorcerer',
Warlock = 'warlock',
Wizard = 'wizard'
Wizard = 'wizard',
}

View File

@ -0,0 +1,11 @@
import {SkillViewModel} from './SkillViewModel';
export interface AbilityViewModel {
id: number;
name: string;
value: number;
modification: number;
savingthrows: number;
canSaveThrows: boolean;
skills: SkillViewModel[];
}

View File

@ -0,0 +1,5 @@
export interface SkillViewModel {
name: string;
value: number;
can: boolean;
}