Visualize ProductStates

src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html

@@ -1 +1,9 @@
-<p>product-state-editor works!</p>
+<table mat-table [dataSource]="datasource" class="mat-elevation-z8">
+  <ng-container *ngFor="let col of displayedColumns; let i = index" [matColumnDef]="col">
+    <th mat-header-cell *matHeaderCellDef>{{col}}</th>
+    <td mat-cell *matCellDef="let state">{{getStateLabel(state, i)}}</td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>

src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.scss

@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}

src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.ts

@@ -1,14 +1,79 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {ProductGamesystem} from "../../../../game-model/gamesystems/ProductGamesystem";
+import {SimpleGamesystem} from "../../../../game-model/gamesystems/SimpleGamesystem";
+import {
+  MatCell, MatCellDef,
+  MatColumnDef, MatHeaderCell, MatHeaderCellDef,
+  MatHeaderRow,
+  MatHeaderRowDef,
+  MatRow,
+  MatRowDef,
+  MatTable,
+  MatTableDataSource
+} from "@angular/material/table";
+import {SimpleState} from "../../../../game-model/gamesystems/SimpleState";
+import {State} from "../../../../game-model/gamesystems/State";
+import {NgForOf} from "@angular/common";
+import {ProductState} from "../../../../game-model/gamesystems/ProductState";
 
 @Component({
   selector: 'app-product-state-editor',
   standalone: true,
-  imports: [],
+  imports: [
+    MatTable,
+    MatRow,
+    MatRowDef,
+    MatHeaderRow,
+    MatHeaderRowDef,
+    MatColumnDef,
+    MatHeaderCell,
+    MatHeaderCellDef,
+    MatCell,
+    MatCellDef,
+    NgForOf
+  ],
   templateUrl: './product-state-editor.component.html',
   styleUrl: './product-state-editor.component.scss'
 })
-export class ProductStateEditorComponent {
+export class ProductStateEditorComponent implements OnInit{
 
   @Input() gamesystem: ProductGamesystem | undefined
+  displayedColumns: string[] = [];
+  datasource = new MatTableDataSource();
+
+
+  ngOnInit() {
+    this.gamesystem!.generateFromChildsystems();
+    this.generateColumnNamesRecursively(this.gamesystem!, "");
+    this.datasource.data = this.gamesystem!.states;
+  }
+
+  generateColumnNamesRecursively(gamesystem: ProductGamesystem, nestedColumnName: string) {
+    gamesystem.innerGamesystems.forEach(innerGamesystem => {
+      if(innerGamesystem instanceof SimpleGamesystem) {
+        this.displayedColumns.push(nestedColumnName + innerGamesystem.componentName);
+      } else {
+        this.generateColumnNamesRecursively(innerGamesystem as ProductGamesystem, nestedColumnName + innerGamesystem.componentName + ".");
+      }
+    })
+  }
+
+  protected readonly SimpleState = SimpleState;
+
+  getStateLabel(state: State<any>, i: number) {
+    return this.computeLeafStates(state)[i].stateLabel;
+  }
+
+  computeLeafStates(state: State<any>) {
+    if(state instanceof SimpleState) {
+      return [state];
+    } else {
+      const productState = state as ProductState;
+      const leafStates: SimpleState[] = [];
+      productState.innerStates.forEach(innerState => {
+        this.computeLeafStates(innerState).forEach(leafState => leafStates.push(leafState));
+      })
+      return leafStates;
+    }
+  }
 }