SES-147 edded Tooltips and basic dialog model

This commit is contained in:
Natalia Gawron 2021-01-12 21:40:24 +01:00
parent 2255777840
commit 28fce7c075
8 changed files with 118 additions and 6 deletions

View File

@ -44,6 +44,7 @@ import { SpellService } from '../services/spell.service';
import { WeaponService } from '../services/weapon.service'; import { WeaponService } from '../services/weapon.service';
import { ArmorService } from '../services/armor.service'; import { ArmorService } from '../services/armor.service';
import { OtherEquipmentService } from '../services/other-equipment.service'; import { OtherEquipmentService } from '../services/other-equipment.service';
import { ThrowPrimaryAbilityComponent } from './components/throws/throw-primary-ability/throw-primary-ability.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -60,6 +61,7 @@ import { OtherEquipmentService } from '../services/other-equipment.service';
GameMasterArmorsTableComponent, GameMasterArmorsTableComponent,
GameMasterWeaponsTableComponent, GameMasterWeaponsTableComponent,
GameMasterCharacterActionsDialogComponent, GameMasterCharacterActionsDialogComponent,
ThrowPrimaryAbilityComponent,
], ],
imports: [ imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@ -103,6 +105,7 @@ import { OtherEquipmentService } from '../services/other-equipment.service';
GameMasterWeaponsTableComponent, GameMasterWeaponsTableComponent,
AbilitiesComponent, AbilitiesComponent,
GameMasterCharacterActionsDialogComponent, GameMasterCharacterActionsDialogComponent,
ThrowPrimaryAbilityComponent
], ],
}) })
export class AppModule {} export class AppModule {}

View File

@ -30,7 +30,7 @@ export class AbilitiesComponent implements OnInit {
.pipe(first()) .pipe(first())
.subscribe((characterId) => { .subscribe((characterId) => {
this.characterService this.characterService
.getCharacterStats(characterId) .getCharacterStats(2)
.pipe(first()) .pipe(first())
.subscribe( .subscribe(
(characterStats) => { (characterStats) => {

View File

@ -1,19 +1,19 @@
<div *ngIf="ability" id="main"> <div *ngIf="ability" id="main">
<mat-card [style.border-color]="headStyle.bgColor" [style.color]="headStyle.bgColor" class="cardContainerClass"> <mat-card [style.border-color]="headStyle.bgColor" [style.color]="headStyle.bgColor" 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">
<div id="ability-value">{{ability.value}}</div> <div matTooltip="Click to roll the {{ability.name}}" id="ability-value" (click)="OpenPrimaryThrowDialog()">{{ability.value}}</div>
<div class="diagonal-line"></div> <div class="diagonal-line"></div>
Mod: {{ability.modification > 0? '+' + ability.modification : + 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" style="margin-left: auto"></div> <div *ngIf="ability.canSaveThrows" class="diagonal-line" style="margin-left: auto"></div>
<div *ngIf="ability.canSaveThrows" style="margin-right: 10px"> <div *ngIf="ability.canSaveThrows" style="margin-right: 10px">
<div id="ability-saving-throws">ST: {{ability.savingThrows > 0? '+' + ability.savingThrows : ability.savingThrows}}</div> <div matTooltip="Click to do the Saving Throw" id="ability-saving-throws">ST: {{ability.savingThrows > 0? '+' + ability.savingThrows : ability.savingThrows}}</div>
</div> </div>
</mat-card-header> </mat-card-header>
<mat-divider [style.border-top-color]="'black'"></mat-divider> <mat-divider [style.border-top-color]="'black'"></mat-divider>
<mat-card-content id="ability-card-content" [style.background]="contentStyle.bgColor" [style.color]="contentStyle.textColor"> <mat-card-content id="ability-card-content" [style.background]="contentStyle.bgColor" [style.color]="contentStyle.textColor">
<a [style.border-color]="headStyle.bgColor" mat-stroked-button *ngFor="let skill of ability.skills" id="skill-btn"> <a matTooltip="Click to roll the {{skill.name}}" [style.border-color]="headStyle.bgColor" mat-stroked-button *ngFor="let skill of ability.skills" id="skill-btn">
{{skill.name}} {{skill.name}}
&nbsp; &nbsp; &nbsp; &nbsp;
<span [style.border-left-color]="headStyle.bgColor" id="skill-btn-divider"></span> <span [style.border-left-color]="headStyle.bgColor" id="skill-btn-divider"></span>

View File

@ -1,5 +1,7 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import {CharacterStatsViewModel} from '../../../types/viewmodels/character-viewmodels/CharacterStatsViewModel'; import { CharacterStatsViewModel } from '../../../types/viewmodels/character-viewmodels/CharacterStatsViewModel';
import { ThrowPrimaryAbilityComponent } from '../throws/throw-primary-ability/throw-primary-ability.component';
import { MatDialog } from '@angular/material';
@Component({ @Component({
selector: 'app-ability-card', selector: 'app-ability-card',
@ -11,7 +13,8 @@ export class AbilityCardComponent implements OnInit {
@Input() headStyle: { bgColor: string; textColor: string }; @Input() headStyle: { bgColor: string; textColor: string };
@Input() contentStyle: { bgColor: string; textColor: string }; @Input() contentStyle: { bgColor: string; textColor: string };
constructor() {} constructor(public dialog: MatDialog) {
}
ngOnInit() { ngOnInit() {
if (this.ability.skills != null) { if (this.ability.skills != null) {
@ -42,4 +45,11 @@ export class AbilityCardComponent implements OnInit {
break; break;
} }
} }
public OpenPrimaryThrowDialog(): void {
this.dialog.open(ThrowPrimaryAbilityComponent, {
});
}
} }

View File

@ -0,0 +1,41 @@
.throw-container {
top: 50%;
}
::ng-deep.mat-dialog-container {
background-color: #102028;
color: whitesmoke;
}
.header-throw-dialog {
color: orange;
background-color: #102028;
}
.content-throw-dialog {
background-color: #102028;
color: orange;
height: 400px;
}
.throw-dialog-actions {
background-color: #102028;
color: orange;
}
@media (max-width: 468px) {
.throw-container {
width: 250px;
}
}
@media (min-width: 468px) and (max-width: 768px) {
.throw-container {
width: 420px;
}
}
@media (min-width: 768px) {
.throw-container {
width: 480px;
}
}

View File

@ -0,0 +1,13 @@
<div class="throw-container">
<div mat-dialog-title class="header-throw-dialog">
Header
</div>
<div mat-dialog-content class="content-throw-dialog">
Content
</div>
<div mat-dialog-actions class="throw-dialog-actions">
<button mat-button [mat-dialog-close] >Cancel</button>
<button mat-button [mat-dialog-close] cdkFocusInitial>Ok</button>
</div>
</div>

View File

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

View File

@ -0,0 +1,20 @@
import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { AbilitiesComponent } from '../../abilities/abilities.component';
@Component({
selector: 'app-throw-primary-ability',
templateUrl: './throw-primary-ability.component.html',
styleUrls: ['./throw-primary-ability.component.css']
})
export class ThrowPrimaryAbilityComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<AbilitiesComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {}
ngOnInit() {
}
}