✨Feature: enhance inventory UI with structured layout and item categorization
This commit is contained in:
Keith Solomon
172
src/App.tsx
172
src/App.tsx
@@ -48,12 +48,72 @@ function getRoomTitle(run: RunState, roomId?: string) {
|
||||
);
|
||||
}
|
||||
|
||||
function getDefinitionName(definitionId: string) {
|
||||
const item =
|
||||
sampleContentPack.items.find((candidate) => candidate.id === definitionId) ??
|
||||
sampleContentPack.weapons.find((candidate) => candidate.id === definitionId) ??
|
||||
sampleContentPack.armour.find((candidate) => candidate.id === definitionId) ??
|
||||
sampleContentPack.scrolls.find((candidate) => candidate.id === definitionId) ??
|
||||
sampleContentPack.potions.find((candidate) => candidate.id === definitionId);
|
||||
|
||||
return item?.name ?? definitionId;
|
||||
}
|
||||
|
||||
function formatInventoryEntry(definitionId: string, quantity: number) {
|
||||
const name = getDefinitionName(definitionId);
|
||||
return quantity > 1 ? `${quantity}x ${name}` : name;
|
||||
}
|
||||
|
||||
function getTreasureItemIds() {
|
||||
return new Set(
|
||||
sampleContentPack.items
|
||||
.filter((item) => item.itemType === "treasure")
|
||||
.map((item) => item.id),
|
||||
);
|
||||
}
|
||||
|
||||
function getSupportItemIds() {
|
||||
return new Set(
|
||||
sampleContentPack.items
|
||||
.filter((item) => item.itemType !== "treasure")
|
||||
.map((item) => item.id),
|
||||
);
|
||||
}
|
||||
|
||||
function getConsumableItemIds() {
|
||||
return new Set(
|
||||
sampleContentPack.items
|
||||
.filter((item) => item.consumable || item.itemType === "ration")
|
||||
.map((item) => item.id),
|
||||
);
|
||||
}
|
||||
|
||||
const treasureItemIds = getTreasureItemIds();
|
||||
const supportItemIds = getSupportItemIds();
|
||||
const consumableItemIds = getConsumableItemIds();
|
||||
|
||||
function App() {
|
||||
const [run, setRun] = React.useState<RunState>(() => createDemoRun());
|
||||
const currentLevel = run.dungeon.levels[run.currentLevel];
|
||||
const currentRoom = run.currentRoomId ? currentLevel?.rooms[run.currentRoomId] : undefined;
|
||||
const availableMoves = getAvailableMoves(run);
|
||||
const combatReadyEncounter = isCurrentRoomCombatReady(run);
|
||||
const carriedTreasure = run.adventurerSnapshot.inventory.carried.filter((entry) =>
|
||||
treasureItemIds.has(entry.definitionId),
|
||||
);
|
||||
const carriedConsumables = run.adventurerSnapshot.inventory.carried.filter(
|
||||
(entry) =>
|
||||
consumableItemIds.has(entry.definitionId) ||
|
||||
entry.definitionId.startsWith("potion.") ||
|
||||
entry.definitionId.startsWith("scroll."),
|
||||
);
|
||||
const carriedGear = run.adventurerSnapshot.inventory.carried.filter(
|
||||
(entry) =>
|
||||
supportItemIds.has(entry.definitionId) &&
|
||||
!consumableItemIds.has(entry.definitionId),
|
||||
);
|
||||
const equippedItems = run.adventurerSnapshot.inventory.equipped;
|
||||
const latestLoot = run.lootedItems.slice(-4).reverse();
|
||||
|
||||
const handleReset = () => {
|
||||
setRun(createDemoRun());
|
||||
@@ -176,23 +236,103 @@ function App() {
|
||||
Run rewards: {run.xpGained} XP, {run.goldGained} gold,{" "}
|
||||
{run.defeatedCreatureIds.length} foes defeated.
|
||||
</p>
|
||||
<p className="supporting-text">
|
||||
Carried gold: {run.adventurerSnapshot.inventory.currency.gold}. Looted items:{" "}
|
||||
{run.lootedItems.length === 0
|
||||
? "none yet"
|
||||
: run.lootedItems
|
||||
.map((entry) => {
|
||||
const item = sampleContentPack.items.find(
|
||||
(candidate) => candidate.id === entry.definitionId,
|
||||
);
|
||||
</article>
|
||||
|
||||
return entry.quantity > 1
|
||||
? `${entry.quantity}x ${item?.name ?? entry.definitionId}`
|
||||
: item?.name ?? entry.definitionId;
|
||||
})
|
||||
.join(", ")}
|
||||
.
|
||||
</p>
|
||||
<article className="panel panel-inventory">
|
||||
<div className="panel-header">
|
||||
<h2>Inventory</h2>
|
||||
<span>{run.adventurerSnapshot.inventory.carried.length} carried entries</span>
|
||||
</div>
|
||||
<div className="inventory-summary">
|
||||
<div className="inventory-badge">
|
||||
<span>Gold</span>
|
||||
<strong>{run.adventurerSnapshot.inventory.currency.gold}</strong>
|
||||
</div>
|
||||
<div className="inventory-badge">
|
||||
<span>Rations</span>
|
||||
<strong>{run.adventurerSnapshot.inventory.rationCount}</strong>
|
||||
</div>
|
||||
<div className="inventory-badge">
|
||||
<span>Treasure</span>
|
||||
<strong>{carriedTreasure.length}</strong>
|
||||
</div>
|
||||
<div className="inventory-badge">
|
||||
<span>Latest Loot</span>
|
||||
<strong>{run.lootedItems.reduce((total, entry) => total + entry.quantity, 0)}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inventory-grid">
|
||||
<section className="inventory-section">
|
||||
<span className="inventory-label">Equipped</span>
|
||||
<div className="inventory-list">
|
||||
{equippedItems.map((entry) => (
|
||||
<article key={`equipped-${entry.definitionId}`} className="inventory-card inventory-card-equipped">
|
||||
<strong>{formatInventoryEntry(entry.definitionId, entry.quantity)}</strong>
|
||||
<span>Ready for use</span>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section className="inventory-section">
|
||||
<span className="inventory-label">Consumables</span>
|
||||
<div className="inventory-list">
|
||||
{carriedConsumables.length === 0 ? (
|
||||
<p className="supporting-text">No consumables carried.</p>
|
||||
) : (
|
||||
carriedConsumables.map((entry) => (
|
||||
<article key={`consumable-${entry.definitionId}`} className="inventory-card">
|
||||
<strong>{formatInventoryEntry(entry.definitionId, entry.quantity)}</strong>
|
||||
<span>Combat or run utility</span>
|
||||
</article>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<section className="inventory-section">
|
||||
<span className="inventory-label">Pack Gear</span>
|
||||
<div className="inventory-list">
|
||||
{carriedGear.length === 0 ? (
|
||||
<p className="supporting-text">No general gear carried.</p>
|
||||
) : (
|
||||
carriedGear.map((entry) => (
|
||||
<article key={`gear-${entry.definitionId}`} className="inventory-card">
|
||||
<strong>{formatInventoryEntry(entry.definitionId, entry.quantity)}</strong>
|
||||
<span>Travel and exploration kit</span>
|
||||
</article>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<section className="inventory-section">
|
||||
<span className="inventory-label">Treasure Stash</span>
|
||||
<div className="inventory-list">
|
||||
{carriedTreasure.length === 0 ? (
|
||||
<p className="supporting-text">No treasure recovered yet.</p>
|
||||
) : (
|
||||
carriedTreasure.map((entry) => (
|
||||
<article key={`treasure-${entry.definitionId}`} className="inventory-card inventory-card-treasure">
|
||||
<strong>{formatInventoryEntry(entry.definitionId, entry.quantity)}</strong>
|
||||
<span>Sellable dungeon spoils</span>
|
||||
</article>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div className="loot-ribbon">
|
||||
<span className="inventory-label">Recent Spoils</span>
|
||||
{latestLoot.length === 0 ? (
|
||||
<p className="supporting-text">Win a fight to populate the loot ribbon.</p>
|
||||
) : (
|
||||
<div className="loot-ribbon-list">
|
||||
{latestLoot.map((entry) => (
|
||||
<article key={`recent-${entry.definitionId}`} className="loot-pill">
|
||||
<strong>{formatInventoryEntry(entry.definitionId, entry.quantity)}</strong>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="panel">
|
||||
|
||||
Reference in New Issue
Block a user