diff --git a/index.html b/index.html index 5db867b..69408c3 100644 --- a/index.html +++ b/index.html @@ -2791,27 +2791,30 @@ cell.dataset.dustLevel = '0'; cell.dataset.hasFingerprint = fingerprintCells.has(`${x},${y}`); - let isDragging = false; - - // Add dusting interaction - cell.addEventListener('mousedown', () => isDragging = true); - cell.addEventListener('mouseup', () => isDragging = false); - cell.addEventListener('mouseleave', () => isDragging = false); - cell.addEventListener('mousemove', (e) => { - if (!isDragging) return; - - const dustLevel = parseInt(cell.dataset.dustLevel); - if (dustLevel < 3) { - cell.dataset.dustLevel = (dustLevel + 1).toString(); - updateCellColor(cell); - checkProgress(); - } - }); - gameContainer.appendChild(cell); } } + // Add dragging interaction at container level + let isDragging = false; + gameContainer.addEventListener('mousedown', () => isDragging = true); + gameContainer.addEventListener('mouseup', () => isDragging = false); + gameContainer.addEventListener('mouseleave', () => isDragging = false); + gameContainer.addEventListener('mousemove', (e) => { + if (!isDragging) return; + + // Get the cell element under the cursor + const cell = document.elementFromPoint(e.clientX, e.clientY); + if (cell && cell.dataset.dustLevel !== undefined) { + const dustLevel = parseInt(cell.dataset.dustLevel); + if (dustLevel < 3) { + cell.dataset.dustLevel = (dustLevel + 1).toString(); + updateCellColor(cell); + checkProgress(); + } + } + }); + function updateCellColor(cell) { const dustLevel = parseInt(cell.dataset.dustLevel); const hasFingerprint = cell.dataset.hasFingerprint === 'true';