Implement basic version of characters #32

Merged
sebastian merged 8 commits from characters-2 into main 2024-04-13 11:59:09 +02:00
11 changed files with 152 additions and 60 deletions
Showing only changes of commit 13ea574fa3 - Show all commits

View File

@ -3,7 +3,9 @@
<button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.SCRIPTACCOUNT ? 'selected':''" <button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.SCRIPTACCOUNT ? 'selected':''"
(click)="openScriptAccountsOverview()"><mat-icon>inventory_2</mat-icon></button> (click)="openScriptAccountsOverview()"><mat-icon>inventory_2</mat-icon></button>
<button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.GAMESYTEM ? 'selected':''" <button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.GAMESYTEM ? 'selected':''"
(click)="openGamesystemsOverview()"><mat-icon>manufacturing</mat-icon></button> (click)="openGamesystemsOverview()"><mat-icon>code</mat-icon></button>
<button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.CHARACTER ? 'selected':''"
(click)="openCharactersOverview()"><mat-icon>person</mat-icon></button>
</div> </div>
@ -20,10 +22,12 @@
<mat-menu #contentMenu="matMenu"> <mat-menu #contentMenu="matMenu">
<button mat-menu-item (click)="openScriptAccountsOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.SCRIPTACCOUNT)}}</button> <button mat-menu-item (click)="openScriptAccountsOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.SCRIPTACCOUNT)}}</button>
<button mat-menu-item (click)="openGamesystemsOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.GAMESYTEM)}}</button> <button mat-menu-item (click)="openGamesystemsOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.GAMESYTEM)}}</button>
<button mat-menu-item (click)="openCharactersOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.CHARACTER)}}</button>
</mat-menu> </mat-menu>
</div> </div>
<app-script-account-overview *ngIf="openContent == ModelComponentType.SCRIPTACCOUNT" #scriptAccountOverview [gameModel]="gameModel" (onOpenScriptAccount)="openModelComponent($event)"></app-script-account-overview> <app-script-account-overview *ngIf="openContent == ModelComponentType.SCRIPTACCOUNT" #scriptAccountOverview [gameModel]="gameModel" (onOpenScriptAccount)="openModelComponent($event)"></app-script-account-overview>
<app-gamescript-overview *ngIf="openContent == ModelComponentType.GAMESYTEM" #gamesystemOverview [gameModel]="gameModel" (openGamesystemEditor)="openModelComponent($event)"></app-gamescript-overview> <app-gamescript-overview *ngIf="openContent == ModelComponentType.GAMESYTEM" #gamesystemOverview [gameModel]="gameModel" (openGamesystemEditor)="openModelComponent($event)"></app-gamescript-overview>
<app-character-overview *ngIf="openContent == ModelComponentType.CHARACTER" #characterOverview [gameModel]="gameModel"></app-character-overview>
</mat-drawer> </mat-drawer>
<div class="example-sidenav-content"> <div class="example-sidenav-content">

View File

@ -206,6 +206,11 @@ export class AppComponent implements OnInit{
this.drawer!.open(); this.drawer!.open();
} }
openCharactersOverview() {
this.openContent = ModelComponentType.CHARACTER
this.drawer!.open()
}
protected readonly ModelComponentType = ModelComponentType; protected readonly ModelComponentType = ModelComponentType;
closeContentOverview() { closeContentOverview() {

View File

@ -68,6 +68,7 @@ import {
import { import {
ScriptaccountConditionEditorComponent ScriptaccountConditionEditorComponent
} from "./editor/gamesystem-editor/scriptaccount-condition-editor/scriptaccount-condition-editor.component"; } from "./editor/gamesystem-editor/scriptaccount-condition-editor/scriptaccount-condition-editor.component";
import {CharacterOverviewComponent} from "./side-overviews/character-overview/character-overview.component";
// AoT requires an exported function for factories // AoT requires an exported function for factories
const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new TranslateHttpLoader(http, './assets/i18n/', '.json'); const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new TranslateHttpLoader(http, './assets/i18n/', '.json');
@ -146,7 +147,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl
MatHint, MatHint,
MatTooltip, MatTooltip,
MatCard, MatCard,
MatCardContent MatCardContent,
CharacterOverviewComponent
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

View File

@ -4,16 +4,20 @@ import {Transition} from "./gamesystems/transitions/Transition";
import {State} from "./gamesystems/states/State"; import {State} from "./gamesystems/states/State";
import {ProductGamesystem} from "./gamesystems/ProductGamesystem"; import {ProductGamesystem} from "./gamesystems/ProductGamesystem";
import {SimpleGamesystem} from "./gamesystems/SimpleGamesystem"; import {SimpleGamesystem} from "./gamesystems/SimpleGamesystem";
import {StorageModel} from "./fs/StorageModel"; import {Character} from "./characters/Character";
import {ModelComponentType} from "./ModelComponentType";
export class GameModel { export class GameModel {
gameModelName: string gameModelName: string
gamesystems: Gamesystem<any, any>[] = []; gamesystems: Gamesystem<any, any>[] = [];
scriptAccounts: ScriptAccount[] = []; scriptAccounts: ScriptAccount[] = [];
characters: Character[] = []
constructor(gameModelName: string) { constructor(gameModelName: string) {
this.gameModelName = gameModelName; this.gameModelName = gameModelName;
this.characters.push(new Character("Astrid Hofferson", "", ModelComponentType.CHARACTER))
this.characters.push(new Character("Hicks Haddock", "", ModelComponentType.CHARACTER))
} }
addGamesystem(gamesystem: Gamesystem<any, any>) { addGamesystem(gamesystem: Gamesystem<any, any>) {

View File

@ -1,5 +1,6 @@
export enum ModelComponentType { export enum ModelComponentType {
SCRIPTACCOUNT, SCRIPTACCOUNT,
GAMESYTEM GAMESYTEM,
CHARACTER
} }

View File

@ -5,6 +5,7 @@ export class ModelComponentTypeUtillities {
switch (modelComponentType) { switch (modelComponentType) {
case ModelComponentType.SCRIPTACCOUNT: return "ScriptAccounts"; case ModelComponentType.SCRIPTACCOUNT: return "ScriptAccounts";
case ModelComponentType.GAMESYTEM: return "Gamesystems"; case ModelComponentType.GAMESYTEM: return "Gamesystems";
case ModelComponentType.CHARACTER: return "Characters"
default: return "Undefined"; default: return "Undefined";
} }
} }
@ -13,6 +14,7 @@ export class ModelComponentTypeUtillities {
switch (modelComponentType) { switch (modelComponentType) {
case ModelComponentType.SCRIPTACCOUNT: return "ScriptAccount"; case ModelComponentType.SCRIPTACCOUNT: return "ScriptAccount";
case ModelComponentType.GAMESYTEM: return "Gamesystem"; case ModelComponentType.GAMESYTEM: return "Gamesystem";
case ModelComponentType.CHARACTER: return "Character"
default: return "Undefined"; default: return "Undefined";
} }
} }
@ -21,6 +23,7 @@ export class ModelComponentTypeUtillities {
switch (string) { switch (string) {
case "gamesystem": return ModelComponentType.GAMESYTEM; case "gamesystem": return ModelComponentType.GAMESYTEM;
case "scriptaccount": return ModelComponentType.SCRIPTACCOUNT; case "scriptaccount": return ModelComponentType.SCRIPTACCOUNT;
case "character": return ModelComponentType.CHARACTER
} }
} }
} }

View File

@ -0,0 +1,9 @@
import {ModelComponent} from "../ModelComponent";
import {ModelComponentType} from "../ModelComponentType";
export class Character extends ModelComponent{
constructor(componentName: string, componentDescription: string, type: ModelComponentType) {
super(componentName, componentDescription, type);
}
}

View File

@ -0,0 +1,5 @@
<mat-action-list>
<mat-list-item class="scriptAccount-item" *ngFor="let character of gameModel!.characters">
<mat-icon class="scriptAccount-icon">person</mat-icon>{{character.componentName}}
</mat-list-item>
</mat-action-list>

View File

@ -0,0 +1,14 @@
.scriptAccount-item {
min-height: 1.8em !important;
height: 1.8em !important;
}
.scriptAccount-icon {
margin-right: 10px;
color: #ccffff;
align-content: baseline;
}
.selected-item {
background-color: #8696b6;
}

View File

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

View File

@ -0,0 +1,22 @@
import {Component, Input} from '@angular/core';
import {GameModel} from "../../project/game-model/GameModel";
import {MatActionList, MatListItem} from "@angular/material/list";
import {MatIcon} from "@angular/material/icon";
import {NgForOf} from "@angular/common";
@Component({
selector: 'app-character-overview',
standalone: true,
imports: [
MatActionList,
MatIcon,
MatListItem,
NgForOf
],
templateUrl: './character-overview.component.html',
styleUrl: './character-overview.component.scss'
})
export class CharacterOverviewComponent {
@Input() gameModel: GameModel | undefined
}