SessionCompanion/SessionCompanion/ClientApp/src/app/components/choose-monster-dialog/choose-monster-dialog.component.html

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Chose Monsters</h1>
+<h1 mat-dialog-title>Choose Monsters</h1>
 <div mat-dialog-content>
   <mat-form-field>
     <mat-label>Filter</mat-label>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-turntracker/game-master-turntracker.component.css

@@ -25,7 +25,7 @@
 }
 .turn-tracker-list {
   border: solid 1px #3d4751;
-  min-height: 60px;
+  min-height: 81px;
   background: #606f80;
   border-radius: 4px;
   overflow: hidden;

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-turntracker/game-master-turntracker.component.html

@@ -36,9 +36,9 @@
     <div
       cdkDropList
       [cdkDropListData]="characterList"
-      class="turn-tracker-list character-list"
+      class="turn-tracker-list"
       (cdkDropListDropped)="drop($event)">
-      <div class="turn-tracker-box" *ngFor="let item of characterList" cdkDrag>
+      <div class="turn-tracker-box character-list" *ngFor="let item of characterList" cdkDrag>
         <span class="turn-tracker-box-name">
           {{item.name}}
         </span>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-turntracker/game-master-turntracker.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import {
   CdkDragDrop,
   moveItemInArray,
@@ -9,16 +9,23 @@ import { first } from 'rxjs/operators';
 import { MatDialog } from '@angular/material';
 import { ChooseMonsterDialogComponent } from '../choose-monster-dialog/choose-monster-dialog.component';
 import { MonsterViewModel } from '../../../types/viewmodels/monster-viewmodels/MonsterViewModel';
+import { Store } from '@ngrx/store';
+import { AddTurnTrackerList } from '../../store/actions/game-master.actions';
+import { AppState } from '../../store/models/app-state.model';
 
 @Component({
   selector: 'app-game-master-turntracker',
   templateUrl: './game-master-turntracker.component.html',
   styleUrls: ['./game-master-turntracker.component.css'],
 })
-export class GameMasterTurntrackerComponent implements OnInit {
+export class GameMasterTurntrackerComponent implements OnInit, OnDestroy {
-  turnTrackerList: { name: string; characterId: number; monsterId: number }[];
+  turnTrackerList: {
+    name: string;
+    characterId: number;
+    monsterId: number;
+  }[] = [];
 
-  characterList: { name: string; characterId: number }[];
+  characterList: { name: string; characterId: number }[] = [];
 
   drop(event: CdkDragDrop<any[]>) {
     if (event.previousContainer === event.container) {
@@ -38,17 +45,16 @@ export class GameMasterTurntrackerComponent implements OnInit {
   }
   constructor(
     private characterService: CharacterService,
-    public dialog: MatDialog
+    public dialog: MatDialog,
+    private store: Store<AppState>
   ) {
-    this.turnTrackerList = [
+    this.store
-      {
+      .select((s) => s.gameMasterStore.turnTrackerList)
-        monsterId: 1,
+      .pipe(first())
-        name:
+      .subscribe((result) => {
-          'StrasznaaaaaaaaySt rasznaaaaaaaay Strasznaaaaaaaa yStrasznaaaaaaaayStra sznaaaaaaaay StrasznaaaaaaaayvStrasznaaaaaaaay Strasznaaaaaaaay',
+        this.turnTrackerList = result;
-        characterId: null,
+        this.GetLoggedCharacters();
-      },
+      });
-    ];
-    this.GetLoggedCharacters();
   }
 
   ngOnInit() {}
@@ -97,28 +103,36 @@ export class GameMasterTurntrackerComponent implements OnInit {
     });
 
     dialogRef.afterClosed().subscribe((result: MonsterViewModel[]) => {
-      let monstersOnList = this.turnTrackerList.filter(
+      if (result != null) {
-        (c) => c.monsterId !== null
+        let monstersOnList = this.turnTrackerList.filter(
-      );
+          (c) => c.monsterId !== null
-      result.forEach((ele) => {
+        );
-        if (monstersOnList.map((e) => e.name).includes(ele.name)) {
+        result.forEach((ele) => {
-          debugger;
+          if (monstersOnList.map((e) => e.name).includes(ele.name)) {
-          let maxCurrentId = Math.max(
+            debugger;
-            ...monstersOnList.map((e) => e.monsterId),
+            let maxCurrentId = Math.max(
-            0
+              ...monstersOnList.map((e) => e.monsterId),
-          );
+              0
-          maxCurrentId += 1;
+            );
-          this.turnTrackerList = [
+            maxCurrentId += 1;
-            ...this.turnTrackerList,
+            this.turnTrackerList = [
-            { name: ele.name, characterId: null, monsterId: maxCurrentId },
+              ...this.turnTrackerList,
-          ];
+              { name: ele.name, characterId: null, monsterId: maxCurrentId },
-        } else {
+            ];
-          this.turnTrackerList = [
+          } else {
-            ...this.turnTrackerList,
+            this.turnTrackerList = [
-            { name: ele.name, characterId: null, monsterId: 1 },
+              ...this.turnTrackerList,
-          ];
+              { name: ele.name, characterId: null, monsterId: 1 },
-        }
+            ];
-      });
+          }
+        });
+      }
     });
   }
+
+  ngOnDestroy() {
+    this.store.dispatch(
+      new AddTurnTrackerList({ turnTrackerList: this.turnTrackerList })
+    );
+  }
 }

SessionCompanion/SessionCompanion/ClientApp/src/app/store/actions/game-master.actions.ts

@@ -0,0 +1,21 @@
+import { Action } from '@ngrx/store';
+
+export enum GameMasterActionTypes {
+  ADD_TURN_TRACKER_LIST = '[GAME MASTER] Add turn tracker list',
+}
+
+export class AddTurnTrackerList implements Action {
+  readonly type = GameMasterActionTypes.ADD_TURN_TRACKER_LIST;
+
+  constructor(
+    public payload: {
+      turnTrackerList: {
+        name: string;
+        characterId: number;
+        monsterId: number;
+      }[];
+    }
+  ) {}
+}
+
+export type GameMasterAction = AddTurnTrackerList;

SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/app-state.model.ts

@@ -1,15 +1,19 @@
-import {AppStoreModel} from './app-store.model';
+import { AppStoreModel } from './app-store.model';
-import {ActionReducerMap} from '@ngrx/store';
+import { ActionReducerMap } from '@ngrx/store';
-import {AppReducer} from '../reducers/app.reducer';
+import { AppReducer } from '../reducers/app.reducer';
-import {PlayerStoreModel} from './player-store.model';
+import { PlayerStoreModel } from './player-store.model';
-import {PlayerReducer} from '../reducers/player.reducer';
+import { PlayerReducer } from '../reducers/player.reducer';
+import { GameMasterStoreModel } from './game-master-store.model';
+import { GameMasterReducer } from '../reducers/game-master.reducer';
 
 export interface AppState {
   appStore: AppStoreModel;
   playerStore: PlayerStoreModel;
+  gameMasterStore: GameMasterStoreModel;
 }
 
 export const reducers: ActionReducerMap<AppState> = {
   appStore: AppReducer,
   playerStore: PlayerReducer,
+  gameMasterStore: GameMasterReducer,
 };

SessionCompanion/SessionCompanion/ClientApp/src/app/store/models/game-master-store.model.ts

@@ -0,0 +1,7 @@
+export interface GameMasterStoreModel {
+  turnTrackerList: {
+    name: string;
+    characterId: number;
+    monsterId: number;
+  }[];
+}

SessionCompanion/SessionCompanion/ClientApp/src/app/store/reducers/game-master.reducer.ts

@@ -0,0 +1,21 @@
+import { GameMasterStoreModel } from '../models/game-master-store.model';
+import {
+  GameMasterAction,
+  GameMasterActionTypes,
+} from '../actions/game-master.actions';
+
+const initialState: GameMasterStoreModel = {
+  turnTrackerList: [],
+};
+
+export function GameMasterReducer(
+  state: GameMasterStoreModel = initialState,
+  action: GameMasterAction
+) {
+  switch (action.type) {
+    case GameMasterActionTypes.ADD_TURN_TRACKER_LIST:
+      return { ...state, turnTrackerList: action.payload.turnTrackerList };
+    default:
+      return state;
+  }
+}