SES-158 Added function to send message to player #83

Merged
s426128 merged 4 commits from SES-158 into dev 2021-01-21 17:51:37 +01:00
9 changed files with 145 additions and 8 deletions
Showing only changes of commit d5d9247edd - Show all commits

View File

@ -27,6 +27,7 @@ import {
MatSortModule, MatSortModule,
MatDialogModule, MatDialogModule,
MatTooltipModule, MatTooltipModule,
MatSnackBarModule,
} from '@angular/material'; } from '@angular/material';
import { UserService } from '../services/user.service'; import { UserService } from '../services/user.service';
import { StoreModule } from '@ngrx/store'; 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 { 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 { SendMessageActionComponent } from './components/game-master-character-actions-dialog/actions-components/send-message-action/send-message-action.component';
import { DynamicModule } from 'ng-dynamic-component'; import { DynamicModule } from 'ng-dynamic-component';
import { SnackbarComponent } from './shared/snackbar/snackbar.component';
import { MessageDialogComponent } from './shared/message-dialog/message-dialog.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -73,6 +76,8 @@ import { DynamicModule } from 'ng-dynamic-component';
SpellDetailsDialogComponent, SpellDetailsDialogComponent,
GameMasterShopkeepersTableComponent, GameMasterShopkeepersTableComponent,
SendMessageActionComponent, SendMessageActionComponent,
SnackbarComponent,
MessageDialogComponent,
], ],
imports: [ imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@ -102,6 +107,7 @@ import { DynamicModule } from 'ng-dynamic-component';
MatTooltipModule, MatTooltipModule,
MatRadioModule, MatRadioModule,
DynamicModule, DynamicModule,
MatSnackBarModule,
], ],
providers: [ providers: [
UserService, UserService,
@ -124,6 +130,8 @@ import { DynamicModule } from 'ng-dynamic-component';
SpellDetailsDialogComponent, SpellDetailsDialogComponent,
GameMasterShopkeepersTableComponent, GameMasterShopkeepersTableComponent,
SendMessageActionComponent, SendMessageActionComponent,
SnackbarComponent,
MessageDialogComponent,
], ],
}) })
export class AppModule {} export class AppModule {}

View File

@ -6,7 +6,9 @@ import { AppState } from 'src/app/store/models/app-state.model';
import { AbilitiesComponent } from '../abilities/abilities.component'; 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 { 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({ @Component({
selector: 'app-player-dashboard', selector: 'app-player-dashboard',
@ -18,10 +20,19 @@ export class PlayerDashboardComponent implements OnInit {
isExpanded = false; isExpanded = false;
selected = false; selected = false;
constructor(private signalRService: PlayerSignalRService, private store: Store<AppState>, private router: Router) {} constructor(
private signalRService: PlayerSignalRService,
private store: Store<AppState>,
private router: Router,
private _snackBar: MatSnackBar
) {}
ngOnInit() { ngOnInit() {
this.store.select(s => s.playerStore.characterId).pipe(first()).subscribe((id) => { this.store
.select((s) => s.playerStore.characterId)
.pipe(first())
.subscribe((id) => {
this.SubscribeToEvents();
this.signalRService.Login(id); this.signalRService.Login(id);
this.SwitchMiddleComponent('AbilitiesComponent'); this.SwitchMiddleComponent('AbilitiesComponent');
}); });
@ -43,4 +54,23 @@ export class PlayerDashboardComponent implements OnInit {
this.store.dispatch(new ClearStore()); this.store.dispatch(new ClearStore());
this.router.navigate(['/']); 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,
},
});
}
}
);
}
} }

View File

@ -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;
}

View File

@ -0,0 +1,3 @@
<div mat-dialog-title class="message-dialog-title">
{{data.message}}
</div>

View File

@ -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<MessageDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {}
ngOnInit() {}
}

View File

@ -1,12 +1,15 @@
import { Inject, Injectable } from '@angular/core'; import { Inject, Injectable } from '@angular/core';
import { SignalRService } from './base/signalR.service'; import { SignalRService } from './base/signalR.service';
import { Subject } from 'rxjs';
@Injectable({ providedIn: 'root' }) @Injectable({ providedIn: 'root' })
export class PlayerSignalRService { export class PlayerSignalRService {
signalR: SignalRService; signalR: SignalRService;
runMethod: Subject<{ methodName: string; parameters: {} }>;
constructor(@Inject('BASE_URL') baseUrl: string) { constructor(@Inject('BASE_URL') baseUrl: string) {
this.signalR = new SignalRService(baseUrl); this.signalR = new SignalRService(baseUrl);
this.runMethod = new Subject<{ methodName: string; parameters: {} }>();
this.registerOnServerEvents(); this.registerOnServerEvents();
} }
@ -21,5 +24,14 @@ export class PlayerSignalRService {
} }
private registerOnServerEvents(): void { private registerOnServerEvents(): void {
this.signalR.hubConnection.on(
'MessageFromGameMaster',
(message: string) => {
this.runMethod.next({
methodName: 'MessageFromGameMaster',
parameters: { message: message },
});
}
);
} }
} }

View File

@ -0,0 +1,5 @@
.flex {
display: flex;
align-items: baseline;
justify-content: space-between;
}

View File

@ -0,0 +1,11 @@
<div class="flex">
<div class="data">{{message}}</div>
<div class="dismiss">
<button mat-icon-button (click)="ClickAction()">
<mat-icon>remove_red_eye</mat-icon>
</button>
<button mat-icon-button (click)="snackBarRef.dismiss()">
<mat-icon>close</mat-icon>
</button>
</div>
</div>

View File

@ -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<SnackbarComponent>,
@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();
}
}