diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 99f725d..a3bac22 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -61,7 +61,7 @@ import { ProductStateEditorComponent } from "./editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component"; import {MatTooltip} from "@angular/material/tooltip"; -import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card"; +import {MatCard, MatCardActions, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card"; import { ScriptaccountActionEditorComponent } from "./editor/gamesystem-editor/transition-editor/scriptaccount-action-editor/scriptaccount-action-editor.component"; @@ -181,6 +181,7 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl MatExpansionPanelTitle, MatCardTitle, MatExpansionPanelHeader, + MatCardActions, ], 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 5219992..d326add 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,3 +1,19 @@ + + + Item Qualtities + + + + + + {{quality.quality_step}} + + + + + + + Item Characteristics @@ -6,3 +22,53 @@ + + + + Item Quality Characteristics + + + + + Name + + {{itemProperty.propertyName}} + + Name + + + + + + Description + + {{itemProperty.propertyDescription}} + + Name + + + + + + + + + edit + done + + + + + + add + + + delete + + + + + + + + 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 index e69de29..8830c59 100644 --- a/src/app/editor/inventory-item-editor/inventory-item-editor.component.scss +++ b/src/app/editor/inventory-item-editor/inventory-item-editor.component.scss @@ -0,0 +1,7 @@ +table { + width: 100%; +} + +.mat-column-edit, .mat-column-delete { + width: 32px; +} 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 f642cd0..68d0366 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 @@ -1,17 +1,58 @@ -import {Component, Input} from '@angular/core'; +import {Component, ElementRef, Input, OnInit, ViewChildren} 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"; +import {ItemPropertyDescription} from "../../project/game-model/inventory/ItemPropertyDescription"; +import {ItemPropertyEditorComponent} from "./item-property-editor/item-property-editor.component"; +import {MatTableDataSource} from "@angular/material/table"; @Component({ selector: 'app-inventory-item-editor', templateUrl: './inventory-item-editor.component.html', styleUrl: './inventory-item-editor.component.scss' }) -export class InventoryItemEditorComponent { +export class InventoryItemEditorComponent implements OnInit{ @Input() item: Item | undefined; @Input() gameModel: GameModel | undefined; + @ViewChildren('perQualityPropertyEditors') perQualityPropertyEditors: ItemPropertyEditorComponent[] = []; + displayedColumns: string[] = ['name', 'description', 'edit', 'delete'] + editedProperty: ItemPropertyDescription | undefined + + datasource: MatTableDataSource = new MatTableDataSource() + + ngOnInit() { + this.datasource.data = this.item!.perQualityProperties + } + + deletePerQualityProperty(itemProperty: ItemPropertyDescription) { + this.item!.removePerQualityProperty(itemProperty); + this.datasource.data = this.item!.perQualityProperties + this.perQualityPropertyEditors.forEach(component => component.updatedDisplayedData()) + } + + editPerQualityProperty(itemProperty: ItemPropertyDescription) { + this.editedProperty = itemProperty + } + + finishEditing() { + if(this.editedProperty!.propertyName.length > 0) { + this.item!.editPerQualityProperty(this.editedProperty!); + + this.editedProperty = undefined; + this.perQualityPropertyEditors.forEach(component => component.updatedDisplayedData()) + } + } + + addQualityProperty() { + const qualityDescription = new ItemPropertyDescription("New Property", "") + this.item!.addPerQualityProperty(qualityDescription); + this.datasource.data = this.item!.perQualityProperties + this.editedProperty = qualityDescription; + + this.perQualityPropertyEditors.forEach(component => component.updatedDisplayedData()) + + } } 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 index c39b808..733f829 100644 --- 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 @@ -2,8 +2,8 @@ Name - {{itemProperty.propertyName}} - + {{itemProperty.propertyName}} + Name @@ -14,8 +14,8 @@ - {{element.propertyDescription}} - + {{element.propertyDescription}} + Description @@ -46,13 +46,13 @@ - delete + delete - add + add 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 index 59b6cde..98909aa 100644 --- 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 @@ -4,6 +4,7 @@ import {MatTableDataSource} from "@angular/material/table"; import {ItemProperty} from "../../../project/game-model/inventory/ItemProperty"; import {animate, state, style, transition, trigger} from "@angular/animations"; import {MatSnackBar} from "@angular/material/snack-bar"; +import {ItemQuality} from "../../../project/game-model/inventory/ItemQuality"; @Component({ selector: 'app-item-property-editor', @@ -20,6 +21,7 @@ import {MatSnackBar} from "@angular/material/snack-bar"; export class ItemPropertyEditorComponent implements OnInit{ @Input() item: Item | undefined + @Input() quality: ItemQuality | undefined editedItemProperty: ItemProperty | undefined expandedElement: ItemProperty | undefined @@ -32,12 +34,19 @@ export class ItemPropertyEditorComponent implements OnInit{ } ngOnInit() { - this.datasource.data = this.item!.itemProperties + this.updatedDisplayedData() } deleteItemProperty(itemProperty: ItemProperty) { - this.item!.itemProperties = this.item!.itemProperties.filter(property => property.propertyName !== itemProperty.propertyName) - this.datasource.data = this.item!.itemProperties + if(this.quality == undefined) { + this.item!.itemProperties = this.item!.itemProperties.filter(property => property.propertyName !== itemProperty.propertyName) + this.datasource.data = this.item!.itemProperties + } else { + this.quality.quality_propertes = this.quality.quality_propertes.filter(property => property.propertyName !== itemProperty.propertyName) + this.datasource.data = this.quality.quality_propertes; + } + + } editItemProperty(itemProperty: ItemProperty) { @@ -53,9 +62,21 @@ export class ItemPropertyEditorComponent implements OnInit{ } addItemProperty() { - const itemProperty = new ItemProperty("New Property", "", 0); - this.item!.itemProperties.push(itemProperty); - this.datasource.data = this.item!.itemProperties; - this.editedItemProperty = itemProperty; + if(this.quality == undefined) { + const itemProperty = new ItemProperty("New Property", "", 0); + this.item!.itemProperties.push(itemProperty); + this.datasource.data = this.item!.itemProperties; + this.editedItemProperty = itemProperty; + } + } + + updatedDisplayedData() { + if(this.quality != undefined) { + this.datasource.data = this.quality!.quality_propertes + this.displayedColumns = ['name', 'property', 'edit'] + this.columnsToDisplayWithExpand = [...this.displayedColumns, 'expand']; + } else { + 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 3d87ac0..13f8a35 100644 --- a/src/app/project/game-model/inventory/Item.ts +++ b/src/app/project/game-model/inventory/Item.ts @@ -2,15 +2,43 @@ import {ItemProperty} from "./ItemProperty"; import {ItemQuality} from "./ItemQuality"; import {ModelComponent} from "../ModelComponent"; import {ModelComponentType} from "../ModelComponentType"; +import {ItemPropertyDescription} from "./ItemPropertyDescription"; export class Item extends ModelComponent { possible_qualities: ItemQuality[] = [] itemProperties: ItemProperty[] = [] + perQualityProperties: ItemPropertyDescription[] = [] constructor(componentName: string, componentDescription: string, type: ModelComponentType) { super(componentName, componentDescription, type); this.itemProperties.push(new ItemProperty("Weight", "Some Weights", 10)) + this.possible_qualities.push(new ItemQuality(0.25)) + this.possible_qualities.push(new ItemQuality(0.50)) + this.possible_qualities.push(new ItemQuality(0.75)) + this.possible_qualities.push(new ItemQuality(1.00)) + + this.addPerQualityProperty(new ItemPropertyDescription("Price", "Price to buy item")) + } + + removePerQualityProperty(qualityProperty: ItemPropertyDescription) { + this.perQualityProperties = this.perQualityProperties.filter(perQualityProperty => perQualityProperty !== qualityProperty); + this.possible_qualities.forEach(quality => { + quality.removeQualityProperty(qualityProperty.propertyName); + }) + } + + addPerQualityProperty(qualityProperty: ItemPropertyDescription) { + if(this.perQualityProperties.find(property => property.propertyName === qualityProperty.propertyName) == undefined) { + this.perQualityProperties.push(qualityProperty); + this.possible_qualities.forEach(quality => quality.addQualityProperty(qualityProperty)) + } + } + + editPerQualityProperty(qualityProperty: ItemPropertyDescription) { + this.possible_qualities.forEach(quality => { + quality.editQualityProperty(qualityProperty, this.perQualityProperties.map(property => property.propertyName)) + }) } } diff --git a/src/app/project/game-model/inventory/ItemPropertyDescription.ts b/src/app/project/game-model/inventory/ItemPropertyDescription.ts new file mode 100644 index 0000000..174cf31 --- /dev/null +++ b/src/app/project/game-model/inventory/ItemPropertyDescription.ts @@ -0,0 +1,10 @@ +export class ItemPropertyDescription { + propertyName: string; + propertyDescription: string; + + + constructor(propertyName: string, propertyDescription: string) { + this.propertyName = propertyName; + this.propertyDescription = propertyDescription; + } +} diff --git a/src/app/project/game-model/inventory/ItemQuality.ts b/src/app/project/game-model/inventory/ItemQuality.ts index ba59077..e31ad63 100644 --- a/src/app/project/game-model/inventory/ItemQuality.ts +++ b/src/app/project/game-model/inventory/ItemQuality.ts @@ -1,9 +1,30 @@ +import {ItemProperty} from "./ItemProperty"; +import {ItemPropertyDescription} from "./ItemPropertyDescription"; + export class ItemQuality { quality_step: number - quality_propertes: ItemQuality[] = [] + quality_propertes: ItemProperty[] = [] constructor(quality_step: number) { this.quality_step = quality_step; } + + removeQualityProperty(propertyName: string) { + this.quality_propertes = this.quality_propertes.filter(qualityProperty => qualityProperty.propertyName !== propertyName); + } + + addQualityProperty(qualityProperty: ItemPropertyDescription) { + this.quality_propertes.push(new ItemProperty(qualityProperty.propertyName, qualityProperty.propertyDescription, 0)); + } + + editQualityProperty(qualityProperty: ItemPropertyDescription, knownProperties: string[]) { + const affectedProperty = this.quality_propertes.find(property => !knownProperties.includes(property.propertyName) ) + if(affectedProperty != undefined) { + affectedProperty!.propertyName = qualityProperty.propertyName; + affectedProperty!.propertyDescription = qualityProperty.propertyDescription; + } else { + console.log("Property was not found") + } + } }
{{element.propertyDescription}}