diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f756385..d623170 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -94,9 +94,6 @@ import {
import {
InventorySlotEditorComponent
} from "./editor/character-editor/inventory-slot-editor/inventory-slot-editor.component";
-import {
- InventorySlotCreatorComponent
-} from "./editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component";
// AoT requires an exported function for factories
const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -127,8 +124,7 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl
ItemEditorComponent,
ItemgroupInheritorComponent,
InheritedItemCharacteristicEditorComponent,
- InventorySlotEditorComponent,
- InventorySlotCreatorComponent
+ InventorySlotEditorComponent
],
imports: [
BrowserModule,
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html
deleted file mode 100644
index f1f80a3..0000000
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
{{data == undefined ? 'Create New Inventory Slot':'Rename Inventory Slot'}}
-
-
- Slot-Name
-
-
-
-
-
-
-
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss
deleted file mode 100644
index 4e80027..0000000
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.long-form {
- width: 100%;
-}
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.spec.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.spec.ts
deleted file mode 100644
index c8771c8..0000000
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { InventorySlotCreatorComponent } from './inventory-slot-creator.component';
-
-describe('InventorySlotCreatorComponent', () => {
- let component: InventorySlotCreatorComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [InventorySlotCreatorComponent]
- })
- .compileComponents();
-
- fixture = TestBed.createComponent(InventorySlotCreatorComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts
deleted file mode 100644
index a2b75db..0000000
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import {Component, Inject, OnInit} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {InventorySlot} from "../../../../project/game-model/inventory/intentory-slots/InventorySlot";
-import {FormControl, Validators} from "@angular/forms";
-
-@Component({
- selector: 'app-inventory-slot-creator',
- templateUrl: './inventory-slot-creator.component.html',
- styleUrl: './inventory-slot-creator.component.scss'
-})
-export class InventorySlotCreatorComponent implements OnInit{
-
- slotNameCtrl = new FormControl('', [Validators.required]);
-
- constructor(private dialogRef: MatDialogRef,
- @Inject(MAT_DIALOG_DATA) public data: InventorySlot | undefined) {
-
- }
-
- ngOnInit() {
- if(this.data != undefined) {
- this.slotNameCtrl.setValue(this.data.slotName);
- }
- }
-
- submit() {
- if(this.data != undefined) {
- this.data.slotName = this.slotNameCtrl.value!;
- this.dialogRef.close(this.data);
- } else {
- this.dialogRef.close(new InventorySlot(this.slotNameCtrl.value!))
- }
-
- }
-
- cancel() {
- this.dialogRef.close()
- }
-}
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
index d17d8d8..b35cc1f 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
@@ -1,12 +1,65 @@
-
-
-
- {{slot.slotName}}
-
-
-
-
-
-
-
-
+
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss
index bbb5df8..f12bdfb 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss
@@ -4,3 +4,56 @@
.add-btn {
width: 100%;
}
+
+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: #4e5157;
+}
+
+.example-element-row td {
+ border-bottom-width: 0;
+}
+
+.example-element-detail {
+ overflow: hidden;
+ display: flex;
+}
+
+.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;
+ align-content: center;
+}
diff --git a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
index 3b33670..5e8f9c8 100644
--- a/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
+++ b/src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
@@ -1,43 +1,57 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
import {Character} from "../../../project/game-model/characters/Character";
import {ItemGroup} from "../../../project/game-model/inventory/ItemGroup";
import {InventorySlot} from "../../../project/game-model/inventory/intentory-slots/InventorySlot";
import {MatDialog} from "@angular/material/dialog";
-import {InventorySlotCreatorComponent} from "./inventory-slot-creator/inventory-slot-creator.component";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+import {MatTableDataSource} from "@angular/material/table";
@Component({
selector: 'app-inventory-slot-editor',
templateUrl: './inventory-slot-editor.component.html',
- styleUrl: './inventory-slot-editor.component.scss'
+ styleUrl: './inventory-slot-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 InventorySlotEditorComponent {
+export class InventorySlotEditorComponent implements OnInit{
@Input() character: Character | undefined
@Input() itemgroups: ItemGroup[] = []
+ displayedColumns: string[] = ['name', 'edit', 'delete']
+ columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
+ dataSource: MatTableDataSource = new MatTableDataSource();
+
+ expandedSlot: InventorySlot | null = null
+ editedSlot: InventorySlot | null = null
constructor(private dialog: MatDialog) {
}
- addInventorySlot() {
- const dialogRef = this.dialog.open(InventorySlotCreatorComponent, {
- minWidth: "400px"
- })
-
- dialogRef.afterClosed().subscribe(res => {
- if(res != undefined) {
- this.character!.inventorySlots.push(res)
- }
- })
+ ngOnInit() {
+ this.dataSource.data = this.character!.inventorySlots;
}
- renameInventorySlot(inventorySlot: InventorySlot) {
- this.dialog.open(InventorySlotCreatorComponent, {
- minWidth: "400px",
- data: inventorySlot
- })
+ addInventorySlot() {
+ this.editedSlot = new InventorySlot("New Inventory Slot");
+ this.character!.addInventorySlot(this.editedSlot);
+ this.dataSource.data = this.character!.inventorySlots;
+ }
+
+ editInventorySlot(inventorySlot: InventorySlot) {
+ this.editedSlot = inventorySlot
}
deleteInventorySlot(inventorySlot: InventorySlot) {
- this.character!.removeInventorySlot(inventorySlot)
+ this.character!.removeInventorySlot(inventorySlot);
+ this.dataSource.data = this.character!.inventorySlots;
+ }
+
+ finishEditing() {
+ this.editedSlot = null;
}
}