diff --git a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html b/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html
index 1f4a1d3..9f68652 100644
--- a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html
+++ b/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html
@@ -1 +1,9 @@
-
product-state-editor works!
+
+
+ {{col}} |
+ {{getStateLabel(state, i)}} |
+
+
+
+
+
diff --git a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.scss b/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.scss
index e69de29..1922e7f 100644
--- a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.scss
+++ b/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.scss
@@ -0,0 +1,3 @@
+table {
+ width: 100%;
+}
diff --git a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.ts b/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.ts
index 608c881..e2d6008 100644
--- a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.ts
+++ b/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, i: number) {
+ return this.computeLeafStates(state)[i].stateLabel;
+ }
+
+ computeLeafStates(state: State) {
+ 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;
+ }
+ }
}