working dialog on gm screen
This commit is contained in:
parent
5259a2ec57
commit
905c26d873
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -50,6 +50,8 @@ 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';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@ -70,6 +72,7 @@ import { GameMasterShopkeepersTableComponent } from './components/game-master-sh
|
||||
GameMasterMonstersTableComponent,
|
||||
SpellDetailsDialogComponent,
|
||||
GameMasterShopkeepersTableComponent,
|
||||
SendMessageActionComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
|
||||
@ -98,6 +101,7 @@ import { GameMasterShopkeepersTableComponent } from './components/game-master-sh
|
||||
MatSortModule,
|
||||
MatTooltipModule,
|
||||
MatRadioModule,
|
||||
DynamicModule,
|
||||
],
|
||||
providers: [
|
||||
UserService,
|
||||
@ -119,6 +123,7 @@ import { GameMasterShopkeepersTableComponent } from './components/game-master-sh
|
||||
ThrowPrimaryAbilityComponent,
|
||||
SpellDetailsDialogComponent,
|
||||
GameMasterShopkeepersTableComponent,
|
||||
SendMessageActionComponent,
|
||||
],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
@ -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;
|
||||
}
|
@ -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>
|
@ -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();
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -76,7 +76,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>,
|
||||
|
@ -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,11 +16,19 @@ export class GMSignalRService {
|
||||
public Login() {
|
||||
this.signalR.startConnection();
|
||||
|
||||
this.signalR.connectionEstablished$.subscribe(() => {
|
||||
this.signalR.connectionEstablished$
|
||||
.subscribe(() => {
|
||||
if (this.signalR.connectionEstablished$.getValue() === true) {
|
||||
this.signalR.hubConnection.send('GameMasterLogin');
|
||||
}
|
||||
}).unsubscribe();
|
||||
})
|
||||
.unsubscribe();
|
||||
}
|
||||
|
||||
public SendMessageToPlayer(characterId: number, message: string) {
|
||||
this.signalR.hubConnection
|
||||
.send('SendMessageToPlayer', characterId, message)
|
||||
.catch((err) => console.error(err));
|
||||
}
|
||||
|
||||
private registerOnServerEvents(): void {
|
||||
|
Loading…
Reference in New Issue
Block a user