diff --git a/game.js b/game.js index 7775e4d..f6f5f1e 100644 --- a/game.js +++ b/game.js @@ -735,6 +735,11 @@ function initializeGame() { width: 0, height: 0 }; + // Disable pointer events on UI + document.querySelector('.settings-icon').classList.add('no-pointer-events'); + document.querySelector('.settings-menu').classList.add('no-pointer-events'); + document.querySelector('h1').classList.add('no-pointer-events'); + document.querySelector('.game-stats').classList.add('no-pointer-events'); }); canvas.addEventListener('mousemove', (e) => { @@ -772,11 +777,14 @@ function initializeGame() { if (isDragging && selectionBox) { handleSelectedSquares(selectionBox); } - isSelecting = false; isDragging = false; selectionBox = null; - + // Re-enable pointer events on UI + document.querySelector('.settings-icon').classList.remove('no-pointer-events'); + document.querySelector('.settings-menu').classList.remove('no-pointer-events'); + document.querySelector('h1').classList.remove('no-pointer-events'); + document.querySelector('.game-stats').classList.remove('no-pointer-events'); // Clear highlights squares.forEach(square => { square.isHighlighted = false; @@ -788,6 +796,11 @@ function initializeGame() { isSelecting = false; isDragging = false; selectionBox = null; + // Re-enable pointer events on UI + document.querySelector('.settings-icon').classList.remove('no-pointer-events'); + document.querySelector('.settings-menu').classList.remove('no-pointer-events'); + document.querySelector('h1').classList.remove('no-pointer-events'); + document.querySelector('.game-stats').classList.remove('no-pointer-events'); squares.forEach(square => { square.isHighlighted = false; }); @@ -798,6 +811,11 @@ function initializeGame() { isSelecting = false; isDragging = false; selectionBox = null; + // Re-enable pointer events on UI + document.querySelector('.settings-icon').classList.remove('no-pointer-events'); + document.querySelector('.settings-menu').classList.remove('no-pointer-events'); + document.querySelector('h1').classList.remove('no-pointer-events'); + document.querySelector('.game-stats').classList.remove('no-pointer-events'); squares.forEach(square => { square.isHighlighted = false; }); @@ -812,6 +830,11 @@ function initializeGame() { isSelecting = false; isDragging = false; selectionBox = null; + // Re-enable pointer events on UI + document.querySelector('.settings-icon').classList.remove('no-pointer-events'); + document.querySelector('.settings-menu').classList.remove('no-pointer-events'); + document.querySelector('h1').classList.remove('no-pointer-events'); + document.querySelector('.game-stats').classList.remove('no-pointer-events'); squares.forEach(square => { square.isHighlighted = false; }); diff --git a/index.html b/index.html index e2796a8..48d15ac 100644 --- a/index.html +++ b/index.html @@ -46,7 +46,7 @@ - +
@@ -143,6 +143,6 @@
- + \ No newline at end of file diff --git a/styles.css b/styles.css index aff5877..bd3472e 100644 --- a/styles.css +++ b/styles.css @@ -969,4 +969,10 @@ h3 { .mode-btn.active + .mode-info .info-text { display: block; animation: fadeIn 0.3s ease forwards; +} + +.no-pointer-events { + pointer-events: none !important; + user-select: none !important; + opacity: 0.7; } \ No newline at end of file