Visualize and Edit Actions for Transitions

src/app/app.component.html

@@ -27,7 +27,7 @@
     </mat-drawer>
 
     <div class="example-sidenav-content">
-      <app-editor #editor (onModelNameUpdate)="onModelNameUpdate()"></app-editor>
+      <app-editor #editor (onModelNameUpdate)="onModelNameUpdate()" [gameModel]="gameModel"></app-editor>
     </div>
 
   </mat-drawer-container>

src/app/app.module.ts

@@ -62,6 +62,9 @@ import {
 } from "./editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component";
 import {MatTooltip} from "@angular/material/tooltip";
 import {MatCard, MatCardContent} from "@angular/material/card";
+import {
+    ScriptaccountActionEditorComponent
+} from "./editor/gamesystem-editor/transition-editor/scriptaccount-action-editor/scriptaccount-action-editor.component";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -81,65 +84,66 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     SimpleTransitionEditorComponent,
     ProductTransitionEditorComponent,
     ProductStateEditorComponent,
-    ProductGamesystemEditorComponent
+    ProductGamesystemEditorComponent,
-  ],
+    ScriptaccountActionEditorComponent
-  imports: [
-    BrowserModule,
-    FormsModule,
-    HttpClientModule,
-    CoreModule,
-    SharedModule,
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: httpLoaderFactory,
-        deps: [HttpClient]
-      }
-    }),
-    BrowserAnimationsModule,
-    MatIcon,
-    MatToolbar,
-    MatButton,
-    MatFormField,
-    MatInput,
-    MatDrawerContainer,
-    MatDrawer,
-    MatIconButton,
-    MatMenuTrigger,
-    MatMenu,
-    MatMenuItem,
-    MatListItem,
-    MatActionList,
-    MatTabGroup,
-    MatTab,
-    MatTabLabel,
-    MatLabel,
-    MatFormField,
-    ReactiveFormsModule,
-    MatError,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatMiniFabButton,
-    MatTreeModule,
-    MatTable,
-    MatColumnDef,
-    MatHeaderCell,
-    MatHeaderCellDef,
-    MatCellDef,
-    MatCell,
-    MatHeaderRow,
-    MatRow,
-    MatHeaderRowDef,
-    MatRowDef,
-    MatCheckbox,
-    MatSelect,
-    MatOption,
-    MatHint,
-    MatTooltip,
-    MatCard,
-    MatCardContent
   ],
+    imports: [
+        BrowserModule,
+        FormsModule,
+        HttpClientModule,
+        CoreModule,
+        SharedModule,
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: httpLoaderFactory,
+                deps: [HttpClient]
+            }
+        }),
+        BrowserAnimationsModule,
+        MatIcon,
+        MatToolbar,
+        MatButton,
+        MatFormField,
+        MatInput,
+        MatDrawerContainer,
+        MatDrawer,
+        MatIconButton,
+        MatMenuTrigger,
+        MatMenu,
+        MatMenuItem,
+        MatListItem,
+        MatActionList,
+        MatTabGroup,
+        MatTab,
+        MatTabLabel,
+        MatLabel,
+        MatFormField,
+        ReactiveFormsModule,
+        MatError,
+        MatDialogTitle,
+        MatDialogContent,
+        MatDialogActions,
+        MatMiniFabButton,
+        MatTreeModule,
+        MatTable,
+        MatColumnDef,
+        MatHeaderCell,
+        MatHeaderCellDef,
+        MatCellDef,
+        MatCell,
+        MatHeaderRow,
+        MatRow,
+        MatHeaderRowDef,
+        MatRowDef,
+        MatCheckbox,
+        MatSelect,
+        MatOption,
+        MatHint,
+        MatTooltip,
+        MatCard,
+        MatCardContent
+    ],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/editor/editor.component.html

@@ -12,7 +12,8 @@
                                [scriptAccount]="convertModelComponentToScriptAccount(modelComponent)"></app-script-account-editor>
     <app-gamesystem-editor *ngIf="modelComponent.type === ModelComponentType.GAMESYTEM"
                                 [gamesystem]="convertModelComponentToGamesystem(modelComponent)"
-                                (onOpenGamesystemEditor)="openGameModelComponent($event)"></app-gamesystem-editor>
+                                (onOpenGamesystemEditor)="openGameModelComponent($event)"
+                                [scriptAccounts]="gameModel!.scriptAccounts"></app-gamesystem-editor>
 
   </mat-tab>
 </mat-tab-group>

src/app/editor/editor.component.ts

@@ -16,6 +16,7 @@ export class EditorComponent {
   gameModelComponents: ModelComponent[] = [];
   @Output("onModelNameUpdate") onModelNameUpdateEmitter = new EventEmitter<boolean>();
   activeTab: number = this.gameModelComponents.length;
+  @Input() gameModel: GameModel | undefined
 
   openGameModelComponent(gameModelComponent: ModelComponent) {
     if(!this.gameModelComponents.includes(gameModelComponent)) {

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

@@ -1,3 +1,3 @@
-<app-simple-gamesystem-editor *ngIf="isSimpleGamesystem()" [simpleGamesystem]="convertGamesystemToSimpleGamesystem()"></app-simple-gamesystem-editor>
+<app-simple-gamesystem-editor *ngIf="isSimpleGamesystem()" [simpleGamesystem]="convertGamesystemToSimpleGamesystem()" [scriptAccunts]="scriptAccounts"></app-simple-gamesystem-editor>
 <app-product-gamesystem-editor *ngIf="!isSimpleGamesystem()" [gamesystem]="convertGamesystemToProductGamesystem()"
                                (onOpenGamesystemEditor)="onOpenGamesystemEditor($event)"></app-product-gamesystem-editor>

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

@@ -1,21 +1,27 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {GameModel} from "../../game-model/GameModel";
 import {Gamesystem} from "../../game-model/gamesystems/Gamesystem";
 import {State} from "../../game-model/gamesystems/states/State";
 import {Transition} from "../../game-model/gamesystems/transitions/Transition";
 import {SimpleGamesystem} from "../../game-model/gamesystems/SimpleGamesystem";
 import {ProductGamesystem} from "../../game-model/gamesystems/ProductGamesystem";
+import {ScriptAccount} from "../../game-model/scriptAccounts/ScriptAccount";
 
 @Component({
   selector: 'app-gamesystem-editor',
   templateUrl: './gamesystem-editor.component.html',
   styleUrl: './gamesystem-editor.component.scss'
 })
-export class GamesystemEditorComponent {
+export class GamesystemEditorComponent implements OnInit{
 
   @Input() gamesystem: Gamesystem<State<any>, Transition<any>> | undefined
+  @Input() scriptAccounts: ScriptAccount[] = [];
   @Output('onOpenGamesystemEditor') openGamesystemEmitter = new EventEmitter<SimpleGamesystem>();
 
+  ngOnInit() {
+    console.log("GamesystemEditor: ", this.scriptAccounts.length)
+  }
+
   isSimpleGamesystem() {
     return this.gamesystem instanceof SimpleGamesystem;
   }

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

@@ -1,4 +1,4 @@
-<app-simple-state-editor [states]="simpleGamesystem!.states" [gamesystem]="simpleGamesystem"></app-simple-state-editor>
+<app-simple-state-editor [states]="simpleGamesystem!.states" [gamesystem]="simpleGamesystem" ></app-simple-state-editor>
 <div id="transition-editor">
-  <app-simple-transition-editor [gamesystem]="simpleGamesystem"></app-simple-transition-editor>
+  <app-simple-transition-editor [gamesystem]="simpleGamesystem" [scriptAccounts]="scriptAccunts"></app-simple-transition-editor>
 </div>

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

@@ -1,6 +1,7 @@
 import {Component, Input} from '@angular/core';
 import {SimpleGamesystem} from "../../../game-model/gamesystems/SimpleGamesystem";
 import {MatTableDataSource} from "@angular/material/table";
+import {ScriptAccount} from "../../../game-model/scriptAccounts/ScriptAccount";
 
 @Component({
   selector: 'app-simple-gamesystem-editor',
@@ -10,7 +11,7 @@ import {MatTableDataSource} from "@angular/material/table";
 export class SimpleGamesystemEditorComponent {
 
   @Input() simpleGamesystem: SimpleGamesystem | undefined
-
+  @Input() scriptAccunts: ScriptAccount[] = []
 
 
 }

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

@@ -64,7 +64,6 @@ export class ProductTransitionEditorComponent implements OnInit{
     }
 
     const leafStates = LeafGamesystemCalculator.calcLeafStates(state);
-    console.log(leafStates)
     return leafStates[index];
   }
 

src/app/editor/gamesystem-editor/transition-editor/scriptaccount-action-editor/scriptaccount-action-editor.component.html

@@ -0,0 +1,45 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+  <ng-container matColumnDef="scriptAccount">
+    <th mat-header-cell *matHeaderCellDef>ScriptAccount</th>
+    <td mat-cell *matCellDef="let action">
+      <span *ngIf="action !== addedAction">{{action.scriptAccount.componentName}}</span>
+      <mat-form-field appearance="fill" class="long-form" *ngIf="action === addedAction">
+        <mat-label>ScriptAccount</mat-label>
+        <mat-select [(ngModel)]="addedAction!.scriptAccount">
+          <mat-option *ngFor="let scriptAccount of scriptAccounts" [value]="scriptAccount">{{scriptAccount.componentName}}</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="valueChange">
+    <th mat-header-cell *matHeaderCellDef>Value</th>
+    <td mat-cell *matCellDef="let action">
+      <span *ngIf="addedAction !== action && editedAction != action">{{action.changingValue}}</span>
+      <mat-form-field appearance="fill" class="long-form" *ngIf="addedAction === action || editedAction === action">
+        <mat-label>Value</mat-label>
+        <input matInput [(ngModel)]="editedAction!.changingValue" type="number">
+      </mat-form-field>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="edit">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let action">
+      <button mat-icon-button color="primary" (click)="editAction(action)" [disabled]="addedAction != undefined || editedAction != undefined" *ngIf="action !== editedAction && action !== addedAction"><mat-icon>edit</mat-icon></button>
+      <button mat-icon-button color="primary" *ngIf="action === editedAction || action === addedAction" (click)="finishEditing()"><mat-icon>done</mat-icon></button>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="delete">
+    <th mat-header-cell *matHeaderCellDef>
+      <button mat-icon-button (click)="createNewAction()"><mat-icon>add</mat-icon></button>
+    </th>
+    <td mat-cell *matCellDef="let action">
+      <button mat-icon-button color="warn" (click)="deleteAction(action)"><mat-icon>delete</mat-icon></button>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>

src/app/editor/gamesystem-editor/transition-editor/scriptaccount-action-editor/scriptaccount-action-editor.component.scss

@@ -0,0 +1,7 @@
+table {
+  width: 100%;
+}
+
+.long-form {
+  width: 100%;
+}

src/app/editor/gamesystem-editor/transition-editor/scriptaccount-action-editor/scriptaccount-action-editor.component.spec.ts

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

src/app/editor/gamesystem-editor/transition-editor/scriptaccount-action-editor/scriptaccount-action-editor.component.ts

@@ -0,0 +1,53 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Transition} from "../../../../game-model/gamesystems/transitions/Transition";
+import {MatTableDataSource} from "@angular/material/table";
+import {ScriptAccountAction} from "../../../../game-model/gamesystems/actions/ScriptAccountAction";
+import {ScriptAccount} from "../../../../game-model/scriptAccounts/ScriptAccount";
+
+@Component({
+  selector: 'app-scriptaccount-action-editor',
+  templateUrl: './scriptaccount-action-editor.component.html',
+  styleUrl: './scriptaccount-action-editor.component.scss'
+})
+export class ScriptaccountActionEditorComponent  implements OnInit{
+  @Input() transition: Transition<any> | undefined
+  @Input() scriptAccounts: ScriptAccount[] = []
+
+  dataSource: MatTableDataSource<ScriptAccountAction> = new MatTableDataSource();
+  displayedColumns: string[] = ['scriptAccount', "valueChange", 'edit', 'delete'];
+
+  editedAction: ScriptAccountAction | undefined
+  addedAction: ScriptAccountAction | undefined
+
+  ngOnInit() {
+    this.dataSource.data = this.transition!.scriptAccountActions.map(action => action);
+    console.log("# ScriptAccounts", this.scriptAccounts.length)
+  }
+
+  editAction(scriptAccountAction: ScriptAccountAction) {
+    this.editedAction = scriptAccountAction;
+  }
+
+  createNewAction() {
+    this.addedAction = new ScriptAccountAction(new ScriptAccount("", ""), 0);
+    this.editedAction = this.addedAction;
+
+    this.dataSource.data = this.dataSource.data.concat(this.addedAction);
+  }
+
+  finishEditing() {
+    if(this.addedAction != undefined && this.addedAction.scriptAccount.componentName !== '') {
+      this.transition?.addScriptAccountAction(this.addedAction)
+      console.log(this.addedAction.scriptAccount)
+      this.dataSource.data = this.transition!.scriptAccountActions;
+      console.log(this.dataSource.data.length, this.transition!.scriptAccountActions.length)
+      this.addedAction = undefined;
+    }
+    this.editedAction = undefined;
+  }
+
+  deleteAction(action: ScriptAccountAction) {
+    this.transition!.removeScriptAccountAction(action.scriptAccount)
+    this.dataSource.data = this.transition!.scriptAccountActions
+  }
+}

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

@@ -40,7 +40,7 @@
         <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
           <div class="example-element-detail"
                [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
-            <p>Expanded Detail</p>
+            <app-scriptaccount-action-editor [transition]="element" [scriptAccounts]="scriptAccounts"></app-scriptaccount-action-editor>
           </div>
         </td>
       </ng-container>

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

@@ -1,21 +1,12 @@
 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/transitions/SimpleTransition";
 import {animate, state, style, transition, trigger} from "@angular/animations";
 import {SimpleState} from "../../../../game-model/gamesystems/states/SimpleState";
-import {ProductTransition} from "../../../../game-model/gamesystems/transitions/ProductTransition";
+import {ScriptAccount} from "../../../../game-model/scriptAccounts/ScriptAccount";
-import {LeafGamesystemCalculator} from "../../product-gamesystem-editor/LeafGamesystemCalculator";
-
 @Component({
   selector: 'app-simple-transition-editor',
   templateUrl: './simple-transition-editor.component.html',
@@ -31,6 +22,7 @@ import {LeafGamesystemCalculator} from "../../product-gamesystem-editor/LeafGame
 export class SimpleTransitionEditorComponent implements OnInit {
 
   @Input() gamesystem: SimpleGamesystem | undefined
+  @Input() scriptAccounts: ScriptAccount[] = []
   displayedColumns: string[] = ["starting-state", "ending-state", "edit", "delete"];
   dataSource = new MatTableDataSource<SimpleTransition>();
   columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
@@ -49,6 +41,7 @@ export class SimpleTransitionEditorComponent implements OnInit {
     this.dataSource.filterPredicate = (data: SimpleTransition, filter: string) => {
       return [data.startingState, data.endingState].some((state) => state.stateLabel.toLowerCase().includes(filter))
     }
+    console.log("TransitionEditor: ", this.scriptAccounts.length)
   }
 
   addTransition() {