megaproxy/Petbot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
megaproxy 2025-07-14 17:19:37 +01:00
parent bbaba99020
commit 60dbcae113
1 changed files with 65 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

76
webserver.py
View file

@ -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 = '💡 <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 = `