From eaa526d4c67bc61323cae639e30414839f57114a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= Date: Sat, 20 Apr 2024 07:41:51 +0200 Subject: [PATCH] Introduce Inventory-Item Editor --- src/app/app.component.html | 2 +- src/app/app.module.ts | 128 +++++++++--------- .../character-editor.component.ts | 2 +- src/app/editor/editor.component.html | 8 +- src/app/editor/editor.component.ts | 9 ++ .../inventory-item-editor.component.html | 1 + .../inventory-item-editor.component.scss | 0 .../inventory-item-editor.component.spec.ts | 23 ++++ .../inventory-item-editor.component.ts | 18 +++ src/app/project/game-model/GameModel.ts | 2 +- 10 files changed, 124 insertions(+), 69 deletions(-) create mode 100644 src/app/editor/inventory-item-editor/inventory-item-editor.component.html create mode 100644 src/app/editor/inventory-item-editor/inventory-item-editor.component.scss create mode 100644 src/app/editor/inventory-item-editor/inventory-item-editor.component.spec.ts create mode 100644 src/app/editor/inventory-item-editor/inventory-item-editor.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 49c523d..83a3954 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -31,7 +31,7 @@ - +
diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 63ff30b..218e124 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -85,6 +85,7 @@ import { import { InventoryItemOverviewComponent } from "./side-overviews/inventory-item-overview/inventory-item-overview.component"; +import {InventoryItemEditorComponent} from "./editor/inventory-item-editor/inventory-item-editor.component"; // AoT requires an exported function for factories const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new TranslateHttpLoader(http, './assets/i18n/', '.json'); @@ -113,69 +114,70 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl StateInitialCellComponent, InventoryItemOverviewComponent ], - imports: [ - BrowserModule, - FormsModule, - HttpClientModule, - CoreModule, - SharedModule, - TranslateModule.forRoot({ - loader: { - provide: TranslateLoader, - useFactory: httpLoaderFactory, - deps: [HttpClient] - } - }), - BrowserAnimationsModule, - MatIcon, - MatToolbar, - MatButton, - MatFormField, - MatInput, - MatDrawerContainer, - MatDrawer, - MatIconButton, - MatMenuTrigger, - MatMenu, - MatMenuItem, - MatListItem, - MatActionList, - MatTabGroup, - MatTab, - MatTabLabel, - MatLabel, - MatFormField, - ReactiveFormsModule, - MatError, - MatDialogTitle, - MatDialogContent, - MatDialogActions, - MatMiniFabButton, - MatTreeModule, - MatTable, - MatColumnDef, - MatHeaderCell, - MatHeaderCellDef, - MatCellDef, - MatCell, - MatHeaderRow, - MatRow, - MatHeaderRowDef, - MatRowDef, - MatCheckbox, - MatSelect, - MatOption, - MatHint, - MatTooltip, - MatCard, - MatCardContent, - MatCardHeader, - MatAccordion, - MatExpansionPanel, - MatExpansionPanelTitle, - MatCardTitle, - MatExpansionPanelHeader, - ], + imports: [ + BrowserModule, + FormsModule, + HttpClientModule, + CoreModule, + SharedModule, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useFactory: httpLoaderFactory, + deps: [HttpClient] + } + }), + BrowserAnimationsModule, + MatIcon, + MatToolbar, + MatButton, + MatFormField, + MatInput, + MatDrawerContainer, + MatDrawer, + MatIconButton, + MatMenuTrigger, + MatMenu, + MatMenuItem, + MatListItem, + MatActionList, + MatTabGroup, + MatTab, + MatTabLabel, + MatLabel, + MatFormField, + ReactiveFormsModule, + MatError, + MatDialogTitle, + MatDialogContent, + MatDialogActions, + MatMiniFabButton, + MatTreeModule, + MatTable, + MatColumnDef, + MatHeaderCell, + MatHeaderCellDef, + MatCellDef, + MatCell, + MatHeaderRow, + MatRow, + MatHeaderRowDef, + MatRowDef, + MatCheckbox, + MatSelect, + MatOption, + MatHint, + MatTooltip, + MatCard, + MatCardContent, + MatCardHeader, + MatAccordion, + MatExpansionPanel, + MatExpansionPanelTitle, + MatCardTitle, + MatExpansionPanelHeader, + InventoryItemEditorComponent, + ], providers: [], bootstrap: [AppComponent] }) diff --git a/src/app/editor/character-editor/character-editor.component.ts b/src/app/editor/character-editor/character-editor.component.ts index 9c1a072..291f361 100644 --- a/src/app/editor/character-editor/character-editor.component.ts +++ b/src/app/editor/character-editor/character-editor.component.ts @@ -1,4 +1,4 @@ -import {Component, Input} from '@angular/core'; +import {Component, Input, OnInit} from '@angular/core'; import {Character} from "../../project/game-model/characters/Character"; import {GameModel} from "../../project/game-model/GameModel"; import {MatDialog} from "@angular/material/dialog"; diff --git a/src/app/editor/editor.component.html b/src/app/editor/editor.component.html index 23be637..e856a70 100644 --- a/src/app/editor/editor.component.html +++ b/src/app/editor/editor.component.html @@ -16,9 +16,11 @@ [scriptAccounts]="gameModel!.scriptAccounts"> - + [gameModel]="gameModel!"> + + diff --git a/src/app/editor/editor.component.ts b/src/app/editor/editor.component.ts index 50f44b9..b69cdbf 100644 --- a/src/app/editor/editor.component.ts +++ b/src/app/editor/editor.component.ts @@ -7,6 +7,7 @@ import {State} from "../project/game-model/gamesystems/states/State"; import {Transition} from "../project/game-model/gamesystems/transitions/Transition"; import {ModelComponentType} from "../project/game-model/ModelComponentType"; import {Character} from "../project/game-model/characters/Character"; +import {Item} from "../project/game-model/inventory/Item"; @Component({ @@ -27,6 +28,7 @@ export class EditorComponent { } else { this.activeTab = this.gameModelComponents.findIndex(component => component.componentName === gameModelComponent.componentName); } + console.log(gameModelComponent) } closeGameModelComponent(gameModelComponent: ModelComponent) { @@ -57,4 +59,11 @@ export class EditorComponent { return modelComponent as Character return undefined; } + + convertModelComponentToItem(modelComponent: ModelComponent) { + if(modelComponent instanceof Item) { + return modelComponent as Item + } + return undefined + } } diff --git a/src/app/editor/inventory-item-editor/inventory-item-editor.component.html b/src/app/editor/inventory-item-editor/inventory-item-editor.component.html new file mode 100644 index 0000000..bf9d162 --- /dev/null +++ b/src/app/editor/inventory-item-editor/inventory-item-editor.component.html @@ -0,0 +1 @@ +

inventory-item-editor works!

diff --git a/src/app/editor/inventory-item-editor/inventory-item-editor.component.scss b/src/app/editor/inventory-item-editor/inventory-item-editor.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/editor/inventory-item-editor/inventory-item-editor.component.spec.ts b/src/app/editor/inventory-item-editor/inventory-item-editor.component.spec.ts new file mode 100644 index 0000000..f06b796 --- /dev/null +++ b/src/app/editor/inventory-item-editor/inventory-item-editor.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InventoryItemEditorComponent } from './inventory-item-editor.component'; + +describe('InventoryItemEditorComponent', () => { + let component: InventoryItemEditorComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [InventoryItemEditorComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(InventoryItemEditorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/editor/inventory-item-editor/inventory-item-editor.component.ts b/src/app/editor/inventory-item-editor/inventory-item-editor.component.ts new file mode 100644 index 0000000..d9e8076 --- /dev/null +++ b/src/app/editor/inventory-item-editor/inventory-item-editor.component.ts @@ -0,0 +1,18 @@ +import {Component, Input} from '@angular/core'; +import {Character} from "../../project/game-model/characters/Character"; +import {GameModel} from "../../project/game-model/GameModel"; +import {Item} from "../../project/game-model/inventory/Item"; + +@Component({ + selector: 'app-inventory-item-editor', + standalone: true, + imports: [], + templateUrl: './inventory-item-editor.component.html', + styleUrl: './inventory-item-editor.component.scss' +}) +export class InventoryItemEditorComponent { + + @Input() item: Item | undefined; + @Input() gameModel: GameModel | undefined; + +} diff --git a/src/app/project/game-model/GameModel.ts b/src/app/project/game-model/GameModel.ts index ae2b906..3c4030d 100644 --- a/src/app/project/game-model/GameModel.ts +++ b/src/app/project/game-model/GameModel.ts @@ -108,7 +108,7 @@ export class GameModel { createInventoryItem(itemName: string) { if(itemName != undefined) { - const item = new Item(itemName, "", ModelComponentType.CHARACTER); + const item = new Item(itemName, "", ModelComponentType.ITEM); this.inventoryItems.push(item); } }