From f55e8dde3d062bfc064a585b7552b11f26d424f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= Date: Tue, 6 Feb 2024 20:56:21 +0100 Subject: [PATCH] Visualize SimpleGamesystems in GamesystemOverview --- src/app/app.component.html | 2 +- src/app/app.component.ts | 7 ++ src/app/app.module.ts | 6 +- src/app/game-model/gamesystems/Gamesystem.ts | 16 +++-- .../gamesystems/ProductGamesystem.ts | 3 +- .../gamescript-overview.component.html | 19 ++++- .../gamescript-overview.component.ts | 69 +++++++++++++++++-- 7 files changed, 108 insertions(+), 14 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index b7c855b..0f43965 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -23,7 +23,7 @@ - +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5aff408..7d1f22e 100644 --- a/src/app/app.component.ts +++ b/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() { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ad744e9..46973c6 100644 --- a/src/app/app.module.ts +++ b/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] diff --git a/src/app/game-model/gamesystems/Gamesystem.ts b/src/app/game-model/gamesystems/Gamesystem.ts index 1af0da7..0dea6ba 100644 --- a/src/app/game-model/gamesystems/Gamesystem.ts +++ b/src/app/game-model/gamesystems/Gamesystem.ts @@ -1,12 +1,14 @@ -export abstract class Gamesystem { - gamesystemName: string - gamesystemDescription: string +import {SimpleGamesystem} from "./SimpleGamesystem"; +import {ProductGamesystem} from "./ProductGamesystem"; +import {ModelComponent} from "../ModelComponent"; +import {ModelComponentType} from "../ModelComponentType"; + +export abstract class Gamesystem 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 { } + save() { + + } + } diff --git a/src/app/game-model/gamesystems/ProductGamesystem.ts b/src/app/game-model/gamesystems/ProductGamesystem.ts index 10301eb..d97f39e 100644 --- a/src/app/game-model/gamesystems/ProductGamesystem.ts +++ b/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 { - innerGamesystems: Gamesystem, Transition>[] = []; + innerGamesystems: SimpleGamesystem[] = []; parentGamesystem: ProductGamesystem | undefined createState(label: string, description: string): ProductState | undefined { diff --git a/src/app/side-overviews/gamescript-overview/gamescript-overview.component.html b/src/app/side-overviews/gamescript-overview/gamescript-overview.component.html index 99e6d6c..e871b87 100644 --- a/src/app/side-overviews/gamescript-overview/gamescript-overview.component.html +++ b/src/app/side-overviews/gamescript-overview/gamescript-overview.component.html @@ -1 +1,18 @@ -

gamescript-overview works!

+ + + + + + {{node.name}} + + + + + {{node.name}} + + diff --git a/src/app/side-overviews/gamescript-overview/gamescript-overview.component.ts b/src/app/side-overviews/gamescript-overview/gamescript-overview.component.ts index 01edda5..0454cb9 100644 --- a/src/app/side-overviews/gamescript-overview/gamescript-overview.component.ts +++ b/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, Transition>, 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( + 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, Transition>) { + return gamesystem instanceof SimpleGamesystem; + } + + isProductGamesystem(gamesystem: Gamesystem, Transition>) { + return gamesystem instanceof ProductGamesystem; + } }