SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts

@@ -52,6 +52,7 @@ import { SpellDetailsDialogComponent } from './components/spell-details-dialog/s
 import { GameMasterShopkeepersTableComponent } from './components/game-master-shopkeepers-table/game-master-shopkeepers-table.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';
 
 @NgModule({
   declarations: [
@@ -73,6 +74,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
     SpellDetailsDialogComponent,
     GameMasterShopkeepersTableComponent,
     GameMasterTurntrackerComponent,
+    ChooseMonsterDialogComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -124,6 +126,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
     SpellDetailsDialogComponent,
     GameMasterShopkeepersTableComponent,
     GameMasterTurntrackerComponent,
+    ChooseMonsterDialogComponent,
   ],
 })
 export class AppModule {}

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

@@ -0,0 +1,41 @@
+table {
+  background-color: initial;
+}
+
+mat-paginator {
+  background-color: initial;
+  color: white;
+}
+
+::ng-deep .mat-select-arrow {
+  color: whitesmoke;
+}
+
+::ng-deep .mat-select-value {
+  color: white;
+}
+
+.mat-sort-header-container {
+  color: whitesmoke !important;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+td,
+th {
+  color: whitesmoke;
+}
+
+::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;
+}
+
+::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
+  background-color: #df7c0f;
+}

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

@@ -0,0 +1,52 @@
+<h1 mat-dialog-title>Chose Monsters</h1>
+<div mat-dialog-content>
+  <mat-form-field>
+    <mat-label>Filter</mat-label>
+    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Dragon" #input>
+  </mat-form-field>
+
+  <div class="mat-elevation-z8">
+    <table mat-table [dataSource]="dataSource" matSort class="w-100">
+
+      <ng-container matColumnDef="select">
+        <th mat-header-cell *matHeaderCellDef> Select Monsters
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-checkbox (click)="$event.stopPropagation()"
+                        (change)="$event ? selection.toggle(row) : null"
+                        [checked]="selection.isSelected(row)">
+          </mat-checkbox>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <td mat-cell *matCellDef="let row"> {{row.name}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="armorClass">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Armor Class </th>
+        <td mat-cell *matCellDef="let row"> {{row.armorClass}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="hitPoints">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Hit Points </th>
+        <td mat-cell *matCellDef="let row"> {{row.hitPoints}} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+      <tr class="mat-row" *matNoDataRow>
+        <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
+      </tr>
+    </table>
+
+    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+  </div>
+
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="CloseDialog()">Close</button>
+  <button mat-button (click)="AddMonsters()" cdkFocusInitial>Add monsters</button>
+</div>

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

@@ -0,0 +1,67 @@
+import { Component, Inject, OnInit, ViewChild } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MonsterViewModel } from '../../../types/viewmodels/monster-viewmodels/MonsterViewModel';
+import { MonsterService } from '../../../services/monster.service';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { first } from 'rxjs/operators';
+import { MatTableDataSource } from '@angular/material/table';
+import { ErrorResponse } from '../../../types/ErrorResponse';
+import { HttpErrorResponse } from '@angular/common/http';
+import { SelectionModel } from '@angular/cdk/collections';
+
+@Component({
+  selector: 'app-choose-monster-dialog',
+  templateUrl: './choose-monster-dialog.component.html',
+  styleUrls: ['./choose-monster-dialog.component.css'],
+})
+export class ChooseMonsterDialogComponent implements OnInit {
+  displayedColumns: string[] = ['select', 'name', 'armorClass', 'hitPoints'];
+  dataSource: MatTableDataSource<MonsterViewModel>;
+  selection = new SelectionModel<MonsterViewModel>(true, []);
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  constructor(
+    public dialogRef: MatDialogRef<ChooseMonsterDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private monsterService: MonsterService
+  ) {}
+
+  ngOnInit() {
+    this.monsterService
+      .GetAllMonsters()
+      .pipe(first())
+      .subscribe(
+        (result) => {
+          this.dataSource = new MatTableDataSource(result);
+          this.dataSource.sort = this.sort;
+          this.dataSource.paginator = this.paginator;
+        },
+        (error: ErrorResponse | HttpErrorResponse) => {
+          if (error instanceof HttpErrorResponse) {
+            error = error.error as ErrorResponse;
+          }
+          console.error(error.message);
+        }
+      );
+  }
+
+  AddMonsters() {
+    this.dialogRef.close(this.selection.selected);
+  }
+
+  CloseDialog() {
+    this.dialogRef.close();
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+}

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

@@ -2,6 +2,10 @@
   margin-left: 20%;
 }
 
+.first {
+  background-color: #df7c0f !important;
+}
+
 .turn-tracker-main > div {
   width: 400px;
   max-width: 100%;
@@ -20,9 +24,9 @@
   top: -7px;
 }
 .turn-tracker-list {
-  border: solid 1px #3D4751;
+  border: solid 1px #3d4751;
   min-height: 60px;
-  background: #606F80;
+  background: #606f80;
   border-radius: 4px;
   overflow: hidden;
   display: block;
@@ -33,7 +37,7 @@
 }
 .turn-tracker-box {
   padding: 20px 10px;
-  border-bottom: solid 1px #3D4751 !important;
+  border-bottom: solid 1px #3d4751 !important;
   color: whitesmoke;
   display: flex;
   flex-direction: row;
@@ -41,7 +45,7 @@
   justify-content: space-between;
   box-sizing: border-box;
   cursor: move;
-  background: #606F80;
+  background: #606f80;
   font-size: 14px;
 }
 .turn-tracker-box-name {
@@ -53,10 +57,11 @@
   box-sizing: border-box;
   border-radius: 4px;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-  0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.character-list {
+  height: 81px;
 }
-
 .cdk-drag-placeholder {
   opacity: 0;
 }

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

@@ -2,7 +2,7 @@
   <div>
     <h2>
       Turn Tracker
-      <button class="no-focus" mat-icon-button>
+      <button class="no-focus" mat-icon-button (click)="AddMonster()">
         <mat-icon>add_circle_outline</mat-icon>
       </button>
     </h2>
@@ -11,7 +11,7 @@
       [cdkDropListData]="turnTrackerList"
       class="turn-tracker-list"
       (cdkDropListDropped)="drop($event)">
-      <div class="turn-tracker-box" *ngFor="let item of turnTrackerList" cdkDrag>
+      <div class="turn-tracker-box" *ngFor="let item of turnTrackerList;let first = first" [ngClass]="{first: first}" cdkDrag>
         <span class="turn-tracker-box-name">
           {{item.name}}
         </span>
@@ -20,7 +20,7 @@
         </button>
       </div>
     </div>
-    <button class="no-focus to-right" mat-button>
+    <button class="no-focus to-right" mat-button (click)="NextTurn()">
        Next turn <mat-icon>fast_forward</mat-icon>
     </button>
   </div>
@@ -36,7 +36,7 @@
     <div
       cdkDropList
       [cdkDropListData]="characterList"
-      class="turn-tracker-list"
+      class="turn-tracker-list character-list"
       (cdkDropListDropped)="drop($event)">
       <div class="turn-tracker-box" *ngFor="let item of characterList" cdkDrag>
         <span class="turn-tracker-box-name">

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

@@ -6,6 +6,9 @@ import {
 } from '@angular/cdk/drag-drop';
 import { CharacterService } from '../../../services/character.service';
 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';
 
 @Component({
   selector: 'app-game-master-turntracker',
@@ -18,7 +21,6 @@ export class GameMasterTurntrackerComponent implements OnInit {
   characterList: { name: string; characterId: number }[];
 
   drop(event: CdkDragDrop<any[]>) {
-    debugger;
     if (event.previousContainer === event.container) {
       moveItemInArray(
         event.container.data,
@@ -34,7 +36,10 @@ export class GameMasterTurntrackerComponent implements OnInit {
       );
     }
   }
-  constructor(private characterService: CharacterService) {
+  constructor(
+    private characterService: CharacterService,
+    public dialog: MatDialog
+  ) {
     this.turnTrackerList = [
       {
         monsterId: 1,
@@ -71,9 +76,49 @@ export class GameMasterTurntrackerComponent implements OnInit {
         (e) => e.characterId !== element.characterId
       );
     } else {
-      this.turnTrackerList = this.turnTrackerList.filter(
+      this.turnTrackerList = this.turnTrackerList.filter((e) => {
-        (e) => e.monsterId !== element.monsterId && e.name !== name
+        return !(e.name == element.name && e.monsterId == element.monsterId);
-      );
+      });
     }
   }
+
+  NextTurn() {
+    if (this.turnTrackerList.length > 1) {
+      this.turnTrackerList = [
+        ...this.turnTrackerList.slice(1),
+        this.turnTrackerList[0],
+      ];
+    }
+  }
+
+  AddMonster() {
+    let dialogRef = this.dialog.open(ChooseMonsterDialogComponent, {
+      width: '600px',
+    });
+
+    dialogRef.afterClosed().subscribe((result: MonsterViewModel[]) => {
+      let monstersOnList = this.turnTrackerList.filter(
+        (c) => c.monsterId !== null
+      );
+      result.forEach((ele) => {
+        if (monstersOnList.map((e) => e.name).includes(ele.name)) {
+          debugger;
+          let maxCurrentId = Math.max(
+            ...monstersOnList.map((e) => e.monsterId),
+            0
+          );
+          maxCurrentId += 1;
+          this.turnTrackerList = [
+            ...this.turnTrackerList,
+            { name: ele.name, characterId: null, monsterId: maxCurrentId },
+          ];
+        } else {
+          this.turnTrackerList = [
+            ...this.turnTrackerList,
+            { name: ele.name, characterId: null, monsterId: 1 },
+          ];
+        }
+      });
+    });
+  }
 }