Fix next piece preview position and double tap detection

script.js

@@ -2185,7 +2185,7 @@ let touchStartY = 0;
 let touchStartTime = 0;
 const SWIPE_THRESHOLD = 15; // Reduced threshold for more responsive movement
 const TAP_THRESHOLD = 200; // milliseconds
-const DOUBLE_TAP_THRESHOLD = 400; // Increased to prevent accidental double-taps
+const DOUBLE_TAP_THRESHOLD = 300; // Reduced from 400 to make double-tap easier
 const TRIPLE_TAP_THRESHOLD = 600; // Maximum time between first and third tap
 let lastTapTime = 0;
 let secondLastTapTime = 0; // Track time of second-to-last tap for triple tap detection
@@ -2195,7 +2195,7 @@ let lastTapX = 0;
 let lastTapY = 0;
 let secondLastTapX = 0; // Track position of second-to-last tap
 let secondLastTapY = 0; // Track position of second-to-last tap
-const TAP_DISTANCE_THRESHOLD = 20; // Maximum distance to consider as same-position tap
+const TAP_DISTANCE_THRESHOLD = 40; // Increased from 20 to be more forgiving for double-taps
 const MOVE_COOLDOWN = 60; // Cooldown between moves to prevent too rapid movement
 
 // Initialize touch controls
@@ -2318,40 +2318,39 @@ function handleTouchEnd(event) {
         
         // Check for double tap (for hard drop)
         const timeBetweenTaps = touchEndTime - lastTapTime;
-        if (timeBetweenTaps < DOUBLE_TAP_THRESHOLD && distanceFromLastTap < TAP_DISTANCE_THRESHOLD) {
+        
-            // Track second tap for potential triple tap
+        if (lastTapTime > 0 && timeBetweenTaps < DOUBLE_TAP_THRESHOLD && distanceFromLastTap < TAP_DISTANCE_THRESHOLD) {
+            // This is a double-tap, do hard drop
+            p.hardDrop();
+            
+            // Store for potential triple tap
             secondLastTapTime = lastTapTime;
             secondLastTapX = lastTapX;
             secondLastTapY = lastTapY;
-            
-            // Update last tap
             lastTapTime = touchEndTime;
             lastTapX = touchX;
             lastTapY = touchY;
             
-            // If we already have a second tap recorded, this is too far from triple tap time
+            // Debug
-            if (touchEndTime - secondLastTapTime > DOUBLE_TAP_THRESHOLD) {
+            console.log("Double tap detected - hard drop");
-                p.hardDrop();
+            return;
-                lastTapTime = 0;
+        } 
-                secondLastTapTime = 0;
+        
-            }
+        // Single tap - rotates piece
-        } else {
+        p.rotate('right');
-            // Single tap - rotates piece and resets tap tracking
+        
-            if (lastTapTime === 0) {
+        // Update tracking for potential double/triple tap
-                // First tap
+        if (lastTapTime > 0) {
-                p.rotate('right');
+            // Store previous tap data
-                lastTapTime = touchEndTime;
+            secondLastTapTime = lastTapTime;
-                lastTapX = touchX;
+            secondLastTapX = lastTapX;
-                lastTapY = touchY;
+            secondLastTapY = lastTapY;
-            } else {
-                // Too far from last tap position - treat as new first tap
-                p.rotate('right');
-                secondLastTapTime = 0;
-                lastTapTime = touchEndTime;
-                lastTapX = touchX;
-                lastTapY = touchY;
-            }
         }
+        
+        // Set current tap as the last tap
+        lastTapTime = touchEndTime;
+        lastTapX = touchX;
+        lastTapY = touchY;
     }
     
     // Reset touch identifier

style.css

@@ -80,6 +80,7 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
+    width: 180px; /* Ensure width is sufficient */
 }
 
 .score-container p {
@@ -148,10 +149,10 @@ canvas {
 }
 
 #next-piece-preview {
-    position: absolute;
+    position: relative; /* Change from absolute to relative */
-    top: 0;
+    top: auto;
-    left: 100%; /* Position it outside the right edge of game wrapper */
+    left: auto; /* Remove positioning outside game wrapper */
-    margin-left: 20px; /* Add a margin between the game and preview */
+    margin: 0 0 15px 0; /* Add bottom margin instead of left margin */
     background: rgba(51, 51, 51, 0.8);
     padding: 10px;
     border-radius: 8px;
@@ -160,8 +161,9 @@ canvas {
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 160px; /* Increased width */
+    width: 90%; /* Adjust width to fit score container better */
-    z-index: 5; /* Lower z-index than controls */
+    box-sizing: border-box;
+    z-index: 5;
 }
 
 #next-piece-preview h3 {
@@ -177,18 +179,18 @@ canvas {
 }
 
 .controls-info {
-    min-width: 260px; /* Further increased min-width */
+    min-width: 260px;
-    max-width: 260px; /* Further increased max-width */
+    max-width: 260px;
     padding: 15px;
     background: rgba(51, 51, 51, 0.8);
     border-radius: 8px;
     border: 2px solid #444;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    max-height: 640px; /* Match game board height */
+    max-height: 640px;
-    overflow-y: auto; /* Add scroll if contents exceed height */
+    overflow-y: auto;
-    position: relative; /* Added position relative */
+    position: relative;
-    z-index: 15; /* Added z-index to ensure it appears above other elements */
+    z-index: 15;
-    margin-left: 160px; /* Slightly reduced from 200px for more unified look */
+    margin-left: 20px; /* Reduce from 160px to 20px */
 }
 
 .controls-info h3 {