diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts index 50924a9..fa9f764 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts @@ -27,6 +27,7 @@ import { MatSortModule, MatDialogModule, MatTooltipModule, + MatSnackBarModule, } from '@angular/material'; import { UserService } from '../services/user.service'; import { StoreModule } from '@ngrx/store'; @@ -52,6 +53,8 @@ import { SpellDetailsDialogComponent } from './components/spell-details-dialog/s import { GameMasterShopkeepersTableComponent } from './components/game-master-shopkeepers-table/game-master-shopkeepers-table.component'; import { SendMessageActionComponent } from './components/game-master-character-actions-dialog/actions-components/send-message-action/send-message-action.component'; import { DynamicModule } from 'ng-dynamic-component'; +import { SnackbarComponent } from './shared/snackbar/snackbar.component'; +import { MessageDialogComponent } from './shared/message-dialog/message-dialog.component'; @NgModule({ declarations: [ @@ -73,6 +76,8 @@ import { DynamicModule } from 'ng-dynamic-component'; SpellDetailsDialogComponent, GameMasterShopkeepersTableComponent, SendMessageActionComponent, + SnackbarComponent, + MessageDialogComponent, ], imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), @@ -102,6 +107,7 @@ import { DynamicModule } from 'ng-dynamic-component'; MatTooltipModule, MatRadioModule, DynamicModule, + MatSnackBarModule, ], providers: [ UserService, @@ -124,6 +130,8 @@ import { DynamicModule } from 'ng-dynamic-component'; SpellDetailsDialogComponent, GameMasterShopkeepersTableComponent, SendMessageActionComponent, + SnackbarComponent, + MessageDialogComponent, ], }) export class AppModule {} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts index 1ed96bf..fd7c631 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts @@ -4,9 +4,11 @@ import { first } from 'rxjs/operators'; import { Store } from '@ngrx/store'; import { AppState } from 'src/app/store/models/app-state.model'; import { AbilitiesComponent } from '../abilities/abilities.component'; -import {ClearStore, ClearUserId} from '../../store/actions/app.actions'; +import { ClearStore, ClearUserId } from '../../store/actions/app.actions'; import { Router } from '@angular/router'; -import {ClearCharacterId} from "../../store/actions/player.action"; +import { ClearCharacterId } from '../../store/actions/player.action'; +import { MatSnackBar } from '@angular/material'; +import { SnackbarComponent } from '../../shared/snackbar/snackbar.component'; @Component({ selector: 'app-player-dashboard', @@ -18,17 +20,26 @@ export class PlayerDashboardComponent implements OnInit { isExpanded = false; selected = false; - constructor(private signalRService: PlayerSignalRService, private store: Store, private router: Router) {} + constructor( + private signalRService: PlayerSignalRService, + private store: Store, + private router: Router, + private _snackBar: MatSnackBar + ) {} ngOnInit() { - this.store.select(s => s.playerStore.characterId).pipe(first()).subscribe((id) => { - this.signalRService.Login(id); - this.SwitchMiddleComponent('AbilitiesComponent'); - }); + this.store + .select((s) => s.playerStore.characterId) + .pipe(first()) + .subscribe((id) => { + this.SubscribeToEvents(); + this.signalRService.Login(id); + this.SwitchMiddleComponent('AbilitiesComponent'); + }); } toggle() { - this.isExpanded = !this.isExpanded; + this.isExpanded = !this.isExpanded; } SwitchMiddleComponent(componentName: string) { @@ -43,4 +54,23 @@ export class PlayerDashboardComponent implements OnInit { this.store.dispatch(new ClearStore()); this.router.navigate(['/']); } + + private SubscribeToEvents(): void { + this.signalRService.runMethod.subscribe( + (result: { methodName: string; parameters }) => { + switch (result.methodName) { + case 'MessageFromGameMaster': + this._snackBar.openFromComponent(SnackbarComponent, { + horizontalPosition: 'end', + verticalPosition: 'top', + data: { + message: 'New message from GM', + methodName: result.methodName, + gmMessage: result.parameters.message, + }, + }); + } + } + ); + } } diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/message-dialog/message-dialog.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/message-dialog/message-dialog.component.css new file mode 100644 index 0000000..7ebd57a --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/message-dialog/message-dialog.component.css @@ -0,0 +1,11 @@ +::ng-deep .mat-dialog-container { + background-color: #4a5867; + color: whitesmoke; + box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), + 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 5px 20px 4px #d8d8d8; +} + +.message-dialog-title { + font: 15px/20px Roboto, 'Helvetica Neue', sans-serif; + text-align: justify; +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/message-dialog/message-dialog.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/message-dialog/message-dialog.component.html new file mode 100644 index 0000000..8f5d4ab --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/message-dialog/message-dialog.component.html @@ -0,0 +1,3 @@ +
+ {{data.message}} +
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/message-dialog/message-dialog.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/message-dialog/message-dialog.component.ts new file mode 100644 index 0000000..2d489b1 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/message-dialog/message-dialog.component.ts @@ -0,0 +1,16 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; + +@Component({ + selector: 'app-message-dialog', + templateUrl: './message-dialog.component.html', + styleUrls: ['./message-dialog.component.css'], +}) +export class MessageDialogComponent implements OnInit { + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any + ) {} + + ngOnInit() {} +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/signalR-service/player-signalR.service.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/signalR-service/player-signalR.service.ts index cbe292f..4216e7f 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/signalR-service/player-signalR.service.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/signalR-service/player-signalR.service.ts @@ -1,12 +1,15 @@ import { Inject, Injectable } from '@angular/core'; import { SignalRService } from './base/signalR.service'; +import { Subject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class PlayerSignalRService { signalR: SignalRService; + runMethod: Subject<{ methodName: string; parameters: {} }>; constructor(@Inject('BASE_URL') baseUrl: string) { this.signalR = new SignalRService(baseUrl); + this.runMethod = new Subject<{ methodName: string; parameters: {} }>(); this.registerOnServerEvents(); } @@ -21,5 +24,14 @@ export class PlayerSignalRService { } private registerOnServerEvents(): void { + this.signalR.hubConnection.on( + 'MessageFromGameMaster', + (message: string) => { + this.runMethod.next({ + methodName: 'MessageFromGameMaster', + parameters: { message: message }, + }); + } + ); } } diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/snackbar/snackbar.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/snackbar/snackbar.component.css new file mode 100644 index 0000000..c81cb82 --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/snackbar/snackbar.component.css @@ -0,0 +1,5 @@ +.flex { + display: flex; + align-items: baseline; + justify-content: space-between; +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/snackbar/snackbar.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/snackbar/snackbar.component.html new file mode 100644 index 0000000..7a903dc --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/snackbar/snackbar.component.html @@ -0,0 +1,11 @@ +
+
{{message}}
+
+ + +
+
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/snackbar/snackbar.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/snackbar/snackbar.component.ts new file mode 100644 index 0000000..3764c7f --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/snackbar/snackbar.component.ts @@ -0,0 +1,41 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { + MAT_SNACK_BAR_DATA, + MatDialog, + MatSnackBarRef, +} from '@angular/material'; +import { MessageDialogComponent } from '../message-dialog/message-dialog.component'; + +@Component({ + selector: 'app-snackbar', + templateUrl: './snackbar.component.html', + styleUrls: ['./snackbar.component.css'], +}) +export class SnackbarComponent implements OnInit { + message: string = ''; + constructor( + public snackBarRef: MatSnackBarRef, + @Inject(MAT_SNACK_BAR_DATA) public data: any, + public dialog: MatDialog + ) {} + + ngOnInit() { + this.message = this.data.message; + } + + ClickAction() { + switch (this.data.methodName) { + case 'MessageFromGameMaster': + this.ShowMessageFromGM(); + break; + } + } + + ShowMessageFromGM() { + this.dialog.open(MessageDialogComponent, { + height: '500px', + data: { message: this.data.gmMessage }, + }); + this.snackBarRef.dismiss(); + } +}