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

@@ -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 { GameMasterTurntrackerComponent } from './components/game-master-turntracker/game-master-turntracker.component';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 @NgModule({
   declarations: [
@@ -70,6 +72,7 @@ import { GameMasterShopkeepersTableComponent } from './components/game-master-sh
     GameMasterMonstersTableComponent,
     SpellDetailsDialogComponent,
     GameMasterShopkeepersTableComponent,
+    GameMasterTurntrackerComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -98,6 +101,7 @@ import { GameMasterShopkeepersTableComponent } from './components/game-master-sh
     MatSortModule,
     MatTooltipModule,
     MatRadioModule,
+    DragDropModule,
   ],
   providers: [
     UserService,
@@ -119,6 +123,7 @@ import { GameMasterShopkeepersTableComponent } from './components/game-master-sh
     ThrowPrimaryAbilityComponent,
     SpellDetailsDialogComponent,
     GameMasterShopkeepersTableComponent,
+    GameMasterTurntrackerComponent,
   ],
 })
 export class AppModule {}

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

@@ -22,6 +22,7 @@ import { AppState } from '../../store/models/app-state.model';
 import { Router } from '@angular/router';
 import { GameMasterMonstersTableComponent } from '../game-master-monsters-table/game-master-monsters-table.component';
 import { GameMasterShopkeepersTableComponent } from '../game-master-shopkeepers-table/game-master-shopkeepers-table.component';
+import { GameMasterTurntrackerComponent } from '../game-master-turntracker/game-master-turntracker.component';
 
 @Component({
   selector: 'app-game-master-dashboard',
@@ -66,6 +67,12 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
       componentToDisplay: 'GameMasterMonstersTableComponent',
       expanded: false,
     },
+    {
+      displayName: 'Turn Tracker',
+      iconName: 'ra ra-crossed-axes',
+      componentToDisplay: 'GameMasterTurntrackerComponent',
+      expanded: false,
+    },
     {
       displayName: 'Shopkeepers',
       iconName: 'ra ra-wooden-sign',
@@ -152,6 +159,9 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
       case 'GameMasterShopkeepersTableComponent':
         this.middleComponentName = GameMasterShopkeepersTableComponent;
         break;
+      case 'GameMasterTurntrackerComponent':
+        this.middleComponentName = GameMasterTurntrackerComponent;
+        break;
     }
   }
 

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

@@ -0,0 +1,74 @@
+.turn-tracker-main {
+  margin-left: 20%;
+}
+
+.turn-tracker-main > div {
+  width: 400px;
+  max-width: 100%;
+  margin: 0 25px 25px 0;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.turn-tracker-main > div > h2 {
+  color: whitesmoke;
+}
+.no-focus:focus {
+  outline: none;
+}
+.turn-tracker-main > div > h2 > button {
+  top: -7px;
+}
+.turn-tracker-list {
+  border: solid 1px #3D4751;
+  min-height: 60px;
+  background: #606F80;
+  border-radius: 4px;
+  overflow: hidden;
+  display: block;
+}
+.to-right {
+  float: right;
+  color: whitesmoke;
+}
+.turn-tracker-box {
+  padding: 20px 10px;
+  border-bottom: solid 1px #3D4751 !important;
+  color: whitesmoke;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  cursor: move;
+  background: #606F80;
+  font-size: 14px;
+}
+.turn-tracker-box-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cdk-drag-preview {
+  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);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-box:last-child {
+  border: none;
+}
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

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

@@ -0,0 +1,48 @@
+<div class="turn-tracker-main" cdkDropListGroup>
+  <div>
+    <h2>
+      Turn Tracker
+      <button class="no-focus" mat-icon-button>
+        <mat-icon>add_circle_outline</mat-icon>
+      </button>
+    </h2>
+    <div
+      cdkDropList
+      [cdkDropListData]="turnTrackerList"
+      class="turn-tracker-list"
+      (cdkDropListDropped)="drop($event)">
+      <div class="turn-tracker-box" *ngFor="let item of turnTrackerList" cdkDrag>
+        <span class="turn-tracker-box-name">
+          {{item.name}}
+        </span>
+        <button class="no-focus" mat-icon-button (click)="DeleteRow(item)">
+          <mat-icon>delete</mat-icon>
+        </button>
+      </div>
+    </div>
+    <button class="no-focus to-right" mat-button>
+       Next turn <mat-icon>fast_forward</mat-icon>
+    </button>
+  </div>
+
+  <div>
+    <h2>
+      Players characters list
+      <button class="no-focus" mat-icon-button (click)="GetLoggedCharacters()">
+        <mat-icon>autorenew</mat-icon>
+      </button>
+    </h2>
+
+    <div
+      cdkDropList
+      [cdkDropListData]="characterList"
+      class="turn-tracker-list"
+      (cdkDropListDropped)="drop($event)">
+      <div class="turn-tracker-box" *ngFor="let item of characterList" cdkDrag>
+        <span class="turn-tracker-box-name">
+          {{item.name}}
+        </span>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,79 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  CdkDragDrop,
+  moveItemInArray,
+  transferArrayItem,
+} from '@angular/cdk/drag-drop';
+import { CharacterService } from '../../../services/character.service';
+import { first } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-game-master-turntracker',
+  templateUrl: './game-master-turntracker.component.html',
+  styleUrls: ['./game-master-turntracker.component.css'],
+})
+export class GameMasterTurntrackerComponent implements OnInit {
+  turnTrackerList: { name: string; characterId: number; monsterId: number }[];
+
+  characterList: { name: string; characterId: number }[];
+
+  drop(event: CdkDragDrop<any[]>) {
+    debugger;
+    if (event.previousContainer === event.container) {
+      moveItemInArray(
+        event.container.data,
+        event.previousIndex,
+        event.currentIndex
+      );
+    } else {
+      transferArrayItem(
+        event.previousContainer.data,
+        event.container.data,
+        event.previousIndex,
+        event.currentIndex
+      );
+    }
+  }
+  constructor(private characterService: CharacterService) {
+    this.turnTrackerList = [
+      {
+        monsterId: 1,
+        name:
+          'StrasznaaaaaaaaySt rasznaaaaaaaay Strasznaaaaaaaa yStrasznaaaaaaaayStra sznaaaaaaaay StrasznaaaaaaaayvStrasznaaaaaaaay Strasznaaaaaaaay',
+        characterId: null,
+      },
+    ];
+    this.GetLoggedCharacters();
+  }
+
+  ngOnInit() {}
+
+  GetLoggedCharacters() {
+    this.characterService
+      .getLoggedCharacters()
+      .pipe(first())
+      .subscribe((result) => {
+        const currentCharacterIds = this.turnTrackerList.map(
+          (e) => e.characterId
+        );
+        this.characterList = result
+          .filter((e) => !currentCharacterIds.includes(e.id))
+          .map((e) => ({
+            name: e.name,
+            characterId: e.id,
+          }));
+      });
+  }
+
+  DeleteRow(element: { name: string; characterId: number; monsterId: number }) {
+    if (element.characterId != null) {
+      this.turnTrackerList = this.turnTrackerList.filter(
+        (e) => e.characterId !== element.characterId
+      );
+    } else {
+      this.turnTrackerList = this.turnTrackerList.filter(
+        (e) => e.monsterId !== element.monsterId && e.name !== name
+      );
+    }
+  }
+}