From 6a2d14e2a6a0f9f8c387a7fb26ecd8544ba985d2 Mon Sep 17 00:00:00 2001
From: Ronnie <github.cranial@nothingemail.com>
Date: Tue, 27 May 2025 19:31:21 -0400
Subject: [PATCH] Refactor selection handling in game.js to improve user
 interaction. Introduce direct square clicking for easy and medium
 difficulties, and enhance selection box logic for hard mode. Implement
 dragging state management and ensure proper cleanup of selection highlights
 on mouse events.

---
 game.js | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 65 insertions(+), 5 deletions(-)

diff --git a/game.js b/game.js
index 4e91622..bb018d0 100644
--- a/game.js
+++ b/game.js
@@ -524,6 +524,7 @@ function initializeGame() {
     let selectionBox = null;
     let isSelecting = false;
     let startX, startY;
+    let isDragging = false;
     
     // Spawn initial squares with correct red square ratio
     const numSquares = getSquaresForLevel();
@@ -560,6 +561,15 @@ function initializeGame() {
                    squareCenterY <= bottom;
         });
         
+        // If only one square is selected and the selection box is very small,
+        // treat it as a click on that square
+        if (selectedSquares.length === 1 && 
+            Math.abs(selectionBox.width) < 5 && 
+            Math.abs(selectionBox.height) < 5) {
+            handleSquareClick(selectedSquares[0], squares);
+            return;
+        }
+        
         // Calculate total changes
         let totalScoreChange = 0;
         let totalBonusChange = 0;
@@ -671,17 +681,37 @@ function initializeGame() {
             handleSelectedSquares(selectionBox);
         }
         isSelecting = false;
+        isDragging = false;
         selectionBox = null;
     }
     
     // Mouse event listeners
     canvas.addEventListener('mousedown', (e) => {
-        isSelecting = true;
         const rect = canvas.getBoundingClientRect();
         const scaleX = canvas.width / rect.width;
         const scaleY = canvas.height / rect.height;
         startX = (e.clientX - rect.left) * scaleX;
         startY = (e.clientY - rect.top) * scaleY;
+        
+        // Only allow direct clicking in easy and medium difficulties
+        if (gameState.selectedDifficulty !== 'hard') {
+            // Check if we clicked directly on a square
+            const clickedSquare = squares.find(square => {
+                return startX >= square.x && 
+                       startX <= square.x + square.size && 
+                       startY >= square.y && 
+                       startY <= square.y + square.size;
+            });
+            
+            if (clickedSquare) {
+                handleSquareClick(clickedSquare, squares);
+                return;
+            }
+        }
+        
+        // Start selection box (for hard mode or when clicking empty space)
+        isSelecting = true;
+        isDragging = true;
         selectionBox = {
             x: startX,
             y: startY,
@@ -721,23 +751,53 @@ function initializeGame() {
     
     canvas.addEventListener('mouseup', (e) => {
         if (!isSelecting) return;
-        clearSelection();
+        
+        if (isDragging && selectionBox) {
+            handleSelectedSquares(selectionBox);
+        }
+        
+        isSelecting = false;
+        isDragging = false;
+        selectionBox = null;
+        
+        // Clear highlights
+        squares.forEach(square => {
+            square.isHighlighted = false;
+        });
     });
     
     // Handle window blur
     window.addEventListener('blur', () => {
-        clearSelection();
+        isSelecting = false;
+        isDragging = false;
+        selectionBox = null;
+        squares.forEach(square => {
+            square.isHighlighted = false;
+        });
     });
     
     // Handle mouse leave
     canvas.addEventListener('mouseleave', () => {
-        clearSelection();
+        isSelecting = false;
+        isDragging = false;
+        selectionBox = null;
+        squares.forEach(square => {
+            square.isHighlighted = false;
+        });
     });
     
     // Handle mouse up outside canvas
     document.addEventListener('mouseup', () => {
         if (isSelecting) {
-            clearSelection();
+            if (isDragging && selectionBox) {
+                handleSelectedSquares(selectionBox);
+            }
+            isSelecting = false;
+            isDragging = false;
+            selectionBox = null;
+            squares.forEach(square => {
+                square.isHighlighted = false;
+            });
         }
     });