Ronniie/ZoneOut
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Made UI Elements disable when selecting to avoid interferance

Browse source
This commit is contained in:
Ronnie 2025-05-27 22:06:58 -04:00
parent cc85cc9981
commit 634f8ee187
3 changed files with 33 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

27
game.js
View file

@ -735,6 +735,11 @@ function initializeGame() {
width: 0, width: 0,
height: 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) => { canvas.addEventListener('mousemove', (e) => {
@ -772,11 +777,14 @@ function initializeGame() {
if (isDragging && selectionBox) { if (isDragging && selectionBox) {
handleSelectedSquares(selectionBox); handleSelectedSquares(selectionBox);
} }
isSelecting = false; isSelecting = false;
isDragging = false; isDragging = false;
selectionBox = null; 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 // Clear highlights
squares.forEach(square => { squares.forEach(square => {
square.isHighlighted = false; square.isHighlighted = false;
@ -788,6 +796,11 @@ function initializeGame() {
isSelecting = false; isSelecting = false;
isDragging = false; isDragging = false;
selectionBox = null; 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 => { squares.forEach(square => {
square.isHighlighted = false; square.isHighlighted = false;
}); });
@ -798,6 +811,11 @@ function initializeGame() {
isSelecting = false; isSelecting = false;
isDragging = false; isDragging = false;
selectionBox = null; 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 => { squares.forEach(square => {
square.isHighlighted = false; square.isHighlighted = false;
}); });
@ -812,6 +830,11 @@ function initializeGame() {
isSelecting = false; isSelecting = false;
isDragging = false; isDragging = false;
selectionBox = null; 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 => { squares.forEach(square => {
square.isHighlighted = false; square.isHighlighted = false;
}); });

4
index.html
View file

@ -46,7 +46,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- styles --> <!-- styles -->
<link rel="stylesheet" href="styles.css?version=2"> <link rel="stylesheet" href="styles.css?version=3">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@ -143,6 +143,6 @@
</div> </div>
</div> </div>
</div> </div>
<script src="game.js?version=2""></script> <script src="game.js?version=3""></script>
</body> </body>
</html> </html>

6
styles.css
View file

@ -969,4 +969,10 @@ h3 {
.mode-btn.active + .mode-info .info-text { .mode-btn.active + .mode-info .info-text {
display: block; display: block;
animation: fadeIn 0.3s ease forwards; animation: fadeIn 0.3s ease forwards;
}
.no-pointer-events {
pointer-events: none !important;
user-select: none !important;
opacity: 0.7;
} }