Add Implementation of Sequence Editor

src/app/app.module.ts

@@ -120,6 +120,9 @@ import {
   ItemSelectorComponent
 } from "./editor/interaction-editor/conditions/item-condition-editor/item-selector/item-selector.component";
 import {ItemActionEditorComponent} from "./editor/interaction-editor/item-action-editor/item-action-editor.component";
+import {
+  InteractionSequenceEditorComponent
+} from "./editor/interaction-editor/interaction-sequence-editor/interaction-sequence-editor.component";
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
 
@@ -159,7 +162,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     GamesystemConditionEditorComponent,
     ItemConditionEditorComponent,
     ItemSelectorComponent,
-    ItemActionEditorComponent
+    ItemActionEditorComponent,
+    InteractionSequenceEditorComponent
   ],
   imports: [
     BrowserModule,
@@ -226,7 +230,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatExpansionPanelDescription,
     MatAutocomplete,
     MatAutocompleteTrigger,
-    MatNoDataRow
+    MatNoDataRow,
+    InteractionSequenceEditorComponent
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/editor/character-editor/character-interaction-editor/character-interaction-editor.component.html

@@ -138,11 +138,11 @@
           </mat-expansion-panel>
 
 
-          <mat-expansion-panel *ngIf="isInteractionSequence(element)" (closed)="false">
+          <mat-expansion-panel *ngIf="isInteractionSequence(element)">
             <mat-expansion-panel-header>
               <mat-panel-title>Sequence Elements</mat-panel-title>
             </mat-expansion-panel-header>
-
+            <app-interaction-sequence-editor [interactionSequence]="element" [gameModel]="gameModel" [character]="character"></app-interaction-sequence-editor>
           </mat-expansion-panel>
         </mat-accordion>
       </div>

src/app/editor/interaction-editor/interaction-sequence-editor/interaction-sequence-editor.component.html

@@ -0,0 +1,141 @@
+<table mat-table [dataSource]="sequenceDatasource" multiTemplateDataRows class="mat-elevation-z8">
+
+  <ng-container matColumnDef="source">
+    <th mat-header-cell *matHeaderCellDef>Source</th>
+    <td mat-cell *matCellDef="let interaction">
+      @if(interaction != editedElement) {
+        {{interaction.sourceCharacter.componentName}}
+      } @else {
+        <mat-form-field appearance="fill" class="long-form">
+          <mat-label>Source Character</mat-label>
+          <mat-select [(ngModel)]="editedElement!.sourceCharacter">
+            <mat-option *ngFor="let character of gameModel!.characters" [value]="character">{{character.componentName}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      }
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="target">
+    <th mat-header-cell *matHeaderCellDef>Target</th>
+    <td mat-cell *matCellDef="let interaction">
+      @if(interaction != editedElement) {
+        @if(interaction.targetCharacter != undefined) {
+          {{interaction!.targetCharacter!.componentName}}
+        } @else {
+          <p class="warning">UNKNOWN CHARACTER</p>
+        }
+      } @else {
+        <mat-form-field appearance="fill" class="long-form">
+          <mat-label>Target Character</mat-label>
+          <mat-select [(ngModel)]="editedElement!.targetCharacter">
+            <mat-option *ngFor="let character of gameModel!.characters" [value]="character">{{character.componentName}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      }
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="label">
+    <th mat-header-cell *matHeaderCellDef>Label</th>
+    <td mat-cell *matCellDef="let interaction">
+      @if(interaction != editedElement) {
+        {{interaction.interactionLabel}}
+      } @else {
+        <mat-form-field appearance="fill" class="long-form">
+          <mat-label>Label</mat-label>
+          <input matInput [(ngModel)]="editedElement!.interactionLabel">
+        </mat-form-field>
+      }
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="edit">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let interaction">
+      <button mat-icon-button *ngIf="editedElement !== interaction" [disabled]="editedElement !== undefined" (click)="editInteraction(interaction)"><mat-icon>edit</mat-icon></button>
+      <button mat-icon-button *ngIf="editedElement === interaction" (click)="submitInteraction()"><mat-icon>done</mat-icon></button>
+    </td>
+  </ng-container>
+  <ng-container matColumnDef="delete">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let interaction">
+      <button mat-icon-button color="warn" (click)="deleteInteraction(interaction)"><mat-icon>delete</mat-icon></button>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="expand">
+    <th mat-header-cell *matHeaderCellDef aria-label="row actions">
+      <button mat-icon-button (click)="addInteraction()"><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) {
+          <mat-icon>keyboard_arrow_up</mat-icon>
+        } @else {
+          <mat-icon>keyboard_arrow_down</mat-icon>
+        }
+      </button>
+    </td>
+  </ng-container>
+
+  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
+  <ng-container matColumnDef="expandedDetail">
+    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
+      <div class="example-element-detail"
+           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
+        <mat-accordion>
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>Conditions</mat-panel-title>
+            </mat-expansion-panel-header>
+            <mat-tab-group>
+              <mat-tab label="ScriptAccount Conditions">
+                <app-scriptaccount-condition-editor [scriptAccounts]="gameModel!.scriptAccounts" [conditions]="element.scriptAccountConditions" [enableEditiong]="true"
+                                                    (onCreateCondition)="onAddCondition(element, $event)" (onDeleteCondition)="onDeleteCondition(element, $event)"></app-scriptaccount-condition-editor>
+              </mat-tab>
+              <mat-tab label="Inventory Itemgroup Conditions">
+                <app-item-condition-editor [interaction]="element" [gameModel]="gameModel" [group]="true"></app-item-condition-editor>
+              </mat-tab>
+              <mat-tab label="Inventory Item Conditions">
+                <app-item-condition-editor [interaction]="element" [gameModel]="gameModel" [group]="false"></app-item-condition-editor>
+              </mat-tab>
+              <mat-tab label="Gamesystem Conditions">
+                <app-gamesystem-condition-editor [intgeraction]="element" [gamesystems]="gameModel!.gamesystemsAsList"
+                ></app-gamesystem-condition-editor>
+              </mat-tab>
+            </mat-tab-group>
+          </mat-expansion-panel>
+
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>Actions</mat-panel-title>
+            </mat-expansion-panel-header>
+            <mat-tab-group>
+              <mat-tab label="ScriptAccount Actions">
+                <app-scriptaccount-action-editor [scriptAccounts]="gameModel!.scriptAccounts" [actions]="element.scriptAccountActions"
+                                                 (onAddAction)="onAddAction(element, $event)" (onRemoveAction)="onRemoveAction(element, $event)"
+                                                 [enableEditing]="true"
+                ></app-scriptaccount-action-editor>
+              </mat-tab>
+              <mat-tab label="Inventory Itemgroup Actions">
+                <app-item-action-editor [interaction]="element" [gameModel]="gameModel" [group]="true"></app-item-action-editor>
+              </mat-tab>
+              <mat-tab label="Inventory Item Actions">
+                <app-item-action-editor [interaction]="element" [gameModel]="gameModel" [group]="false"></app-item-action-editor>
+              </mat-tab>
+            </mat-tab-group>
+          </mat-expansion-panel>
+        </mat-accordion>
+      </div>
+    </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/interaction-editor/interaction-sequence-editor/interaction-sequence-editor.component.spec.ts

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

src/app/editor/interaction-editor/interaction-sequence-editor/interaction-sequence-editor.component.ts

@@ -0,0 +1,99 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {InteractionSequences} from "../../../project/game-model/interactions/InteractionSequences";
+import {Interaction} from "../../../project/game-model/interactions/Interaction";
+import {MatTableDataSource} from "@angular/material/table";
+import {GameModel} from "../../../project/game-model/GameModel";
+import {Character} from "../../../project/game-model/characters/Character";
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {AbstractInteraction} from "../../../project/game-model/interactions/AbstractInteraction";
+import {ScriptAccountCondition} from "../../../project/game-model/gamesystems/conditions/ScriptAccountCondition";
+import {ScriptAccountAction} from "../../../project/game-model/gamesystems/actions/ScriptAccountAction";
+
+@Component({
+  selector: 'app-interaction-sequence-editor',
+  templateUrl: './interaction-sequence-editor.component.html',
+  styleUrl: './interaction-sequence-editor.component.scss'
+})
+export class InteractionSequenceEditorComponent implements OnInit{
+  @Input() interactionSequence: InteractionSequences | undefined;
+  @Input() gameModel: GameModel | undefined
+  @Input() character: Character | undefined
+  currentInteractionNode: Interaction | undefined;
+
+  sequenceDatasource = new MatTableDataSource<Interaction>()
+  displayedColumns: string[] = ['source', 'target', 'label', 'edit', 'delete']
+  columnsToDisplayWithExpand = [... this.displayedColumns, 'expand'];
+  expandedElement: AbstractInteraction | null = null;
+  editedElement: Interaction | undefined
+
+  constructor(private snackbar: MatSnackBar) {
+  }
+  ngOnInit() {
+    if(this.interactionSequence != undefined) {
+      this.assignData();
+    }
+  }
+
+  private assignData() {
+    if(this.currentInteractionNode != undefined) {
+      this.sequenceDatasource.data = this.interactionSequence!.findInteraction(this.currentInteractionNode)!.children.map(node => node.root);
+    } else {
+      this.sequenceDatasource.data = [this.interactionSequence!.rootInteraction.root];
+    }
+  }
+
+  editInteraction(interaction: Interaction) {
+    this.editedElement = interaction;
+  }
+
+  submitInteraction() {
+    if(this.editedElement == undefined) {
+      return;
+    }
+
+    if(this.editedElement!.validate(this.character!)) {
+      this.gameModel!.addCharacterInteraction(this.editedElement);
+      this.editedElement = undefined;
+    } else {
+      this.snackbar.open("Invalid Interaction", "", {duration: 2000});
+    }
+  }
+
+  deleteInteraction(interaction: Interaction) {
+    if(this.currentInteractionNode != undefined) {
+      const node = this.interactionSequence?.findInteraction(this.currentInteractionNode);
+      if(node != undefined) {
+        node.removeChildInteraction(interaction);
+        this.assignData();
+      }
+    }
+  }
+
+  addInteraction() {
+    const interaction = new Interaction(this.character!, undefined, "")
+    this.editedElement = interaction;
+
+    const interactions = this.sequenceDatasource.data;
+    interactions.push(interaction);
+    this.sequenceDatasource.data = interactions;
+  }
+
+  onAddCondition(interaction: AbstractInteraction, condition: ScriptAccountCondition) {
+    interaction!.addConditon(condition);
+  }
+
+  onDeleteCondition(interaction: AbstractInteraction, condition: ScriptAccountCondition) {
+    interaction!.removeCondition(condition);
+  }
+
+  onAddAction(interaction: AbstractInteraction, action: ScriptAccountAction) {
+    if(interaction instanceof Interaction) {
+      interaction.addAction(action);
+    }
+  }
+  onRemoveAction(interaction: AbstractInteraction, action: ScriptAccountAction) {
+    if(interaction instanceof Interaction) {
+      interaction.removeAction(action);
+    }
+  }
+}

src/app/project/game-model/interactions/InteractionSequences.ts

@@ -34,6 +34,23 @@ export class InteractionSequences extends AbstractInteraction {
     return validCharacters && validLabel && validSequenceTree;
   }
 
+  findInteraction(currentInteraction: Interaction) {
+    if(this.rootInteraction.root === currentInteraction) {
+      return this.rootInteraction;
+    } else {
+      let interactionQueue: InteractionSequenceNode[] = this.rootInteraction.children.concat();
+      while(interactionQueue.length > 0) {
+        const currentInteractionNode = interactionQueue.shift()!;
+        if(currentInteractionNode.root == currentInteraction) {
+          return currentInteractionNode;
+        }
+        interactionQueue = interactionQueue.concat(currentInteractionNode.children);
+      }
+
+      return undefined;
+    }
+  }
+
 
 }
 
@@ -68,4 +85,8 @@ class InteractionSequenceNode {
     this.root = root;
     this.children = children;
   }
+
+  removeChildInteraction(interaction: Interaction) {
+    this.children = this.children.filter(child => child.root !== interaction);
+  }
 }