s426135/session-companion
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request 'SES-158 Added function to send message to player' (#83) from SES-158 into dev

Browse Source 
Reviewed-on: #83
This commit is contained in:
Natalia Gawron 2021-01-21 17:51:33 +01:00
commit cac19da882
19 changed files with 306 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
SessionCompanion/SessionCompanion/ClientApp/package-lock.json generated
View File

@ -8674,6 +8674,21 @@
"integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
"dev": true
},
"ng-dynamic-component": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/ng-dynamic-component/-/ng-dynamic-component-8.0.1.tgz",
"integrity": "sha512-Ak25QTYmjNVxyZ6ywqRDDjoqAJheFeK0XoHsomwVjdHSiLoQcGfNNj5z51pqoRGpjdDZMSV+J2gaCbRNBeiy3g==",
"requires": {
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
"integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
}
}
},
"nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",

1
SessionCompanion/SessionCompanion/ClientApp/package.json
View File

@ -32,6 +32,7 @@
"core-js": "^3.3.3",
"hammerjs": "^2.0.8",
"jquery": "3.4.1",
"ng-dynamic-component": "^8.0.1",
"oidc-client": "^1.9.1",
"popper.js": "^1.16.0",
"rpg-awesome": "^0.2.0",

13
SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
View File

@ -27,6 +27,7 @@ import {
MatSortModule,
MatDialogModule,
MatTooltipModule,
MatSnackBarModule,
} from '@angular/material';
import { UserService } from '../services/user.service';
import { StoreModule } from '@ngrx/store';
@ -50,6 +51,10 @@ import { GameMasterMonstersTableComponent } from './components/game-master-monst
import { MonsterService } from '../services/monster.service';
import { SpellDetailsDialogComponent } from './components/spell-details-dialog/spell-details-dialog.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 { DynamicModule } from 'ng-dynamic-component';
import { SnackbarComponent } from './shared/snackbar/snackbar.component';
import { MessageDialogComponent } from './shared/message-dialog/message-dialog.component';
import { GameMasterTurntrackerComponent } from './components/game-master-turntracker/game-master-turntracker.component';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog/choose-monster-dialog.component';
@ -73,6 +78,9 @@ import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog
GameMasterMonstersTableComponent,
SpellDetailsDialogComponent,
GameMasterShopkeepersTableComponent,
SendMessageActionComponent,
SnackbarComponent,
MessageDialogComponent,
GameMasterTurntrackerComponent,
ChooseMonsterDialogComponent,
],
@ -103,6 +111,8 @@ import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog
MatSortModule,
MatTooltipModule,
MatRadioModule,
DynamicModule,
MatSnackBarModule,
DragDropModule,
],
providers: [
@ -125,6 +135,9 @@ import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog
ThrowPrimaryAbilityComponent,
SpellDetailsDialogComponent,
GameMasterShopkeepersTableComponent,
SendMessageActionComponent,
SnackbarComponent,
MessageDialogComponent,
GameMasterTurntrackerComponent,
ChooseMonsterDialogComponent,
],

36
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-character-actions-dialog/actions-components/send-message-action/send-message-action.component.css Normal file
View File

@ -0,0 +1,36 @@
.send-message-main {
display: flex;
flex-wrap: wrap;
}
.send-message-main > mat-form-field {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.message-textarea {
height: 150px;
}
.break {
flex-basis: 100%;
height: 0;
}
.send-message-actions {
margin-left: auto;
}
.send-message-actions > button {
margin-right: 20px;
margin-left: 20px;
}
.no-focus:focus {
outline: none;
}
.send-button {
color: darkseagreen;
}

11
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-character-actions-dialog/actions-components/send-message-action/send-message-action.component.html Normal file
View File

@ -0,0 +1,11 @@
<form class="send-message-main">
<mat-form-field>
<mat-label>Message</mat-label>
<textarea class="message-textarea" matInput #message></textarea>
</mat-form-field>
<div class="break"></div>
<div class="send-message-actions">
<button mat-stroked-button color="warn" class="no-focus" (click)="Close()"> Cancel </button>
<button mat-stroked-button color="primary" class="no-focus send-button" (click)="SendMessage(message.value)"> Send </button>
</div>
</form>

28
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-character-actions-dialog/actions-components/send-message-action/send-message-action.component.ts Normal file
View File

@ -0,0 +1,28 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { GMSignalRService } from '../../../../shared/signalR-service/gm-signalR.service';
@Component({
selector: 'app-send-message-action',
templateUrl: './send-message-action.component.html',
styleUrls: ['./send-message-action.component.css'],
})
export class SendMessageActionComponent implements OnInit {
@Input() characterId: any;
@Output()
closeComponent = new EventEmitter<string>();
constructor(private signalRService: GMSignalRService) {}
ngOnInit() {}
SendMessage(message: string) {
debugger;
this.signalRService.SendMessageToPlayer(this.characterId, message);
this.Close();
}
Close() {
this.closeComponent.emit();
}
}

5
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-character-actions-dialog/game-master-character-actions-dialog.component.css
View File

@ -10,3 +10,8 @@
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;
}
.after-name-divider {
border-top-width: 3px;
margin-bottom: 20px;
}

11
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-character-actions-dialog/game-master-character-actions-dialog.component.html
View File

@ -1,5 +1,16 @@
<h1 mat-dialog-title class="character-dialog-title">
{{characterName}}
</h1>
<mat-divider class="after-name-divider"></mat-divider>
<div mat-dialog-content>
<div *ngIf="actionComponentName == null">
<div *ngFor="let action of availableActions">
<button mat-flat-button (click)="ChangeActionComponent(action.componentName)">
{{action.name}}
</button>
</div>
</div>
<ndc-dynamic *ngIf="actionComponentName != null" [ndcDynamicComponent]="actionComponentName" [ndcDynamicInputs]="inputs" [ndcDynamicOutputs]="outputs">
</ndc-dynamic>
</div>

26
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-character-actions-dialog/game-master-character-actions-dialog.component.ts
View File

@ -1,5 +1,6 @@
import { Component, Inject, OnInit } from '@angular/core';
import { Component, Inject, Injector, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { SendMessageActionComponent } from './actions-components/send-message-action/send-message-action.component';
@Component({
selector: 'app-game-master-character-actions-dialog',
@ -9,6 +10,17 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
export class GameMasterCharacterActionsDialogComponent implements OnInit {
characterId: number;
characterName: string;
actionComponentName;
availableActions: { name: string; componentName: string }[] = [
{
name: 'Send Message',
componentName: 'SendMessageActionComponent',
},
];
inputs: { characterId: number };
outputs: any = {
closeComponent: () => this.ChangeActionComponent(null),
};
constructor(
public dialogRef: MatDialogRef<GameMasterCharacterActionsDialogComponent>,
@ -18,5 +30,17 @@ export class GameMasterCharacterActionsDialogComponent implements OnInit {
ngOnInit() {
this.characterId = this.data.characterid;
this.characterName = this.data.characterName;
this.inputs = { characterId: this.characterId };
console.log(this.inputs);
}
ChangeActionComponent(componentName: string): void {
switch (componentName) {
case 'SendMessageActionComponent':
this.actionComponentName = SendMessageActionComponent;
break;
default:
this.actionComponentName = null;
}
}
}

10
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.ts
View File

@ -83,7 +83,15 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
rightSidenavExpanded = false;
rightSidenavTextExpanded = false;
loggedCharacters: LoggedCharactersViewModel[];
loggedCharacters: LoggedCharactersViewModel[] = [
{
class: 'paladin',
id: 2,
name: 'Test',
currentHealthPoints: 5,
level: 1,
},
];
constructor(
private store: Store<AppState>,

46
SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
View File

@ -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<AppState>, private router: Router) {}
constructor(
private signalRService: PlayerSignalRService,
private store: Store<AppState>,
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,
},
});
}
}
);
}
}

11
SessionCompanion/SessionCompanion/ClientApp/src/app/shared/message-dialog/message-dialog.component.css Normal file
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;
}

3
SessionCompanion/SessionCompanion/ClientApp/src/app/shared/message-dialog/message-dialog.component.html Normal file
View File

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

16
SessionCompanion/SessionCompanion/ClientApp/src/app/shared/message-dialog/message-dialog.component.ts Normal file
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() {}
}

22
SessionCompanion/SessionCompanion/ClientApp/src/app/shared/signalR-service/gm-signalR.service.ts
View File

@ -1,6 +1,6 @@
import { Inject, Injectable } from '@angular/core';
import { SignalRService } from './base/signalR.service';
import {Subject} from 'rxjs';
import { Subject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class GMSignalRService {
@ -16,16 +16,24 @@ export class GMSignalRService {
public Login() {
this.signalR.startConnection();
this.signalR.connectionEstablished$.subscribe(() => {
if (this.signalR.connectionEstablished$.getValue() === true) {
this.signalR.hubConnection.send('GameMasterLogin');
}
}).unsubscribe();
this.signalR.connectionEstablished$
.subscribe(() => {
if (this.signalR.connectionEstablished$.getValue() === true) {
this.signalR.hubConnection.send('GameMasterLogin');
}
})
.unsubscribe();
}
public SendMessageToPlayer(characterId: number, message: string) {
this.signalR.hubConnection
.send('SendMessageToPlayer', characterId, message)
.catch((err) => console.error(err));
}
private registerOnServerEvents(): void {
this.signalR.hubConnection.on('Welcome', (message: string) => {
this.message.next('New player connected');
this.message.next('New player connected');
});
this.signalR.hubConnection.on('GoodBye', (message: string) => {
this.message.next('Player disconnected');

12
SessionCompanion/SessionCompanion/ClientApp/src/app/shared/signalR-service/player-signalR.service.ts
View File

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

5
SessionCompanion/SessionCompanion/ClientApp/src/app/shared/snackbar/snackbar.component.css Normal file
View File

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

11
SessionCompanion/SessionCompanion/ClientApp/src/app/shared/snackbar/snackbar.component.html Normal file
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>

41
SessionCompanion/SessionCompanion/ClientApp/src/app/shared/snackbar/snackbar.component.ts Normal file
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();
}
}