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

Edit SimpleTransitions
All checks were successful
E2E Testing / test (push) Successful in 1m28s
Details

Browse Source
This commit is contained in:
Sebastian Böckelmann 2024-02-10 12:51:07 +01:00
parent 7a8c939d6a
commit b730cc1d00
4 changed files with 88 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatIcon} from "@angular/material/icon";
import {MatToolbar} from "@angular/material/toolbar";
import {MatButton, MatIconButton, MatMiniFabButton} from "@angular/material/button";
import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
import {MatError, MatFormField, MatHint, MatLabel} from "@angular/material/form-field";
import {MatInput} from "@angular/material/input";
import {MatDrawer, MatDrawerContainer} from "@angular/material/sidenav";
import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
@ -50,6 +50,7 @@ import {MatCheckbox} from "@angular/material/checkbox";
import {
SimpleTransitionEditorComponent
} from "./editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component";
import {MatOption, MatSelect} from "@angular/material/select";
// AoT requires an exported function for factories
const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new TranslateHttpLoader(http, './assets/i18n/', '.json');
@ -117,7 +118,10 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl
MatRow,
MatHeaderRowDef,
MatRowDef,
MatCheckbox
MatCheckbox,
MatSelect,
MatOption,
MatHint
],
providers: [],
bootstrap: [AppComponent]

33
src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.html
View File

@ -1,12 +1,32 @@
<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">{{transition.startingState.stateLabel}}</td>
<td mat-cell *matCellDef="let transition">
<span *ngIf="editedTransition !== transition">{{transition.startingState.stateLabel}}</span>
<mat-form-field appearance="fill" class="long-form" *ngIf="editedTransition == transition">
<mat-select [(ngModel)]="editedTransition!.startingState" (ngModelChange)="validateEditedTransition()">
<mat-option *ngFor="let state of gamesystem!.states" [value]="state"
(onSelectionChange)="validateEditedTransition()">{{state.stateLabel}}</mat-option>
</mat-select>
<mat-hint class="mat-error" *ngIf="transitionError"><mat-icon class="warning-icon">warning</mat-icon> Starting and Ending State cannot be the same!</mat-hint>
<mat-hint class="mat-error" *ngIf="!transitionError && transitionStartingStateError"><mat-icon class="warning-icon">warning</mat-icon> Select a valid Starting State!</mat-hint>
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="ending-state">
<th mat-header-cell *matHeaderCellDef>Ending State</th>
<td mat-cell *matCellDef="let transition">{{transition.endingState.stateLabel}}</td>
<td mat-cell *matCellDef="let transition">
<span *ngIf="editedTransition !== transition">{{transition.endingState.stateLabel}}</span>
<mat-form-field appearance="fill" class="long-form" *ngIf="editedTransition == transition">
<mat-select [(ngModel)]="editedTransition!.endingState" (ngModelChange)="validateEditedTransition()">
<mat-option *ngFor="let state of gamesystem!.states" [value]="state"
(onSelectionChange)="validateEditedTransition()">{{state.stateLabel}}</mat-option>
</mat-select>
<mat-hint class="mat-error" *ngIf="transitionError"><mat-icon class="warning-icon">warning</mat-icon> Starting and Ending State cannot be the same!</mat-hint>
<mat-hint class="mat-error" *ngIf="!transitionError && transitionEndingStateError"> <mat-icon class="warning-icon">warning</mat-icon> Select a valid Ending State!</mat-hint>
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="expandedDetail">
@ -21,7 +41,10 @@
<ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let transition">
<button mat-icon-button color="primary"><mat-icon>edit</mat-icon></button>
<button mat-icon-button color="primary" *ngIf="editedTransition !== transition" [disabled]="editedTransition != undefined"><mat-icon>edit</mat-icon></button>
<button mat-icon-button color="primary" *ngIf="editedTransition === transition"
[disabled]="transitionError || transitionStartingStateError || transitionEndingStateError" (click)="finishEditing()"
><mat-icon>done</mat-icon></button>
</td>
</ng-container>
@ -33,7 +56,9 @@
</ng-container>
<ng-container matColumnDef="expand">
<th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
<th mat-header-cell *matHeaderCellDef aria-label="row actions">
<button mat-icon-button (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()">
@if (expandedElement === element) {

12
src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.scss
View File

@ -49,3 +49,15 @@ tr.example-element-row:not(.example-expanded-row):active {
.example-element-description-attribution {
opacity: 0.5;
}
.long-form {
width: 100%;
}
.warning-icon {
margin-right: 5px;
}
.mat-error {
color: red;
}

41
src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.ts
View File

@ -12,6 +12,7 @@ import {
} from "@angular/material/table";
import {SimpleTransition} from "../../../../game-model/gamesystems/SimpleTransition";
import {animate, state, style, transition, trigger} from "@angular/animations";
import {SimpleState} from "../../../../game-model/gamesystems/SimpleState";
@Component({
selector: 'app-simple-transition-editor',
@ -32,7 +33,47 @@ export class SimpleTransitionEditorComponent implements OnInit {
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;
ngOnInit() {
this.dataSource.data = this.gamesystem!.transitions;
}
addTransition() {
this.editedTransition = new SimpleTransition(this.defaultStartingState, this.defaultEndingState);
const updatedData = this.dataSource.data;
updatedData.push(this.editedTransition);
this.dataSource.data = updatedData;
this.editedTransitionIndex = this.dataSource.data.length;
}
validateEditedTransition() {
this.transitionError = false;
this.transitionStartingStateError = false;
this.transitionEndingStateError = false;
if(this.editedTransition!.startingState === this.editedTransition!.endingState) {
this.transitionError = true;
} else if(this.editedTransition!.startingState == this.defaultStartingState) {
this.transitionStartingStateError = true;
} else if(this.editedTransition!.endingState == this.defaultEndingState) {
this.transitionEndingStateError = true;
}
}
finishEditing() {
this.validateEditedTransition();
if(this.transitionError || this.transitionStartingStateError || this.transitionEndingStateError) {
return;
}
this.gamesystem?.createTransition(this.editedTransition!.startingState, this.editedTransition!.endingState);
this.dataSource.data = this.gamesystem!.transitions;
this.editedTransition = undefined;
}
}