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,48 +58,61 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     ScriptAccountEditorComponent,
     ModelComponentEditorComponent,
     DeleteConfirmationDialogComponent,
-    GamescriptOverviewComponent
+    GamescriptOverviewComponent,
+    GamesystemEditorComponent,
+    SimpleGamesystemEditorComponent,
+    SimpleStateEditorComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpClientModule,
+    CoreModule,
+    SharedModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: httpLoaderFactory,
+        deps: [HttpClient]
+      }
+    }),
+    BrowserAnimationsModule,
+    MatIcon,
+    MatToolbar,
+    MatButton,
+    MatFormField,
+    MatInput,
+    MatDrawerContainer,
+    MatDrawer,
+    MatIconButton,
+    MatMenuTrigger,
+    MatMenu,
+    MatMenuItem,
+    MatListItem,
+    MatActionList,
+    MatTabGroup,
+    MatTab,
+    MatTabLabel,
+    MatLabel,
+    MatFormField,
+    ReactiveFormsModule,
+    MatError,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatMiniFabButton,
+    MatTreeModule,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCell,
+    MatHeaderCellDef,
+    MatCellDef,
+    MatCell,
+    MatHeaderRow,
+    MatRow,
+    MatHeaderRowDef,
+    MatRowDef
   ],
-    imports: [
-        BrowserModule,
-        FormsModule,
-        HttpClientModule,
-        CoreModule,
-        SharedModule,
-        TranslateModule.forRoot({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: httpLoaderFactory,
-                deps: [HttpClient]
-            }
-        }),
-        BrowserAnimationsModule,
-        MatIcon,
-        MatToolbar,
-        MatButton,
-        MatFormField,
-        MatInput,
-        MatDrawerContainer,
-        MatDrawer,
-        MatIconButton,
-        MatMenuTrigger,
-        MatMenu,
-        MatMenuItem,
-        MatListItem,
-        MatActionList,
-        MatTabGroup,
-        MatTab,
-        MatTabLabel,
-        MatLabel,
-        MatFormField,
-        ReactiveFormsModule,
-        MatError,
-        MatDialogTitle,
-        MatDialogContent,
-        MatDialogActions,
-        MatMiniFabButton,
-        MatTreeModule,
-    ],
   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;