src/app/app.module.ts

@@ -14,7 +14,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {MatIcon} from "@angular/material/icon";
 import {MatToolbar} from "@angular/material/toolbar";
 import {MatButton, MatIconButton, MatMiniFabButton} from "@angular/material/button";
-import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatError, MatFormField, MatHint, MatLabel} from "@angular/material/form-field";
 import {MatInput} from "@angular/material/input";
 import {MatDrawer, MatDrawerContainer} from "@angular/material/sidenav";
 import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
@@ -50,6 +50,7 @@ import {MatCheckbox} from "@angular/material/checkbox";
 import {
   SimpleTransitionEditorComponent
 } from "./editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component";
+import {MatOption, MatSelect} from "@angular/material/select";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -117,7 +118,10 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatRow,
     MatHeaderRowDef,
     MatRowDef,
-    MatCheckbox
+    MatCheckbox,
+    MatSelect,
+    MatOption,
+    MatHint
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -1,12 +1,32 @@
 <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>
+    <td mat-cell *matCellDef="let transition">
+      <span *ngIf="editedTransition !== transition">{{transition.startingState.stateLabel}}</span>
+      <mat-form-field appearance="fill" class="long-form" *ngIf="editedTransition == transition">
+        <mat-select [(ngModel)]="editedTransition!.startingState" (ngModelChange)="validateEditedTransition()">
+          <mat-option *ngFor="let state of gamesystem!.states" [value]="state"
+                          (onSelectionChange)="validateEditedTransition()">{{state.stateLabel}}</mat-option>
+        </mat-select>
+        <mat-hint class="mat-error" *ngIf="transitionError"><mat-icon class="warning-icon">warning</mat-icon> Starting and Ending State cannot be the same!</mat-hint>
+        <mat-hint class="mat-error" *ngIf="!transitionError && transitionStartingStateError"><mat-icon class="warning-icon">warning</mat-icon>  Select a valid Starting State!</mat-hint>
+      </mat-form-field>
+    </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>
+    <td mat-cell *matCellDef="let transition">
+      <span *ngIf="editedTransition !== transition">{{transition.endingState.stateLabel}}</span>
+      <mat-form-field appearance="fill" class="long-form" *ngIf="editedTransition == transition">
+        <mat-select [(ngModel)]="editedTransition!.endingState" (ngModelChange)="validateEditedTransition()">
+          <mat-option *ngFor="let state of gamesystem!.states" [value]="state"
+                        (onSelectionChange)="validateEditedTransition()">{{state.stateLabel}}</mat-option>
+        </mat-select>
+        <mat-hint class="mat-error" *ngIf="transitionError"><mat-icon class="warning-icon">warning</mat-icon> Starting and Ending State cannot be the same!</mat-hint>
+        <mat-hint class="mat-error" *ngIf="!transitionError && transitionEndingStateError"> <mat-icon class="warning-icon">warning</mat-icon> Select a valid Ending State!</mat-hint>
+      </mat-form-field>
+    </td>
   </ng-container>
 
   <ng-container matColumnDef="expandedDetail">
@@ -21,7 +41,10 @@
   <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>
+      <button mat-icon-button color="primary" *ngIf="editedTransition !== transition" [disabled]="editedTransition != undefined"><mat-icon>edit</mat-icon></button>
+      <button mat-icon-button color="primary" *ngIf="editedTransition === transition"
+        [disabled]="transitionError || transitionStartingStateError || transitionEndingStateError" (click)="finishEditing()"
+      ><mat-icon>done</mat-icon></button>
     </td>
   </ng-container>
 
@@ -33,7 +56,9 @@
   </ng-container>
 
   <ng-container matColumnDef="expand">
-    <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
+    <th mat-header-cell *matHeaderCellDef aria-label="row actions">
+      <button mat-icon-button (click)="addTransition()" [disabled]="editedTransition != undefined"><mat-icon>add</mat-icon></button>
+    </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) {

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

@@ -49,3 +49,15 @@ tr.example-element-row:not(.example-expanded-row):active {
 .example-element-description-attribution {
   opacity: 0.5;
 }
+
+.long-form {
+  width: 100%;
+}
+
+.warning-icon {
+  margin-right: 5px;
+}
+
+.mat-error {
+  color: red;
+}

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

@@ -12,6 +12,7 @@ import {
 } from "@angular/material/table";
 import {SimpleTransition} from "../../../../game-model/gamesystems/SimpleTransition";
 import {animate, state, style, transition, trigger} from "@angular/animations";
+import {SimpleState} from "../../../../game-model/gamesystems/SimpleState";
 
 @Component({
   selector: 'app-simple-transition-editor',
@@ -32,7 +33,47 @@ export class SimpleTransitionEditorComponent implements OnInit {
   dataSource = new MatTableDataSource<SimpleTransition>();
   columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
   expandedElement: SimpleTransition | null = null;
+  editedTransition: SimpleTransition | undefined
+  editedTransitionIndex = -1;
+
+  defaultStartingState: SimpleState = new SimpleState("None", "");
+  defaultEndingState: SimpleState = new SimpleState("None", "");
+
+  transitionError: boolean = false;
+  transitionStartingStateError = true;
+  transitionEndingStateError = true;
   ngOnInit() {
     this.dataSource.data = this.gamesystem!.transitions;
   }
+
+  addTransition() {
+    this.editedTransition = new SimpleTransition(this.defaultStartingState, this.defaultEndingState);
+    const updatedData = this.dataSource.data;
+    updatedData.push(this.editedTransition);
+    this.dataSource.data = updatedData;
+    this.editedTransitionIndex = this.dataSource.data.length;
+  }
+
+  validateEditedTransition() {
+    this.transitionError = false;
+    this.transitionStartingStateError = false;
+    this.transitionEndingStateError = false;
+    if(this.editedTransition!.startingState === this.editedTransition!.endingState) {
+      this.transitionError = true;
+    } else if(this.editedTransition!.startingState == this.defaultStartingState) {
+      this.transitionStartingStateError = true;
+    } else if(this.editedTransition!.endingState == this.defaultEndingState) {
+      this.transitionEndingStateError = true;
+    }
+  }
+
+  finishEditing() {
+    this.validateEditedTransition();
+    if(this.transitionError || this.transitionStartingStateError || this.transitionEndingStateError) {
+      return;
+    }
+    this.gamesystem?.createTransition(this.editedTransition!.startingState, this.editedTransition!.endingState);
+    this.dataSource.data = this.gamesystem!.transitions;
+    this.editedTransition = undefined;
+  }
 }