Introduce Items and Basic ItemOverview
All checks were successful
E2E Testing / test (push) Successful in 1m35s

This commit is contained in:
Sebastian Böckelmann 2024-04-20 07:30:41 +02:00
parent c74906687d
commit c4e613d78c
14 changed files with 146 additions and 8 deletions

View File

@ -1,11 +1,13 @@
<div class="container"> <div class="container">
<div class="full-height-container" > <div class="full-height-container" >
<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>analytics</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>code</mat-icon></button> (click)="openGamesystemsOverview()"><mat-icon>code</mat-icon></button>
<button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.CHARACTER ? 'selected':''" <button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.CHARACTER ? 'selected':''"
(click)="openCharactersOverview()"><mat-icon>person</mat-icon></button> (click)="openCharactersOverview()"><mat-icon>person</mat-icon></button>
<button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.ITEM ? 'selected':''"
(click)="openContentOverview(ModelComponentType.ITEM)"><mat-icon>inventory_2</mat-icon></button>
</div> </div>
@ -23,11 +25,13 @@
<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> <button mat-menu-item (click)="openCharactersOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.CHARACTER)}}</button>
<button mat-menu-item (click)="openContentOverview(ModelComponentType.ITEM)">{{ModelComponentTypeUtillities.toString(ModelComponentType.ITEM)}}</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" (onOpenCharacterEditor)="openModelComponent($event)"></app-character-overview> <app-character-overview *ngIf="openContent == ModelComponentType.CHARACTER" #characterOverview [gameModel]="gameModel" (onOpenCharacterEditor)="openModelComponent($event)"></app-character-overview>
<app-inventory-item-overview *ngIf="openContent === ModelComponentType.ITEM" #itemOverview [gameModel]="gameModel"></app-inventory-item-overview>
</mat-drawer> </mat-drawer>
<div class="example-sidenav-content"> <div class="example-sidenav-content">

View File

@ -254,6 +254,11 @@ export class AppComponent implements OnInit{
this.drawer!.open() this.drawer!.open()
} }
openContentOverview(contentType: ModelComponentType) {
this.openContent = contentType;
this.drawer!.open();
}
protected readonly ModelComponentType = ModelComponentType; protected readonly ModelComponentType = ModelComponentType;
closeContentOverview() { closeContentOverview() {

View File

@ -82,6 +82,9 @@ import {
import { import {
StateInitialCellComponent StateInitialCellComponent
} from "./editor/gamesystem-editor/state-editor/simple-state-editor/state-initial-cell/state-initial-cell.component"; } from "./editor/gamesystem-editor/state-editor/simple-state-editor/state-initial-cell/state-initial-cell.component";
import {
InventoryItemOverviewComponent
} from "./side-overviews/inventory-item-overview/inventory-item-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');
@ -107,7 +110,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl
CharacterOverviewComponent, CharacterOverviewComponent,
CharacterEditorComponent, CharacterEditorComponent,
TemplateSpecificatorComponent, TemplateSpecificatorComponent,
StateInitialCellComponent StateInitialCellComponent,
InventoryItemOverviewComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
@ -170,7 +174,7 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl
MatExpansionPanel, MatExpansionPanel,
MatExpansionPanelTitle, MatExpansionPanelTitle,
MatCardTitle, MatCardTitle,
MatExpansionPanelHeader MatExpansionPanelHeader,
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

View File

@ -11,6 +11,7 @@ import {SimpleTemplateGamesystem} from "./templates/simpleGamesystem/SimpleTempl
import {ProductTemplateSystem} from "./templates/productGamesystem/ProductTemplateSystem"; import {ProductTemplateSystem} from "./templates/productGamesystem/ProductTemplateSystem";
import {ProductTemplateCreator} from "./templates/productGamesystem/ProductTemplateCreator"; import {ProductTemplateCreator} from "./templates/productGamesystem/ProductTemplateCreator";
import {CharacterRelation} from "./characters/CharacterRelation"; import {CharacterRelation} from "./characters/CharacterRelation";
import {Item} from "./inventory/Item";
export class GameModel { export class GameModel {
gameModelName: string gameModelName: string
@ -18,9 +19,13 @@ export class GameModel {
gamesystems: Gamesystem<any, any>[] = []; gamesystems: Gamesystem<any, any>[] = [];
scriptAccounts: ScriptAccount[] = []; scriptAccounts: ScriptAccount[] = [];
characters: Character[] = [] characters: Character[] = []
inventoryItems: Item[] = []
constructor(gameModelName: string) { constructor(gameModelName: string) {
this.gameModelName = gameModelName; this.gameModelName = gameModelName;
this.createInventoryItem("Item 1")
this.createInventoryItem("Item 2")
} }
addGamesystem(gamesystem: Gamesystem<any, any>) { addGamesystem(gamesystem: Gamesystem<any, any>) {
@ -101,7 +106,12 @@ export class GameModel {
return simpleGamesystem; return simpleGamesystem;
} }
createInventoryItem(itemName: string) {
if(itemName != undefined) {
const item = new Item(itemName, "", ModelComponentType.CHARACTER);
this.inventoryItems.push(item);
}
}
createGamesystem(gamesystemName: string, parentGamesystemName: string | undefined, templateType: TemplateType | undefined) { createGamesystem(gamesystemName: string, parentGamesystemName: string | undefined, templateType: TemplateType | undefined) {
if(gamesystemName != undefined && this.findGamesystem(gamesystemName) == undefined) { if(gamesystemName != undefined && this.findGamesystem(gamesystemName) == undefined) {
@ -156,6 +166,10 @@ export class GameModel {
} }
} }
removeItem(item: Item) {
this.inventoryItems = this.inventoryItems.filter(i => i.componentName === item.componentName)
}
findGamesystem(gamesystemName: string) { findGamesystem(gamesystemName: string) {
const gamesystemQueue : Gamesystem<State<any>, Transition<any>>[] = []; const gamesystemQueue : Gamesystem<State<any>, Transition<any>>[] = [];
this.gamesystems.forEach(gamesystem => gamesystemQueue.push(gamesystem)); this.gamesystems.forEach(gamesystem => gamesystemQueue.push(gamesystem));

View File

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

View File

@ -5,7 +5,8 @@ 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" case ModelComponentType.CHARACTER: return "Characters";
case ModelComponentType.ITEM: return "Items";
default: return "Undefined"; default: return "Undefined";
} }
} }
@ -15,6 +16,7 @@ export class ModelComponentTypeUtillities {
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" case ModelComponentType.CHARACTER: return "Character"
case ModelComponentType.ITEM: return "Item"
default: return "Undefined"; default: return "Undefined";
} }
} }
@ -24,6 +26,7 @@ export class ModelComponentTypeUtillities {
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 case "character": return ModelComponentType.CHARACTER
case "item": return ModelComponentType.ITEM
} }
} }
} }

View File

@ -0,0 +1,10 @@
import {ItemProperty} from "./ItemProperty";
import {ItemQuality} from "./ItemQuality";
import {ModelComponent} from "../ModelComponent";
export class Item extends ModelComponent {
possible_qualities: ItemQuality[] = []
itemProperties: ItemProperty[] = []
}

View File

@ -0,0 +1,10 @@
export class ItemProperty {
propertyName: string
property: number
constructor(propertyName: string, property: number) {
this.propertyName = propertyName;
this.property = property;
}
}

View File

@ -0,0 +1,9 @@
export class ItemQuality {
quality_step: number
quality_propertes: ItemQuality[] = []
constructor(quality_step: number) {
this.quality_step = quality_step;
}
}

View File

@ -0,0 +1,8 @@
<mat-action-list>
<mat-list-item class="item" *ngFor="let item of gameModel!.inventoryItems"
(dblclick)="onOpenItemEditor(item)" (click)="selectItem(item)"
[ngClass]="selectedItem === item ?'selected-item':''"
(contextmenu)="selectItem(item)">
<mat-icon class="icon">inventory_2</mat-icon>{{item.componentName}}
</mat-list-item>
</mat-action-list>

View File

@ -0,0 +1,14 @@
.item {
min-height: 1.8em !important;
height: 1.8em !important;
}
.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 { InventoryItemOverviewComponent } from './inventory-item-overview.component';
describe('InventoryItemOverviewComponent', () => {
let component: InventoryItemOverviewComponent;
let fixture: ComponentFixture<InventoryItemOverviewComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [InventoryItemOverviewComponent]
})
.compileComponents();
fixture = TestBed.createComponent(InventoryItemOverviewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,34 @@
import {Component, EventEmitter, Input, Output} from '@angular/core';
import {GameModel} from "../../project/game-model/GameModel";
import {Item} from "../../project/game-model/inventory/Item";
import {MatActionList, MatListItem} from "@angular/material/list";
import {MatIcon} from "@angular/material/icon";
import {NgForOf} from "@angular/common";
import {ScriptAccount} from "../../project/game-model/scriptAccounts/ScriptAccount";
@Component({
selector: 'app-inventory-item-overview',
templateUrl: './inventory-item-overview.component.html',
styleUrl: './inventory-item-overview.component.scss'
})
export class InventoryItemOverviewComponent {
@Input() gameModel: GameModel | undefined;
@Output() openItemEditor = new EventEmitter<Item>();
selectedItem: Item | undefined
onOpenItemEditor(item: Item) {
this.openItemEditor.emit(item)
}
selectItem(item: Item) {
if(this.selectedItem != undefined && this.selectedItem!.componentName === item.componentName) {
this.selectedItem = undefined
} else {
this.selectedItem = item
}
}
}

View File

@ -3,6 +3,6 @@
(dblclick)="onOpenScriptAccount(scriptAccount)" (click)="selectScriptAccount(scriptAccount)" (dblclick)="onOpenScriptAccount(scriptAccount)" (click)="selectScriptAccount(scriptAccount)"
[ngClass]="selectedScriptAccount === scriptAccount ?'selected-item':''" [ngClass]="selectedScriptAccount === scriptAccount ?'selected-item':''"
(contextmenu)="selectScriptAccount(scriptAccount)"> (contextmenu)="selectScriptAccount(scriptAccount)">
<mat-icon class="scriptAccount-icon">inventory_2</mat-icon>{{scriptAccount.componentName}} <mat-icon class="scriptAccount-icon">analytics</mat-icon>{{scriptAccount.componentName}}
</mat-list-item> </mat-list-item>
</mat-action-list> </mat-action-list>