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}}
+
+
+
+
+
+ {{GetSpellLevelAndSchool()}}
+
+
+ history_toggle_off Casting Time: {{spellDictionary.GetCastingTime(spell.castingTime)}}
+
+
+ Range: {{spellDictionary.GetRange(spell.range)}}
+
+
+ hourglass_bottom Duration: {{spellDictionary.GetDuration(spell.duration)}}
+
+
+ Description:
+ {{GetSpellDescription()}}
+ 0">
+
At Higher Levels:
+
{{GetSpellAtHigherLevels()}}
+
+
+ 0">
+
+
+ volume_up |
+ gesture |
+ extension |
+
+
+ Verbal |
+ Somatic |
+ Material |
+
+
+
+
+
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];
+ }
+})();