src/app/app.component.html

@@ -31,7 +31,7 @@
       <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-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>
+      <app-inventory-item-overview *ngIf="openContent === ModelComponentType.ITEM" #itemOverview [gameModel]="gameModel" (openItemEditor)="openModelComponent($event)"></app-inventory-item-overview>
     </mat-drawer>
 
     <div class="example-sidenav-content">

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: [
+  imports: [
-        BrowserModule,
+    BrowserModule,
-        FormsModule,
+    FormsModule,
-        HttpClientModule,
+    HttpClientModule,
-        CoreModule,
+    CoreModule,
-        SharedModule,
+    SharedModule,
-        TranslateModule.forRoot({
+    TranslateModule.forRoot({
-            loader: {
+      loader: {
-                provide: TranslateLoader,
+        provide: TranslateLoader,
-                useFactory: httpLoaderFactory,
+        useFactory: httpLoaderFactory,
-                deps: [HttpClient]
+        deps: [HttpClient]
-            }
+      }
-        }),
+    }),
-        BrowserAnimationsModule,
+    BrowserAnimationsModule,
-        MatIcon,
+    MatIcon,
-        MatToolbar,
+    MatToolbar,
-        MatButton,
+    MatButton,
-        MatFormField,
+    MatFormField,
-        MatInput,
+    MatInput,
-        MatDrawerContainer,
+    MatDrawerContainer,
-        MatDrawer,
+    MatDrawer,
-        MatIconButton,
+    MatIconButton,
-        MatMenuTrigger,
+    MatMenuTrigger,
-        MatMenu,
+    MatMenu,
-        MatMenuItem,
+    MatMenuItem,
-        MatListItem,
+    MatListItem,
-        MatActionList,
+    MatActionList,
-        MatTabGroup,
+    MatTabGroup,
-        MatTab,
+    MatTab,
-        MatTabLabel,
+    MatTabLabel,
-        MatLabel,
+    MatLabel,
-        MatFormField,
+    MatFormField,
-        ReactiveFormsModule,
+    ReactiveFormsModule,
-        MatError,
+    MatError,
-        MatDialogTitle,
+    MatDialogTitle,
-        MatDialogContent,
+    MatDialogContent,
-        MatDialogActions,
+    MatDialogActions,
-        MatMiniFabButton,
+    MatMiniFabButton,
-        MatTreeModule,
+    MatTreeModule,
-        MatTable,
+    MatTable,
-        MatColumnDef,
+    MatColumnDef,
-        MatHeaderCell,
+    MatHeaderCell,
-        MatHeaderCellDef,
+    MatHeaderCellDef,
-        MatCellDef,
+    MatCellDef,
-        MatCell,
+    MatCell,
-        MatHeaderRow,
+    MatHeaderRow,
-        MatRow,
+    MatRow,
-        MatHeaderRowDef,
+    MatHeaderRowDef,
-        MatRowDef,
+    MatRowDef,
-        MatCheckbox,
+    MatCheckbox,
-        MatSelect,
+    MatSelect,
-        MatOption,
+    MatOption,
-        MatHint,
+    MatHint,
-        MatTooltip,
+    MatTooltip,
-        MatCard,
+    MatCard,
-        MatCardContent,
+    MatCardContent,
-        MatCardHeader,
+    MatCardHeader,
-        MatAccordion,
+    MatAccordion,
-        MatExpansionPanel,
+    MatExpansionPanel,
-        MatExpansionPanelTitle,
+    MatExpansionPanelTitle,
-        MatCardTitle,
+    MatCardTitle,
-        MatExpansionPanelHeader,
+    MatExpansionPanelHeader,
-    ],
+    InventoryItemEditorComponent,
+  ],
   providers: [],
   bootstrap: [AppComponent]
 })

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";

src/app/editor/editor.component.html

@@ -16,9 +16,11 @@
                                 [scriptAccounts]="gameModel!.scriptAccounts"></app-gamesystem-editor>
     <app-character-editor *ngIf="modelComponent.type === ModelComponentType.CHARACTER"
                                 [character]="convertModelComponentToCharacter(modelComponent)"
-                                [gameModel]="gameModel!"
+                                [gameModel]="gameModel!">
-    >
-
     </app-character-editor>
+    <app-inventory-item-editor *ngIf="modelComponent.type === ModelComponentType.ITEM"
+                                [item]="convertModelComponentToItem(modelComponent)"
+                                [gameModel]="gameModel!">
+    </app-inventory-item-editor>
   </mat-tab>
 </mat-tab-group>

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
+  }
 }

src/app/editor/inventory-item-editor/inventory-item-editor.component.html

@@ -0,0 +1 @@
+<p>inventory-item-editor works!</p>

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<InventoryItemEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InventoryItemEditorComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(InventoryItemEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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;
+
+}

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);
     }
   }