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

issue-5-gamesystems #6

Merged
sebastian merged 24 commits from issue-5-gamesystems into main 2024-02-10 12:30:37 +00:00
Conversation 0 Commits 24 Files Changed 45 +181 -3
8 changed files with 181 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7a8c939d6a - Show all commits

6
src/app/app.component.ts
View File

@ -147,8 +147,10 @@ export class AppComponent implements OnInit{
const weather = new SimpleGamesystem("Weather");
const season = new SimpleGamesystem("Season");
season.createState("Spring", "Spring, also known as springtime, is one of the four temperate seasons, succeeding winter and preceding summer.");
season.createState("Summer", "Summer is the hottest and brightest of the four temperate seasons, occurring after spring and before autumn. ");
const springState = season.createState("Spring", "Spring, also known as springtime, is one of the four temperate seasons, succeeding winter and preceding summer.");
const summerState = season.createState("Summer", "Summer is the hottest and brightest of the four temperate seasons, occurring after spring and before autumn. ");
season.createTransition(springState!, summerState!);
this.gameModel.addGamesystem(weather)
this.gameModel.addGamesystem(season);

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

@ -47,6 +47,9 @@ import {
MatTable
} from "@angular/material/table";
import {MatCheckbox} from "@angular/material/checkbox";
import {
SimpleTransitionEditorComponent
} from "./editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component";
// AoT requires an exported function for factories
const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new TranslateHttpLoader(http, './assets/i18n/', '.json');
@ -62,7 +65,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl
GamescriptOverviewComponent,
GamesystemEditorComponent,
SimpleGamesystemEditorComponent,
SimpleStateEditorComponent
SimpleStateEditorComponent,
SimpleTransitionEditorComponent
],
imports: [
BrowserModule,

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

@ -1 +1,2 @@
<app-simple-state-editor [states]="simpleGamesystem!.states" [gamesystem]="simpleGamesystem"></app-simple-state-editor>
<app-simple-transition-editor class="transition-editor" [gamesystem]="simpleGamesystem"></app-simple-transition-editor>

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

@ -0,0 +1,3 @@
.transition-editor {
margin-top: 15px;
}

56
src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.html Normal file
View File

@ -0,0 +1,56 @@
<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>
</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>
</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'">
<p>Expanded Detail</p>
</div>
</td>
</ng-container>
<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>
</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"><mat-icon>delete</mat-icon></button>
</td>
</ng-container>
<ng-container matColumnDef="expand">
<th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</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>

51
src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.scss Normal file
View File

@ -0,0 +1,51 @@
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;
}

23
src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.spec.ts Normal file
View File

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

38
src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.ts Normal file
View File

@ -0,0 +1,38 @@
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/SimpleTransition";
import {animate, state, style, transition, trigger} from "@angular/animations";
@Component({
selector: 'app-simple-transition-editor',
templateUrl: './simple-transition-editor.component.html',
styleUrl: './simple-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 SimpleTransitionEditorComponent implements OnInit {
@Input() gamesystem: SimpleGamesystem | undefined
displayedColumns: string[] = ["starting-state", "ending-state", "edit", "delete"];
dataSource = new MatTableDataSource<SimpleTransition>();
columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
expandedElement: SimpleTransition | null = null;
ngOnInit() {
this.dataSource.data = this.gamesystem!.transitions;
}
}