Pick transitions to be character specific

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

@@ -1,9 +1,90 @@
 <div class="parentContainer">
   <div class="template-editor">
-    <app-simple-transition-editor [gamesystem]="templateGamesystem!.referenceGamesystem"></app-simple-transition-editor>
+    <mat-card>
+      <mat-card-content>
+        <mat-form-field class="long-form">
+          <mat-label>Filter</mat-label>
+          <input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
+        </mat-form-field>
+
+        <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">
+              <span *ngIf="editedTransition !== transition">{{transition.startingState.stateLabel}}</span>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="ending-state">
+            <th mat-header-cell *matHeaderCellDef>Ending State</th>
+            <td mat-cell *matCellDef="let transition">
+              <span *ngIf="editedTransition !== transition">{{transition.endingState.stateLabel}}</span>
+            </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'">
+                <div class="condition-action-container">
+                  <div class="action-container">
+                    <app-scriptaccount-action-editor [transition]="element" [scriptAccounts]="scriptAccounts" [enableEditing]="true"></app-scriptaccount-action-editor>
+                  </div>
+                  <div class="condition-container">
+                    <app-scriptaccount-condition-editor [conditions]="element.scriptAccountConditions" [scriptAccounts]="scriptAccounts" [enableEditiong]="true"
+                                                        (onCreateCondition)="onCreateCondition(element, $event)" (onDeleteCondition)="deleteCondition(element, $event)"></app-scriptaccount-condition-editor>
+                  </div>
+                </div>
+
+
+              </div>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="edit">
+            <th mat-header-cell *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let transition">
+              <button mat-icon-button class="icon-btn-primary" *ngIf="editedTransition !== transition"  [disabled]="editedTransition !== null" (click)="onEditTransition(transition)"><mat-icon>edit</mat-icon></button>
+              <button mat-icon-button class="icon-btn-primary"  *ngIf="editedTransition === transition" (click)="onEditTransition(transition)"><mat-icon>done</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" (click)="deleteTransition(transition)"><mat-icon>delete</mat-icon></button>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="expand">
+            <th mat-header-cell *matHeaderCellDef aria-label="row actions">
+            </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>
+
+      </mat-card-content>
+    </mat-card>
+
   </div>
   <div class="reference-editor">
-    <app-simple-transition-editor [gamesystem]="templateGamesystem!.referenceGamesystem"></app-simple-transition-editor>
+    <app-simple-transition-editor [referenceEditor]="true" [gamesystem]="templateGamesystem!.referenceGamesystem" (referenceTransitionEmitter)="extractReferencedTransition($event)"></app-simple-transition-editor>
   </div>
-
 </div>

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

@@ -5,3 +5,81 @@
 .reference-editor, .template-editor{
   flex: 1;
 }
+
+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;
+}
+
+.long-form {
+  width: 100%;
+}
+
+.warning-icon {
+  margin-right: 5px;
+}
+
+.mat-error {
+  color: red;
+}
+
+.condition-action-container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%
+}
+
+.condition-container {
+  flex: 1;
+}
+
+.action-container {
+  flex: 1;
+}

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

@@ -1,13 +1,70 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {TemplateGamesystem} from "../../../../project/game-model/gamesystems/TemplateGamesystem";
 import {AppModule} from "../../../../app.module";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+import {MatTableDataSource} from "@angular/material/table";
+import {SimpleTransition} from "../../../../project/game-model/gamesystems/transitions/SimpleTransition";
+import {SimpleState} from "../../../../project/game-model/gamesystems/states/SimpleState";
+import {ScriptAccount} from "../../../../project/game-model/scriptAccounts/ScriptAccount";
+import {ScriptAccountCondition} from "../../../../project/game-model/gamesystems/conditions/ScriptAccountCondition";
 
 @Component({
   selector: 'app-template-transition-editor',
   templateUrl: './template-transition-editor.component.html',
-  styleUrl: './template-transition-editor.component.scss'
+  styleUrl: './template-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 TemplateTransitionEditorComponent {
 
   @Input() templateGamesystem: TemplateGamesystem | undefined
+  @Input() scriptAccounts: ScriptAccount[] = []
+  displayedColumns: string[] = ["starting-state", "ending-state", "edit", "delete"];
+  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;
+
+  applyFilter(event: KeyboardEvent) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  onCreateCondition(transition: SimpleTransition, condition: ScriptAccountCondition) {
+
+  }
+
+  deleteCondition(transition: SimpleTransition, condition: ScriptAccountCondition) {
+
+  }
+
+  deleteTransition(transition: SimpleTransition) {
+
+  }
+
+  onEditTransition(transition: SimpleTransition) {
+    if(this.editedTransition == undefined) {
+      this.editedTransition = transition
+    } else {
+      this.editedTransition = undefined
+    }
+  }
+
+  extractReferencedTransition(transition: SimpleTransition) {
+    this.templateGamesystem!.addReferenceTransition(transition)
+    this.dataSource.data = this.templateGamesystem!.templateTransitions
+  }
 }

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

@@ -58,7 +58,8 @@
       <ng-container matColumnDef="edit">
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let transition">
-          <button mat-icon-button class="icon-btn-primary" *ngIf="editedTransition !== transition" [disabled]="editedTransition != undefined"><mat-icon>edit</mat-icon></button>
+          <button mat-icon-button class="icon-btn-primary" *ngIf="editedTransition !== transition"
+                  [disabled]="editedTransition != undefined" (click)="editTransition(transition)"><mat-icon>edit</mat-icon></button>
           <button mat-icon-button class="icon-btn-primary" *ngIf="editedTransition === transition"
                   [disabled]="transitionError || transitionStartingStateError || transitionEndingStateError" (click)="finishEditing()"
           ><mat-icon>done</mat-icon></button>
@@ -74,7 +75,7 @@
 
       <ng-container matColumnDef="expand">
         <th mat-header-cell *matHeaderCellDef aria-label="row actions">
-          <button mat-icon-button (click)="addTransition()" [disabled]="editedTransition != undefined"><mat-icon>add</mat-icon></button>
+          <button mat-icon-button *ngIf="!referenceEditor" (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()">

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

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {
   MatTableDataSource
 } from "@angular/material/table";
@@ -24,6 +24,8 @@ export class SimpleTransitionEditorComponent implements OnInit {
 
   @Input() gamesystem: SimpleGamesystem | undefined
   @Input() scriptAccounts: ScriptAccount[] = []
+  @Input() referenceEditor: boolean = false
+  @Output() referenceTransitionEmitter: EventEmitter<SimpleTransition> = new EventEmitter<SimpleTransition>()
   displayedColumns: string[] = ["starting-state", "ending-state", "edit", "delete"];
   dataSource = new MatTableDataSource<SimpleTransition>();
   columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
@@ -38,6 +40,11 @@ export class SimpleTransitionEditorComponent implements OnInit {
   transitionStartingStateError = true;
   transitionEndingStateError = true;
   ngOnInit() {
+    if(this.referenceEditor) {
+      this.displayedColumns = this.displayedColumns.slice(0, -1)
+      this.columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
+    }
+
     this.dataSource.data = this.gamesystem!.transitions;
     this.dataSource.filterPredicate = (data: SimpleTransition, filter: string) => {
       return [data.startingState, data.endingState].some((state) => state.stateLabel.toLowerCase().includes(filter))
@@ -97,4 +104,8 @@ export class SimpleTransitionEditorComponent implements OnInit {
   deleteCondition(trasition: SimpleTransition, condition: ScriptAccountCondition) {
     trasition.removeScriptAccountCondition(condition.scriptAccount);
   }
+
+  editTransition(transition: SimpleTransition) {
+    this.referenceTransitionEmitter.emit(transition)
+  }
 }

src/app/project/game-model/gamesystems/TemplateGamesystem.ts

@@ -2,11 +2,14 @@ import {SimpleGamesystem} from "./SimpleGamesystem";
 import {TemplateState} from "./states/TemplateState";
 import {SimpleState} from "./states/SimpleState";
 import {ScriptAccountCondition} from "./conditions/ScriptAccountCondition";
+import {SimpleTransition} from "./transitions/SimpleTransition";
+import {ScriptAccountAction} from "./actions/ScriptAccountAction";
 
 export class TemplateGamesystem {
   referenceGamesystem: SimpleGamesystem
 
   templateStates: SimpleState[] = []
+  templateTransitions: SimpleTransition[] = []
 
 
   constructor(referenceGamesystem: SimpleGamesystem) {
@@ -19,4 +22,13 @@ export class TemplateGamesystem {
       ScriptAccountCondition.constructScriptAccountCondition(condition.scriptAccount, condition.minValue, condition.maxValue)!)
     this.templateStates.push(templateState)
   }
+
+  addReferenceTransition(referenceTransition: SimpleTransition) {
+    const templateTransition = new SimpleTransition(referenceTransition.startingState, referenceTransition.endingState)
+    templateTransition.scriptAccountConditions = referenceTransition.scriptAccountConditions.map(condition =>
+      ScriptAccountCondition.constructScriptAccountCondition(condition.scriptAccount, condition.minValue, condition.maxValue)!)
+    templateTransition.scriptAccountActions = referenceTransition.scriptAccountActions.map(action =>
+      new ScriptAccountAction(action.scriptAccount, action.changingValue))
+    this.templateTransitions.push(templateTransition)
+  }
 }