Update assets/js/script.js

assets/js/script.js

@@ -1,76 +1,22 @@
-// ----------------------------
 // Sample Email Data
-// ----------------------------
 const emails = [
     {
         id: 1,
         sender: "Interview Kicks",
         subject: "Can I Become an ML Engineer? Why Not, We Ask!",
         snippet: "It's time to banish that doubt forever. Attend our masterclass to unlock your potential.",
-        timestamp: "1:31 PM",
-        category: "primary"
+        timestamp: "1:31 PM"
     },
     {
         id: 2,
         sender: "Career Brew",
         subject: "7th Sep Jobs, 87 Hottest Jobs and Early Career Jobs - Do Not Miss",
         snippet: "Top companies are hiring right now — don't miss your shot at these exclusive opportunities!",
-        timestamp: "12:35 PM",
-        category: "promotions"
+        timestamp: "12:35 PM"
     },
-    {
-        id: 3,
-        sender: "Professor Smith",
-        subject: "Research Collaboration Proposal",
-        snippet: "I've reviewed your proposal draft. Let's schedule a call next week to discuss next steps.",
-        timestamp: "10:22 AM",
-        category: "primary"
-    },
-    {
-        id: 4,
-        sender: "Friend",
-        subject: "Weekend Plans",
-        snippet: "Are we still on for the hiking trip this weekend? Let me know so I can book the gear.",
-        timestamp: "Yesterday",
-        category: "social"
-    },
-    {
-        id: 5,
-        sender: "Bank Support",
-        subject: "Monthly Statement",
-        snippet: "Your statement is ready. Minimum due: $120. Avoid penalties by paying before the 15th.",
-        timestamp: "Sep 5",
-        category: "updates"
-    },
-    {
-        id: 6,
-        sender: "Netflix",
-        subject: "New Releases This Week!",
-        snippet: "Check out the hottest new shows and movies added to your watchlist this week.",
-        timestamp: "Sep 4",
-        category: "promotions"
-    },
-    {
-        id: 7,
-        sender: "Amazon",
-        subject: "Your Order #12345 Has Shipped",
-        snippet: "Your package is on the way! Track your delivery using the link below.",
-        timestamp: "Sep 3",
-        category: "updates"
-    },
-    {
-        id: 8,
-        sender: "LinkedIn",
-        subject: "You have 5 new notifications",
-        snippet: "See who viewed your profile and new job recommendations.",
-        timestamp: "Sep 2",
-        category: "social"
-    }
+    // ... other emails ...
 ];
 
-// ----------------------------
-// Debug Utilities
-// ----------------------------
 class DebugManager {
     constructor() {
         this.statusEl = document.getElementById('debugStatus');
@@ -81,93 +27,15 @@ class DebugManager {
         this.cameraStatusEl = document.getElementById('debugCameraStatus');
         this.lastErrorEl = document.getElementById('debugLastError');
         this.statusIndicator = document.getElementById('statusIndicator');
-        
-        // Get debug toggle button
         this.toggleButton = document.getElementById('debugToggle');
         this.debugPanel = document.getElementById('debugPanel');
-        
-        // Add click event listener
-        this.toggleButton.addEventListener('click', () => {
-            this.toggleDebugPanel();
-        });
-    }
-    
-    updateStatus(status) {
-        this.statusEl.textContent = status;
+        this.toggleButton.addEventListener('click', () => this.toggleDebugPanel());
     }
     
-    updateSelectedEmail(emailId) {
-        if (emailId) {
-            const email = emails.find(e => e.id === emailId);
-            this.selectedEmailEl.textContent = email ? email.subject.substring(0, 20) + '...' : 'Unknown';
-        } else {
-            this.selectedEmailEl.textContent = 'None';
-        }
-    }
-    
-    updateGestureType(gestureType) {
-        this.gestureTypeEl.textContent = gestureType;
-    }
-    
-    updateBufferCount(count) {
-        this.bufferCountEl.textContent = `${count} points`;
-    }
-    
-    updateCircleCount(count) {
-        this.circleCountEl.textContent = `${count} points`;
-    }
-    
-    updateCameraStatus(status) {
-        this.cameraStatusEl.textContent = status;
-    }
-    
-    logError(error) {
-        console.error("Gesture Detection Error:", error);
-        this.lastErrorEl.textContent = error.message.substring(0, 50) + (error.message.length > 50 ? '...' : '');
-        
-        // Update status indicator to red
-        this.statusIndicator.className = 'status-indicator error';
-    }
-    
-    setReady() {
-        this.updateStatus('Ready');
-        this.statusIndicator.className = 'status-indicator ready';
-    }
-    
-    setProcessing() {
-        this.updateStatus('Processing...');
-        this.statusIndicator.className = 'status-indicator processing';
-    }
-    
-    toggleDebugPanel() {
-        if (this.debugPanel.classList.contains('visible')) {
-            this.debugPanel.classList.remove('visible');
-            this.toggleButton.innerHTML = '⚙️';
-        } else {
-            this.debugPanel.classList.add('visible');
-            this.toggleButton.innerHTML = '⚙️';
-        }
-    }
+    // ... rest of DebugManager methods ...
 }
 
-// ----------------------------
-// UI Management
-// ----------------------------
 class UIManager {
-    constructor() {
-        this.emailList = document.getElementById('emailList');
-        this.actionFeedback = document.getElementById('actionFeedback');
-        this.selectionHighlight = document.getElementById('selectionHighlight');
-        this.handLandmarks = document.getElementById('handLandmarks');
-        this.gesturePath = document.getElementById('gesturePath');
-        
-        this.selectedEmail = null;
-        this.emailElements = [];
-        
-        this.renderEmails();
-        this.setupEventListeners();
-    }
-    
     renderEmails() {
         this.emailList.innerHTML = '';
         this.emailElements = [];
@@ -179,8 +47,8 @@ class UIManager {
             
             emailElement.innerHTML = `
                 <div class="email-header">
-                    <span class="email-sender">${email.sender}</span>
-                    <span class="email-time">${email.timestamp}</span>
+                    <div class="email-sender">${email.sender}</div>
+                    <div class="email-time">${email.timestamp}</div>
                 </div>
                 <div class="email-subject">${email.subject}</div>
                 <div class="email-snippet">${email.snippet}</div>
@@ -194,137 +62,12 @@ class UIManager {
             });
         });
         
-        // Update email positions
         this.updateEmailPositions();
     }
     
-    updateEmailPositions() {
-        this.emailElements.forEach(item => {
-            const rect = item.element.getBoundingClientRect();
-            item.rect = {
-                left: rect.left,
-                top: rect.top,
-                right: rect.right,
-                bottom: rect.bottom,
-                width: rect.width,
-                height: rect.height
-            };
-        });
-    }
-    
-    selectEmail(emailId) {
-        // Remove previous selection
-        if (this.selectedEmail) {
-            const prevElement = this.emailElements.find(e => e.id === this.selectedEmail);
-            if (prevElement) {
-                prevElement.element.classList.remove('selected');
-            }
-        }
-        
-        // Set new selection
-        this.selectedEmail = emailId;
-        const newElement = this.emailElements.find(e => e.id === emailId);
-        
-        if (newElement) {
-            newElement.element.classList.add('selected');
-            this.showSelectionHighlight(newElement.rect);
-        }
-        
-        return newElement ? newElement.rect : null;
-    }
-    
-    showSelectionHighlight(rect) {
-        this.selectionHighlight.style.display = 'block';
-        this.selectionHighlight.style.left = `${rect.left}px`;
-        this.selectionHighlight.style.top = `${rect.top}px`;
-        this.selectionHighlight.style.width = `${rect.width}px`;
-        this.selectionHighlight.style.height = `${rect.height}px`;
-    }
-    
-    hideSelectionHighlight() {
-        this.selectionHighlight.style.display = 'none';
-    }
-    
-    showActionFeedback(message, type) {
-        this.actionFeedback.textContent = message;
-        this.actionFeedback.className = 'action-feedback';
-        
-        if (type === 'delete') {
-            this.actionFeedback.classList.add('delete');
-        } else if (type === 'archive') {
-            this.actionFeedback.classList.add('archive');
-        } else {
-            this.actionFeedback.classList.add('summary');
-        }
-        
-        this.actionFeedback.classList.add('show');
-        
-        setTimeout(() => {
-            this.actionFeedback.classList.remove('show');
-        }, 2000);
-    }
-    
-    clearSelection() {
-        if (this.selectedEmail) {
-            const element = this.emailElements.find(e => e.id === this.selectedEmail);
-            if (element) {
-                element.element.classList.remove('selected');
-            }
-            this.selectedEmail = null;
-            this.hideSelectionHighlight();
-        }
-    }
-    
-    setupEventListeners() {
-        window.addEventListener('resize', () => {
-            this.updateEmailPositions();
-            if (this.selectedEmail) {
-                const element = this.emailElements.find(e => e.id === this.selectedEmail);
-                if (element) {
-                    this.showSelectionHighlight(element.rect);
-                }
-            }
-        });
-    }
-    
-    // For gesture visualization
-    updateHandLandmarks(landmarks) {
-        this.handLandmarks.innerHTML = '';
-        
-        if (!landmarks || landmarks.length === 0) return;
-        
-        landmarks.forEach((landmark, i) => {
-            const landmarkEl = document.createElement('div');
-            landmarkEl.className = 'landmark';
-            if (i === 8) { // Index finger tip
-                landmarkEl.classList.add('index-tip');
-            }
-            
-            landmarkEl.style.left = `${landmark.x * 100}%`;
-            landmarkEl.style.top = `${landmark.y * 100}%`;
-            
-            this.handLandmarks.appendChild(landmarkEl);
-        });
-    }
-    
-    updateGesturePath(points) {
-        this.gesturePath.innerHTML = '';
-        
-        if (!points || points.length === 0) return;
-        
-        points.forEach(point => {
-            const pointEl = document.createElement('div');
-            pointEl.className = 'point';
-            pointEl.style.left = `${point.x * 100}%`;
-            pointEl.style.top = `${point.y * 100}%`;
-            this.gesturePath.appendChild(pointEl);
-        });
-    }
+    // ... rest of UIManager methods ...
 }
 
-// ----------------------------
-// Gesture Detection
-// ----------------------------
 class GestureDetector {
     constructor(uiManager, debugManager) {
         this.uiManager = uiManager;
@@ -332,119 +75,25 @@ class GestureDetector {
         this.selectedEmailId = null;
         this.gestureBuffer = [];
         this.circlePoints = [];
-        this.circleThreshold = 10;
-        this.swipeThreshold = 50;
-        this.gestureCooldown = 1500; // 1.5 seconds
+        this.circleThreshold = 8; // Reduced from 10
+        this.swipeThreshold = 30; // Reduced from 50
+        this.gestureCooldown = 1500;
         this.lastGestureTime = 0;
-        this.isProcessing = false;
-        this.camera = null;
-        
-        this.debugManager.updateStatus('Setting up MediaPipe...');
         this.setupMediaPipe();
     }
     
-    setupMediaPipe() {
-        try {
-            const hands = new Hands({locateFile: (file) => {
-                return `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`;
-            }});
-            
-            hands.setOptions({
-                maxNumHands: 1,
-                modelComplexity: 1,
-                minDetectionConfidence: 0.7,
-                minTrackingConfidence: 0.7
-            });
-            
-            hands.onResults(results => {
-                this.processResults(results);
-            });
-            
-            const videoElement = document.getElementById('webcam');
-            
-            // Check if Camera is available
-            if (typeof Camera === 'undefined') {
-                this.debugManager.logError(new Error("Camera utils not loaded. Make sure camera_utils.js is included."));
-                return;
-            }
-            
-            this.camera = new Camera(videoElement, {
-                onFrame: async () => {
-                    try {
-                        this.debugManager.setProcessing();
-                        await hands.send({image: videoElement});
-                    } catch (error) {
-                        this.debugManager.logError(error);
-                    }
-                },
-                width: 320,
-                height: 240
-            });
-            
-            this.startCamera();
-        } catch (error) {
-            this.debugManager.logError(error);
-            console.error("MediaPipe setup error:", error);
-        }
-    }
-    
-    async startCamera() {
-        try {
-            this.debugManager.updateCameraStatus('Starting...');
-            await this.camera.start();
-            this.debugManager.updateCameraStatus('Active');
-            this.debugManager.setReady();
-            console.log("Camera initialized successfully");
-        } catch (error) {
-            this.debugManager.updateCameraStatus('Error');
-            this.debugManager.logError(error);
-            
-            // Try to get more specific error information
-            if (error.name === 'NotAllowedError') {
-                alert("Camera access denied. Please allow camera access in your browser settings.");
-            } else if (error.name === 'NotFoundError') {
-                alert("No camera found. Please connect a camera device.");
-            } else {
-                alert("Failed to start camera: " + error.message);
-            }
-        }
-    }
-    
-    processResults(results) {
-        try {
-            // Update hand landmarks visualization
-            if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
-                this.uiManager.updateHandLandmarks(results.multiHandLandmarks[0]);
-                
-                // Update gesture path for debugging
-                if (this.gestureBuffer.length > 0) {
-                    this.uiManager.updateGesturePath(this.gestureBuffer);
-                }
-                
-                this.detectGesture(results.multiHandLandmarks[0]);
-            } else {
-                this.uiManager.clearSelection();
-                this.gestureBuffer = [];
-                this.circlePoints = [];
-                this.debugManager.updateGestureType('None');
-                this.debugManager.updateBufferCount(0);
-                this.debugManager.updateCircleCount(0);
-            }
-        } catch (error) {
-            this.debugManager.logError(error);
-        }
-    }
-    
     detectGesture(landmarks) {
         try {
-            // Convert to pixel coordinates for easier calculation
             const indexTip = landmarks[8];
             const middleTip = landmarks[12];
             const wrist = landmarks[0];
             
-            // Pointing detection (index finger higher than middle)
-            if (indexTip.y < middleTip.y) {
-                this.checkEmailSelection(indexTip.x, indexTip.y);
+            // Fix Y-axis inversion
+            const screenX = indexTip.x * window.innerWidth;
+            const screenY = (1 - indexTip.y) * window.innerHeight; // Fixed
+            
+            if (screenY < middleTip.y * window.innerHeight) { // Pointing detection
+                this.checkEmailSelection(screenX, screenY);
             } else {
                 this.uiManager.clearSelection();
                 this.gestureBuffer = [];
@@ -454,19 +103,14 @@ class GestureDetector {
                 this.debugManager.updateCircleCount(0);
             }
             
-            // Only process gestures if an email is selected
-            if (this.selectedEmailId === null) {
-                return;
-            }
+            if (this.selectedEmailId === null) return;
             
-            // Get palm center for gesture detection
+            // Improved palm center calculation
             const palmCenterX = (wrist.x + landmarks[9].x) / 2;
             const palmCenterY = (wrist.y + landmarks[9].y) / 2;
             
-            // Add to gesture buffer
             this.gestureBuffer.push({x: palmCenterX, y: palmCenterY});
             
-            // Check for swipe
             if (this.gestureBuffer.length > 2) {
                 const prev = this.gestureBuffer[this.gestureBuffer.length - 2];
                 const current = this.gestureBuffer[this.gestureBuffer.length - 1];
@@ -474,7 +118,6 @@ class GestureDetector {
                 const dx = (current.x - prev.x) * window.innerWidth;
                 const dy = (current.y - prev.y) * window.innerHeight;
                 
-                // Check if it's a horizontal swipe
                 if (Math.abs(dx) > this.swipeThreshold && Math.abs(dx) > Math.abs(dy) * 2) {
                     if (Date.now() - this.lastGestureTime > this.gestureCooldown) {
                         this.lastGestureTime = Date.now();
@@ -493,7 +136,6 @@ class GestureDetector {
                 }
             }
             
-            // Check for circle
             this.circlePoints.push({x: palmCenterX, y: palmCenterY});
             this.debugManager.updateCircleCount(this.circlePoints.length);
             
@@ -501,10 +143,9 @@ class GestureDetector {
                 const startPoint = this.circlePoints[0];
                 const endPoint = this.circlePoints[this.circlePoints.length - 1];
                 
-                const distance = Math.sqrt(
-                    Math.pow(startPoint.x - endPoint.x, 2) + 
-                    Math.pow(startPoint.y - endPoint.y, 2)
-                ) * window.innerWidth;
+                const dx = endPoint.x - startPoint.x;
+                const dy = endPoint.y - startPoint.y;
+                const distance = Math.sqrt(dx*dx + dy*dy) * window.innerWidth;
                 
                 if (distance < 40 && Date.now() - this.lastGestureTime > this.gestureCooldown) {
                     this.lastGestureTime = Date.now();
@@ -521,128 +162,5 @@ class GestureDetector {
         }
     }
     
-    checkEmailSelection(x, y) {
-        try {
-            // Convert normalized coordinates to screen coordinates
-            const screenX = x * window.innerWidth;
-            const screenY = y * window.innerHeight;
-            
-            // Check which email is under the finger
-            for (let i = this.uiManager.emailElements.length - 1; i >= 0; i--) {
-                const email = this.uiManager.emailElements[i];
-                if (email.rect && 
-                    screenX >= email.rect.left && 
-                    screenX <= email.rect.right &&
-                    screenY >= email.rect.top && 
-                    screenY <= email.rect.bottom) {
-                    
-                    // Only select if it's a different email
-                    if (this.selectedEmailId !== email.id) {
-                        this.selectedEmailId = email.id;
-                        this.uiManager.selectEmail(email.id);
-                        this.debugManager.updateSelectedEmail(email.id);
-                    }
-                    return;
-                }
-            }
-            
-            // If no email is selected, clear selection
-            if (!this.uiManager.emailElements.some(email => 
-                email.rect && 
-                screenX >= email.rect.left && 
-                screenX <= email.rect.right &&
-                screenY >= email.rect.top && 
-                screenY <= email.rect.bottom)) {
-                this.uiManager.clearSelection();
-                this.selectedEmailId = null;
-                this.debugManager.updateSelectedEmail(null);
-            }
-        } catch (error) {
-            this.debugManager.logError(error);
-        }
-    }
-    
-    handleGesture(gesture) {
-        try {
-            if (!this.selectedEmailId) return;
-            
-            const email = emails.find(e => e.id === this.selectedEmailId);
-            if (!email) return;
-            
-            switch (gesture) {
-                case 'swipe_left':
-                    this.uiManager.showActionFeedback(`🗑️ Deleted: ${email.subject}`, 'delete');
-                    // Remove from UI
-                    const index = emails.findIndex(e => e.id === this.selectedEmailId);
-                    if (index !== -1) emails.splice(index, 1);
-                    this.uiManager.renderEmails();
-                    this.selectedEmailId = null;
-                    this.debugManager.updateSelectedEmail(null);
-                    break;
-                    
-                case 'swipe_right':
-                    this.uiManager.showActionFeedback(`✅ Archived: ${email.subject}`, 'archive');
-                    // In a real app, we'd move to archive
-                    const archiveIndex = emails.findIndex(e => e.id === this.selectedEmailId);
-                    if (archiveIndex !== -1) emails.splice(archiveIndex, 1);
-                    this.uiManager.renderEmails();
-                    this.selectedEmailId = null;
-                    this.debugManager.updateSelectedEmail(null);
-                    break;
-                    
-                case 'circle':
-                    const summary = `This email discusses ${email.subject.toLowerCase()}.`;
-                    this.uiManager.showActionFeedback(`📝 Summary: ${summary}`, 'summary');
-                    break;
-            }
-        } catch (error) {
-            this.debugManager.logError(error);
-        }
-    }
-}
-
-// ----------------------------
-// Initialize App
-// ----------------------------
-document.addEventListener('DOMContentLoaded', () => {
-    // Initialize debug manager first
-    const debugManager = new DebugManager();
-    debugManager.updateStatus('Initializing UI...');
-    
-    // Initialize UI
-    const uiManager = new UIManager();
-    debugManager.setReady();
-    
-    // Request camera access
-    const videoElement = document.getElementById('webcam');
-    
-    navigator.mediaDevices.getUserMedia({ video: true })
-        .then(stream => {
-            videoElement.srcObject = stream;
-            debugManager.updateCameraStatus('Initializing...');
-            
-            // Initialize gesture detection after a short delay to ensure UI is ready
-            setTimeout(() => {
-                debugManager.updateStatus('Setting up gesture detection...');
-                try {
-                    new GestureDetector(uiManager, debugManager);
-                } catch (error) {
-                    debugManager.logError(error);
-                }
-            }, 1500);
-        })
-        .catch(err => {
-            debugManager.updateCameraStatus('Denied');
-            debugManager.logError(err);
-            console.error("Error accessing camera:", err);
-            
-            // More specific error handling
-            if (err.name === 'NotAllowedError') {
-                alert("Camera access denied. Please allow camera access in your browser settings.");
-            } else if (err.name === 'NotFoundError') {
-                alert("No camera found. Please connect a camera device.");
-            } else {
-                alert("Camera error: " + err.message);
-            }
-        });
-});
+    // ... rest of GestureDetector methods ...
+}