Update script.js

script.js

@@ -4,26 +4,26 @@ document.addEventListener('DOMContentLoaded', () => {
     const display = document.getElementById('dialed-numbers');
     const callButton = document.getElementById('call-button');
     const clearButton = document.getElementById('clear-button');
-    const dialReturnSound = document.getElementById('dial-return-sound'); // Optional return whoosh
-    const dialClickSound = document.getElementById('dial-click-sound');   // The click sound
+    const dialReturnSound = document.getElementById('dial-return-sound');
+    const dialClickSound = document.getElementById('dial-click-sound');
+
+    if (!dialClickSound) console.error("Audio element #dial-click-sound not found!");
+    if (!dialReturnSound) console.warn("Audio element #dial-return-sound not found (optional).");
 
     const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
     const numHoles = 10;
 
-    // --- Angle & Radius Configuration ---
+    // --- Config ---
     const holeAngleOffset = -55;
     const holeAngleSeparation = 30;
     const fingerStopTargetAngle = holeAngleOffset + (numHoles * holeAngleSeparation) + 1;
-
     const dialPlateRadius = dial.offsetWidth / 2;
     const holeRadius = dialPlateRadius * 0.72;
-    const numberPlacementRadius = holeRadius * 1.25;
-
-    // --- Timing Configuration ---
-    // !! IMPORTANT: This duration MUST closely match the 'transition-duration' in the CSS for #dial !!
-    const DIAL_RETURN_DURATION_MS = 550; // e.g., 0.55s transition = 550ms
-    const CLICK_START_DELAY_MS = 50; // Small delay before clicks start after release
+    const numberPlacementRadius = holeRadius * 0.65; // Inner radius
+    const DIAL_RETURN_DURATION_MS = 550;
+    const CLICK_START_DELAY_MS = 50;
 
+    // --- State ---
     let isDragging = false;
     let startAngle = 0;
     let currentRotation = 0;
@@ -31,13 +31,14 @@ document.addEventListener('DOMContentLoaded', () => {
     let maxRotationAngle = 0;
     let dialedDigit = null;
     let holeData = {};
-    let clickTimer = null; // Variable to hold the interval timer ID
+    let clickTimer = null;
 
-    // --- Generate Holes and Numbers (Same as before) ---
+    // --- Generate Holes and Numbers on Dial Plate ---
     numbers.forEach((num, index) => {
         const angle = holeAngleOffset + index * holeAngleSeparation;
         const rad = angle * (Math.PI / 180);
 
+        // --- Create Hole ---
         const holeX = holeRadius * Math.cos(rad);
         const holeY = holeRadius * Math.sin(rad);
         const hole = document.createElement('div');
@@ -46,19 +47,29 @@ document.addEventListener('DOMContentLoaded', () => {
         hole.style.transform = `translate(${holeX}px, ${holeY}px)`;
         dial.appendChild(hole);
 
+        // --- Create Number ---
         const numRad = angle * (Math.PI / 180);
-        const numX = numberPlacementRadius * Math.cos(numRad);
-        const numY = numberPlacementRadius * Math.sin(numRad);
+        const numX = numberPlacementRadius * Math.cos(numRad); // Use inner radius
+        const numY = numberPlacementRadius * Math.sin(numRad); // Use inner radius
+
         const numElement = document.createElement('div');
         numElement.classList.add('dial-plate-number');
         numElement.textContent = num;
+
+        // 1. Position using left/top relative to dial center
         numElement.style.left = `calc(50% + ${numX}px)`;
         numElement.style.top = `calc(50% + ${numY}px)`;
-        numElement.style.transform = `translate(-50%, -50%) rotate(${-angle}deg)`;
+
+        // 2. Apply ONLY the centering translation. NO ROTATION.
+        numElement.style.transform = `translate(-50%, -50%)`; // REMOVED rotate() part
+        // The numbers will now inherit the rotation of the parent #dial div.
+
         dial.appendChild(numElement);
 
+        // Store info
         holeData[index] = { element: hole, number: num, startAngle: angle };
 
+        // Attach Event Listeners
         hole.addEventListener('mousedown', startDrag);
         hole.addEventListener('touchstart', startDrag, { passive: false });
     });
@@ -72,185 +83,144 @@ document.addEventListener('DOMContentLoaded', () => {
     fingerStop.style.top = `calc(50% + ${stopY}px - 22.5px)`;
     fingerStop.style.transform = `rotate(${fingerStopTargetAngle + 90}deg)`;
 
-    // --- Drag Logic (Same as before) ---
+    // --- Drag Logic (Remains the same) ---
     function startDrag(e) {
         if (isDragging) return;
-        // Stop any previous clicking sound if user drags again quickly
         if (clickTimer) clearInterval(clickTimer);
-
         const evt = e.touches ? e.touches[0] : e;
         activeHole = evt.target.closest('.hole');
         if (!activeHole) return;
-
         const holeInfo = Object.values(holeData).find(data => data.element === activeHole);
         if (!holeInfo) return;
-
         isDragging = true;
         dialedDigit = holeInfo.number;
         activeHole.classList.add('dragging');
         dial.style.transition = 'none';
-
         const rect = dial.getBoundingClientRect();
         const centerX = rect.left + rect.width / 2;
         const centerY = rect.top + rect.height / 2;
         startAngle = getAngle(evt.clientX, evt.clientY, centerX, centerY) - currentRotation;
         maxRotationAngle = 0;
-
         document.addEventListener('mousemove', drag);
         document.addEventListener('mouseup', endDrag);
         document.addEventListener('touchmove', drag, { passive: false });
         document.addEventListener('touchend', endDrag);
-
         if (e.touches) e.preventDefault();
     }
 
     function drag(e) {
         if (!isDragging || !activeHole) return;
-
         const evt = e.touches ? e.touches[0] : e;
         const rect = dial.getBoundingClientRect();
         const centerX = rect.left + rect.width / 2;
         const centerY = rect.top + rect.height / 2;
         let currentMouseAngle = getAngle(evt.clientX, evt.clientY, centerX, centerY);
         let potentialRotation = currentMouseAngle - startAngle;
-
         let delta = potentialRotation - currentRotation;
         if (delta > 180) delta -= 360;
         if (delta < -180) delta += 360;
         potentialRotation = currentRotation + delta;
         potentialRotation = Math.max(0, potentialRotation);
-
         const holeInfo = Object.values(holeData).find(data => data.element === activeHole);
         let holeStartAngle = holeInfo.startAngle;
         let maxAllowedRotation = fingerStopTargetAngle - holeStartAngle;
         if (maxAllowedRotation < 0) maxAllowedRotation += 360;
-
         potentialRotation = Math.min(potentialRotation, maxAllowedRotation);
-
         currentRotation = potentialRotation;
         maxRotationAngle = Math.max(maxRotationAngle, currentRotation);
         dial.style.transform = `rotate(${currentRotation}deg)`;
-
         if (e.touches) e.preventDefault();
     }
 
     function endDrag() {
         if (!isDragging) return;
-
         document.removeEventListener('mousemove', drag);
         document.removeEventListener('mouseup', endDrag);
         document.removeEventListener('touchmove', drag);
         document.removeEventListener('touchend', endDrag);
-
-        let numberSuccessfullyDialed = false; // Flag to check if we should play sounds
-
+        let numberSuccessfullyDialed = false;
+        let digitToPlaySoundFor = null;
         if (activeHole) {
             activeHole.classList.remove('dragging');
             const holeInfo = Object.values(holeData).find(data => data.element === activeHole);
-
             const rotationThreshold = 10;
             let holeStartAngle = holeInfo.startAngle;
             let expectedStopRotation = fingerStopTargetAngle - holeStartAngle;
             if (expectedStopRotation < 0) expectedStopRotation += 360;
             const tolerance = 2;
-
             if (maxRotationAngle > rotationThreshold && maxRotationAngle >= expectedStopRotation - tolerance) {
-                console.log(`Dialed: ${dialedDigit} (Max rotation: ${maxRotationAngle.toFixed(1)}, Expected stop: ${expectedStopRotation.toFixed(1)})`);
                 appendNumber(dialedDigit);
-                numberSuccessfullyDialed = true; // Mark success for sound playback
-            } else {
-                console.log(`Drag ended early for ${dialedDigit}. Max rotation: ${maxRotationAngle.toFixed(1)}, Expected stop: ${expectedStopRotation.toFixed(1)}`);
+                numberSuccessfullyDialed = true;
+                digitToPlaySoundFor = dialedDigit;
             }
         }
-
-        // --- Animate Dial Return ---
-        dial.style.transition = 'transform 0.55s cubic-bezier(0.15, 0.85, 0.25, 1)';
+        dial.style.transition = `transform ${DIAL_RETURN_DURATION_MS / 1000}s cubic-bezier(0.15, 0.85, 0.25, 1)`;
         dial.style.transform = 'rotate(0deg)';
-
-        // --- Play Sounds ONLY if a number was successfully dialed ---
         if (numberSuccessfullyDialed) {
-             playDialSounds(dialedDigit); // Play clicking sound sequence
+             playDialClickSounds(digitToPlaySoundFor);
         }
-
-
-        // Reset state
         isDragging = false;
         startAngle = 0;
         currentRotation = 0;
         activeHole = null;
-        dialedDigit = null; // Reset dialed digit only after sounds are initiated
+        dialedDigit = null;
     }
 
-    // --- Helper Functions ---
+    // --- Helper Functions (Remain the same) ---
     function getAngle(x, y, centerX, centerY) {
         const deltaX = x - centerX;
         const deltaY = y - centerY;
         let angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
         return angle;
     }
-
     function appendNumber(num) {
-        if (display.textContent.length < 10) {
-            display.textContent += num;
-        }
+        if (display.textContent.length < 10) { display.textContent += num; }
     }
-
     function clearDisplay() {
         display.textContent = '';
-        // Also stop any clicking sounds if clear is pressed mid-return
         if (clickTimer) clearInterval(clickTimer);
     }
 
-    // --- Sound Playback Logic ---
-    function playDialSounds(digit) {
-        // Stop any previous clicks first
+    // --- Sound Playback Logic using <audio> (Remains the same) ---
+    function playDialClickSounds(digit) {
+        if (!digit) return;
         if (clickTimer) clearInterval(clickTimer);
-
-        // Play the main return sound (optional)
         if (dialReturnSound) {
             dialReturnSound.currentTime = 0;
-            dialReturnSound.play().catch(e => console.warn("Return sound failed:", e));
+            dialReturnSound.play().catch(e => {});
         }
-
-        // Play the clicking sounds
         if (dialClickSound) {
-            const numClicks = (digit === '0') ? 10 : parseInt(digit); // 0 is 10 clicks
-            if (numClicks <= 0) return; // Should not happen, but safety check
-
-            // Calculate time between clicks based on number of clicks and total return time
-            // Subtract the initial delay from the total duration available for clicks
+            const numClicks = (digit === '0') ? 10 : parseInt(digit);
+            if (numClicks <= 0) return;
             const durationForClicks = DIAL_RETURN_DURATION_MS - CLICK_START_DELAY_MS;
+            if (durationForClicks <= 0) { console.error("Duration for clicks too short."); return; }
             const clickInterval = durationForClicks / numClicks;
-
+            if (clickInterval < 30) { console.warn(`Calculated click interval (${clickInterval.toFixed(1)}ms) is very fast.`); }
             let clickCount = 0;
-
-            // Use setTimeout to delay the start of the clicking sequence
             setTimeout(() => {
-                clickTimer = setInterval(() => {
+                 if (isDragging) return;
+                 clickTimer = setInterval(() => {
                     if (clickCount < numClicks) {
-                        dialClickSound.currentTime = 0; // Rewind click sound
-                        dialClickSound.play().catch(e => console.warn("Click sound failed:", e));
+                        const clickAudio = document.getElementById('dial-click-sound');
+                        if(clickAudio){
+                             clickAudio.currentTime = 0;
+                             clickAudio.play().catch(e => {});
+                        } else { clearInterval(clickTimer); clickTimer = null; return; }
                         clickCount++;
-                    } else {
-                        clearInterval(clickTimer); // Stop the interval once all clicks are done
-                        clickTimer = null;
-                    }
-                }, clickInterval); // Time between each click
-            }, CLICK_START_DELAY_MS); // Initial delay before first click
-        }
+                    } else { clearInterval(clickTimer); clickTimer = null; }
+                }, Math.max(30, clickInterval));
+            }, CLICK_START_DELAY_MS);
+        } else { console.error("Click sound element not found."); }
     }
 
-
-    // --- Event Listeners for Buttons ---
+    // --- Event Listeners (Remain the same) ---
     callButton.addEventListener('click', () => {
         const currentNumber = display.textContent;
-        if (currentNumber) {
-            alert(`Dialing ${currentNumber}...`);
-        }
+        if (currentNumber) { alert(`Dialing ${currentNumber}...`); }
     });
     clearButton.addEventListener('click', clearDisplay);
 
     // --- Initial Setup ---
     dial.style.transform = 'rotate(0deg)';
-
+    console.log("Dialer Initialized (Numbers Inner & Static Orientation).");
 });