swiper/js/ui-enhancements.js

/**
 * UI Enhancements for the Swiper App
 * Adds improved visual feedback and animations
 */

// Add swipe decision indicators
function addSwipeDecisionIndicators() {
  const swipeContainer = document.querySelector('.swipe-container');
  
  // Create decision indicators for each direction
  const directions = ['left', 'right', 'up', 'down'];
  const icons = ['fa-trash', 'fa-folder-plus', 'fa-star', 'fa-clock'];
  
  directions.forEach((direction, index) => {
    const indicator = document.createElement('div');
    indicator.className = `swipe-decision decision-${direction}`;
    indicator.innerHTML = `<i class="fa-solid ${icons[index]} fa-bounce"></i>`;
    swipeContainer.appendChild(indicator);
  });
}

// Enhance loading indicator
function enhanceLoadingIndicator() {
  const loadingIndicator = document.querySelector('.loading-indicator');
  if (loadingIndicator) {
    loadingIndicator.innerHTML = `
      <div class="loading-spinner"></div>
      <div>Loading next image...</div>
    `;
  }
}

// Add hover effects to direction arrows
function enhanceDirectionArrows() {
  const arrows = document.querySelectorAll('.direction-arrow');
  
  arrows.forEach(arrow => {
    arrow.addEventListener('mouseenter', function() {
      this.style.transform = this.classList.contains('arrow-left') || this.classList.contains('arrow-right')
        ? `translateY(-50%) scale(1.2)`
        : `translateX(-50%) scale(1.2)`;
      this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.2)';
    });
    
    arrow.addEventListener('mouseleave', function() {
      this.style.transform = this.classList.contains('arrow-left') || this.classList.contains('arrow-right')
        ? `translateY(-50%) scale(1)`
        : `translateX(-50%) scale(1)`;
      this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.1)';
    });
  });
}

// Show swipe decision indicator
function showSwipeDecision(direction) {
  const indicator = document.querySelector(`.decision-${direction}`);
  if (indicator) {
    indicator.classList.add('visible');
    
    setTimeout(() => {
      indicator.classList.remove('visible');
    }, 800);
  }
}

// Enhance the performSwipe function
function enhancePerformSwipe() {
  // Store the original performSwipe function
  const originalPerformSwipe = window.performSwipe;
  
  if (typeof originalPerformSwipe === 'function') {
    // Override with enhanced version
    window.performSwipe = function(direction) {
      // Show the decision indicator
      showSwipeDecision(direction);
      
      // Call the original function
      return originalPerformSwipe(direction);
    };
  }
}

// Add card tilt effect based on mouse position
function addCardTiltEffect() {
  const card = document.getElementById('current-card');
  const container = document.querySelector('.swipe-container');
  
  if (!card || !container) return;
  
  container.addEventListener('mousemove', e => {
    if (window.innerWidth < 992) return; // Skip on mobile
    
    // Only apply when not dragging
    if (window.state && window.state.isDragging) return;
    
    const rect = container.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    // Calculate rotation based on mouse position
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    
    const rotateY = ((x - centerX) / centerX) * 5; // Max 5 degrees
    const rotateX = ((centerY - y) / centerY) * 5; // Max 5 degrees
    
    // Apply the transform
    card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  });
  
  container.addEventListener('mouseleave', () => {
    // Reset transform when mouse leaves
    card.style.transform = '';
  });
}

// Add pulse effect to action buttons
function addButtonPulseEffect() {
  const buttons = document.querySelectorAll('.action-btn');
  
  buttons.forEach(button => {
    button.addEventListener('mouseenter', function() {
      this.classList.add('pulse');
    });
    
    button.addEventListener('mouseleave', function() {
      this.classList.remove('pulse');
    });
  });
  
  // Add the pulse animation to CSS
  const style = document.createElement('style');
  style.textContent = `
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    
    .action-btn.pulse {
      animation: pulse 1s infinite;
    }
  `;
  document.head.appendChild(style);
}

// Enhance the history page items
function enhanceHistoryItems() {
  if (!window.location.pathname.includes('history')) return;
  
  // Add hover effect to selection items
  const items = document.querySelectorAll('.selection-item');
  
  items.forEach(item => {
    // Add image zoom effect on hover
    const img = item.querySelector('img');
    if (img) {
      img.style.transition = 'transform 0.3s ease';
      
      item.addEventListener('mouseenter', () => {
        img.style.transform = 'scale(1.1)';
      });
      
      item.addEventListener('mouseleave', () => {
        img.style.transform = '';
      });
    }
  });
}

// Initialize all UI enhancements
function initUIEnhancements() {
  // Add a small delay to ensure DOM is fully loaded
  setTimeout(() => {
    addSwipeDecisionIndicators();
    enhanceLoadingIndicator();
    enhanceDirectionArrows();
    enhancePerformSwipe();
    addCardTiltEffect();
    addButtonPulseEffect();
    enhanceHistoryItems();
    
    console.log('UI enhancements initialized');
  }, 500);
}

// Run when DOM is loaded
document.addEventListener('DOMContentLoaded', initUIEnhancements);

// Export functions for potential use in other modules
export {
  showSwipeDecision,
  addSwipeDecisionIndicators,
  enhanceLoadingIndicator
};