sebastian/ConceptCreator
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

Add Implementation of Sequence Editor
Some checks failed
E2E Testing / test (push) Failing after 53s
Details

Browse Source
This commit is contained in:
sebastian 2024-06-17 21:57:35 +02:00
parent 6bbba380bb
commit 685270bd4f
7 changed files with 293 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/app.module.ts
View File

@ -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]

4
src/app/editor/character-editor/character-interaction-editor/character-interaction-editor.component.html
View File

@ -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>

141
src/app/editor/interaction-editor/interaction-sequence-editor/interaction-sequence-editor.component.html Normal file
View File

@ -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>

0
src/app/editor/interaction-editor/interaction-sequence-editor/interaction-sequence-editor.component.scss Normal file
View File

23
src/app/editor/interaction-editor/interaction-sequence-editor/interaction-sequence-editor.component.spec.ts Normal file
View File

@ -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();
});
});

99
src/app/editor/interaction-editor/interaction-sequence-editor/interaction-sequence-editor.component.ts Normal file
View File

@ -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);
}
}
}

21
src/app/project/game-model/interactions/InteractionSequences.ts
View File

@ -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);
}
}