Visualize SimpleStates of Simplegamesystems

src/app/app.component.ts

@@ -147,6 +147,9 @@ export class AppComponent implements OnInit{
     const weather = new SimpleGamesystem("Weather");
     const season = new SimpleGamesystem("Season");
 
+    season.createState("Spring", "Spring, also known as springtime, is one of the four temperate seasons, succeeding winter and preceding summer.");
+    season.createState("Summer", "Summer is the hottest and brightest of the four temperate seasons, occurring after spring and before autumn. ");
+
     this.gameModel.addGamesystem(weather)
     this.gameModel.addGamesystem(season);
   }

src/app/app.module.ts

@@ -30,6 +30,22 @@ import {DeleteConfirmationDialogComponent} from "./delete-confirmation-dialog/de
 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";
+import {GamesystemEditorComponent} from "./editor/gamesystem-editor/gamesystem-editor.component";
+import {
+  SimpleGamesystemEditorComponent
+} from "./editor/gamesystem-editor/simple-gamesystem-editor/simple-gamesystem-editor.component";
+import {
+  SimpleStateEditorComponent
+} from "./editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component";
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
+  MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
+  MatTable
+} from "@angular/material/table";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -42,7 +58,10 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     ScriptAccountEditorComponent,
     ModelComponentEditorComponent,
     DeleteConfirmationDialogComponent,
-    GamescriptOverviewComponent
+    GamescriptOverviewComponent,
+    GamesystemEditorComponent,
+    SimpleGamesystemEditorComponent,
+    SimpleStateEditorComponent
   ],
   imports: [
     BrowserModule,
@@ -83,6 +102,16 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatDialogActions,
     MatMiniFabButton,
     MatTreeModule,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCell,
+    MatHeaderCellDef,
+    MatCellDef,
+    MatCell,
+    MatHeaderRow,
+    MatRow,
+    MatHeaderRowDef,
+    MatRowDef
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/editor/editor.component.html

@@ -10,6 +10,8 @@
     <app-model-component-editor [modelComponent]="modelComponent" (onModelNameUpdated)="onModelNameUpdate()"></app-model-component-editor>
     <app-script-account-editor *ngIf="modelComponent.type === ModelComponentType.SCRIPTACCOUNT"
                                [scriptAccount]="convertModelComponentToScriptAccount(modelComponent)"></app-script-account-editor>
+    <app-gamesystem-editor *ngIf="modelComponent.type == ModelComponentType.GAMESYTEM"
+                                [gamesystem]="convertModelComponentToGamesystem(modelComponent)"></app-gamesystem-editor>
 
   </mat-tab>
 </mat-tab-group>

src/app/editor/editor.component.ts

@@ -3,6 +3,9 @@ import {GameModel} from "../game-model/GameModel";
 import {ModelComponent} from "../game-model/ModelComponent";
 import {ModelComponentType} from "../game-model/ModelComponentType";
 import {ScriptAccount} from "../game-model/scriptAccounts/ScriptAccount";
+import {Gamesystem} from "../game-model/gamesystems/Gamesystem";
+import {State} from "../game-model/gamesystems/State";
+import {Transition} from "../game-model/gamesystems/Transition";
 
 @Component({
   selector: 'app-editor',
@@ -29,6 +32,12 @@ export class EditorComponent {
     }
   }
 
+  convertModelComponentToGamesystem(modelComponent: ModelComponent) {
+    if(modelComponent instanceof Gamesystem) {
+      return modelComponent as Gamesystem<State<any>, Transition<any>>;
+    }
+  }
+
   protected readonly ModelComponentType = ModelComponentType;
 
   onModelNameUpdate() {

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

@@ -0,0 +1 @@
+<app-simple-gamesystem-editor *ngIf="isSimpleGamesystem()" [simpleGamesystem]="convertGamesystemToSimpleGamesystem()"></app-simple-gamesystem-editor>

src/app/editor/gamesystem-editor/gamesystem-editor.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GamesystemEditorComponent } from './gamesystem-editor.component';
+
+describe('GamesystemEditorComponent', () => {
+  let component: GamesystemEditorComponent;
+  let fixture: ComponentFixture<GamesystemEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GamesystemEditorComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(GamesystemEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,33 @@
+import {Component, Input} from '@angular/core';
+import {GameModel} from "../../game-model/GameModel";
+import {Gamesystem} from "../../game-model/gamesystems/Gamesystem";
+import {State} from "../../game-model/gamesystems/State";
+import {Transition} from "../../game-model/gamesystems/Transition";
+import {SimpleGamesystem} from "../../game-model/gamesystems/SimpleGamesystem";
+import {ProductGamesystem} from "../../game-model/gamesystems/ProductGamesystem";
+
+@Component({
+  selector: 'app-gamesystem-editor',
+  templateUrl: './gamesystem-editor.component.html',
+  styleUrl: './gamesystem-editor.component.scss'
+})
+export class GamesystemEditorComponent {
+
+  @Input() gamesystem: Gamesystem<State<any>, Transition<any>> | undefined
+
+  isSimpleGamesystem() {
+    return this.gamesystem instanceof SimpleGamesystem;
+  }
+
+  convertGamesystemToSimpleGamesystem() {
+    if(this.gamesystem instanceof SimpleGamesystem) {
+      return this.gamesystem as SimpleGamesystem;
+    }
+  }
+
+  convertGamesystemToProductGamesystem() {
+    if(this.gamesystem instanceof ProductGamesystem) {
+      return this.gamesystem as ProductGamesystem;
+    }
+  }
+}

src/app/editor/gamesystem-editor/simple-gamesystem-editor/simple-gamesystem-editor.component.html

@@ -0,0 +1 @@
+<app-simple-state-editor [states]="simpleGamesystem!.states"></app-simple-state-editor>

src/app/editor/gamesystem-editor/simple-gamesystem-editor/simple-gamesystem-editor.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SimpleGamesystemEditorComponent } from './simple-gamesystem-editor.component';
+
+describe('SimpleGamesystemEditorComponent', () => {
+  let component: SimpleGamesystemEditorComponent;
+  let fixture: ComponentFixture<SimpleGamesystemEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SimpleGamesystemEditorComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SimpleGamesystemEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/editor/gamesystem-editor/simple-gamesystem-editor/simple-gamesystem-editor.component.ts

@@ -0,0 +1,16 @@
+import {Component, Input} from '@angular/core';
+import {SimpleGamesystem} from "../../../game-model/gamesystems/SimpleGamesystem";
+import {MatTableDataSource} from "@angular/material/table";
+
+@Component({
+  selector: 'app-simple-gamesystem-editor',
+  templateUrl: './simple-gamesystem-editor.component.html',
+  styleUrl: './simple-gamesystem-editor.component.scss'
+})
+export class SimpleGamesystemEditorComponent {
+
+  @Input() simpleGamesystem: SimpleGamesystem | undefined
+
+
+
+}

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

@@ -0,0 +1,36 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef>Label</th>
+    <td mat-cell *matCellDef="let state">{{state.stateLabel}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="description">
+    <th mat-header-cell *matHeaderCellDef>Label</th>
+    <td mat-cell *matCellDef="let state">{{state.stateDescription}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="initial">
+    <th mat-header-cell *matHeaderCellDef>Initial</th>
+    <td mat-cell *matCellDef="let state">
+      <mat-icon *ngIf="state.initial">done</mat-icon>
+      <mat-icon *ngIf="!state.initial">close</mat-icon>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="edit">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let state">
+      <button mat-icon-button color="primary"><mat-icon>edit</mat-icon></button>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="delete">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let state">
+      <button mat-icon-button color="warn"><mat-icon>delete</mat-icon></button>
+    </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/simple-state-editor/simple-state-editor.component.scss

@@ -0,0 +1,51 @@
+table {
+  width: 100%;
+}
+
+tr.example-detail-row {
+  height: 0;
+}
+
+tr.example-element-row:not(.example-expanded-row):hover {
+  background: whitesmoke;
+}
+
+tr.example-element-row:not(.example-expanded-row):active {
+  background: #efefef;
+}
+
+.example-element-row td {
+  border-bottom-width: 0;
+}
+
+.example-element-detail {
+  overflow: hidden;
+  display: flex;
+}
+
+.example-element-diagram {
+  min-width: 80px;
+  border: 2px solid black;
+  padding: 8px;
+  font-weight: lighter;
+  margin: 8px 0;
+  height: 104px;
+}
+
+.example-element-symbol {
+  font-weight: bold;
+  font-size: 40px;
+  line-height: normal;
+}
+
+.example-element-description {
+  padding: 16px;
+}
+
+.example-element-description-attribution {
+  opacity: 0.5;
+}
+
+.mat-column-edit, .mat-column-delete {
+  width: 32px;
+}

src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SimpleStateEditorComponent } from './simple-state-editor.component';
+
+describe('SimpleStateEditorComponent', () => {
+  let component: SimpleStateEditorComponent;
+  let fixture: ComponentFixture<SimpleStateEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SimpleStateEditorComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SimpleStateEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,19 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {SimpleState} from "../../../../game-model/gamesystems/SimpleState";
+import {MatTableDataSource} from "@angular/material/table";
+
+@Component({
+  selector: 'app-simple-state-editor',
+  templateUrl: './simple-state-editor.component.html',
+  styleUrl: './simple-state-editor.component.scss'
+})
+export class SimpleStateEditorComponent implements OnInit{
+
+  @Input() states: SimpleState[] = [];
+  dataSource = new MatTableDataSource();
+  displayedColumns = ["name", "initial", "edit", "delete"];
+
+  ngOnInit() {
+    this.dataSource.data = this.states;
+  }
+}

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

@@ -6,6 +6,8 @@ export abstract class State<T extends Transition<any>> {
   incomingTransitions: T[] =[];
   outgoingTransitions: T[] =[];
 
+  initial: boolean = false;
+
 
   constructor(stateLabel: string, stateDescription: string) {
     this.stateLabel = stateLabel;