Fix drag-and-drop dataTransfer errors and add double-click backup

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

webserver.py

@@ -2511,18 +2511,55 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                 console.log(`Container ${{id}}: exists=${{!!element}}`);
             }});
             
-            // Test if drag events are working
+            // Test move functions directly
             if (petCards.length > 0) {{
+                console.log('Testing move functions...');
                 const testCard = petCards[0];
-                console.log('Testing drag events on first card...');
+                const petId = testCard.dataset.petId;
+                const isCurrentlyActive = currentTeam[petId];
                 
-                // Simulate drag start
+                console.log(`Test pet ${{petId}} is currently: ${{isCurrentlyActive ? 'active' : 'storage'}}`);
-                const dragEvent = new DragEvent('dragstart', {{ bubbles: true }});
+                
-                testCard.dispatchEvent(dragEvent);
+                // Test moving to opposite state
-                console.log('Drag event dispatched');
+                if (isCurrentlyActive) {{
+                    console.log('Testing move to storage...');
+                    movePetToStorage(petId);
+                }} else {{
+                    console.log('Testing move to active...');
+                    movePetToActive(petId);
+                }}
             }}
         }}
         
+        // Add click-to-move as backup for drag issues
+        function addClickToMoveBackup() {{
+            document.querySelectorAll('.pet-card').forEach(card => {{
+                // Add double-click handler
+                card.addEventListener('dblclick', function() {{
+                    const petId = this.dataset.petId;
+                    const isActive = currentTeam[petId];
+                    
+                    console.log(`Double-click: Moving pet ${{petId}} from ${{isActive ? 'active' : 'storage'}} to ${{isActive ? 'storage' : 'active'}}`);
+                    
+                    if (isActive) {{
+                        movePetToStorage(petId);
+                    }} else {{
+                        movePetToActive(petId);
+                    }}
+                }});
+                
+                // Add visual hint
+                const hint = document.createElement('div');
+                hint.textContent = '💡 Double-click to move';
+                hint.style.cssText = 'position: absolute; top: 5px; left: 5px; background: rgba(0,0,0,0.7); color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; pointer-events: none; opacity: 0; transition: opacity 0.3s;';
+                card.style.position = 'relative';
+                card.appendChild(hint);
+                
+                card.addEventListener('mouseenter', () => hint.style.opacity = '1');
+                card.addEventListener('mouseleave', () => hint.style.opacity = '0');
+            }});
+        }}
+        
         // Initialize team state
         document.querySelectorAll('.pet-card').forEach(card => {{
             const petId = card.dataset.petId;
@@ -2545,8 +2582,14 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                     draggedElement = this;
                     this.style.opacity = '0.5';
                     this.style.cursor = 'grabbing';
-                    e.dataTransfer.effectAllowed = 'move';
+                    
-                    e.dataTransfer.setData('text/plain', this.dataset.petId);
+                    // Check if dataTransfer exists (it won't in synthetic events)
+                    if (e.dataTransfer) {{
+                        e.dataTransfer.effectAllowed = 'move';
+                        e.dataTransfer.setData('text/plain', this.dataset.petId);
+                    }} else {{
+                        console.log('Warning: dataTransfer is null (synthetic event)');
+                    }}
                 }});
                 
                 card.addEventListener('dragend', function(e) {{
@@ -2569,7 +2612,9 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                 if (zone) {{
                     zone.addEventListener('dragover', function(e) {{
                         e.preventDefault();
-                        e.dataTransfer.dropEffect = 'move';
+                        if (e.dataTransfer) {{
+                            e.dataTransfer.dropEffect = 'move';
+                        }}
                     }});
                     
                     zone.addEventListener('dragenter', function(e) {{
@@ -2602,7 +2647,9 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                 if (zone) {{
                     zone.addEventListener('dragover', function(e) {{
                         e.preventDefault();
-                        e.dataTransfer.dropEffect = 'move';
+                        if (e.dataTransfer) {{
+                            e.dataTransfer.dropEffect = 'move';
+                        }}
                     }});
                     
                     zone.addEventListener('dragenter', function(e) {{
@@ -2805,6 +2852,7 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
         
         // Initialize interface
         initializeDragAndDrop();
+        addClickToMoveBackup(); // Add double-click as backup
         updateSaveButton();
         updateDropZoneVisibility();
         
@@ -2815,11 +2863,17 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
         
         // Add test button for manual debugging
         const testButton = document.createElement('button');
-        testButton.textContent = '🧪 Test Drag & Drop';
+        testButton.textContent = '🧪 Test Functions';
         testButton.style.cssText = 'position: fixed; top: 10px; right: 10px; z-index: 9999; padding: 10px; background: #ff6b6b; color: white; border: none; border-radius: 5px; cursor: pointer;';
         testButton.onclick = runDragDropTest;
         document.body.appendChild(testButton);
         
+        // Add instruction for backup method
+        const instruction = document.createElement('div');
+        instruction.innerHTML = '💡 <strong>Backup:</strong> Double-click any pet to move it between Active/Storage';
+        instruction.style.cssText = 'position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.8); color: white; padding: 10px; border-radius: 5px; font-size: 12px; z-index: 9999; max-width: 250px;';
+        document.body.appendChild(instruction);
+        
         // Add bounce animation
         const style = document.createElement('style');
         style.textContent = `