SES-159 turn tracker final

2021-01-19 13:50:11 +01:00 · 2021-01-19 13:50:11 +01:00 · f3cfe2a326
commit f3cfe2a326
parent 0d696c5bcd
7 changed files with 229 additions and 16 deletions
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
+++ b/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 {}
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/choose-monster-dialog/choose-monster-dialog.component.css
+++ b/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;
+}
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/choose-monster-dialog/choose-monster-dialog.component.html
+++ b/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>
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/choose-monster-dialog/choose-monster-dialog.component.ts
+++ b/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();
+    }
+  }
+}
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-turntracker/game-master-turntracker.component.css
+++ b/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 3px 14px 2px rgba(0, 0, 0, 0.12);
+    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.character-list {
+  height: 81px;
 }
-
 .cdk-drag-placeholder {
  opacity: 0;
 }
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-turntracker/game-master-turntracker.component.html
+++ b/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">
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-turntracker/game-master-turntracker.component.ts
+++ b/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(
-        (e) => e.monsterId !== element.monsterId && e.name !== name
+      this.turnTrackerList = this.turnTrackerList.filter((e) => {
+        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 },
+          ];
+        }
+      });
+    });
  }
 }