bastian/ashen-realms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): translate inventory and item-detail screen copy to English

Browse Source
This commit is contained in:
Bastian Wagner
2026-08-21 21:52:53 +02:00
parent 833074d9fe
commit ca3e072807
4 changed files with 32 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/src/app/features/inventory/inventory-detail-panel.component.html
View File

@@ -1,5 +1,5 @@
<section class="ar-panel detail" aria-label="Gewählter Gegenstand">
<h2 class="ar-panel__title">Gewählter Gegenstand</h2>
<section class="ar-panel detail" aria-label="Selected Item">
<h2 class="ar-panel__title">Selected Item</h2>
@if (item(); as item) {
<article
@@ -46,9 +46,9 @@
<div class="detail__actions">
@if (item.equipped) {
<span class="detail__equipped" data-detail-equipped>Ausgerüstet</span>
<span class="detail__equipped" data-detail-equipped>Equipped</span>
} @else if (!isEquippable()) {
<span class="detail__note">Nicht ausrüstbar</span>
<span class="detail__note">Not equippable</span>
} @else {
<button
type="button"
@@ -57,12 +57,12 @@
[disabled]="busy()"
(click)="onEquip()"
>
Ausrüsten
Equip
</button>
}
</div>
</article>
} @else {
<p class="detail__empty" data-detail-empty>Wähle einen Gegenstand aus deinem Inventar.</p>
<p class="detail__empty" data-detail-empty>Select an item from your inventory.</p>
}
</section>

10
apps/web/src/app/features/inventory/inventory-detail-panel.component.spec.ts
View File

@@ -78,11 +78,11 @@ describe('InventoryDetailPanelComponent', () => {
expect((fixture.nativeElement as HTMLElement).querySelector('[data-detail-empty]')).not.toBeNull();
});
it('shows Ausgerüstet for the currently equipped item, with no equip button', async () => {
it('shows Equipped for the currently equipped item, with no equip button', async () => {
const fixture = await setup({ item: wornSword });
const element = fixture.nativeElement as HTMLElement;
expect(element.querySelector('[data-detail-equipped]')?.textContent).toContain('Ausgerüstet');
expect(element.querySelector('[data-detail-equipped]')?.textContent).toContain('Equipped');
expect(element.querySelector('[data-detail-equip]')).toBeNull();
});
@@ -90,7 +90,7 @@ describe('InventoryDetailPanelComponent', () => {
const fixture = await setup({ item: ashPelt });
const element = fixture.nativeElement as HTMLElement;
expect(element.textContent).toContain('Nicht ausrüstbar');
expect(element.textContent).toContain('Not equippable');
expect(element.querySelector('[data-detail-equip]')).toBeNull();
expect(element.querySelector('[data-detail-equipped]')).toBeNull();
});
@@ -123,10 +123,10 @@ describe('InventoryDetailPanelComponent', () => {
const button = element.querySelector<HTMLButtonElement>('[data-detail-equip]');
expect(button?.disabled).toBe(false);
expect(button?.textContent?.trim()).toBe('Ausrüsten');
expect(button?.textContent?.trim()).toBe('Equip');
});
it('emits equip with the characterItemId when Ausrüsten is clicked', async () => {
it('emits equip with the characterItemId when Equip is clicked', async () => {
const fixture = await setup({ item: banditBlade });
const emitted: string[] = [];
fixture.componentInstance.equip.subscribe((id: string) => emitted.push(id));

38
apps/web/src/app/features/inventory/inventory-page.component.html
View File

@@ -1,14 +1,14 @@
<section class="inventory-page" aria-label="Inventar">
<h1 class="inventory-page__title">Inventar</h1>
<section class="inventory-page" aria-label="Inventory">
<h1 class="inventory-page__title">Inventory</h1>
@if (inventoryStore.loading() && !inventoryStore.inventory()) {
<p class="inventory-page__notice" role="status">Inventar wird geladen…</p>
<p class="inventory-page__notice" role="status">Loading inventory…</p>
} @else if (inventoryStore.inventory(); as inventory) {
<div class="inventory-page__columns">
<!-- ---------- paper doll + derived stats ---------- -->
<div class="inventory-page__rail">
<section class="ar-panel panel--doll" aria-label="Ausrüstung">
<h2 class="ar-panel__title">Ausrüstung</h2>
<section class="ar-panel panel--doll" aria-label="Equipment">
<h2 class="ar-panel__title">Equipment</h2>
@if (inventoryStore.equipment(); as equipment) {
<div class="doll inventory-page__equipment-list">
@@ -20,7 +20,7 @@
}
</div>
<div class="doll__figure" role="img" aria-label="Ausgerüsteter Charakter"></div>
<div class="doll__figure" role="img" aria-label="Equipped Character"></div>
<div class="doll__column">
@for (slot of dollRight; track slot) {
@@ -43,23 +43,23 @@
</section>
@if (inventoryStore.equipment(); as equipment) {
<section class="ar-panel panel--values" aria-label="Werte">
<h2 class="ar-panel__title">Werte</h2>
<section class="ar-panel panel--values" aria-label="Stats">
<h2 class="ar-panel__title">Stats</h2>
<dl class="values" data-inventory-stats>
<div class="values__row">
<dt><span class="values__glyph" aria-hidden="true">❤</span>Leben</dt>
<dt><span class="values__glyph" aria-hidden="true">❤</span>Health</dt>
<dd>{{ equipment.stats.maxHp }}</dd>
</div>
<div class="values__row">
<dt><span class="values__glyph" aria-hidden="true">⚔</span>Angriff</dt>
<dt><span class="values__glyph" aria-hidden="true">⚔</span>Attack</dt>
<dd>{{ equipment.stats.attack }}</dd>
</div>
<div class="values__row">
<dt><span class="values__glyph" aria-hidden="true">†</span>Waffenschaden</dt>
<dt><span class="values__glyph" aria-hidden="true">†</span>Weapon Damage</dt>
<dd>{{ equipment.stats.weaponDamage }}</dd>
</div>
<div class="values__row">
<dt><span class="values__glyph" aria-hidden="true">⛊</span>Rüstung</dt>
<dt><span class="values__glyph" aria-hidden="true">⛊</span>Armor</dt>
<dd>{{ equipment.stats.armor }}</dd>
</div>
</dl>
@@ -68,8 +68,8 @@
</div>
<!-- ---------- the bag ---------- -->
<section class="ar-panel panel--bag" aria-label="Gegenstände">
<h2 class="ar-panel__title">Beutel</h2>
<section class="ar-panel panel--bag" aria-label="Items">
<h2 class="ar-panel__title">Bag</h2>
<div class="bag">
@for (entry of bagCells(); track $index) {
@@ -90,7 +90,7 @@
}
@if (entry.equipped) {
<span class="cell__equipped" data-slot-equipped>
<span class="visually-hidden">Ausgerüstet</span>
<span class="visually-hidden">Equipped</span>
</span>
}
</button>
@@ -101,9 +101,9 @@
</div>
<footer class="bag__footer">
<span class="bag__count">{{ bagUsed() }} / {{ bagCapacity() }} Plätze belegt</span>
<span class="bag__count">{{ bagUsed() }} / {{ bagCapacity() }} slots used</span>
@if (bagUsed() === 0) {
<span class="bag__hint" data-inventory-empty>Noch keine Gegenstände gefunden.</span>
<span class="bag__hint" data-inventory-empty>No items found yet.</span>
}
</footer>
</section>
@@ -122,7 +122,7 @@
@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>
<button type="button" data-inventory-retry (click)="retry()">Retry</button>
</section>
}
</section>
@@ -147,7 +147,7 @@
<span class="visually-hidden">{{ entry.item.name }}</span>
} @else {
<span class="socket__frame socket__frame--empty">
<span class="visually-hidden">Leer</span>
<span class="visually-hidden">Empty</span>
</span>
}
</div>

4
apps/web/src/app/features/inventory/inventory-page.component.spec.ts
View File

@@ -145,14 +145,14 @@ describe('InventoryPageComponent', () => {
expect(inventoryStore.selectItem).toHaveBeenCalledWith('item-blade');
});
it('shows the equipment overview with all seven slots and empty ones as Leer', async () => {
it('shows the equipment overview with all seven slots and empty ones as Empty', async () => {
const { fixture } = await setup();
const text = (fixture.nativeElement as HTMLElement).querySelector('.inventory-page__equipment-list')?.textContent ?? '';
expect(text).toContain('Weapon');
expect(text).toContain('Abgenutztes Kurzschwert');
expect(text).toContain('Head');
expect(text).toContain('Leer');
expect(text).toContain('Empty');
});
it('shows the effective stats summary from the equipment response', async () => {