SES-124 #48
@ -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' }),
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
#main{
|
||||
width: 480px;
|
||||
height: 480px;
|
||||
}
|
||||
#main>.mat-card{
|
||||
padding: 0;
|
||||
}
|
||||
.diagonal-line{
|
||||
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;
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
<div *ngIf="ability" id="main">
|
||||
<mat-card>
|
||||
<mat-card-header id="ability-card-header" [style.background]="headStyle.bgColor" [style.color]="headStyle.textColor">
|
||||
{{ability.value}}
|
||||
<div class="diagonal-line"></div>
|
||||
Mod: {{ability.modification > 0? '+' + ability.modification : '-' + ability.modification}}
|
||||
<div class="diagonal-line"></div>
|
||||
{{ability.name}}
|
||||
<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 [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}}
|
||||
|
||||
<span id="skill-btn-divider"></span>
|
||||
{{skill.value > 0? '+' + skill.value : '-' + skill.value}}
|
||||
</a>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
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;
|
||||
@Input() headStyle: { bgColor: string; textColor: string };
|
||||
@Input() contentStyle: { bgColor: string; textColor: string };
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {
|
||||
this.ability.skills.sort((a, b) => (a.name > b.name ? 1 : -1));
|
||||
}
|
||||
}
|
||||
@ -35,3 +35,10 @@
|
||||
.mat-list-item.active{
|
||||
color: #e9cca7;
|
||||
}
|
||||
|
||||
.ability_card_container {
|
||||
margin: 5%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -52,6 +52,8 @@
|
||||
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
<mat-sidenav-content class="content">Main content</mat-sidenav-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>
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,31 @@
|
||||
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;
|
||||
selected = false;
|
||||
|
||||
ability: AbilityViewModel = {
|
||||
id: 1,
|
||||
name: 'Strength',
|
||||
value: 18,
|
||||
modification: 2,
|
||||
canSaveThrows: true,
|
||||
savingThrows: 1,
|
||||
skills: [
|
||||
{
|
||||
name: 'Throw',
|
||||
value: 1,
|
||||
can: false
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
collapse() {
|
||||
this.isExpanded = false;
|
||||
}
|
||||
|
||||
@ -10,5 +10,5 @@ export enum scIcon {
|
||||
rogue = 'rogue',
|
||||
Sorcerer = 'sorcerer',
|
||||
Warlock = 'warlock',
|
||||
Wizard = 'wizard'
|
||||
Wizard = 'wizard',
|
||||
}
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
}
|
||||
|
||||
mat-divider {
|
||||
border-top-color: #e9cca7 !important;
|
||||
border-top-color: #e9cca7;
|
||||
}
|
||||
|
||||
.arrow-select {
|
||||
|
||||
@ -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[];
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
export interface SkillViewModel {
|
||||
name: string;
|
||||
value: number;
|
||||
can: boolean;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user