Update assets/js/script.js

assets/js/script.js

@@ -74,37 +74,37 @@ const emails = [
     },
     {
         id: 11,
-        sender: "Travel Agency",
-        subject: "Your Paris Hotel Confirmation",
-        snippet: "Your reservation at the Eiffel Tower View Hotel is confirmed for September 10-15.",
+        sender: "Tech News",
+        subject: "The Future of AI is Here",
+        snippet: "Discover how AI is transforming industries and what it means for your career.",
         timestamp: "Aug 29"
     },
     {
         id: 12,
         sender: "University Alumni",
-        subject: "Alumni Networking Event Next Week",
-        snippet: "Join us for a special networking event with industry leaders. Register now to secure your spot.",
+        subject: "Alumni Reunion This Weekend",
+        snippet: "Join us for our annual alumni reunion and reconnect with old friends.",
         timestamp: "Aug 28"
     },
     {
         id: 13,
-        sender: "Gym Membership",
-        subject: "Your Membership is Expiring Soon",
-        snippet: "Your gym membership will expire in 5 days. Renew now to continue enjoying our facilities.",
+        sender: "Travel Agency",
+        subject: "Exclusive Deal: 50% Off Caribbean Cruise",
+        snippet: "Book now and enjoy a luxury cruise with significant savings.",
         timestamp: "Aug 27"
     },
     {
         id: 14,
-        sender: "Online Course",
-        subject: "Your Course Certificate is Ready",
-        snippet: "Congratulations! You've completed the Data Science Fundamentals course. Download your certificate now.",
+        sender: "Fitness Center",
+        subject: "New Workouts Available",
+        snippet: "Check out our new workout routines designed by top trainers.",
         timestamp: "Aug 26"
     },
     {
         id: 15,
-        sender: "Tech Conference",
-        subject: "Your Conference Ticket is Confirmed",
-        snippet: "Your ticket for the AI Summit is confirmed. Check your email for event details and schedule.",
+        sender: "Online Course",
+        subject: "Your Certificate of Completion",
+        snippet: "Congratulations! You've completed the course. Download your certificate now.",
         timestamp: "Aug 25"
     }
 ];
@@ -199,14 +199,10 @@ class UIManager {
         this.selectionHighlight = document.getElementById('selectionHighlight');
         this.handLandmarks = document.getElementById('handLandmarks');
         this.gesturePath = document.getElementById('gesturePath');
-        this.scrollIndicator = document.getElementById('scrollIndicator');
+        this.emailListRect = null;
         
         this.selectedEmail = null;
         this.emailElements = [];
-        this.scrollOffset = 0;
-        this.maxScroll = 0;
-        this.scrollSpeed = 0;
-        this.isScrolling = false;
         
         this.renderEmails();
         this.setupEventListeners();
@@ -214,8 +210,8 @@ class UIManager {
         // Create confirmation overlay
         this.createConfirmationOverlay();
         
-        // Setup scroll indicator
-        this.setupScrollIndicator();
+        // Create scroll indicator
+        this.createScrollIndicator();
     }
     
     createConfirmationOverlay() {
@@ -256,20 +252,6 @@ class UIManager {
         });
     }
     
-    setupScrollIndicator() {
-        this.scrollIndicator.style.display = 'none';
-    }
-    
-    showScrollIndicator(direction) {
-        this.scrollIndicator.style.display = 'block';
-        this.scrollIndicator.className = `scroll-indicator ${direction}`;
-        
-        // Auto-hide after 500ms
-        setTimeout(() => {
-            this.scrollIndicator.style.display = 'none';
-        }, 500);
-    }
-    
     showConfirmation(message, callback) {
         this.confirmationOverlay.querySelector('.confirmation-message').textContent = message;
         this.confirmationCallback = callback;
@@ -281,6 +263,23 @@ class UIManager {
         this.confirmationCallback = null;
     }
     
+    createScrollIndicator() {
+        const indicator = document.createElement('div');
+        indicator.className = 'scroll-indicator';
+        indicator.innerHTML = '↑';
+        
+        document.body.appendChild(indicator);
+        this.scrollIndicator = indicator;
+    }
+    
+    showScrollIndicator() {
+        this.scrollIndicator.classList.add('show');
+    }
+    
+    hideScrollIndicator() {
+        this.scrollIndicator.classList.remove('show');
+    }
+    
     renderEmails() {
         this.emailList.innerHTML = '';
         this.emailElements = [];
@@ -309,9 +308,6 @@ class UIManager {
         
         // Update email positions
         this.updateEmailPositions();
-        
-        // Calculate max scroll
-        this.maxScroll = this.emailList.scrollHeight - this.emailList.clientHeight;
     }
     
     updateEmailPositions() {
@@ -355,7 +351,7 @@ class UIManager {
     showSelectionHighlight(rect) {
         this.selectionHighlight.style.display = 'block';
         this.selectionHighlight.style.left = `${rect.left}px`;
-        this.selectionHighlight.style.top = `${rect.top}px - ${this.scrollOffset}px`;
+        this.selectionHighlight.style.top = `${rect.top}px`;
         this.selectionHighlight.style.width = `${rect.width}px`;
         this.selectionHighlight.style.height = `${rect.height}px`;
         
@@ -409,15 +405,23 @@ class UIManager {
                     this.showSelectionHighlight(element.rect);
                 }
             }
-            
-            // Recalculate max scroll
-            this.maxScroll = this.emailList.scrollHeight - this.emailList.clientHeight;
         });
         
-        // Add scroll event listener
+        // Add scroll event for indicator
         this.emailList.addEventListener('scroll', () => {
-            this.scrollOffset = this.emailList.scrollTop;
-            this.updateEmailPositions();
+            if (this.emailList.scrollTop > 0) {
+                this.showScrollIndicator();
+            } else {
+                this.hideScrollIndicator();
+            }
+        });
+        
+        // Click handler for scroll indicator
+        this.scrollIndicator?.addEventListener('click', () => {
+            this.emailList.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
         });
     }
     
@@ -462,38 +466,11 @@ class UIManager {
         }
     }
     
-    // Scroll the email list
-    scrollEmailList(direction, speed) {
-        const scrollAmount = direction === 'up' ? -speed : speed;
-        this.emailList.scrollTop += scrollAmount;
-        
-        // Update scroll offset
-        this.scrollOffset = this.emailList.scrollTop;
-        
-        // Show scroll indicator
-        this.showScrollIndicator(direction);
-        
-        // Update email positions
-        this.updateEmailPositions();
-    }
-    
-    // Calculate the position of the hand relative to the email list
-    getRelativePosition(landmark, videoParams) {
-        const emailListRect = this.emailList.getBoundingClientRect();
-        const videoRect = document.getElementById('webcam').getBoundingClientRect();
-        
-        // Convert landmark coordinates to screen coordinates
-        const screenX = landmark.x * videoRect.width;
-        const screenY = landmark.y * videoRect.height;
-        
-        // Calculate relative position within email list
-        const relativeX = screenX - emailListRect.left;
-        const relativeY = screenY - emailListRect.top + this.scrollOffset;
-        
-        return {
-            x: relativeX,
-            y: relativeY
-        };
+    // Audio feedback simulation (if needed)
+    provideAudioFeedback() {
+        // Could implement audio feedback here
+        // const sound = new Audio('click-sound.mp3');
+        // sound.play();
     }
 }
 
@@ -507,7 +484,6 @@ class GestureDetector {
         this.selectedEmailId = null;
         this.gestureBuffer = [];
         this.circlePoints = [];
-        this.scrollBuffer = [];
         this.circleThreshold = 12;
         this.swipeThreshold = 35;
         this.scrollThreshold = 20;
@@ -518,9 +494,8 @@ class GestureDetector {
         
         this.gestureStartPos = null;
         this.holdTimer = null;
-        this.isPanning = false;
-        this.lastScrollTime = 0;
-        this.scrollSpeedFactor = 1.5;
+        this.scrollActive = false;
+        this.scrollDirection = null;
         
         this.debugManager.updateStatus('Setting up MediaPipe...');
         this.setupMediaPipe();
@@ -611,7 +586,6 @@ class GestureDetector {
                 this.uiManager.clearSelection();
                 this.gestureBuffer = [];
                 this.circlePoints = [];
-                this.scrollBuffer = [];
                 this.debugManager.updateGestureType('None');
                 this.debugManager.updateBufferCount(0);
                 this.debugManager.updateCircleCount(0);
@@ -621,52 +595,6 @@ class GestureDetector {
         }
     }
     
-    calculateCircleMetrics() {
-        if (this.circlePoints.length < 3) {
-            return { center: { x: 0, y: 0 }, radius: 0, circularity: 0 };
-        }
-        
-        // Find centroid
-        let centerX = 0;
-        let centerY = 0;
-        for (const point of this.circlePoints) {
-            centerX += point.x;
-            centerY += point.y;
-        }
-        centerX /= this.circlePoints.length;
-        centerY /= this.circlePoints.length;
-        
-        // Calculate radius and circularity
-        let totalRadius = 0;
-        let radiusVariance = 0;
-        const radii = [];
-        
-        for (const point of this.circlePoints) {
-            const dx = point.x - centerX;
-            const dy = point.y - centerY;
-            const radius = Math.sqrt(dx * dx + dy * dy);
-            radii.push(radius);
-            totalRadius += radius;
-        }
-        
-        const avgRadius = totalRadius / this.circlePoints.length;
-        
-        // Calculate variance to determine circularity
-        for (const radius of radii) {
-            radiusVariance += Math.pow(radius - avgRadius, 2);
-        }
-        radiusVariance /= this.circlePoints.length;
-        
-        // Calculate circularity (1 = perfect circle, 0 = not circular)
-        const circularity = radiusVariance < 0.0001 ? 1 : Math.max(0, 1 - radiusVariance / (avgRadius * avgRadius));
-        
-        return {
-            center: { x: centerX, y: centerY },
-            radius: avgRadius,
-            circularity: circularity
-        };
-    }
-    
     detectGesture(landmarks) {
         try {
             const indexTip = landmarks[8];
@@ -677,23 +605,18 @@ class GestureDetector {
             const screenX = indexTip.x * window.innerWidth;
             const screenY = indexTip.y * window.innerHeight;
             
-            // Get video parameters for proper coordinate calculation
-            const videoParams = this.getVideoParameters();
-            
-            // Convert to email list relative coordinates
-            const relativePos = this.uiManager.getRelativePosition(indexTip, videoParams);
+            // Calculate relative position within email list
+            const emailListRect = this.uiManager.emailList.getBoundingClientRect();
+            const relativeX = screenX - emailListRect.left;
+            const relativeY = screenY - emailListRect.top;
             
             // Pointing detection (index finger higher than middle)
             if (indexTip.y < middleTip.y && wrist.y > indexTip.y) {
-                this.checkEmailSelection(relativePos.x, relativePos.y);
-                
-                // Check for scroll gestures
-                this.checkScrollGesture(landmarks);
+                this.checkEmailSelection(relativeX, relativeY);
             } else {
                 this.uiManager.clearSelection();
                 this.gestureBuffer = [];
                 this.circlePoints = [];
-                this.scrollBuffer = [];
                 this.debugManager.updateGestureType('None');
                 this.debugManager.updateBufferCount(0);
                 this.debugManager.updateCircleCount(0);
@@ -701,6 +624,7 @@ class GestureDetector {
             
             // Only process gestures if an email is selected
             if (this.selectedEmailId === null) {
+                this.processScrolling(landmarks);
                 return;
             }
             
@@ -774,55 +698,102 @@ class GestureDetector {
         }
     }
     
-    checkScrollGesture(landmarks) {
+    processScrolling(landmarks) {
         const wrist = landmarks[0];
         const indexTip = landmarks[8];
-        const middleTip = landmarks[12];
-        
-        // Only check for scrolling if index finger is lower than middle finger (scrolling gesture)
-        if (indexTip.y > middleTip.y) {
-            // Add to scroll buffer
-            this.scrollBuffer.push({
-                x: indexTip.x,
-                y: indexTip.y,
-                timestamp: Date.now()
-            });
+        
+        // Only process scrolling when no email is selected
+        if (this.selectedEmailId !== null) return;
+        
+        // Calculate screen coordinates
+        const screenX = indexTip.x * window.innerWidth;
+        const screenY = indexTip.y * window.innerHeight;
+        
+        // Calculate relative position within email list
+        const emailListRect = this.uiManager.emailList.getBoundingClientRect();
+        const relativeX = screenX - emailListRect.left;
+        const relativeY = screenY - emailListRect.top;
+        
+        // Only scroll if finger is in the email list area
+        if (relativeX < 0 || relativeX > emailListRect.width ||
+            relativeY < 0 || relativeY > emailListRect.height) {
+            return;
+        }
+        
+        // Calculate velocity for scrolling
+        if (this.gestureBuffer.length > 1) {
+            const lastPoint = this.gestureBuffer[this.gestureBuffer.length - 2];
+            const currentPoint = this.gestureBuffer[this.gestureBuffer.length - 1];
             
-            // Process scroll if we have enough points
-            if (this.scrollBuffer.length > 3) {
-                const recentPoints = this.scrollBuffer.slice(-3);
-                const first = recentPoints[0];
-                const last = recentPoints[recentPoints.length - 1];
-                const dt = last.timestamp - first.timestamp;
+            const dx = (currentPoint.x - lastPoint.x) * window.innerWidth;
+            const dy = (currentPoint.y - lastPoint.y) * window.innerHeight;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            const speed = distance / (this.lastTimestamp - lastPoint.timestamp);
+            
+            // Only scroll if movement is primarily vertical
+            if (Math.abs(dy) > this.scrollThreshold && Math.abs(dy) > Math.abs(dx) * 1.5 && speed > 0.5) {
+                this.scrollActive = true;
+                this.scrollDirection = dy > 0 ? 'down' : 'up';
                 
-                if (dt > 0) {
-                    // Calculate vertical movement
-                    const dy = (last.y - first.y) * window.innerHeight;
-                    const scrollSpeed = Math.abs(dy) / dt * this.scrollSpeedFactor;
-                    
-                    // Check if movement is significant
-                    if (Math.abs(dy) > this.scrollThreshold && scrollSpeed > 0.5) {
-                        const direction = dy > 0 ? 'down' : 'up';
-                        this.uiManager.scrollEmailList(direction, scrollSpeed * 50);
-                        
-                        // Clear buffer after processing
-                        this.scrollBuffer = [];
-                        this.debugManager.updateGestureType(`Scroll ${direction}`);
-                    }
-                }
+                // Show scroll indicator
+                this.uiManager.showScrollIndicator();
+                
+                // Perform scroll
+                const scrollAmount = Math.min(150, Math.abs(dy) * 2);
+                this.uiManager.emailList.scrollBy({
+                    top: this.scrollDirection === 'up' ? -scrollAmount : scrollAmount,
+                    behavior: 'smooth'
+                });
+                
+                // Reset buffer to prevent multiple scrolls from same movement
+                this.gestureBuffer = [];
             }
         }
     }
     
-    getVideoParameters() {
-        const video = document.getElementById('webcam');
-        const videoRect = video.getBoundingClientRect();
+    calculateCircleMetrics() {
+        if (this.circlePoints.length < 3) {
+            return { center: { x: 0, y: 0 }, radius: 0, circularity: 0 };
+        }
+        
+        // Find centroid
+        let centerX = 0;
+        let centerY = 0;
+        for (const point of this.circlePoints) {
+            centerX += point.x;
+            centerY += point.y;
+        }
+        centerX /= this.circlePoints.length;
+        centerY /= this.circlePoints.length;
+        
+        // Calculate radius and circularity
+        let totalRadius = 0;
+        let radiusVariance = 0;
+        const radii = [];
+        
+        for (const point of this.circlePoints) {
+            const dx = point.x - centerX;
+            const dy = point.y - centerY;
+            const radius = Math.sqrt(dx * dx + dy * dy);
+            radii.push(radius);
+            totalRadius += radius;
+        }
+        
+        const avgRadius = totalRadius / this.circlePoints.length;
+        
+        // Calculate variance to determine circularity
+        for (const radius of radii) {
+            radiusVariance += Math.pow(radius - avgRadius, 2);
+        }
+        radiusVariance /= this.circlePoints.length;
+        
+        // Calculate circularity (1 = perfect circle, 0 = not circular)
+        const circularity = radiusVariance < 0.0001 ? 1 : Math.max(0, 1 - radiusVariance / (avgRadius * avgRadius));
         
         return {
-            videoWidth: video.videoWidth,
-            videoHeight: video.videoHeight,
-            rect: videoRect,
-            aspectRatio: video.videoWidth / video.videoHeight
+            center: { x: centerX, y: centerY },
+            radius: avgRadius,
+            circularity: circularity
         };
     }