Create script.js

script.js

@@ -0,0 +1,256 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const dial = document.getElementById('dial');
+    const fingerStop = document.getElementById('finger-stop');
+    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 numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
+    const numHoles = 10;
+
+    // --- Angle & Radius Configuration ---
+    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
+
+    let isDragging = false;
+    let startAngle = 0;
+    let currentRotation = 0;
+    let activeHole = null;
+    let maxRotationAngle = 0;
+    let dialedDigit = null;
+    let holeData = {};
+    let clickTimer = null; // Variable to hold the interval timer ID
+
+    // --- Generate Holes and Numbers (Same as before) ---
+    numbers.forEach((num, index) => {
+        const angle = holeAngleOffset + index * holeAngleSeparation;
+        const rad = angle * (Math.PI / 180);
+
+        const holeX = holeRadius * Math.cos(rad);
+        const holeY = holeRadius * Math.sin(rad);
+        const hole = document.createElement('div');
+        hole.classList.add('hole');
+        hole.dataset.number = num;
+        hole.style.transform = `translate(${holeX}px, ${holeY}px)`;
+        dial.appendChild(hole);
+
+        const numRad = angle * (Math.PI / 180);
+        const numX = numberPlacementRadius * Math.cos(numRad);
+        const numY = numberPlacementRadius * Math.sin(numRad);
+        const numElement = document.createElement('div');
+        numElement.classList.add('dial-plate-number');
+        numElement.textContent = num;
+        numElement.style.left = `calc(50% + ${numX}px)`;
+        numElement.style.top = `calc(50% + ${numY}px)`;
+        numElement.style.transform = `translate(-50%, -50%) rotate(${-angle}deg)`;
+        dial.appendChild(numElement);
+
+        holeData[index] = { element: hole, number: num, startAngle: angle };
+
+        hole.addEventListener('mousedown', startDrag);
+        hole.addEventListener('touchstart', startDrag, { passive: false });
+    });
+
+    // --- Position Finger Stop (Same as before) ---
+    const stopRad = fingerStopTargetAngle * (Math.PI / 180);
+    const stopRadius = dialPlateRadius * 0.95;
+    const stopX = stopRadius * Math.cos(stopRad);
+    const stopY = stopRadius * Math.sin(stopRad);
+    fingerStop.style.left = `calc(50% + ${stopX}px - 9px)`;
+    fingerStop.style.top = `calc(50% + ${stopY}px - 22.5px)`;
+    fingerStop.style.transform = `rotate(${fingerStopTargetAngle + 90}deg)`;
+
+    // --- Drag Logic (Same as before) ---
+    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
+
+        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)}`);
+            }
+        }
+
+        // --- Animate Dial Return ---
+        dial.style.transition = 'transform 0.55s 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
+        }
+
+
+        // Reset state
+        isDragging = false;
+        startAngle = 0;
+        currentRotation = 0;
+        activeHole = null;
+        dialedDigit = null; // Reset dialed digit only after sounds are initiated
+    }
+
+    // --- Helper Functions ---
+    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;
+        }
+    }
+
+    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
+        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));
+        }
+
+        // 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 durationForClicks = DIAL_RETURN_DURATION_MS - CLICK_START_DELAY_MS;
+            const clickInterval = durationForClicks / numClicks;
+
+            let clickCount = 0;
+
+            // Use setTimeout to delay the start of the clicking sequence
+            setTimeout(() => {
+                clickTimer = setInterval(() => {
+                    if (clickCount < numClicks) {
+                        dialClickSound.currentTime = 0; // Rewind click sound
+                        dialClickSound.play().catch(e => console.warn("Click sound failed:", e));
+                        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
+        }
+    }
+
+
+    // --- Event Listeners for Buttons ---
+    callButton.addEventListener('click', () => {
+        const currentNumber = display.textContent;
+        if (currentNumber) {
+            alert(`Dialing ${currentNumber}...`);
+        }
+    });
+    clearButton.addEventListener('click', clearDisplay);
+
+    // --- Initial Setup ---
+    dial.style.transform = 'rotate(0deg)';
+
+});