fix(ui): add x10 drop option and prevent inventory dropdown closing
This commit is contained in:
Joan
@@ -641,10 +641,11 @@ function InventoryModal({
|
||||
<GameButton
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
playSfx('/audio/sfx/drop.wav');
|
||||
onDropItem(item.item_id, item.id, 1);
|
||||
setActiveDropdown(null);
|
||||
// Keep open
|
||||
}}
|
||||
style={{ width: '100%', justifyContent: 'flex-start' }}
|
||||
>
|
||||
@@ -655,10 +656,11 @@ function InventoryModal({
|
||||
<GameButton
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
playSfx('/audio/sfx/drop.wav');
|
||||
onDropItem(item.item_id, item.id, 5);
|
||||
setActiveDropdown(null);
|
||||
// Keep open
|
||||
}}
|
||||
style={{ width: '100%', justifyContent: 'flex-start' }}
|
||||
>
|
||||
@@ -666,14 +668,31 @@ function InventoryModal({
|
||||
</GameButton>
|
||||
)}
|
||||
|
||||
{item.quantity >= 10 && (
|
||||
<GameButton
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
playSfx('/audio/sfx/drop.wav');
|
||||
onDropItem(item.item_id, item.id, 10);
|
||||
// Keep open
|
||||
}}
|
||||
style={{ width: '100%', justifyContent: 'flex-start' }}
|
||||
>
|
||||
{t('game.drop')} (x10)
|
||||
</GameButton>
|
||||
)}
|
||||
|
||||
{item.quantity > 1 && (
|
||||
<GameButton
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
playSfx('/audio/sfx/drop.wav');
|
||||
onDropItem(item.item_id, item.id, item.quantity);
|
||||
setActiveDropdown(null);
|
||||
setActiveDropdown(null); // Close on drop all
|
||||
}}
|
||||
style={{ width: '100%', justifyContent: 'flex-start' }}
|
||||
>
|
||||
|
||||
@@ -8,28 +8,56 @@
|
||||
/* Ensure padding inside container */
|
||||
}
|
||||
|
||||
/* Ensure expanded corpse container spans full width */
|
||||
/* Padded Image for enemies */
|
||||
.padded-image {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Remove old expanded grid styles */
|
||||
.corpse-container {
|
||||
display: contents;
|
||||
/* Allows the card to be a direct grid child when not expanded */
|
||||
}
|
||||
|
||||
.corpse-container.expanded {
|
||||
/* Loot Overlay Modal */
|
||||
.corpse-loot-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: 1 / -1;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border: 1px solid var(--game-border-color);
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
/* When expanded, the card inside should probably behave differently or just be the header */
|
||||
.corpse-container.expanded .entity-card.grid-card {
|
||||
width: 150px;
|
||||
/* Fixed size for the header icon when expanded */
|
||||
margin: 0 auto;
|
||||
aspect-ratio: 1;
|
||||
.corpse-loot-modal {
|
||||
background: var(--game-bg-app);
|
||||
border: 1px solid var(--game-border-color);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.entity-card.grid-card {
|
||||
@@ -145,15 +173,6 @@
|
||||
border-color: rgba(76, 175, 80, 1);
|
||||
}
|
||||
|
||||
/* Styles for the expanded corpse details (loot list) */
|
||||
.corpse-details {
|
||||
width: 100%;
|
||||
background: var(--game-bg-app);
|
||||
border: 1px solid var(--game-border-color);
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.corpse-details-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -166,6 +185,7 @@
|
||||
.corpse-details-header h4 {
|
||||
margin: 0;
|
||||
color: var(--game-text-highlight);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.corpse-items-list {
|
||||
@@ -173,4 +193,112 @@
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
/* Scrollbar for loot list */
|
||||
.corpse-items-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.corpse-items-list::-webkit-scrollbar-thumb {
|
||||
background: var(--game-border-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.corpse-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--game-border-color);
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.corpse-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: var(--game-text-highlight);
|
||||
}
|
||||
|
||||
.corpse-item.locked {
|
||||
opacity: 0.6;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.corpse-item-info {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.corpse-item-name {
|
||||
font-weight: bold;
|
||||
color: var(--game-text-primary);
|
||||
}
|
||||
|
||||
.corpse-item-qty {
|
||||
font-size: 0.8rem;
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
.corpse-item-tool {
|
||||
font-size: 0.8rem;
|
||||
color: #e53e3e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.corpse-item-tool.has-tool {
|
||||
color: #48bb78;
|
||||
}
|
||||
|
||||
.corpse-item-loot-btn {
|
||||
background: var(--game-btn-bg);
|
||||
border: 1px solid var(--game-btn-border);
|
||||
color: var(--game-btn-text);
|
||||
padding: 0.25rem 0.5rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.corpse-item-loot-btn:hover:not(:disabled) {
|
||||
background: var(--game-btn-bg-hover);
|
||||
}
|
||||
|
||||
.corpse-item-loot-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loot-all-btn {
|
||||
background: #2d3748;
|
||||
color: white;
|
||||
border: 1px solid #4a5568;
|
||||
padding: 0.75rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-top: auto;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.loot-all-btn:hover {
|
||||
background: #4a5568;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #a0aec0;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #fff;
|
||||
}
|
||||
@@ -210,7 +210,6 @@ function LocationView({
|
||||
)}
|
||||
|
||||
<div className={`ground-entities mobile-menu-panel bottom ${mobileMenuOpen === 'bottom' ? 'open' : ''}`}>
|
||||
{/* Enemies */}
|
||||
{/* Enemies */}
|
||||
{location.npcs.filter((npc: any) => npc.type === 'enemy').length > 0 && (
|
||||
<div className="entity-section enemies-section">
|
||||
@@ -222,7 +221,7 @@ function LocationView({
|
||||
<div key={i} className="entity-card enemy-card grid-card"
|
||||
onClick={(e) => handleDropdownClick(e, id)}>
|
||||
{enemy.id && (
|
||||
<div className="entity-image">
|
||||
<div className="entity-image padded-image">
|
||||
<img
|
||||
src={getAssetPath(enemy.image_path || `images/npcs/${(typeof enemy.name === 'string' ? enemy.name : enemy.name?.en || '').toLowerCase().replace(/ /g, '_')}.webp`)}
|
||||
alt={getTranslatedText(enemy.name)}
|
||||
@@ -277,7 +276,7 @@ function LocationView({
|
||||
<h3>{t('location.corpses')}</h3>
|
||||
<div className="entity-list grid-view">
|
||||
{location.corpses.map((corpse: any) => (
|
||||
<div key={corpse.id} className={`corpse-container ${expandedCorpse === String(corpse.id) ? 'expanded' : ''}`}>
|
||||
<div key={corpse.id} className="corpse-container">
|
||||
<div className="entity-card corpse-card grid-card"
|
||||
onClick={(e) => handleDropdownClick(e, `corpse-${corpse.id}`)}
|
||||
>
|
||||
@@ -317,56 +316,6 @@ function LocationView({
|
||||
</GameDropdown>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{expandedCorpse === String(corpse.id) && corpseDetails && corpseDetails.loot_items && (
|
||||
<div className="corpse-details">
|
||||
<div className="corpse-details-header">
|
||||
<h4>{t('location.lootableItems')}</h4>
|
||||
<button
|
||||
className="close-btn"
|
||||
onClick={() => {
|
||||
onSetExpandedCorpse(null)
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<div className="corpse-items-list">
|
||||
{corpseDetails.loot_items.map((item: any) => (
|
||||
<div key={item.index} className={`corpse-item ${!item.can_loot ? 'locked' : ''}`}>
|
||||
<div className="corpse-item-info">
|
||||
<div className="corpse-item-name">
|
||||
{item.emoji} {getTranslatedText(item.item_name)}
|
||||
</div>
|
||||
<div className="corpse-item-qty">
|
||||
{t('common.qty')}: {item.quantity_min}{item.quantity_min !== item.quantity_max ? `-${item.quantity_max}` : ''}
|
||||
</div>
|
||||
{item.required_tool && (
|
||||
<div className={`corpse-item-tool ${item.has_tool ? 'has-tool' : 'needs-tool'}`}>
|
||||
🔧 {getTranslatedText(item.required_tool_name)} {item.has_tool ? '✓' : '✗'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<GameTooltip content={!item.can_loot ? `Requires ${getTranslatedText(item.required_tool_name)}` : 'Loot this item'}>
|
||||
<button
|
||||
className="corpse-item-loot-btn"
|
||||
onClick={() => onLootCorpseItem(String(corpse.id), item.index)}
|
||||
disabled={!item.can_loot}
|
||||
>
|
||||
{item.can_loot ? `📦 ${t('common.loot')}` : '🔒'}
|
||||
</button>
|
||||
</GameTooltip>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
className="loot-all-btn"
|
||||
onClick={() => onLootCorpseItem(String(corpse.id), null)}
|
||||
>
|
||||
📦 {t('common.lootAll')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -417,9 +366,33 @@ function LocationView({
|
||||
<h3>{t('location.itemsOnGround')}</h3>
|
||||
<div className="entity-list grid-view">
|
||||
{location.items.map((item: any, i: number) => {
|
||||
// Use loose equality to handle potential string/number mismatches
|
||||
const isShaking = failedActionItemId == item.id;
|
||||
const itemId = `item-${item.id}-${i}`;
|
||||
|
||||
// Pickup Options Helper
|
||||
const renderPickupOptions = () => {
|
||||
const options = [];
|
||||
options.push({ label: 'x1', qty: 1 });
|
||||
if (item.quantity >= 5) options.push({ label: 'x5', qty: 5 });
|
||||
if (item.quantity >= 10) options.push({ label: 'x10', qty: 10 });
|
||||
if (item.quantity > 1) options.push({ label: t('common.all'), qty: item.quantity });
|
||||
|
||||
return options.map(opt => (
|
||||
<GameButton
|
||||
key={opt.label}
|
||||
variant="success"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation(); // Prevent closing
|
||||
onPickup(item.id, opt.qty);
|
||||
}}
|
||||
style={{ width: '100%', justifyContent: 'flex-start', marginBottom: '2px' }}
|
||||
>
|
||||
🤚 {t('common.pickUp')} ({opt.label})
|
||||
</GameButton>
|
||||
));
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={i} className={`entity-card item-card ${isShaking ? 'shake' : ''} grid-card`}
|
||||
onClick={(e) => handleDropdownClick(e, itemId)}
|
||||
@@ -437,25 +410,6 @@ function LocationView({
|
||||
📦 {t('stats.volume')}: {item.volume}L {item.quantity > 1 && `(Total: ${(item.volume * item.quantity).toFixed(2)}L)`}
|
||||
</div>
|
||||
)}
|
||||
{item.hp_restore && item.hp_restore > 0 && (
|
||||
<div className="item-tooltip-stat">❤️ {t('stats.hpRestore')}: +{item.hp_restore}</div>
|
||||
)}
|
||||
{item.stamina_restore && item.stamina_restore > 0 && (
|
||||
<div className="item-tooltip-stat">⚡ {t('stats.staminaRestore')}: +{item.stamina_restore}</div>
|
||||
)}
|
||||
{item.damage_min !== undefined && item.damage_max !== undefined && (item.damage_min > 0 || item.damage_max > 0) && (
|
||||
<div className="item-tooltip-stat">
|
||||
⚔️ {t('stats.damage')}: {item.damage_min}-{item.damage_max}
|
||||
</div>
|
||||
)}
|
||||
{item.durability !== undefined && item.durability !== null && item.max_durability !== undefined && item.max_durability !== null && (
|
||||
<div className="item-tooltip-stat">
|
||||
🔧 {t('stats.durability')}: {item.durability}/{item.max_durability}
|
||||
</div>
|
||||
)}
|
||||
{item.tier !== undefined && item.tier !== null && item.tier > 0 && (
|
||||
<div className="item-tooltip-stat">⭐ {t('stats.tier')}: {item.tier}</div>
|
||||
)}
|
||||
</div>
|
||||
}>
|
||||
<div className="entity-content-wrapper grid-content">
|
||||
@@ -488,24 +442,9 @@ function LocationView({
|
||||
width="160px"
|
||||
>
|
||||
<div className="game-dropdown-header">{getTranslatedText(item.name)}</div>
|
||||
<GameButton
|
||||
variant="success"
|
||||
size="sm"
|
||||
onClick={() => { onPickup(item.id, 1); setActiveDropdown(null); }}
|
||||
style={{ width: '100%', justifyContent: 'flex-start' }}
|
||||
>
|
||||
🤚 {t('common.pickUp')} (x1)
|
||||
</GameButton>
|
||||
{item.quantity > 1 && (
|
||||
<GameButton
|
||||
variant="success"
|
||||
size="sm"
|
||||
onClick={() => { onPickup(item.id, item.quantity); setActiveDropdown(null); }}
|
||||
style={{ width: '100%', justifyContent: 'flex-start' }}
|
||||
>
|
||||
🤚 {t('common.pickUp')} ({t('common.all')})
|
||||
</GameButton>
|
||||
)}
|
||||
<div className="pickup-options">
|
||||
{renderPickupOptions()}
|
||||
</div>
|
||||
</GameDropdown>
|
||||
)}
|
||||
</div>
|
||||
@@ -555,6 +494,60 @@ function LocationView({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Corpse Loot Overlay Modal */}
|
||||
{expandedCorpse && corpseDetails && corpseDetails.loot_items && (
|
||||
<div className="corpse-loot-overlay">
|
||||
<div className="corpse-loot-modal">
|
||||
<div className="corpse-details-header">
|
||||
<h4>{t('location.lootableItems')}</h4>
|
||||
<button
|
||||
className="close-btn"
|
||||
onClick={() => {
|
||||
onSetExpandedCorpse(null)
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<div className="corpse-items-list">
|
||||
{corpseDetails.loot_items.map((item: any) => (
|
||||
<div key={item.index} className={`corpse-item ${!item.can_loot ? 'locked' : ''}`}>
|
||||
<div className="corpse-item-info">
|
||||
<div className="corpse-item-name">
|
||||
{item.emoji} {getTranslatedText(item.item_name)}
|
||||
</div>
|
||||
<div className="corpse-item-qty">
|
||||
{t('common.qty')}: {item.quantity_min}{item.quantity_min !== item.quantity_max ? `-${item.quantity_max}` : ''}
|
||||
</div>
|
||||
{item.required_tool && (
|
||||
<div className={`corpse-item-tool ${item.has_tool ? 'has-tool' : 'needs-tool'}`}>
|
||||
🔧 {getTranslatedText(item.required_tool_name)} {item.has_tool ? '✓' : '✗'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<GameTooltip content={!item.can_loot ? `Requires ${getTranslatedText(item.required_tool_name)}` : 'Loot this item'}>
|
||||
<button
|
||||
className="corpse-item-loot-btn"
|
||||
onClick={() => onLootCorpseItem(expandedCorpse, item.index)}
|
||||
disabled={!item.can_loot}
|
||||
>
|
||||
{item.can_loot ? `📦 ${t('common.loot')}` : '🔒'}
|
||||
</button>
|
||||
</GameTooltip>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
className="loot-all-btn"
|
||||
onClick={() => onLootCorpseItem(expandedCorpse, null)}
|
||||
>
|
||||
📦 {t('common.lootAll')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{(showCraftingMenu || showRepairMenu) && (
|
||||
<Workbench
|
||||
showCraftingMenu={showCraftingMenu}
|
||||
|
||||
Reference in New Issue
Block a user