diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 218e124..99f725d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -86,6 +86,9 @@ import {
InventoryItemOverviewComponent
} from "./side-overviews/inventory-item-overview/inventory-item-overview.component";
import {InventoryItemEditorComponent} from "./editor/inventory-item-editor/inventory-item-editor.component";
+import {
+ ItemPropertyEditorComponent
+} from "./editor/inventory-item-editor/item-property-editor/item-property-editor.component";
// AoT requires an exported function for factories
const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -112,7 +115,9 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl
CharacterEditorComponent,
TemplateSpecificatorComponent,
StateInitialCellComponent,
- InventoryItemOverviewComponent
+ InventoryItemOverviewComponent,
+ InventoryItemEditorComponent,
+ ItemPropertyEditorComponent
],
imports: [
BrowserModule,
@@ -176,7 +181,6 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl
MatExpansionPanelTitle,
MatCardTitle,
MatExpansionPanelHeader,
- InventoryItemEditorComponent,
],
providers: [],
bootstrap: [AppComponent]
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
index bf9d162..5219992 100644
--- a/src/app/editor/inventory-item-editor/inventory-item-editor.component.html
+++ b/src/app/editor/inventory-item-editor/inventory-item-editor.component.html
@@ -1 +1,8 @@
-
inventory-item-editor works!
+
+
+ Item Characteristics
+
+
+
+
+
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
index d9e8076..f642cd0 100644
--- a/src/app/editor/inventory-item-editor/inventory-item-editor.component.ts
+++ b/src/app/editor/inventory-item-editor/inventory-item-editor.component.ts
@@ -2,11 +2,10 @@ 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";
+import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card";
@Component({
selector: 'app-inventory-item-editor',
- standalone: true,
- imports: [],
templateUrl: './inventory-item-editor.component.html',
styleUrl: './inventory-item-editor.component.scss'
})
diff --git a/src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.html b/src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.html
new file mode 100644
index 0000000..5fe9335
--- /dev/null
+++ b/src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.html
@@ -0,0 +1,64 @@
+
+
+ Name |
+
+ {{itemProperty.propertyName}}
+ |
+
+
+
+
+
+
+ {{element.propertyDescription}}
+
+ |
+
+
+
+
+
+ Characteristic |
+
+ {{itemProperty.property}}
+ |
+
+
+
+
+
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
diff --git a/src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.scss b/src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.scss
new file mode 100644
index 0000000..f4b8648
--- /dev/null
+++ b/src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.scss
@@ -0,0 +1,57 @@
+table {
+ width: 100%;
+}
+
+tr.example-detail-row {
+ height: 0;
+}
+
+tr.example-element-row:not(.example-expanded-row):hover {
+ background: #545456
+}
+
+tr.example-element-row:not(.example-expanded-row):active {
+ background: #545456;
+}
+
+.example-element-row td {
+ border-bottom-width: 0;
+}
+.example-element-diagram {
+ min-width: 80px;
+ border: 2px solid black;
+ padding: 8px;
+ font-weight: lighter;
+ margin: 8px 0;
+ height: 104px;
+}
+
+.example-element-symbol {
+ font-weight: bold;
+ font-size: 40px;
+ line-height: normal;
+}
+
+.example-element-description {
+ padding: 16px;
+}
+
+.example-element-description-attribution {
+ opacity: 0.5;
+}
+
+.mat-column-edit, .mat-column-delete, .mat-column-expand {
+ width: 32px;
+}
+
+.long-form {
+ width: 100%;
+}
+
+.mat-error {
+ color: red;
+}
+
+.warning-icon {
+ margin-right: 5px;
+}
diff --git a/src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.spec.ts b/src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.spec.ts
new file mode 100644
index 0000000..7343da8
--- /dev/null
+++ b/src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemPropertyEditorComponent } from './item-property-editor.component';
+
+describe('ItemPropertyEditorComponent', () => {
+ let component: ItemPropertyEditorComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ItemPropertyEditorComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ItemPropertyEditorComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.ts b/src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.ts
new file mode 100644
index 0000000..eb88c61
--- /dev/null
+++ b/src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.ts
@@ -0,0 +1,33 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Item} from "../../../project/game-model/inventory/Item";
+import {MatTableDataSource} from "@angular/material/table";
+import {ItemProperty} from "../../../project/game-model/inventory/ItemProperty";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+
+@Component({
+ selector: 'app-item-property-editor',
+ templateUrl: './item-property-editor.component.html',
+ styleUrl: './item-property-editor.component.scss',
+ animations: [
+ trigger('detailExpand', [
+ state('collapsed,void', style({height: '0px', minHeight: '0'})),
+ state('expanded', style({height: '*'})),
+ transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+ ]),
+ ],
+})
+export class ItemPropertyEditorComponent implements OnInit{
+
+ @Input() item: Item | undefined
+ editedItemProperty: ItemProperty | undefined
+ expandedElement: ItemProperty | undefined
+
+ displayedColumns: string[] = ['name', 'property']
+ columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
+
+ datasource: MatTableDataSource = new MatTableDataSource();
+
+ ngOnInit() {
+ this.datasource.data = this.item!.itemProperties
+ }
+}
diff --git a/src/app/project/game-model/inventory/Item.ts b/src/app/project/game-model/inventory/Item.ts
index 3aec112..3d87ac0 100644
--- a/src/app/project/game-model/inventory/Item.ts
+++ b/src/app/project/game-model/inventory/Item.ts
@@ -1,10 +1,16 @@
import {ItemProperty} from "./ItemProperty";
import {ItemQuality} from "./ItemQuality";
import {ModelComponent} from "../ModelComponent";
+import {ModelComponentType} from "../ModelComponentType";
export class Item extends ModelComponent {
possible_qualities: ItemQuality[] = []
itemProperties: ItemProperty[] = []
+
+ constructor(componentName: string, componentDescription: string, type: ModelComponentType) {
+ super(componentName, componentDescription, type);
+ this.itemProperties.push(new ItemProperty("Weight", "Some Weights", 10))
+ }
}
diff --git a/src/app/project/game-model/inventory/ItemProperty.ts b/src/app/project/game-model/inventory/ItemProperty.ts
index 4fb219a..e710c2d 100644
--- a/src/app/project/game-model/inventory/ItemProperty.ts
+++ b/src/app/project/game-model/inventory/ItemProperty.ts
@@ -1,10 +1,12 @@
export class ItemProperty {
propertyName: string
+ propertyDescription: string
property: number
- constructor(propertyName: string, property: number) {
+ constructor(propertyName: string, propertyDescription: string, property: number) {
this.propertyName = propertyName;
+ this.propertyDescription = propertyDescription;
this.property = property;
}
}