feat(debug-menu): add table for game data sources

- displays game data in sortable tabular form to view and help balance values - add warp locations to all maps in the travel drop down - show current map in travel dropdown
justindujardin · Oct 26, 2022 · 3681fde · 3681fde
1 parent e590820
commit 3681fde
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 19 deletions.
diff --git a/src/app/components/debug-menu/debug-menu.component.html b/src/app/components/debug-menu/debug-menu.component.html
@@ -1,5 +1,5 @@
 <mat-toolbar class="mat-elevation-z4" *ngIf="open == true" [@toolbar]="open">
-  <mat-select (selectionChange)="travel($event)" [value]="map$ | async">
+  <mat-select (selectionChange)="travel($event)" [value]="gameMap$ | async">
     <mat-option *ngFor="let loc of locations" [value]="loc.map">
       {{ loc.map }}
     </mat-option>
@@ -8,3 +8,43 @@
 
   <button mat-button (click)="levelUp()">Level Up</button>
 </mat-toolbar>
+
+<section [style.visibility]="open ? 'visible' : 'hidden'" [@table]="open">
+  <mat-tab-group
+    mat-stretch-tabs
+    *ngIf="open"
+    animationDuration="0ms"
+    color="accent"
+    (selectedTabChange)="tabChange($event)"
+  >
+    <mat-tab label="Weapons"></mat-tab>
+    <mat-tab label="Armors"></mat-tab>
+    <mat-tab label="Magics"></mat-tab>
+    <mat-tab label="Items"></mat-tab>
+    <mat-tab label="Enemies"></mat-tab>
+  </mat-tab-group>
+  <div>
+    <table
+      mat-table
+      [dataSource]="dataSource"
+      (matSortChange)="announceSortChange($event)"
+      matSort
+      class="mat-elevation-z8"
+    >
+      <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
+        <th
+          mat-header-cell
+          *matHeaderCellDef
+          mat-sort-header
+          sortActionDescription="Sort by {{ column }}"
+        >
+          {{ column }}
+        </th>
+        <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
+      </ng-container>
+
+      <tr mat-header-row sticky *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  </div>
+</section>
diff --git a/src/app/components/debug-menu/debug-menu.component.scss b/src/app/components/debug-menu/debug-menu.component.scss
@@ -1,12 +1,14 @@
 @import "../../style/variables";
 @import "../../style/mixins";
 
+$menu-bg: rgba(0, 0, 0);
+
 :host {
   *:not(mat-icon):not([mat-icon-button]):not([mat-fab]) {
     font-family: $pixelFont;
     @include stroke-text(1px, #000);
   }
-  background-color: rgba(0, 0, 0, 0.54);
+  background-color: $menu-bg;
   color: white;
   mat-select {
     max-width: 200px;
@@ -25,4 +27,33 @@
       }
     }
   }
+  section {
+    background-color: $menu-bg;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    align-items: stretch;
+    bottom: 0;
+    width: 100%;
+    height: 80%;
+    padding: 0;
+    border-top: 6px solid white;
+    .mat-tab-group.mat-primary .mat-ink-bar,
+    .mat-tab-nav-bar.mat-primary .mat-ink-bar {
+      background: yellow !important;
+    }
+    > div {
+      display: flex;
+      overflow-y: auto;
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      align-items: stretch;
+      table {
+        background-color: $menu-bg;
+      }
+    }
+  }
 }
diff --git a/src/app/components/debug-menu/debug-menu.component.ts b/src/app/components/debug-menu/debug-menu.component.ts
@@ -1,5 +1,9 @@
 import { animate, style, transition, trigger } from '@angular/animations';
-import { Component, Input } from '@angular/core';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { AfterViewInit, Component, Input, ViewChild } from '@angular/core';
+import { MatSort, Sort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatTabChangeEvent } from '@angular/material/tabs';
 import { Store } from '@ngrx/store';
 import {
   awardExperience,
@@ -16,13 +20,24 @@ import {
   CombatVictorySummary,
 } from '../../models/combat/combat.actions';
 import { Entity } from '../../models/entity/entity.model';
+import { ARMOR_DATA } from '../../models/game-data/armors';
+import { ENEMIES_DATA } from '../../models/game-data/enemies';
+import {
+  ITemplateBaseItem,
+  ITemplateEnemy,
+} from '../../models/game-data/game-data.model';
+import { ITEMS_DATA } from '../../models/game-data/items';
+import { MAGIC_DATA } from '../../models/game-data/magic';
+import { WEAPONS_DATA } from '../../models/game-data/weapons';
 import { GameStateTravelAction } from '../../models/game-state/game-state.actions';
 import { GameStateService } from '../../models/game-state/game-state.service';
 import { getXPForLevel } from '../../models/levels';
-import { getGameParty } from '../../models/selectors';
+import { getGameMap, getGameParty } from '../../models/selectors';
 import { RPGGame } from '../../services/rpg-game';
 import { NotificationService } from '../notification/notification.service';
 
+type DataSourceTypes = ITemplateBaseItem | ITemplateEnemy;
+
 @Component({
   selector: 'debug-menu',
   styleUrls: ['debug-menu.component.scss'],
@@ -38,33 +53,86 @@ import { NotificationService } from '../notification/notification.service';
         animate('110ms', style({ transform: 'translateY(-100%)' })),
       ]),
     ]),
+    trigger('table', [
+      transition(':enter', [
+        style({ bottom: '-2000px' }),
+        animate('110ms', style({ bottom: '0' })),
+      ]),
+      transition(':leave', [
+        style({ bottom: '0' }),
+        animate('110ms', style({ bottom: '-2000px' })),
+      ]),
+    ]),
   ],
 })
-export class DebugMenuComponent {
+export class DebugMenuComponent implements AfterViewInit {
   @Input()
   open: boolean = false;
 
   /** Possible locations for travel */
   locations: { map: string; x?: number; y?: number }[] = [
-    { map: 'castle' },
-    { map: 'crypt' },
+    { map: 'castle', x: 16, y: 9 },
+    { map: 'crypt', x: 5, y: 28 },
     { map: 'fortress1', x: 21, y: 15 },
-    { map: 'fortress2' },
+    { map: 'fortress2', x: 22, y: 12 },
     { map: 'isle', x: 14, y: 7 },
-    { map: 'keep' },
-    { map: 'lair' },
-    { map: 'port' },
+    { map: 'keep', x: 11, y: 16 },
+    { map: 'lair', x: 14, y: 45 },
+    { map: 'port', x: 20, y: 5 },
     { map: 'ruins', x: 13, y: 20 },
-    { map: 'sewer' },
-    { map: 'tower1' },
-    { map: 'tower2' },
-    { map: 'tower3' },
-    { map: 'town' },
+    { map: 'sewer', x: 20, y: 1 },
+    { map: 'tower1', x: 6, y: 9 },
+    { map: 'tower2', x: 4, y: 15 },
+    { map: 'tower3', x: 2, y: 1 },
+    { map: 'town', x: 12, y: 5 },
     { map: 'village', x: 5, y: 10 },
-    { map: 'wilderness' },
+    { map: 'wilderness', x: 19, y: 46 },
   ];
   party$: Observable<Immutable.List<Entity>> = this.store.select(getGameParty);
+  gameMap$: Observable<string> = this.store.select(getGameMap);
+  displayedColumns: string[] = [];
+  dataSource: MatTableDataSource<DataSourceTypes> | null = null;
+
+  @ViewChild(MatSort) sort: MatSort;
+
+  ngAfterViewInit() {
+    const currentData = WEAPONS_DATA;
+    this.dataSource = new MatTableDataSource(currentData);
+    this.displayedColumns = Object.keys(currentData[0]);
+    this.dataSource.sort = this.sort;
+  }
+  tabChange(event: MatTabChangeEvent) {
+    let data: DataSourceTypes[] = [];
+    switch (event.tab.textLabel.toLowerCase()) {
+      case 'armors':
+        data = ARMOR_DATA;
+        break;
+      case 'items':
+        data = ITEMS_DATA;
+        break;
+      case 'magics':
+        data = MAGIC_DATA;
+        break;
+      case 'weapons':
+        data = WEAPONS_DATA;
+        break;
+      case 'enemies':
+        data = ENEMIES_DATA;
+        break;
+    }
+    this.dataSource = new MatTableDataSource(data);
+    this.dataSource.sort = this.sort;
+    this.displayedColumns = Object.keys(data[0]);
+  }
 
+  /** Announce the change in sort state for assistive technology. */
+  announceSortChange(sortState: Sort) {
+    if (sortState.direction) {
+      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
+    } else {
+      this._liveAnnouncer.announce('Sorting cleared');
+    }
+  }
   /** Award level ups to each character in the party */
   levelUp() {
     this.party$
@@ -117,6 +185,7 @@ export class DebugMenuComponent {
     public game: RPGGame,
     public store: Store<AppState>,
     public gameStateService: GameStateService,
-    public notify: NotificationService
+    public notify: NotificationService,
+    private _liveAnnouncer: LiveAnnouncer
   ) {}
 }
diff --git a/src/app/components/debug-menu/index.ts b/src/app/components/debug-menu/index.ts
@@ -1,2 +1,6 @@
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
 import { DebugMenuComponent } from './debug-menu.component';
 export const RPG_DEBUG_MENU_EXPORTS = [DebugMenuComponent];
+export const RPG_DEBUG_MENU_IMPORTS = [MatTableModule, MatSortModule, MatTabsModule];
diff --git a/src/app/components/index.ts b/src/app/components/index.ts
@@ -26,7 +26,7 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RPG_DEBUG_MENU_EXPORTS } from './debug-menu/index';
+import { RPG_DEBUG_MENU_EXPORTS, RPG_DEBUG_MENU_IMPORTS } from './debug-menu/index';
 import { RPG_HEALTH_BAR_EXPORTS } from './health-bar/index';
 import { RPG_LOADING_EXPORTS, RPG_LOADING_PROVIDERS } from './loading/index';
 import {
@@ -84,6 +84,7 @@ export const APP_COMPONENTS_PROVIDERS = [
     MatProgressBarModule,
     MatToolbarModule,
     MatButtonModule,
+    ...RPG_DEBUG_MENU_IMPORTS,
   ],
 })
 export class AppComponentsModule {