Visualize SimpleTransitions

src/app/app.component.ts

@@ -147,8 +147,10 @@ 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. ");
+    const springState = season.createState("Spring", "Spring, also known as springtime, is one of the four temperate seasons, succeeding winter and preceding summer.");
+    const summerState = season.createState("Summer", "Summer is the hottest and brightest of the four temperate seasons, occurring after spring and before autumn. ");
+
+    season.createTransition(springState!, summerState!);
 
     this.gameModel.addGamesystem(weather)
     this.gameModel.addGamesystem(season);

src/app/app.module.ts

@@ -47,6 +47,9 @@ import {
   MatTable
 } from "@angular/material/table";
 import {MatCheckbox} from "@angular/material/checkbox";
+import {
+  SimpleTransitionEditorComponent
+} from "./editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -62,7 +65,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     GamescriptOverviewComponent,
     GamesystemEditorComponent,
     SimpleGamesystemEditorComponent,
-    SimpleStateEditorComponent
+    SimpleStateEditorComponent,
+    SimpleTransitionEditorComponent
   ],
   imports: [
     BrowserModule,

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

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

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

@@ -0,0 +1,3 @@
+.transition-editor {
+  margin-top: 15px;
+}

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

@@ -0,0 +1,56 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>
+  <ng-container matColumnDef="starting-state">
+    <th mat-header-cell *matHeaderCellDef>Starting State</th>
+    <td mat-cell *matCellDef="let transition">{{transition.startingState.stateLabel}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="ending-state">
+    <th mat-header-cell *matHeaderCellDef>Ending State</th>
+    <td mat-cell *matCellDef="let transition">{{transition.endingState.stateLabel}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="expandedDetail">
+    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
+      <div class="example-element-detail"
+           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
+        <p>Expanded Detail</p>
+      </div>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="edit">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let transition">
+      <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 transition">
+      <button mat-icon-button color="warn"><mat-icon>delete</mat-icon></button>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="expand">
+    <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
+    <td mat-cell *matCellDef="let element">
+      <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
+        @if (expandedElement === element) {
+          <mat-icon>keyboard_arrow_up</mat-icon>
+        } @else {
+          <mat-icon>keyboard_arrow_down</mat-icon>
+        }
+      </button>
+    </td>
+  </ng-container>
+
+
+  <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
+  <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
+      class="example-element-row"
+      [class.example-expanded-row]="expandedElement === element"
+      (click)="expandedElement = expandedElement === element ? null : element">
+  </tr>
+  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
+</table>

src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.scss

@@ -0,0 +1,51 @@
+table {
+  width: 100%;
+  margin-top: 20px;
+}
+.mat-column-edit, .mat-column-delete, .mat-column-expand {
+  width: 32px;
+}
+
+tr.example-detail-row {
+  height: 0;
+}
+
+tr.example-element-row:not(.example-expanded-row):hover {
+  background: #545456;
+}
+
+tr.example-element-row:not(.example-expanded-row):active {
+  background: #545456;
+}
+
+.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;
+}

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

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

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

@@ -0,0 +1,38 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {GameModel} from "../../../../game-model/GameModel";
+import {SimpleGamesystem} from "../../../../game-model/gamesystems/SimpleGamesystem";
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
+  MatTable,
+  MatTableDataSource
+} from "@angular/material/table";
+import {SimpleTransition} from "../../../../game-model/gamesystems/SimpleTransition";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+
+@Component({
+  selector: 'app-simple-transition-editor',
+  templateUrl: './simple-transition-editor.component.html',
+  styleUrl: './simple-transition-editor.component.scss',
+  animations: [
+    trigger('detailExpand', [
+      state('collapsed,void', style({height: '0px', minHeight: '0'})),
+      state('expanded', style({height: '*'})),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+  ],
+})
+export class SimpleTransitionEditorComponent implements OnInit {
+
+  @Input() gamesystem: SimpleGamesystem | undefined
+  displayedColumns: string[] = ["starting-state", "ending-state", "edit", "delete"];
+  dataSource = new MatTableDataSource<SimpleTransition>();
+  columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
+  expandedElement: SimpleTransition | null = null;
+  ngOnInit() {
+    this.dataSource.data = this.gamesystem!.transitions;
+  }
+}