diff --git a/script.js b/script.js index e0f996f..3b50e12 100644 --- a/script.js +++ b/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 - if (touchEndTime - secondLastTapTime > DOUBLE_TAP_THRESHOLD) { - p.hardDrop(); - lastTapTime = 0; - secondLastTapTime = 0; - } - } else { - // Single tap - rotates piece and resets tap tracking - if (lastTapTime === 0) { - // First tap - p.rotate('right'); - lastTapTime = touchEndTime; - lastTapX = touchX; - lastTapY = touchY; - } else { - // Too far from last tap position - treat as new first tap - p.rotate('right'); - secondLastTapTime = 0; - lastTapTime = touchEndTime; - lastTapX = touchX; - lastTapY = touchY; - } + // Debug + console.log("Double tap detected - hard drop"); + return; + } + + // Single tap - rotates piece + p.rotate('right'); + + // Update tracking for potential double/triple tap + if (lastTapTime > 0) { + // Store previous tap data + secondLastTapTime = lastTapTime; + secondLastTapX = lastTapX; + secondLastTapY = lastTapY; } + + // Set current tap as the last tap + lastTapTime = touchEndTime; + lastTapX = touchX; + lastTapY = touchY; } // Reset touch identifier diff --git a/style.css b/style.css index 2a5d6ea..d6c8c1b 100644 --- a/style.css +++ b/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; - top: 0; - left: 100%; /* Position it outside the right edge of game wrapper */ - margin-left: 20px; /* Add a margin between the game and preview */ + position: relative; /* Change from absolute to relative */ + top: auto; + left: auto; /* Remove positioning outside game wrapper */ + 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 */ - z-index: 5; /* Lower z-index than controls */ + width: 90%; /* Adjust width to fit score container better */ + 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 */ - max-width: 260px; /* Further increased max-width */ + min-width: 260px; + 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 */ - overflow-y: auto; /* Add scroll if contents exceed height */ - position: relative; /* Added position relative */ - z-index: 15; /* Added z-index to ensure it appears above other elements */ - margin-left: 160px; /* Slightly reduced from 200px for more unified look */ + max-height: 640px; + overflow-y: auto; + position: relative; + z-index: 15; + margin-left: 20px; /* Reduce from 160px to 20px */ } .controls-info h3 {