src/app/app.component.html

@@ -23,7 +23,7 @@
         </mat-menu>
       </div>
       <app-script-account-overview *ngIf="openContent == ModelComponentType.SCRIPTACCOUNT" #scriptAccountOverview [gameModel]="gameModel" (onOpenScriptAccount)="openModelComponent($event)"></app-script-account-overview>
-      <app-gamescript-overview *ngIf="openContent == ModelComponentType.GAMESYTEM" #gamesystemOverview></app-gamescript-overview>
+      <app-gamescript-overview *ngIf="openContent == ModelComponentType.GAMESYTEM" #gamesystemOverview [gameModel]="gameModel"></app-gamescript-overview>
     </mat-drawer>
 
     <div class="example-sidenav-content">

src/app/app.component.ts

@@ -14,6 +14,7 @@ import {MatDialog} from "@angular/material/dialog";
 import {DeleteConfirmationDialogComponent} from "./delete-confirmation-dialog/delete-confirmation-dialog.component";
 import {ScriptAccount} from "./game-model/scriptAccounts/ScriptAccount";
 import {GamescriptOverviewComponent} from "./side-overviews/gamescript-overview/gamescript-overview.component";
+import {SimpleGamesystem} from "./game-model/gamesystems/SimpleGamesystem";
 
 @Component({
   selector: 'app-root',
@@ -82,6 +83,12 @@ export class AppComponent implements OnInit{
     this.gameModel = new GameModel("No More");
     this.gameModel.addScriptAccount("Temperature");
     this.gameModel.addScriptAccount("Luftfeuchtigkeit");
+
+    const weather = new SimpleGamesystem("Weather");
+    const season = new SimpleGamesystem("Season");
+
+    this.gameModel.addGamesystem(weather)
+    this.gameModel.addGamesystem(season);
   }
 
   openScriptAccountsOverview() {

src/app/app.module.ts

@@ -29,6 +29,7 @@ import {ModelComponentEditorComponent} from "./editor/model-component-editor/mod
 import {DeleteConfirmationDialogComponent} from "./delete-confirmation-dialog/delete-confirmation-dialog.component";
 import {MatDialogActions, MatDialogContent, MatDialogTitle} from "@angular/material/dialog";
 import {GamescriptOverviewComponent} from "./side-overviews/gamescript-overview/gamescript-overview.component";
+import {MatTree, MatTreeModule} from "@angular/material/tree";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -40,7 +41,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     EditorComponent,
     ScriptAccountEditorComponent,
     ModelComponentEditorComponent,
-    DeleteConfirmationDialogComponent
+    DeleteConfirmationDialogComponent,
+    GamescriptOverviewComponent
   ],
     imports: [
         BrowserModule,
@@ -80,7 +82,7 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
         MatDialogContent,
         MatDialogActions,
         MatMiniFabButton,
-        GamescriptOverviewComponent,
+        MatTreeModule,
     ],
   providers: [],
   bootstrap: [AppComponent]

src/app/game-model/gamesystems/Gamesystem.ts

@@ -1,12 +1,14 @@
-export abstract class Gamesystem<S, T> {
-  gamesystemName: string
-  gamesystemDescription: string
+import {SimpleGamesystem} from "./SimpleGamesystem";
+import {ProductGamesystem} from "./ProductGamesystem";
+import {ModelComponent} from "../ModelComponent";
+import {ModelComponentType} from "../ModelComponentType";
+
+export abstract class Gamesystem<S, T> extends ModelComponent{
 
   states: S[] = [];
   transitions: T[] = [];
   constructor(gamesystemName: string) {
-    this.gamesystemName = gamesystemName;
-    this.gamesystemDescription = "";
+   super(gamesystemName, "", ModelComponentType.GAMESYTEM);
   }
 
   abstract createState(label: string, description: string): S|undefined;
@@ -26,4 +28,8 @@ export abstract class Gamesystem<S, T> {
   }
 
 
+  save() {
+
+  }
+
 }

src/app/game-model/gamesystems/ProductGamesystem.ts

@@ -4,10 +4,11 @@ import {ProductTransition} from "./ProductTransition";
 import {State} from "./State";
 import {Transition} from "./Transition";
 import {SimpleState} from "./SimpleState";
+import {SimpleGamesystem} from "./SimpleGamesystem";
 
 export class ProductGamesystem extends Gamesystem<ProductState, ProductTransition> {
 
-  innerGamesystems: Gamesystem<State<any>, Transition<any>>[] = [];
+  innerGamesystems: SimpleGamesystem[] = [];
   parentGamesystem: ProductGamesystem | undefined
 
   createState(label: string, description: string): ProductState | undefined {

src/app/side-overviews/gamescript-overview/gamescript-overview.component.html

@@ -1 +1,18 @@
-<p>gamescript-overview works!</p>
+<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
+  <!-- This is the tree node template for leaf nodes -->
+  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+    <!-- use a disabled button to provide padding for tree leaf -->
+    <button mat-icon-button disabled></button>
+    {{node.name}}
+  </mat-tree-node>
+  <!-- This is the tree node template for expandable nodes -->
+  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
+    <button mat-icon-button matTreeNodeToggle
+            [attr.aria-label]="'Toggle ' + node.name">
+      <mat-icon class="mat-icon-rtl-mirror">
+        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+      </mat-icon>
+    </button>
+    {{node.name}}
+  </mat-tree-node>
+</mat-tree>

src/app/side-overviews/gamescript-overview/gamescript-overview.component.ts

@@ -1,12 +1,73 @@
-import { Component } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {Gamesystem} from "../../game-model/gamesystems/Gamesystem";
+import {State} from "../../game-model/gamesystems/State";
+import {Transition} from "../../game-model/gamesystems/Transition";
+import {ProductGamesystem} from "../../game-model/gamesystems/ProductGamesystem";
+import {FlatTreeControl} from "@angular/cdk/tree";
+import {
+  MatTree,
+  MatTreeFlatDataSource,
+  MatTreeFlattener,
+  MatTreeNode, MatTreeNodeDef,
+  MatTreeNodePadding, MatTreeNodeToggle
+} from "@angular/material/tree";
+import {MatIcon} from "@angular/material/icon";
+import {MatIconButton} from "@angular/material/button";
+import {SimpleGamesystem} from "../../game-model/gamesystems/SimpleGamesystem";
+import {GameModel} from "../../game-model/GameModel";
 
+
+interface FlatNode {
+  expandable: boolean,
+  name: string,
+  level: number
+}
 @Component({
   selector: 'app-gamescript-overview',
-  standalone: true,
-  imports: [],
   templateUrl: './gamescript-overview.component.html',
   styleUrl: './gamescript-overview.component.scss'
 })
-export class GamescriptOverviewComponent {
+export class GamescriptOverviewComponent implements OnInit {
 
+  @Input('gameModel') gameModel: GameModel | undefined
+
+  ngOnInit() {
+    this.dataSource.data = this.gameModel!.gamesystems;
+  }
+
+  private _transformer = (node: Gamesystem<State<any>, Transition<any>>, level: number) => {
+    return {
+      expandable: this.isProductGamesystem(node) && !!(node as ProductGamesystem).innerGamesystems && (node as ProductGamesystem).innerGamesystems.length > 0,
+      name: node.componentName,
+      level: level
+    }
+  }
+
+  treeControl = new FlatTreeControl<FlatNode>(
+    node => node.level,
+    node => node.expandable
+  )
+
+  treeFlattener = new MatTreeFlattener(
+    this._transformer,
+    node => node.level,
+    node => node.expandable,
+    node => this.isSimpleGamesystem(node)? []: (node as ProductGamesystem).innerGamesystems
+  );
+
+  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+
+  constructor() {
+
+  }
+
+  hasChild = (_: number, node: FlatNode) => node.expandable;
+
+  isSimpleGamesystem(gamesystem: Gamesystem<State<any>, Transition<any>>) {
+    return gamesystem instanceof SimpleGamesystem;
+  }
+
+  isProductGamesystem(gamesystem: Gamesystem<State<any>, Transition<any>>) {
+    return gamesystem instanceof ProductGamesystem;
+  }
 }