feat(web): add inventory page with grid, detail panel, and equipment overview
This commit is contained in:
Bastian Wagner
@@ -0,0 +1,65 @@
|
|||||||
|
<!-- apps/web/src/app/features/inventory/inventory-page.component.html -->
|
||||||
|
<section class="inventory-page" aria-label="Inventar">
|
||||||
|
@if (inventoryStore.loading() && !inventoryStore.inventory()) {
|
||||||
|
<p class="inventory-page__notice" role="status">Inventar wird geladen…</p>
|
||||||
|
} @else if (inventoryStore.inventory(); as inventory) {
|
||||||
|
<section class="inventory-page__grid" aria-label="Gegenstände">
|
||||||
|
@for (entry of inventory.items; track entry.id) {
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="inventory-page__slot"
|
||||||
|
[class.inventory-page__slot--selected]="inventoryStore.selectedItemId() === entry.id"
|
||||||
|
[attr.aria-pressed]="inventoryStore.selectedItemId() === entry.id"
|
||||||
|
(click)="selectItem(entry.id)"
|
||||||
|
>
|
||||||
|
<app-item-card [item]="entry.item" [quantity]="entry.quantity" />
|
||||||
|
@if (entry.equipped) {
|
||||||
|
<span class="inventory-page__equipped-badge" data-slot-equipped>Ausgerüstet</span>
|
||||||
|
}
|
||||||
|
</button>
|
||||||
|
} @empty {
|
||||||
|
<p class="inventory-page__empty" data-inventory-empty>Noch keine Gegenstände gefunden.</p>
|
||||||
|
}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside class="inventory-page__side" aria-label="Details und Ausrüstung">
|
||||||
|
<app-inventory-detail-panel
|
||||||
|
[item]="inventoryStore.selectedItem()"
|
||||||
|
[equippedItemInSlot]="equippedItemInSelectedSlot()"
|
||||||
|
[characterLevel]="characterLevel()"
|
||||||
|
[busy]="inventoryStore.equipping()"
|
||||||
|
(equip)="equipSelected($event)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
@if (inventoryStore.equipment(); as equipment) {
|
||||||
|
<section class="inventory-page__equipment" aria-label="Ausrüstung">
|
||||||
|
<h3>Ausrüstung</h3>
|
||||||
|
<ul class="inventory-page__equipment-list">
|
||||||
|
@for (slot of slotOrder; track slot) {
|
||||||
|
<li>
|
||||||
|
<span class="inventory-page__equipment-slot-label">{{ slotLabels[slot] }}</span>
|
||||||
|
<span class="inventory-page__equipment-slot-value">
|
||||||
|
{{ equipment.slots[slot]?.item?.name ?? 'Leer' }}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<dl class="inventory-page__stats" data-inventory-stats>
|
||||||
|
<div><dt>Leben</dt><dd>{{ equipment.stats.maxHp }}</dd></div>
|
||||||
|
<div><dt>Angriff</dt><dd>{{ equipment.stats.attack }}</dd></div>
|
||||||
|
<div><dt>Waffenschaden</dt><dd>{{ equipment.stats.weaponDamage }}</dd></div>
|
||||||
|
<div><dt>Rüstung</dt><dd>{{ equipment.stats.armor }}</dd></div>
|
||||||
|
</dl>
|
||||||
|
</section>
|
||||||
|
}
|
||||||
|
</aside>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (inventoryStore.error(); as error) {
|
||||||
|
<section class="inventory-page__notice inventory-page__notice--error" role="alert">
|
||||||
|
<p>{{ error }}</p>
|
||||||
|
<button type="button" data-inventory-retry (click)="retry()">Erneut versuchen</button>
|
||||||
|
</section>
|
||||||
|
}
|
||||||
|
</section>
|
||||||
@@ -0,0 +1,133 @@
|
|||||||
|
// apps/web/src/app/features/inventory/inventory-page.component.scss
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 20rem;
|
||||||
|
gap: var(--ar-space-5);
|
||||||
|
align-items: start;
|
||||||
|
padding: var(--ar-space-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
|
||||||
|
gap: var(--ar-space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__slot {
|
||||||
|
position: relative;
|
||||||
|
padding: var(--ar-space-2);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: var(--ar-radius-sm);
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__slot--selected {
|
||||||
|
border-color: var(--ar-border-highlight);
|
||||||
|
background: rgb(155 122 66 / 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__equipped-badge {
|
||||||
|
position: absolute;
|
||||||
|
inset-block-start: 0.1rem;
|
||||||
|
inset-inline-start: 50%;
|
||||||
|
translate: -50% 0;
|
||||||
|
padding: 0.05rem 0.4rem;
|
||||||
|
border: 1px solid var(--ar-border-highlight);
|
||||||
|
border-radius: var(--ar-radius-sm);
|
||||||
|
color: var(--ar-gold);
|
||||||
|
background: rgb(9 11 13 / 0.9);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__empty {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
padding: var(--ar-space-4);
|
||||||
|
color: var(--ar-text-muted);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__side {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--ar-space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__equipment {
|
||||||
|
padding: var(--ar-space-4);
|
||||||
|
border: 1px solid var(--ar-border);
|
||||||
|
border-radius: var(--ar-radius-sm);
|
||||||
|
background: var(--ar-panel);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__equipment h3 {
|
||||||
|
margin: 0 0 var(--ar-space-2);
|
||||||
|
color: var(--ar-gold);
|
||||||
|
font-family: Georgia, 'Times New Roman', serif;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__equipment-list {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--ar-space-1);
|
||||||
|
margin: 0 0 var(--ar-space-3);
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__equipment-list li {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-block: var(--ar-space-1);
|
||||||
|
border-block-end: 1px solid rgb(85 74 57 / 0.4);
|
||||||
|
font-size: var(--ar-font-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__equipment-slot-label {
|
||||||
|
color: var(--ar-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__stats {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--ar-space-1);
|
||||||
|
margin: 0;
|
||||||
|
padding-block-start: var(--ar-space-2);
|
||||||
|
border-block-start: 1px solid rgb(155 122 66 / 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__stats div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__stats dt {
|
||||||
|
color: var(--ar-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__stats dd {
|
||||||
|
margin: 0;
|
||||||
|
font-family: Georgia, 'Times New Roman', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__notice {
|
||||||
|
padding: var(--ar-space-4);
|
||||||
|
color: var(--ar-text-muted);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-page__notice--error {
|
||||||
|
color: var(--ar-danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width < 960px) {
|
||||||
|
.inventory-page {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,143 @@
|
|||||||
|
import { signal } from '@angular/core';
|
||||||
|
import { TestBed } from '@angular/core/testing';
|
||||||
|
import { vi } from 'vitest';
|
||||||
|
import type { CharacterResponse, EquipmentResponse, InventoryResponse } from '../../core/api/game-api.models';
|
||||||
|
import { WorldStore } from '../world/world.store';
|
||||||
|
import { InventoryPageComponent } from './inventory-page.component';
|
||||||
|
import { InventoryStore } from './inventory.store';
|
||||||
|
|
||||||
|
const inventory: InventoryResponse = {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
id: 'item-sword',
|
||||||
|
quantity: 1,
|
||||||
|
equipped: true,
|
||||||
|
item: {
|
||||||
|
key: 'worn-short-sword',
|
||||||
|
name: 'Abgenutztes Kurzschwert',
|
||||||
|
rarity: 'COMMON',
|
||||||
|
equipmentSlot: 'WEAPON',
|
||||||
|
requiredLevel: 1,
|
||||||
|
weaponDamage: 8,
|
||||||
|
bonusAttack: 0,
|
||||||
|
bonusHp: 0,
|
||||||
|
bonusArmor: 0,
|
||||||
|
iconPath: '/images/items/worn-short-sword.png',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'item-blade',
|
||||||
|
quantity: 1,
|
||||||
|
equipped: false,
|
||||||
|
item: {
|
||||||
|
key: 'bandit-blade',
|
||||||
|
name: 'Räuberklinge',
|
||||||
|
rarity: 'COMMON',
|
||||||
|
equipmentSlot: 'WEAPON',
|
||||||
|
requiredLevel: 1,
|
||||||
|
weaponDamage: 11,
|
||||||
|
bonusAttack: 1,
|
||||||
|
bonusHp: 0,
|
||||||
|
bonusArmor: 0,
|
||||||
|
iconPath: '/images/items/bandit-blade.png',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const equipment: EquipmentResponse = {
|
||||||
|
slots: {
|
||||||
|
WEAPON: { characterItemId: 'item-sword', item: { key: 'worn-short-sword', name: 'Abgenutztes Kurzschwert', rarity: 'COMMON', iconPath: '/images/items/worn-short-sword.png' } },
|
||||||
|
HEAD: null,
|
||||||
|
CHEST: null,
|
||||||
|
HANDS: null,
|
||||||
|
LEGS: null,
|
||||||
|
FEET: null,
|
||||||
|
AMULET: null,
|
||||||
|
},
|
||||||
|
stats: { maxHp: 100, attack: 6, weaponDamage: 8, armor: 0 },
|
||||||
|
};
|
||||||
|
|
||||||
|
const character: CharacterResponse = {
|
||||||
|
id: 'character-1',
|
||||||
|
name: 'Aric Duskwalker',
|
||||||
|
level: 1,
|
||||||
|
experience: 0,
|
||||||
|
silver: 0,
|
||||||
|
currentHp: 100,
|
||||||
|
maxHp: 100,
|
||||||
|
attack: 6,
|
||||||
|
currentLocation: { id: 'loc-1', key: 'south-gate', name: 'Südtor' },
|
||||||
|
};
|
||||||
|
|
||||||
|
async function setup() {
|
||||||
|
const inventoryStore = {
|
||||||
|
inventory: signal(inventory),
|
||||||
|
equipment: signal(equipment),
|
||||||
|
selectedItemId: signal<string | null>(null),
|
||||||
|
loading: signal(false),
|
||||||
|
equipping: signal(false),
|
||||||
|
error: signal<string | null>(null),
|
||||||
|
load: vi.fn(() => Promise.resolve()),
|
||||||
|
selectItem: vi.fn(),
|
||||||
|
selectedItem: vi.fn(() => null),
|
||||||
|
equip: vi.fn(() => Promise.resolve()),
|
||||||
|
};
|
||||||
|
const worldStore = { character: signal(character) };
|
||||||
|
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [InventoryPageComponent],
|
||||||
|
providers: [
|
||||||
|
{ provide: InventoryStore, useValue: inventoryStore },
|
||||||
|
{ provide: WorldStore, useValue: worldStore },
|
||||||
|
],
|
||||||
|
}).compileComponents();
|
||||||
|
|
||||||
|
const fixture = TestBed.createComponent(InventoryPageComponent);
|
||||||
|
fixture.detectChanges();
|
||||||
|
return { fixture, inventoryStore };
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('InventoryPageComponent', () => {
|
||||||
|
it('loads the inventory on init', async () => {
|
||||||
|
const { inventoryStore } = await setup();
|
||||||
|
expect(inventoryStore.load).toHaveBeenCalledOnce();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders one tile per owned item', async () => {
|
||||||
|
const { fixture } = await setup();
|
||||||
|
const tiles = (fixture.nativeElement as HTMLElement).querySelectorAll('.inventory-page__slot');
|
||||||
|
expect(tiles.length).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('marks the equipped item with a badge', async () => {
|
||||||
|
const { fixture } = await setup();
|
||||||
|
expect((fixture.nativeElement as HTMLElement).querySelector('[data-slot-equipped]')).not.toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('selects an item when its tile is clicked', async () => {
|
||||||
|
const { fixture, inventoryStore } = await setup();
|
||||||
|
(fixture.nativeElement as HTMLElement).querySelectorAll<HTMLButtonElement>('.inventory-page__slot')[1].click();
|
||||||
|
|
||||||
|
expect(inventoryStore.selectItem).toHaveBeenCalledWith('item-blade');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows the equipment overview with all seven slots and empty ones as Leer', async () => {
|
||||||
|
const { fixture } = await setup();
|
||||||
|
const text = (fixture.nativeElement as HTMLElement).querySelector('.inventory-page__equipment-list')?.textContent ?? '';
|
||||||
|
|
||||||
|
expect(text).toContain('Waffe');
|
||||||
|
expect(text).toContain('Abgenutztes Kurzschwert');
|
||||||
|
expect(text).toContain('Kopf');
|
||||||
|
expect(text).toContain('Leer');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows the effective stats summary from the equipment response', async () => {
|
||||||
|
const { fixture } = await setup();
|
||||||
|
const text = (fixture.nativeElement as HTMLElement).querySelector('[data-inventory-stats]')?.textContent ?? '';
|
||||||
|
|
||||||
|
expect(text).toContain('100');
|
||||||
|
expect(text).toContain('6');
|
||||||
|
expect(text).toContain('8');
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
import { Component, OnInit, computed, inject } from '@angular/core';
|
||||||
|
import type { EquipmentSlot } from '../../core/api/game-api.models';
|
||||||
|
import { ItemCardComponent } from '../../shared/item-card/item-card.component';
|
||||||
|
import { WorldStore } from '../world/world.store';
|
||||||
|
import { InventoryDetailPanelComponent } from './inventory-detail-panel.component';
|
||||||
|
import { InventoryStore } from './inventory.store';
|
||||||
|
|
||||||
|
const SLOT_ORDER: readonly EquipmentSlot[] = [
|
||||||
|
'WEAPON',
|
||||||
|
'HEAD',
|
||||||
|
'CHEST',
|
||||||
|
'HANDS',
|
||||||
|
'LEGS',
|
||||||
|
'FEET',
|
||||||
|
'AMULET',
|
||||||
|
];
|
||||||
|
|
||||||
|
const SLOT_LABELS: Readonly<Record<EquipmentSlot, string>> = {
|
||||||
|
WEAPON: 'Waffe',
|
||||||
|
HEAD: 'Kopf',
|
||||||
|
CHEST: 'Brust',
|
||||||
|
HANDS: 'Handschuhe',
|
||||||
|
LEGS: 'Beine',
|
||||||
|
FEET: 'Stiefel',
|
||||||
|
AMULET: 'Amulett',
|
||||||
|
};
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-inventory-page',
|
||||||
|
imports: [ItemCardComponent, InventoryDetailPanelComponent],
|
||||||
|
templateUrl: './inventory-page.component.html',
|
||||||
|
styleUrl: './inventory-page.component.scss',
|
||||||
|
})
|
||||||
|
export class InventoryPageComponent implements OnInit {
|
||||||
|
protected readonly inventoryStore = inject(InventoryStore);
|
||||||
|
private readonly worldStore = inject(WorldStore);
|
||||||
|
protected readonly slotOrder = SLOT_ORDER;
|
||||||
|
protected readonly slotLabels = SLOT_LABELS;
|
||||||
|
|
||||||
|
protected readonly characterLevel = computed(() => this.worldStore.character()?.level ?? 1);
|
||||||
|
|
||||||
|
protected readonly equippedItemInSelectedSlot = computed(() => {
|
||||||
|
const selected = this.inventoryStore.selectedItem();
|
||||||
|
if (!selected?.item.equipmentSlot) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
this.inventoryStore.inventory()?.items.find(
|
||||||
|
(item) => item.equipped && item.item.equipmentSlot === selected.item.equipmentSlot,
|
||||||
|
) ?? null
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
void this.inventoryStore.load();
|
||||||
|
}
|
||||||
|
|
||||||
|
protected selectItem(itemId: string): void {
|
||||||
|
this.inventoryStore.selectItem(itemId);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected async equipSelected(characterItemId: string): Promise<void> {
|
||||||
|
await this.inventoryStore.equip(characterItemId);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected retry(): void {
|
||||||
|
void this.inventoryStore.load();
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user