fix(ui): add x10 drop option and prevent inventory dropdown closing

pwa/src/components/game/InventoryModal.tsx

@@ -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' }}
                             >

pwa/src/components/game/LocationView.css

@@ -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;
+    justify-content: center;
-    grid-column: 1 / -1;
+    align-items: center;
-    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(2px);
-    border: 1px solid var(--game-border-color);
-    padding: 1rem;
-    gap: 1rem;
 }
 
-/* When expanded, the card inside should probably behave differently or just be the header */
+.corpse-loot-modal {
-.corpse-container.expanded .entity-card.grid-card {
+    background: var(--game-bg-app);
-    width: 150px;
+    border: 1px solid var(--game-border-color);
-    /* Fixed size for the header icon when expanded */
+    width: 90%;
-    margin: 0 auto;
+    max-width: 500px;
-    aspect-ratio: 1;
+    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;
 }

pwa/src/components/game/LocationView.tsx

@@ -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
+                        <div className="pickup-options">
-                          variant="success"
+                          {renderPickupOptions()}
-                          size="sm"
+                        </div>
-                          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>
-                        )}
                       </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}