Skip to content

🎨 Palette: Add visual resource icons to UnitPanel cargo inventory #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
b0x1 merged 1 commit into from
Apr 21, 2026
Merged

🎨 Palette: Add visual resource icons to UnitPanel cargo inventory #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,7 @@
## 2026-04-13 - [Keyboard Accessibility in Interactive Modals]
**Learning:** Many game UI elements rely solely on hover/click states. Adding `focus-visible:ring-2` and `aria-label` to selection buttons ensures that keyboard-only users can navigate and understand the interface.
**Action:** Always include focus indicators and descriptive ARIA labels for icon-heavy or list-based interactive elements.

## 2026-04-20 - [Visual Context in Cargo Inventories]
**Learning:** Text-only inventory lists are slow to parse mentally. Adding 16px resource icons provides immediate visual recognition of cargo contents, aligning with the "recognition over recall" usability heuristic.
**Action:** Use `ResourceIcon` in all inventory contexts (Units, Settlements, Trade) to ensure consistent visual language for goods.
8 changes: 6 additions & 2 deletions src/ui/UnitPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
import { useUIStore } from '../game/state/uiStore';
import { UnitType } from '../game/entities/types';
import { UnitSelector } from './UnitPanel/components/UnitSelector';
import { ResourceIcon } from './ResourceIcon';
import { distance } from '../game/entities/Position';
import type { Unit } from '../game/entities/Unit';

Expand Down Expand Up @@ -145,8 +146,11 @@ export const UnitPanel: React.FC = () => {
) : (
<ul className="space-y-1">
{Array.from(unit.cargo.entries()).map(([good, amount]) => (
<li key={good} className="flex justify-between items-center border-b border-white/5 pb-1 last:border-0">
<span className="capitalize text-slate-300 font-medium">{good.toLowerCase()}</span>
<li key={good} className="flex justify-between items-center border-b border-white/5 pb-1 last:border-0 gap-2">
<div className="flex items-center gap-2 min-w-0">
<ResourceIcon good={good} size={16} className="shrink-0" />
<span className="capitalize text-slate-300 font-medium truncate">{good.replace('_', ' ').toLowerCase()}</span>
</div>
<span className="font-mono font-bold text-blue-300">{amount}</span>
</li>
))}
Expand Down
Loading