sebastian/ConceptCreator
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

inventory-items #42

Merged
sebastian merged 9 commits from inventory-items into main 2024-04-20 11:39:35 +02:00
Conversation 0 Commits 9 Files Changed 41 +201 -6
9 changed files with 201 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f70328e332 - Show all commits

8
src/app/app.module.ts
View File

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

9
src/app/editor/inventory-item-editor/inventory-item-editor.component.html
View File

@ -1 +1,8 @@
<p>inventory-item-editor works!</p>
<mat-card>
<mat-card-header>
<mat-card-title>Item Characteristics</mat-card-title>
</mat-card-header>
<mat-card-content>
<app-item-property-editor [item]="item"></app-item-property-editor>
</mat-card-content>
</mat-card>

3
src/app/editor/inventory-item-editor/inventory-item-editor.component.ts
View File

@ -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'
})

64
src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.html Normal file
View File

@ -0,0 +1,64 @@
<table mat-table [dataSource]="datasource" class="mat-elevation-z8" multiTemplateDataRows>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let itemProperty">
<span *ngIf="editedItemProperty !== itemProperty"> {{itemProperty.propertyName}}</span>
</td>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
<div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<p>{{element.propertyDescription}}</p>
</div>
</td>
</ng-container>
<ng-container matColumnDef="property">
<th mat-header-cell *matHeaderCellDef>Characteristic</th>
<td mat-cell *matCellDef="let itemProperty">
<p>{{itemProperty.property}}</p>
</td>
</ng-container>
<!--<ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let state">
<button mat-icon-button class="icon-btn-primary" *ngIf="editedElement !== state" (click)="editState(state)" [disabled]="editedElement !== null"><mat-icon>edit</mat-icon></button>
<button mat-icon-button class="icon-btn-primary" (click)="finishEditing()" *ngIf="editedElement === state"><mat-icon>done</mat-icon></button>
</td>
</ng-container>
<ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let state">
<button mat-icon-button color="warn" (click)="deleteState(state)"><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><mat-icon>add</mat-icon></button>
</th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
@if (expandedElement === element) {
<mat-icon>keyboard_arrow_up</mat-icon>
} @else {
<mat-icon>keyboard_arrow_down</mat-icon>
}
</button>
</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]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

57
src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.scss Normal file
View File

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

23
src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.spec.ts Normal file
View File

@ -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<ItemPropertyEditorComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ItemPropertyEditorComponent]
})
.compileComponents();
fixture = TestBed.createComponent(ItemPropertyEditorComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

33
src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.ts Normal file
View File

@ -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<ItemProperty> = new MatTableDataSource<ItemProperty>();
ngOnInit() {
this.datasource.data = this.item!.itemProperties
}
}

6
src/app/project/game-model/inventory/Item.ts
View File

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

4
src/app/project/game-model/inventory/ItemProperty.ts
View File

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