Introduce Items and Basic ItemOverview

src/app/app.component.html

@@ -1,11 +1,13 @@
 <div class="container">
   <div class="full-height-container" >
     <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':''"
             (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>
+    <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>
 
 
@@ -23,11 +25,13 @@
           <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)="openCharactersOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.CHARACTER)}}</button>
+          <button mat-menu-item (click)="openContentOverview(ModelComponentType.ITEM)">{{ModelComponentTypeUtillities.toString(ModelComponentType.ITEM)}}</button>
         </mat-menu>
       </div>
       <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>
     </mat-drawer>
 
     <div class="example-sidenav-content">

src/app/app.component.ts

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

src/app/app.module.ts

@@ -82,6 +82,9 @@ import {
 import {
     StateInitialCellComponent
 } 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
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -107,7 +110,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     CharacterOverviewComponent,
     CharacterEditorComponent,
     TemplateSpecificatorComponent,
-    StateInitialCellComponent
+    StateInitialCellComponent,
+    InventoryItemOverviewComponent
   ],
     imports: [
         BrowserModule,
@@ -170,7 +174,7 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
         MatExpansionPanel,
         MatExpansionPanelTitle,
         MatCardTitle,
-        MatExpansionPanelHeader
+        MatExpansionPanelHeader,
     ],
   providers: [],
   bootstrap: [AppComponent]

src/app/project/game-model/GameModel.ts

@@ -11,6 +11,7 @@ import {SimpleTemplateGamesystem} from "./templates/simpleGamesystem/SimpleTempl
 import {ProductTemplateSystem} from "./templates/productGamesystem/ProductTemplateSystem";
 import {ProductTemplateCreator} from "./templates/productGamesystem/ProductTemplateCreator";
 import {CharacterRelation} from "./characters/CharacterRelation";
+import {Item} from "./inventory/Item";
 
 export class GameModel {
   gameModelName: string
@@ -18,9 +19,13 @@ export class GameModel {
   gamesystems: Gamesystem<any, any>[] = [];
   scriptAccounts: ScriptAccount[] = [];
   characters: Character[] = []
+  inventoryItems: Item[] = []
 
   constructor(gameModelName: string) {
     this.gameModelName = gameModelName;
+
+    this.createInventoryItem("Item 1")
+    this.createInventoryItem("Item 2")
   }
 
   addGamesystem(gamesystem: Gamesystem<any, any>) {
@@ -101,7 +106,12 @@ export class GameModel {
     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) {
     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) {
     const gamesystemQueue : Gamesystem<State<any>, Transition<any>>[] = [];
     this.gamesystems.forEach(gamesystem => gamesystemQueue.push(gamesystem));

src/app/project/game-model/ModelComponentType.ts

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

src/app/project/game-model/ModelComponentTypeUtillities.ts

@@ -5,7 +5,8 @@ export class ModelComponentTypeUtillities {
     switch (modelComponentType) {
       case ModelComponentType.SCRIPTACCOUNT: return "ScriptAccounts";
       case ModelComponentType.GAMESYTEM: return "Gamesystems";
-      case ModelComponentType.CHARACTER: return "Characters"
+      case ModelComponentType.CHARACTER: return "Characters";
+      case ModelComponentType.ITEM: return "Items";
       default: return "Undefined";
     }
   }
@@ -15,6 +16,7 @@ export class ModelComponentTypeUtillities {
       case ModelComponentType.SCRIPTACCOUNT: return "ScriptAccount";
       case ModelComponentType.GAMESYTEM: return "Gamesystem";
       case ModelComponentType.CHARACTER: return "Character"
+      case ModelComponentType.ITEM: return "Item"
       default: return "Undefined";
     }
   }
@@ -24,6 +26,7 @@ export class ModelComponentTypeUtillities {
       case "gamesystem": return ModelComponentType.GAMESYTEM;
       case "scriptaccount": return ModelComponentType.SCRIPTACCOUNT;
       case "character": return ModelComponentType.CHARACTER
+      case "item": return ModelComponentType.ITEM
     }
   }
 }

src/app/project/game-model/inventory/Item.ts

@@ -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[] = []
+
+}

src/app/project/game-model/inventory/ItemProperty.ts

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

src/app/project/game-model/inventory/ItemQuality.ts

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

src/app/side-overviews/inventory-item-overview/inventory-item-overview.component.html

@@ -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>

src/app/side-overviews/inventory-item-overview/inventory-item-overview.component.scss

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

src/app/side-overviews/inventory-item-overview/inventory-item-overview.component.spec.ts

@@ -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();
+  });
+});

src/app/side-overviews/inventory-item-overview/inventory-item-overview.component.ts

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

src/app/side-overviews/script-account-overview/script-account-overview.component.html

@@ -3,6 +3,6 @@
                  (dblclick)="onOpenScriptAccount(scriptAccount)" (click)="selectScriptAccount(scriptAccount)"
                   [ngClass]="selectedScriptAccount === scriptAccount ?'selected-item':''"
                   (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-action-list>