From 35cbec16f76c282aab5b543f7f1b2a36b05914fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20G=C3=B3reczny?= Date: Fri, 15 Jan 2021 23:24:50 +0100 Subject: [PATCH] SES-146 Added spells dialog --- .../ClientApp/src/app/app.module.ts | 3 + .../game-master-spells-table.component.html | 2 +- .../game-master-spells-table.component.ts | 9 +- .../spell-details-dialog.component.css | 38 ++++++++ .../spell-details-dialog.component.html | 49 ++++++++++ .../spell-details-dialog.component.ts | 96 +++++++++++++++++++ .../shared/dictionaries/SpellDictionary.ts | 59 ++++++++++++ 7 files changed, 254 insertions(+), 2 deletions(-) create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/spell-details-dialog/spell-details-dialog.component.css create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/spell-details-dialog/spell-details-dialog.component.html create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/spell-details-dialog/spell-details-dialog.component.ts create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/shared/dictionaries/SpellDictionary.ts diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts index ab57d47..93b3866 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts @@ -44,6 +44,7 @@ import { SpellService } from '../services/spell.service'; import { WeaponService } from '../services/weapon.service'; import { ArmorService } from '../services/armor.service'; import { OtherEquipmentService } from '../services/other-equipment.service'; +import { SpellDetailsDialogComponent } from './components/spell-details-dialog/spell-details-dialog.component'; @NgModule({ declarations: [ @@ -60,6 +61,7 @@ import { OtherEquipmentService } from '../services/other-equipment.service'; GameMasterArmorsTableComponent, GameMasterWeaponsTableComponent, GameMasterCharacterActionsDialogComponent, + SpellDetailsDialogComponent, ], imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), @@ -103,6 +105,7 @@ import { OtherEquipmentService } from '../services/other-equipment.service'; GameMasterWeaponsTableComponent, AbilitiesComponent, GameMasterCharacterActionsDialogComponent, + SpellDetailsDialogComponent, ], }) export class AppModule {} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-spells-table/game-master-spells-table.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-spells-table/game-master-spells-table.component.html index bcbc20f..b33bf0d 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-spells-table/game-master-spells-table.component.html +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-spells-table/game-master-spells-table.component.html @@ -27,7 +27,7 @@ - + No data matching the filter "{{input.value}}" diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-spells-table/game-master-spells-table.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-spells-table/game-master-spells-table.component.ts index 7005445..0cb7bd8 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-spells-table/game-master-spells-table.component.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-spells-table/game-master-spells-table.component.ts @@ -7,6 +7,8 @@ import { SpellService } from '../../../services/spell.service'; import { first } from 'rxjs/operators'; import { ErrorResponse } from '../../../types/ErrorResponse'; import { HttpErrorResponse } from '@angular/common/http'; +import { MatDialog } from '@angular/material'; +import { SpellDetailsDialogComponent } from '../spell-details-dialog/spell-details-dialog.component'; @Component({ selector: 'app-game-master-spells-table', @@ -20,7 +22,7 @@ export class GameMasterSpellsTableComponent implements OnInit { @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatSort, { static: true }) sort: MatSort; - constructor(private spellService: SpellService) { + constructor(private spellService: SpellService, public dialog: MatDialog) { spellService .GetAllSpells() .pipe(first()) @@ -49,4 +51,9 @@ export class GameMasterSpellsTableComponent implements OnInit { this.dataSource.paginator.firstPage(); } } + + ShowSpellDetailsDialog(spellId: number) { + let spell = this.dataSource.data.find((e) => e.id == spellId); + this.dialog.open(SpellDetailsDialogComponent, { data: { spell: spell } }); + } } diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/spell-details-dialog/spell-details-dialog.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/spell-details-dialog/spell-details-dialog.component.css new file mode 100644 index 0000000..72bdba3 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/spell-details-dialog/spell-details-dialog.component.css @@ -0,0 +1,38 @@ +.spell-card-flag { + clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0); + width: 70px; + height: 150px; +} +.shadow-for-flag { + right: 5%; + position: absolute; + filter: drop-shadow(0px 0px 3px white); +} +.names-on-flag { + height: 18px; + font-size: 15px !important; + text-align: center; +} +::ng-deep mat-dialog-container { + padding: 0 !important; +} +::ng-deep mat-card { + padding: 0 !important; +} +mat-icon { + vertical-align: middle; +} +.spell-details-card { + color: whitesmoke; + background-color: lightgray; + max-width: 600px; +} +.spell-details-card > mat-card-header { + background-color: #3d4751; +} +.spell-details-card > mat-card-content { + background-color: #4f5c69; +} +::-webkit-scrollbar { + display: none; +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/spell-details-dialog/spell-details-dialog.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/spell-details-dialog/spell-details-dialog.component.html new file mode 100644 index 0000000..3ab760d --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/spell-details-dialog/spell-details-dialog.component.html @@ -0,0 +1,49 @@ + + +
+ {{spell.name}} +
+
+
+
{{elem}}
+
{{elem}}
+
+
+ + +
+
{{GetSpellLevelAndSchool()}}
+
+
+ history_toggle_off Casting Time: {{spellDictionary.GetCastingTime(spell.castingTime)}} +
+
+ Range: {{spellDictionary.GetRange(spell.range)}} +
+
+ hourglass_bottom Duration: {{spellDictionary.GetDuration(spell.duration)}} +
+
+ Description: +

{{GetSpellDescription()}}

+
+ At Higher Levels: +

{{GetSpellAtHigherLevels()}}

+
+
+
+ + + + + + + + + + + +
volume_upgestureextension
VerbalSomaticMaterial
+
+ + diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/spell-details-dialog/spell-details-dialog.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/spell-details-dialog/spell-details-dialog.component.ts new file mode 100644 index 0000000..541a8fb --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/spell-details-dialog/spell-details-dialog.component.ts @@ -0,0 +1,96 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; +import { SpellViewModel } from '../../../types/viewmodels/spell-viewmodels/SpellViewModel'; +import SpellDictionary from '../../shared/dictionaries/SpellDictionary'; + +@Component({ + selector: 'app-spell-details-dialog', + templateUrl: './spell-details-dialog.component.html', + styleUrls: ['./spell-details-dialog.component.css'], +}) +export class SpellDetailsDialogComponent implements OnInit { + spell: SpellViewModel; + spellFlagBackgroundColor: string; + spellDictionary = SpellDictionary; + + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any + ) {} + + ngOnInit() { + this.spell = this.data.spell; + this.ChangeFlagColor(); + } + + GetSpellDescription() { + let result = ''; + for (let elem of this.spell.descriptions) { + result += elem; + } + return result; + } + + GetSpellAtHigherLevels() { + let result = ''; + for (let elem of this.spell.higherLevel) { + result += elem; + } + return result; + } + + GetSpellLevelAndSchool() { + let result = ''; + if (this.spell.level == -1) { + result += this.spell.school + ' Cantrip'; + } else { + result += this.spell.level + ' st level ' + this.spell.school; + } + + if (this.spell.ritual) { + result += ' (ritual)'; + } + return result; + } + + ChangeFlagColor() { + switch (this.spell.school) { + case 'Evocation': { + this.spellFlagBackgroundColor = '#7c081e'; + break; + } + case 'Conjuration': { + this.spellFlagBackgroundColor = '#335f96'; + break; + } + case 'Abjuration': { + this.spellFlagBackgroundColor = '#bab725'; + break; + } + case 'Transmutation': { + this.spellFlagBackgroundColor = '#875a2d'; + break; + } + case 'Enchantment': { + this.spellFlagBackgroundColor = '#479636'; + break; + } + case 'Necromancy': { + this.spellFlagBackgroundColor = '#444444'; + break; + } + case 'Divination': { + this.spellFlagBackgroundColor = '#a1a3a3'; + break; + } + case 'Illusion': { + this.spellFlagBackgroundColor = '#652d84'; + break; + } + default: { + this.spellFlagBackgroundColor = '#212b87'; + break; + } + } + } +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/dictionaries/SpellDictionary.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/dictionaries/SpellDictionary.ts new file mode 100644 index 0000000..6f703a1 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/dictionaries/SpellDictionary.ts @@ -0,0 +1,59 @@ +const Ranges: { [key: string]: string } = { + Self: 'Self', + Touch: 'Touch', + Special: 'Special', + Sight: 'Slight', + Unlimited: 'Unlimited', + Feet_5: '5 Feet', + Feet_10: '10 Feet', + Feet_30: '30 Feet', + Feet_60: '60 Feet', + Feet_90: '90 Feet', + Feet_100: '100 Feet', + Feet_120: '120 Feet', + Feet_150: '150 Feet', + Feet_300: '300 Feet', + Feet_500: '500 Feet', + Miles_1: '1 Mile', + Miles_500: '500 Miles', +}; + +const Durations: { [key: string]: string } = { + Instantaneous: 'Instantaneous', + Until_dispelled: 'Until dispeled', + Special: 'Special', + Minutes_1: '1 Minute', + Minutes_10: '10 Minutes', + Hours_1: '1 Hour', + Hours_2: '2 Hours', + Hours_8: '8 Hours', + Hours_24: '24 Hours', + Days_7: '7 Days', + Days_10: '10 Days', + Days_30: '30 Days', + Round_1: '1 Round', +}; + +const CastingTimes: { [key: string]: string } = { + Minutes_1: '1 Minute', + Minutes_10: '10 Minutes', + Hours_1: '1 Hour', + Hours_8: '8 Hours', + Hours_12: '12 Hours', + Hours_24: '24 Hours', + Action_1: '1 Action', + Reaction_1: '1 Reaction', + Bonus_Action_1: '1 Bonus Action', +}; + +export default new (class SpellDictionary { + GetRange(name: string) { + return Ranges[name]; + } + GetDuration(name: string) { + return Durations[name]; + } + GetCastingTime(name: string) { + return CastingTimes[name]; + } +})(); -- 2.20.1