MayaTheShy/remoteturtle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Refactor inventory display to use a grid layout with item icons and improved tooltips

Browse Source
This commit is contained in:
MayaTheShy
2026-02-19 22:40:00 -05:00
parent fb53056e85
commit a74802afee
1 changed files with 37 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
client/src/components/ControlPanel.jsx
View File

@@ -235,16 +235,43 @@ function TurtleDetails({ turtle }) {
{turtle.inventory && turtle.inventory.length > 0 && ( {turtle.inventory && turtle.inventory.length > 0 && (
<div className="detail-section"> <div className="detail-section">
<h3>Inventory ({turtle.inventoryCount || turtle.inventory.length}/16)</h3> <h3>Inventory ({turtle.inventoryCount || turtle.inventory.length}/16)</h3>
<div className="inventory-list"> <div className="inventory-grid">
{turtle.inventory.map((item, index) => ( {Array.from({ length: 16 }, (_, slotIndex) => {
<div key={index} className="inventory-item"> const item = turtle.inventory[slotIndex];
<span className="item-icon">📦</span> return (
<span className="item-name"> <div
{item.name.replace('minecraft:', '').replace(/_/g, ' ')} key={slotIndex}
</span> className={`inventory-slot ${item ? 'filled' : 'empty'}`}
<span className="item-count">×{item.count}</span> title={item ? `${item.name.replace('minecraft:', '').replace(/_/g, ' ')} (${item.count})` : 'Empty'}
</div> >
))} {item ? (
<>
<div className="slot-item">
<span className="item-icon">
{item.name.includes('diamond') ? '💎' :
item.name.includes('gold') ? '<27>' :
item.name.includes('iron') ? '⚪' :
item.name.includes('coal') ? '⚫' :
item.name.includes('emerald') ? '🟢' :
item.name.includes('redstone') ? '🔴' :
item.name.includes('lapis') ? '🔵' :
item.name.includes('stone') ? '🗿' :
item.name.includes('dirt') ? '🟤' :
item.name.includes('wood') || item.name.includes('log') ? '🪵' :
item.name.includes('cobble') ? '🪨' : '<27>📦'}
</span>
<span className="item-count">{item.count}</span>
</div>
<div className="slot-name">
{item.name.replace('minecraft:', '').replace(/_/g, ' ').split(' ').slice(0, 2).join(' ')}
</div>
</>
) : (
<span className="slot-number">{slotIndex + 1}</span>
)}
</div>
);
})}
</div> </div>
</div> </div>
)} )}