diff --git a/webserver.py b/webserver.py index 5c96f1d..e779a54 100644 --- a/webserver.py +++ b/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 - const dragEvent = new DragEvent('dragstart', {{ bubbles: true }}); - testCard.dispatchEvent(dragEvent); - console.log('Drag event dispatched'); + console.log(`Test pet ${{petId}} is currently: ${{isCurrentlyActive ? 'active' : 'storage'}}`); + + // Test moving to opposite state + 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 = '💡 Backup: 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 = `