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

Rewrite drag-and-drop with comprehensive testing and debugging

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:17:33 +01:00
parent d245454231
commit bbaba99020
1 changed files with 171 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

286
webserver.py
View file

@ -2495,6 +2495,34 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
let currentTeam = {{}}; let currentTeam = {{}};
let draggedElement = null; let draggedElement = null;
// Test function to verify basic functionality
function runDragDropTest() {{
console.log('=== DRAG DROP TEST ===');
const petCards = document.querySelectorAll('.pet-card');
console.log('Pet cards found:', petCards.length);
petCards.forEach((card, index) => {{
console.log(`Card ${{index}}: ID=${{card.dataset.petId}}, draggable=${{card.draggable}}, active=${{card.dataset.active}}`);
}});
const containers = ['active-container', 'storage-container', 'active-drop', 'storage-drop'];
containers.forEach(id => {{
const element = document.getElementById(id);
console.log(`Container ${{id}}: exists=${{!!element}}`);
}});
// Test if drag events are working
if (petCards.length > 0) {{
const testCard = petCards[0];
console.log('Testing drag events on first card...');
// Simulate drag start
const dragEvent = new DragEvent('dragstart', {{ bubbles: true }});
testCard.dispatchEvent(dragEvent);
console.log('Drag event dispatched');
}}
}}
// Initialize team state // Initialize team state
document.querySelectorAll('.pet-card').forEach(card => {{ document.querySelectorAll('.pet-card').forEach(card => {{
const petId = card.dataset.petId; const petId = card.dataset.petId;
@ -2503,145 +2531,161 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
currentTeam[petId] = isActive; currentTeam[petId] = isActive;
}}); }});
// Enhanced drag and drop functionality - Fixed version // Completely rewritten drag and drop - simpler approach
function initializeDragAndDrop() {{ function initializeDragAndDrop() {{
// Attach events to pet cards console.log('Initializing drag and drop...');
// Make all pet cards draggable
document.querySelectorAll('.pet-card').forEach(card => {{ document.querySelectorAll('.pet-card').forEach(card => {{
card.draggable = true; card.draggable = true;
card.addEventListener('dragstart', handleDragStart); card.style.cursor = 'grab';
card.addEventListener('dragend', handleDragEnd);
card.addEventListener('dragstart', function(e) {{
console.log('DRAGSTART: Pet ID', this.dataset.petId);
draggedElement = this;
this.style.opacity = '0.5';
this.style.cursor = 'grabbing';
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', this.dataset.petId);
}});
card.addEventListener('dragend', function(e) {{
console.log('DRAGEND');
this.style.opacity = '';
this.style.cursor = 'grab';
draggedElement = null;
// Clear all highlights
document.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));
}});
}}); }});
// Attach events to drop zones and containers // Set up drop zones
const dropTargets = ['#active-container', '#storage-container', '#active-drop', '#storage-drop']; const activeContainer = document.getElementById('active-container');
dropTargets.forEach(selector => {{ const storageContainer = document.getElementById('storage-container');
const element = document.querySelector(selector); const activeDrop = document.getElementById('active-drop');
if (element) {{ const storageDrop = document.getElementById('storage-drop');
element.addEventListener('dragover', handleDragOver);
element.addEventListener('drop', handleDrop); [activeContainer, activeDrop].forEach(zone => {{
element.addEventListener('dragenter', handleDragEnter); if (zone) {{
element.addEventListener('dragleave', handleDragLeave); zone.addEventListener('dragover', function(e) {{
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
}});
zone.addEventListener('dragenter', function(e) {{
e.preventDefault();
this.classList.add('drag-over');
console.log('DRAGENTER: Active zone');
}});
zone.addEventListener('dragleave', function(e) {{
if (!this.contains(e.relatedTarget)) {{
this.classList.remove('drag-over');
}}
}});
zone.addEventListener('drop', function(e) {{
e.preventDefault();
console.log('DROP: Active zone');
this.classList.remove('drag-over');
if (draggedElement) {{
const petId = draggedElement.dataset.petId;
console.log('Moving pet', petId, 'to active');
movePetToActive(petId);
}}
}});
}} }}
}}); }});
}}
function handleDragStart(e) {{
draggedElement = this;
this.classList.add('dragging');
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', this.dataset.petId);
console.log('Drag started for pet:', this.dataset.petId); [storageContainer, storageDrop].forEach(zone => {{
if (zone) {{
// Add visual feedback zone.addEventListener('dragover', function(e) {{
setTimeout(() => {{ e.preventDefault();
this.style.opacity = '0.6'; e.dataTransfer.dropEffect = 'move';
}}, 0); }});
}}
zone.addEventListener('dragenter', function(e) {{
function handleDragEnd(e) {{ e.preventDefault();
this.classList.remove('dragging'); this.classList.add('drag-over');
this.style.opacity = ''; console.log('DRAGENTER: Storage zone');
}});
// Clear all drag-over states
document.querySelectorAll('.drop-zone, .pets-container').forEach(zone => {{ zone.addEventListener('dragleave', function(e) {{
zone.classList.remove('drag-over'); if (!this.contains(e.relatedTarget)) {{
this.classList.remove('drag-over');
}}
}});
zone.addEventListener('drop', function(e) {{
e.preventDefault();
console.log('DROP: Storage zone');
this.classList.remove('drag-over');
if (draggedElement) {{
const petId = draggedElement.dataset.petId;
console.log('Moving pet', petId, 'to storage');
movePetToStorage(petId);
}}
}});
}}
}}); }});
console.log('Drag ended'); console.log('Drag and drop initialization complete');
}} }}
function handleDragOver(e) {{ function movePetToActive(petId) {{
e.preventDefault(); const card = document.querySelector(`[data-pet-id="${{petId}}"]`);
e.dataTransfer.dropEffect = 'move'; if (!card) return;
}}
function handleDragEnter(e) {{
e.preventDefault();
const target = e.currentTarget;
if (target.classList.contains('drop-zone') || target.classList.contains('pets-container')) {{
target.classList.add('drag-over');
}}
}}
function handleDragLeave(e) {{
const target = e.currentTarget;
// Only remove if we're leaving the current target and not entering a child
if (!target.contains(e.relatedTarget)) {{
target.classList.remove('drag-over');
}}
}}
function handleDrop(e) {{
e.preventDefault();
console.log('Drop event triggered');
if (!draggedElement) {{ const activeContainer = document.getElementById('active-container');
console.log('No dragged element');
return;
}}
const petId = draggedElement.dataset.petId;
const currentIsActive = currentTeam[petId]; const currentIsActive = currentTeam[petId];
let newActiveStatus = null;
// Determine target section based on the drop target if (!currentIsActive) {{
const dropTarget = e.currentTarget; // Update state
console.log('Drop target:', dropTarget.id); currentTeam[petId] = true;
if (dropTarget.id === 'active-container' || dropTarget.id === 'active-drop') {{
newActiveStatus = true;
console.log('Moving to active team');
}} else if (dropTarget.id === 'storage-container' || dropTarget.id === 'storage-drop') {{
newActiveStatus = false;
console.log('Moving to storage');
}}
// Only move if there's a change
if (newActiveStatus !== null && newActiveStatus !== currentIsActive) {{
currentTeam[petId] = newActiveStatus;
if (newActiveStatus) {{ // Move DOM element
moveToActive(draggedElement); card.classList.remove('storage');
}} else {{ card.classList.add('active');
moveToStorage(draggedElement); card.dataset.active = 'true';
}} card.querySelector('.status-badge').textContent = 'Active';
activeContainer.appendChild(card);
// Update interface
updateSaveButton(); updateSaveButton();
updateDropZoneVisibility(); updateDropZoneVisibility();
// Visual feedback console.log('Pet moved to active successfully');
draggedElement.style.transform = 'scale(1.05)';
setTimeout(() => {{
draggedElement.style.transform = '';
}}, 200);
console.log('Pet moved successfully');
}} }}
}}
function movePetToStorage(petId) {{
const card = document.querySelector(`[data-pet-id="${{petId}}"]`);
if (!card) return;
// Clear all drag states const storageContainer = document.getElementById('storage-container');
document.querySelectorAll('.drop-zone, .pets-container').forEach(zone => {{ const currentIsActive = currentTeam[petId];
zone.classList.remove('drag-over');
}}); if (currentIsActive) {{
// Update state
currentTeam[petId] = false;
// Move DOM element
card.classList.remove('active');
card.classList.add('storage');
card.dataset.active = 'false';
card.querySelector('.status-badge').textContent = 'Storage';
storageContainer.appendChild(card);
// Update interface
updateSaveButton();
updateDropZoneVisibility();
console.log('Pet moved to storage successfully');
}}
}} }}
function moveToActive(card) {{
const container = document.getElementById('active-container');
card.classList.remove('storage');
card.classList.add('active');
card.dataset.active = 'true';
card.querySelector('.status-badge').textContent = 'Active';
container.appendChild(card);
}}
function moveToStorage(card) {{
const container = document.getElementById('storage-container');
card.classList.remove('active');
card.classList.add('storage');
card.dataset.active = 'false';
card.querySelector('.status-badge').textContent = 'Storage';
container.appendChild(card);
}}
function updateDropZoneVisibility() {{ function updateDropZoneVisibility() {{
const activeContainer = document.getElementById('active-container'); const activeContainer = document.getElementById('active-container');
@ -2764,6 +2808,18 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
updateSaveButton(); updateSaveButton();
updateDropZoneVisibility(); updateDropZoneVisibility();
// Run test to verify everything is working
setTimeout(() => {{
runDragDropTest();
}}, 500);
// Add test button for manual debugging
const testButton = document.createElement('button');
testButton.textContent = '🧪 Test Drag & Drop';
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 bounce animation // Add bounce animation
const style = document.createElement('style'); const style = document.createElement('style');
style.textContent = ` style.textContent = `