SawatoMosswartsEnjoyersClub/MosswartOverlord
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(frontend): inventory item detail panel

Browse source 
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Erik 2026-07-15 06:26:55 +02:00
parent 4735aa72e9
commit 559fd6596a
1 changed files with 34 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/components/inventory/DetailPanel.tsx
View file

@ -1,3 +1,35 @@
// Stub — replaced in Task 6
import React from 'react';
import type { InvItem } from './types';
export function DetailPanel(_: { item: InvItem; onClose: () => void }) { return null; }
function Row({ k, v }: { k: string; v: React.ReactNode }) {
return <div className="inv-kv"><span>{k}</span><b>{v ?? '—'}</b></div>;
}
export function DetailPanel({ item, onClose }: { item: InvItem; onClose: () => void }) {
return (
<div className="inv-detail">
<span className="inv-closex" onClick={onClose}>×</span>
<h3>{item.name}</h3>
<div className="inv-detail-sub">
{item.slot_name ?? item.object_class_name ?? ''} · {item.is_equipped ? '⚔ Equipped' : '📦 Inventory'}
{item.is_rare && ' · ★ Rare'}
</div>
<Row k="Character" v={item.character_name} />
<Row k="Value" v={item.value?.toLocaleString()} />
<Row k="Burden" v={item.burden} />
<Row k="Wield req" v={item.wield_level ? `Level ${item.wield_level}` : '—'} />
<Row k="Workmanship" v={item.workmanship ?? '—'} />
{item.armor_level != null && item.armor_level > 0 && <Row k="Armor" v={item.armor_level} />}
{item.max_damage != null && item.max_damage > 0 && <Row k="Max damage" v={item.max_damage} />}
{item.condition_percent != null && <Row k="Condition" v={`${item.condition_percent}%`} />}
{item.item_set_name && <Row k="Set" v={item.item_set_name} />}
{(item.is_bonded || item.is_attuned) && <Row k="Binding" v={[item.is_bonded && 'Bonded', item.is_attuned && 'Attuned'].filter(Boolean).join(', ')} />}
<hr />
<div className="inv-sphead">Spells ({item.spell_names?.length ?? 0})</div>
{(item.spell_names ?? []).map((s, i) => (
<div className={`inv-sp${/legendary/i.test(s) ? ' inv-leg' : ''}`} key={i}>{s}</div>
))}
<div className="inv-hint">↑/↓ next item · Esc close</div>
</div>
);
}