Convert Interaction into Sequence

src/app/app.module.ts

@@ -230,8 +230,7 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatExpansionPanelDescription,
     MatAutocomplete,
     MatAutocompleteTrigger,
-    MatNoDataRow,
-    InteractionSequenceEditorComponent
+    MatNoDataRow
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -145,6 +145,8 @@
             <app-interaction-sequence-editor [interactionSequence]="element" [gameModel]="gameModel" [character]="character"></app-interaction-sequence-editor>
           </mat-expansion-panel>
         </mat-accordion>
+
+        <button mat-raised-button color="accent" *ngIf="!isInteractionSequence(element)" (click)="convertToSequence(element)">Convert to Sequence</button>
       </div>
     </td>
   </ng-container>

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

@@ -104,4 +104,11 @@ export class CharacterInteractionEditorComponent implements OnInit{
       interaction.removeAction(action);
     }
   }
+
+  convertToSequence(interaction: Interaction) {
+    const interactionSequence = new InteractionSequences(interaction, interaction.interactionLabel);
+    this.gameModel!.removeCharacterInteraction(interaction);
+    this.gameModel!.addCharacterInteraction(interactionSequence);
+    this.interactionDatasource.data = this.gameModel!.characterInteractions;
+  }
 }

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

@@ -0,0 +1,55 @@
+table {
+  width: 100%;
+}
+
+tr.example-detail-row {
+  height: 0;
+}
+
+tr.example-element-row:not(.example-expanded-row):hover {
+  background: #4e5157;
+}
+
+tr.example-element-row:not(.example-expanded-row):active {
+  background: #545456;
+}
+
+.example-element-row td {
+  border-bottom-width: 0;
+}
+
+.example-element-detail {
+  overflow: hidden;
+  width: 100%;
+}
+
+.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-delete, .mat-column-edit, .mat-column-expand, .mat-column-sequence {
+  width: 32px;
+}
+
+.warning {
+  color: red;
+}

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

@@ -8,11 +8,19 @@ 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";
+import {animate, state, style, transition, trigger} from "@angular/animations";
 
 @Component({
   selector: 'app-interaction-sequence-editor',
   templateUrl: './interaction-sequence-editor.component.html',
-  styleUrl: './interaction-sequence-editor.component.scss'
+  styleUrl: './interaction-sequence-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 InteractionSequenceEditorComponent implements OnInit{
   @Input() interactionSequence: InteractionSequences | undefined;
@@ -35,10 +43,9 @@ export class InteractionSequenceEditorComponent implements OnInit{
   }
 
   private assignData() {
+    this.currentInteractionNode = this.interactionSequence!.rootInteraction.root;
     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];
     }
   }
 
@@ -52,7 +59,10 @@ export class InteractionSequenceEditorComponent implements OnInit{
     }
 
     if(this.editedElement!.validate(this.character!)) {
-      this.gameModel!.addCharacterInteraction(this.editedElement);
+      const node = this.interactionSequence!.findInteraction(this.currentInteractionNode!);
+      if(node != undefined) {
+        node.addInteraction(this.editedElement!);
+      }
       this.editedElement = undefined;
     } else {
       this.snackbar.open("Invalid Interaction", "", {duration: 2000});

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

@@ -15,7 +15,7 @@ export abstract class AbstractInteraction {
   interactionLabel: string
 
 
-  constructor(sourceCharacter: Character, targetCharacter: Character | undefined, interactionLabel: string) {
+  protected constructor(sourceCharacter: Character, targetCharacter: Character | undefined, interactionLabel: string, conditions: Condition[] = []) {
     this.sourceCharacter = sourceCharacter;
     this.targetCharacter = targetCharacter;
     this.interactionLabel = interactionLabel;

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

@@ -8,7 +8,7 @@ export class InteractionSequences extends AbstractInteraction {
 
 
   constructor(interaction: Interaction, interactionLabel: string) {
-    super(interaction.sourceCharacter, interaction.targetCharacter, interactionLabel);
+    super(interaction.sourceCharacter, interaction.targetCharacter, interactionLabel, interaction.conditions);
     this.rootInteraction = new InteractionSequenceNode(interaction, []);
   }
 
@@ -89,4 +89,8 @@ class InteractionSequenceNode {
   removeChildInteraction(interaction: Interaction) {
     this.children = this.children.filter(child => child.root !== interaction);
   }
+
+  addInteraction(interaction: Interaction) {
+    this.children.push(new InteractionSequenceNode(interaction, []));
+  }
 }