inventory-slots #49
@ -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,
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
<h1 mat-dialog-title>{{data == undefined ? 'Create New Inventory Slot':'Rename Inventory Slot'}}</h1>
|
||||
<mat-dialog-content>
|
||||
<mat-form-field appearance="outline" class="long-form">
|
||||
<mat-label>Slot-Name</mat-label>
|
||||
<input matInput [formControl]="slotNameCtrl">
|
||||
</mat-form-field>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-raised-button (click)="cancel()">Cancel</button>
|
||||
<button mat-raised-button [disabled]="slotNameCtrl.invalid" (click)="submit()">Submit</button>
|
||||
</mat-dialog-actions>
|
||||
@ -1,3 +0,0 @@
|
||||
.long-form {
|
||||
width: 100%;
|
||||
}
|
||||
@ -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<InventorySlotCreatorComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [InventorySlotCreatorComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(InventorySlotCreatorComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -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<InventorySlotCreatorComponent>,
|
||||
@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()
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,65 @@
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel *ngFor="let slot of character!.inventorySlots">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>{{slot.slotName}}</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<div class="panel-actions">
|
||||
<button mat-raised-button color="primary" (click)="renameInventorySlot(slot)">Rename</button>
|
||||
<button mat-raised-button color="warn" (click)="deleteInventorySlot(slot)">Delete</button>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
<button mat-stroked-button class="add-btn" (click)="addInventorySlot()">Add Inventory-Slot</button>
|
||||
</mat-accordion>
|
||||
<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef>Slot Name</th>
|
||||
<td mat-cell *matCellDef="let slot">
|
||||
<span *ngIf="slot !== editedSlot">
|
||||
{{slot.slotName}}
|
||||
</span>
|
||||
<mat-form-field appearance="fill" class="long-form" *ngIf="slot === editedSlot">
|
||||
<mat-label>Slot Name</mat-label>
|
||||
<input matInput [(ngModel)]="slot.slotName">
|
||||
</mat-form-field>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="edit">
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let slot">
|
||||
<button mat-icon-button (click)="editInventorySlot(slot)" *ngIf="editedSlot !== slot" [disabled]="editedSlot != null"><mat-icon>edit</mat-icon></button>
|
||||
<button mat-icon-button (click)="finishEditing()" *ngIf="editedSlot === slot"><mat-icon>done</mat-icon></button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="delete">
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let slot">
|
||||
<button mat-icon-button (click)="deleteInventorySlot(slot)" color="warn"><mat-icon>delete</mat-icon></button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="expand">
|
||||
<th mat-header-cell *matHeaderCellDef aria-label="row actions">
|
||||
<button mat-icon-button (click)="addInventorySlot()"><mat-icon>add</mat-icon></button>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<button mat-icon-button aria-label="expand row" (click)="(expandedSlot = expandedSlot === element ? null : element); $event.stopPropagation()">
|
||||
@if (expandedSlot === element) {
|
||||
<mat-icon>keyboard_arrow_up</mat-icon>
|
||||
} @else {
|
||||
<mat-icon>keyboard_arrow_down</mat-icon>
|
||||
}
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="expandedDetail">
|
||||
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
|
||||
<div class="example-element-detail"
|
||||
[@detailExpand]="element == expandedSlot ? 'expanded' : 'collapsed'">
|
||||
|
||||
<div class="example-element-description">
|
||||
Something
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
|
||||
<tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
|
||||
class="example-element-row"
|
||||
[class.example-expanded-row]="expandedSlot === element"
|
||||
(click)="expandedSlot = expandedSlot === element ? null : element">
|
||||
</tr>
|
||||
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
|
||||
</table>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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<InventorySlot> = new MatTableDataSource<InventorySlot>();
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user