Pick transitions to be character specific
All checks were successful
E2E Testing / test (push) Successful in 1m40s

This commit is contained in:
Sebastian Böckelmann 2024-03-22 19:44:13 +01:00
parent a40a5ddc23
commit 221895520f
6 changed files with 248 additions and 8 deletions

View File

@ -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 class="reference-editor">
<app-simple-transition-editor [gamesystem]="templateGamesystem!.referenceGamesystem"></app-simple-transition-editor>
</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 [referenceEditor]="true" [gamesystem]="templateGamesystem!.referenceGamesystem" (referenceTransitionEmitter)="extractReferencedTransition($event)"></app-simple-transition-editor>
</div>
</div>

View File

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

View File

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

View File

@ -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()">

View File

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

View File

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