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,
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;
});

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">
<!-- styles -->
<link rel="stylesheet" href="styles.css?version=2">
<link rel="stylesheet" href="styles.css?version=3">
</head>
<body>
<div class="container">
@ -143,6 +143,6 @@
</div>
</div>
</div>
<script src="game.js?version=2""></script>
<script src="game.js?version=3""></script>
</body>
</html>

6
styles.css
View file

@ -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;
}