diff --git a/SWIPE_ANIMATIONS.md b/SWIPE_ANIMATIONS.md new file mode 100644 index 0000000..e4f8344 --- /dev/null +++ b/SWIPE_ANIMATIONS.md @@ -0,0 +1,423 @@ +# Enhanced Swipe Animation System + +A comprehensive physics-based animation system for the image swiper app, providing realistic swipe interactions with spring effects, momentum calculations, and dynamic visual feedback. + +## Overview + +The enhanced swipe animation system consists of several key components: + +- **SwipePhysics Engine**: Core physics calculations for realistic motion +- **EnhancedSwipeCard**: Advanced swipe card component with visual effects +- **SwipeIntegrationManager**: Seamless switching between animation modes +- **Visual Effects System**: Dynamic feedback during swipe gestures + +## Features + +### 🎯 Physics-Based Animations +- **Spring Effects**: Realistic spring-back animations when swipe threshold isn't met +- **Momentum Calculations**: Velocity-based swipe detection and exit animations +- **Smooth Transitions**: 60fps animations with proper GPU acceleration + +### 🎨 Visual Feedback +- **Dynamic Blur**: Motion blur effects based on swipe velocity +- **Color Shifts**: Direction-based hue rotation for visual feedback +- **3D Transforms**: Enhanced perspective and rotation effects +- **Particle Effects**: Trailing particles during swipe gestures + +### 📱 Device Optimization +- **Adaptive Quality**: Automatic animation quality adjustment based on device capabilities +- **Performance Monitoring**: Real-time FPS tracking and optimization +- **Reduced Motion Support**: Accessibility compliance for motion-sensitive users + +### ⚙️ Customization +- **Multiple Modes**: Original, Enhanced Lite, and Full Enhanced modes +- **User Settings**: Configurable physics parameters and visual effects +- **Debug Tools**: Performance metrics and state inspection + +## Architecture + +### Core Components + +#### SwipePhysics Class +```javascript +import { SwipePhysics } from './js/swipe-physics.js'; + +const physics = new SwipePhysics({ + springTension: 300, // Spring stiffness + springFriction: 30, // Damping coefficient + mass: 1, // Object mass + velocityThreshold: 0.5, // Minimum velocity for momentum + momentumDecay: 0.95 // Momentum decay rate +}); +``` + +**Key Methods:** +- `updatePosition(x, y, timestamp)`: Track position and calculate velocity +- `animateSpringTo(targetX, targetY, onUpdate, onComplete)`: Spring-back animation +- `animateMomentumExit(direction, onUpdate, onComplete)`: Momentum-based exit +- `getVelocityMagnitude()`: Current velocity magnitude +- `hasSwipeMomentum(threshold)`: Check if swipe has sufficient momentum + +#### EnhancedSwipeCard Component +```javascript +import EnhancedSwipeCard from './components/enhanced-swipe-card.js'; + +const swipeCard = new EnhancedSwipeCard({ + container: document.querySelector('.swipe-container'), + onSwipe: (direction) => console.log('Swiped:', direction), + threshold: 100, + velocityThreshold: 2, + springTension: 280, + springFriction: 25 +}); +``` + +**Features:** +- Physics-based drag interactions +- Enhanced 3D tilt effects +- Visual feedback during swipes +- Smooth loading animations +- Performance optimizations + +#### SwipeIntegrationManager +```javascript +import { swipeIntegration } from './js/swipe-integration.js'; + +// Initialize with automatic mode detection +await swipeIntegration.initialize(container, onSwipe); + +// Switch modes dynamically +await swipeIntegration.switchMode('enhanced'); + +// Update configuration +swipeIntegration.updateConfig({ + enablePhysics: true, + enableVisualEffects: true, + animationQuality: 'high' +}); +``` + +## Animation Modes + +### Original Mode +- **Use Case**: Low-end devices, reduced motion preferences +- **Features**: Basic swipe detection, simple CSS transitions +- **Performance**: Minimal CPU/GPU usage + +### Enhanced Lite Mode +- **Use Case**: Mobile devices, moderate performance +- **Features**: Physics-based springs, reduced visual effects +- **Performance**: Balanced performance and visual quality + +### Enhanced Mode +- **Use Case**: Desktop, high-performance devices +- **Features**: Full physics simulation, all visual effects +- **Performance**: Maximum visual quality, GPU-accelerated + +## Physics Implementation + +### Spring Dynamics +The system uses Hooke's Law with damping for realistic spring behavior: + +``` +F = -kx - cv +``` + +Where: +- `F` = Spring force +- `k` = Spring tension (stiffness) +- `x` = Displacement from rest position +- `c` = Friction coefficient (damping) +- `v` = Velocity + +### Velocity Tracking +Velocity is calculated using time-weighted sampling: + +```javascript +const velocity = (currentPosition - previousPosition) / deltaTime; +``` + +Multiple samples are averaged with recent values weighted more heavily for smooth velocity calculations. + +### Momentum-Based Actions +Swipe actions are triggered by either: +1. **Distance threshold**: Displacement exceeds minimum distance +2. **Velocity threshold**: Swipe velocity exceeds minimum speed + +## Visual Effects + +### Dynamic Blur +Motion blur is applied based on velocity magnitude: +```css +filter: blur(${velocity * 0.1}px); +``` + +### Color Temperature Shifts +Direction-based hue rotation provides visual feedback: +- **Left (Discard)**: Red shift (-30°) +- **Right (Keep)**: Green shift (120°) +- **Up (Favorite)**: Blue shift (240°) +- **Down (Review)**: Yellow shift (60°) + +### 3D Transforms +Enhanced perspective transforms create depth: +```css +transform: + perspective(1200px) + rotateX(${rotationX}deg) + rotateY(${rotationY}deg) + translateZ(${depth}px) + scale3d(${scale}, ${scale}, 1); +``` + +## Performance Optimizations + +### GPU Acceleration +- `transform3d()` for hardware acceleration +- `will-change` property for optimization hints +- `backface-visibility: hidden` to prevent flickering + +### Frame Rate Monitoring +```javascript +// Automatic quality adjustment based on FPS +if (fps < 30 && animationQuality === 'high') { + animationQuality = 'medium'; +} +``` + +### Memory Management +- Particle system with limited count +- Velocity history with bounded size +- Automatic cleanup of animation frames + +## Configuration Options + +### Physics Parameters +```javascript +{ + springTension: 300, // Spring stiffness (50-500) + springFriction: 30, // Damping coefficient (10-50) + mass: 1, // Object mass (0.5-2.0) + velocityThreshold: 0.5, // Minimum velocity for momentum + momentumDecay: 0.95, // Momentum decay rate (0.8-0.98) + maxVelocity: 50, // Maximum velocity clamp + dampingRatio: 0.8, // Overall damping (0.1-1.0) + precision: 0.01, // Animation stop precision + maxDuration: 2000 // Maximum animation duration (ms) +} +``` + +### Visual Effects +```javascript +{ + maxBlur: 8, // Maximum blur amount (px) + maxOpacity: 0.3, // Maximum opacity reduction + colorShiftIntensity: 0.2, // Color shift strength + particleCount: 20, // Maximum particles + enable3DTilt: true, // Enable 3D tilt effects + enableParticles: true, // Enable particle trails + enableHaptics: true // Enable haptic feedback +} +``` + +## Usage Examples + +### Basic Integration +```javascript +import { swipeIntegration } from './js/swipe-integration.js'; + +document.addEventListener('DOMContentLoaded', async () => { + const container = document.querySelector('.swipe-container'); + + await swipeIntegration.initialize(container, (direction) => { + console.log('Swiped:', direction); + // Handle swipe action + }); +}); +``` + +### Custom Configuration +```javascript +// Configure before initialization +swipeIntegration.updateConfig({ + enablePhysics: true, + enableVisualEffects: true, + animationQuality: 'high', + springTension: 320, + springFriction: 25 +}); + +await swipeIntegration.initialize(container, onSwipe); +``` + +### Mode Switching +```javascript +// Switch to enhanced mode +await swipeIntegration.switchMode('enhanced'); + +// Switch to lite mode for performance +await swipeIntegration.switchMode('enhanced-lite'); + +// Fallback to original mode +await swipeIntegration.switchMode('original'); +``` + +### Settings Panel +```javascript +import { createSwipeSettingsPanel } from './js/swipe-integration.js'; + +// Create settings panel +const settingsPanel = createSwipeSettingsPanel(swipeIntegration); +document.body.appendChild(settingsPanel); +``` + +## Browser Compatibility + +### Supported Features +- **Modern Browsers**: Full enhanced mode support +- **Safari**: Full support with vendor prefixes +- **Mobile Browsers**: Enhanced lite mode recommended +- **Legacy Browsers**: Automatic fallback to original mode + +### Required APIs +- `requestAnimationFrame` (required) +- `performance.now()` (required) +- `CSS transforms` (required) +- `CSS filters` (optional, for visual effects) +- `Vibration API` (optional, for haptic feedback) + +## Accessibility + +### Reduced Motion Support +```css +@media (prefers-reduced-motion: reduce) { + .enhanced-card { + animation: none !important; + transition: none !important; + } +} +``` + +### High Contrast Mode +```css +@media (prefers-contrast: high) { + .enhanced-hint { + background: rgba(0, 0, 0, 0.95); + border-width: 3px; + } +} +``` + +### Keyboard Navigation +- **Arrow Keys**: Trigger swipe actions +- **WASD Keys**: Alternative swipe controls +- **Ctrl/Cmd + ,**: Open settings panel +- **Escape**: Close modals and panels + +## Debugging + +### Debug Mode +```javascript +swipeIntegration.updateConfig({ debugMode: true }); + +// Access debug information +const debugInfo = swipeIntegration.getDebugInfo(); +console.log('Debug Info:', debugInfo); +``` + +### Performance Metrics +```javascript +const metrics = swipeIntegration.getPerformanceMetrics(); +console.log('Performance:', metrics); +``` + +### State Inspection +```javascript +// Access global debug objects +console.log('Swipe State:', window.enhancedSwipeState); +console.log('Swipe Card:', window.enhancedSwipeCard); +console.log('Integration:', window.swipeIntegration); +``` + +## Troubleshooting + +### Common Issues + +#### Poor Performance +- **Solution**: Switch to 'enhanced-lite' or 'original' mode +- **Check**: Device memory and CPU capabilities +- **Adjust**: Reduce particle count and visual effects + +#### Animations Not Working +- **Check**: Browser support for CSS transforms +- **Verify**: JavaScript modules are loading correctly +- **Test**: Fallback to original mode + +#### Touch Events Not Responding +- **Check**: Touch event listeners are properly attached +- **Verify**: `touch-action: none` is applied to card element +- **Test**: Mouse events as fallback + +### Performance Tips + +1. **Use Enhanced Lite on Mobile**: Better performance with good visual quality +2. **Monitor Frame Rate**: Enable debug mode to track performance +3. **Reduce Particle Count**: Lower particle count for better performance +4. **Disable Visual Effects**: Turn off blur and color effects on low-end devices + +## Future Enhancements + +### Planned Features +- **Card Stacking**: Multiple cards with depth layering +- **Gesture Recognition**: Advanced swipe patterns +- **Sound Effects**: Audio feedback for actions +- **Custom Animations**: User-defined animation curves + +### API Improvements +- **React Integration**: React component wrapper +- **Vue Integration**: Vue component wrapper +- **TypeScript Support**: Full type definitions +- **Web Components**: Custom element implementation + +## Contributing + +### Development Setup +```bash +# Clone repository +git clone + +# Install dependencies +npm install + +# Start development server +npm run dev + +# Build for production +npm run build +``` + +### Testing +```bash +# Run unit tests +npm test + +# Run performance tests +npm run test:performance + +# Run accessibility tests +npm run test:a11y +``` + +### Code Style +- Use ESLint configuration +- Follow JSDoc conventions +- Maintain 80% test coverage +- Use semantic versioning + +## License + +This enhanced swipe animation system is part of the image swiper application and follows the same licensing terms. + +--- + +For more information, see the individual component documentation files or contact the development team. \ No newline at end of file diff --git a/components/enhanced-swipe-card.js b/components/enhanced-swipe-card.js new file mode 100644 index 0000000..56d62bc --- /dev/null +++ b/components/enhanced-swipe-card.js @@ -0,0 +1,497 @@ +/** + * Enhanced Swipe Card Component with Physics-Based Animations + * Integrates SwipePhysics engine for realistic swipe interactions + */ + +import { SwipePhysics, SwipeVisualEffects } from '../js/swipe-physics.js'; + +export default class EnhancedSwipeCard { + constructor(options = {}) { + this.container = options.container || document.querySelector('.swipe-container'); + this.onSwipe = options.onSwipe || (() => {}); + this.threshold = options.threshold || 100; + this.velocityThreshold = options.velocityThreshold || 2; + + // Physics engine configuration + this.physics = new SwipePhysics({ + springTension: options.springTension || 280, + springFriction: options.springFriction || 25, + mass: options.mass || 1.2, + velocityThreshold: this.velocityThreshold, + momentumDecay: options.momentumDecay || 0.92, + maxVelocity: options.maxVelocity || 40, + dampingRatio: options.dampingRatio || 0.75 + }); + + // State management + this.state = { + isDragging: false, + startX: 0, + startY: 0, + hasMoved: false, + touchStartTime: 0, + currentImageInfo: null, + isAnimating: false + }; + + // DOM elements + this.card = null; + this.actionHints = null; + this.decisionIndicators = {}; + this.visualEffects = null; + + // Performance optimization + this.rafId = null; + this.lastUpdateTime = 0; + this.updateThrottle = 16; // ~60fps + + this.init(); + } + + init() { + this.setupCard(); + this.setupActionHints(); + this.setupDecisionIndicators(); + this.setupVisualEffects(); + this.addEventListeners(); + this.optimizePerformance(); + + console.log('Enhanced SwipeCard initialized with physics engine'); + } + + setupCard() { + this.card = this.container.querySelector('.image-card') || this.createCardElement(); + + // Optimize for animations + this.card.style.willChange = 'transform, filter, opacity'; + this.card.style.backfaceVisibility = 'hidden'; + this.card.style.transformStyle = 'preserve-3d'; + } + + createCardElement() { + const card = document.createElement('div'); + card.className = 'image-card enhanced-card'; + card.id = 'current-card'; + card.setAttribute('role', 'img'); + card.setAttribute('aria-label', 'Image to be swiped'); + + const img = document.createElement('img'); + img.src = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22400%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22%23e0e0e0%22%2F%3E%3Ctext%20x%3D%22200%22%20y%3D%22200%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20alignment-baseline%3D%22middle%22%20fill%3D%22%23999%22%3ELoading...%3C%2Ftext%3E%3C%2Fsvg%3E'; + img.alt = 'Image'; + + const loadingIndicator = document.createElement('div'); + loadingIndicator.className = 'loading-indicator enhanced-loading'; + loadingIndicator.innerHTML = ` + +
Loading...
+ `; + + card.appendChild(img); + card.appendChild(loadingIndicator); + this.container.appendChild(card); + + return card; + } + + setupActionHints() { + this.actionHints = { + left: this.container.querySelector('.left-hint') || this.createActionHint('left', 'Discard'), + right: this.container.querySelector('.right-hint') || this.createActionHint('right', 'Keep'), + up: this.container.querySelector('.up-hint') || this.createActionHint('up', 'Favorite'), + down: this.container.querySelector('.down-hint') || this.createActionHint('down', 'Review') + }; + } + + createActionHint(direction, text) { + const hint = document.createElement('div'); + hint.className = `action-hint ${direction}-hint enhanced-hint`; + hint.innerHTML = ` +
+ ${text} + `; + this.container.appendChild(hint); + return hint; + } + + setupDecisionIndicators() { + // Decision indicators removed - no longer creating visual icons + this.decisionIndicators = { + left: null, + right: null, + up: null, + down: null + }; + } + + setupVisualEffects() { + this.visualEffects = new SwipeVisualEffects(this.card, { + maxBlur: 6, + maxOpacity: 0.25, + colorShiftIntensity: 0.3, + particleCount: 15 + }); + } + + optimizePerformance() { + // Enable GPU acceleration for container + this.container.style.transform = 'translateZ(0)'; + this.container.style.willChange = 'transform'; + + // Optimize child elements + const elements = this.container.querySelectorAll('.action-hint, .swipe-decision'); + elements.forEach(el => { + el.style.willChange = 'transform, opacity'; + el.style.backfaceVisibility = 'hidden'; + }); + } + + addEventListeners() { + // Bind methods to preserve context for removal + this.boundHandlePointerDown = (e) => this.handlePointerDown(e.clientX, e.clientY, e.timeStamp); + this.boundHandlePointerMove = (e) => this.handlePointerMove(e.clientX, e.clientY, e.timeStamp); + this.boundHandlePointerUp = (e) => this.handlePointerUp(e.timeStamp); + + // Mouse events + this.card.addEventListener('mousedown', this.boundHandlePointerDown); + document.addEventListener('mousemove', this.boundHandlePointerMove); + document.addEventListener('mouseup', this.boundHandlePointerUp); + + // Touch events + this.card.addEventListener('touchstart', e => { + e.preventDefault(); + const touch = e.touches[0]; + this.handlePointerDown(touch.clientX, touch.clientY, e.timeStamp); + }, { passive: false }); + + this.card.addEventListener('touchmove', e => { + e.preventDefault(); + const touch = e.touches[0]; + this.handlePointerMove(touch.clientX, touch.clientY, e.timeStamp); + }, { passive: false }); + + this.card.addEventListener('touchend', e => { + e.preventDefault(); + this.handlePointerUp(e.timeStamp); + }, { passive: false }); + + // Enhanced 3D tilt effect + this.setupEnhanced3DTilt(); + } + + setupEnhanced3DTilt() { + // 3D tilt effect disabled for cleaner UX - no hover animations on image + } + + handlePointerDown(x, y, timestamp) { + if (this.state.isAnimating) return; + + this.state.isDragging = true; + this.state.startX = x; + this.state.startY = y; + this.state.hasMoved = false; + this.state.touchStartTime = timestamp; + + // Initialize physics + this.physics.reset(); + this.physics.updatePosition(0, 0, timestamp); + + // Visual feedback + this.card.classList.add('swiping', 'enhanced-swiping'); + this.card.style.transition = ''; + this.card.style.cursor = 'grabbing'; + + // Start update loop + this.startUpdateLoop(); + } + + handlePointerMove(x, y, timestamp) { + if (!this.state.isDragging) return; + + // Throttle updates for performance + if (timestamp - this.lastUpdateTime < this.updateThrottle) return; + this.lastUpdateTime = timestamp; + + const moveX = x - this.state.startX; + const moveY = y - this.state.startY; + + if (Math.abs(moveX) > 10 || Math.abs(moveY) > 10) { + this.state.hasMoved = true; + } + + // Update physics + this.physics.updatePosition(moveX, moveY, timestamp); + + // Apply visual effects + this.updateVisualFeedback(moveX, moveY); + + // Update action hints + this.updateActionHints(moveX, moveY); + } + + updateVisualFeedback(moveX, moveY) { + const displacement = { x: moveX, y: moveY }; + const velocity = this.physics.velocity; + const direction = this.getSwipeDirection(moveX, moveY); + + // Apply physics-based visual effects + this.visualEffects.updateEffects(displacement, velocity, direction); + + // Create particle trail based on velocity + if (this.physics.getVelocityMagnitude() > 5) { + const rect = this.card.getBoundingClientRect(); + this.visualEffects.createParticleTrail( + rect.left + rect.width / 2 + moveX, + rect.top + rect.height / 2 + moveY, + direction + ); + } + } + + updateActionHints(moveX, moveY) { + const absX = Math.abs(moveX); + const absY = Math.abs(moveY); + const threshold = 60; + + // Hide all hints first + Object.values(this.actionHints).forEach(hint => { + hint.classList.remove('visible', 'enhanced-visible'); + }); + + // Show appropriate hint with enhanced effects + if (absX > threshold || absY > threshold) { + let activeHint; + + if (absX > absY) { + activeHint = moveX > 0 ? this.actionHints.right : this.actionHints.left; + } else { + activeHint = moveY > 0 ? this.actionHints.down : this.actionHints.up; + } + + if (activeHint) { + activeHint.classList.add('visible', 'enhanced-visible'); + + // Add intensity based on distance + const intensity = Math.min((Math.max(absX, absY) - threshold) / 100, 1); + activeHint.style.transform = `scale(${1 + intensity * 0.2})`; + activeHint.style.opacity = 0.8 + intensity * 0.2; + } + } + } + + handlePointerUp(timestamp) { + if (!this.state.isDragging) return; + + this.state.isDragging = false; + this.stopUpdateLoop(); + + // Remove visual states + this.card.classList.remove('swiping', 'enhanced-swiping'); + this.card.style.cursor = ''; + + // Hide action hints + Object.values(this.actionHints).forEach(hint => { + hint.classList.remove('visible', 'enhanced-visible'); + hint.style.transform = ''; + hint.style.opacity = ''; + }); + + // Determine action based on physics + const displacement = this.physics.position; + const velocity = this.physics.velocity; + const velocityMagnitude = this.physics.getVelocityMagnitude(); + + const absX = Math.abs(displacement.x); + const absY = Math.abs(displacement.y); + + // Check if swipe meets threshold or has sufficient momentum + const meetsThreshold = absX > this.threshold || absY > this.threshold; + const hasMomentum = velocityMagnitude > this.velocityThreshold; + + if (this.state.hasMoved && (meetsThreshold || hasMomentum)) { + // Determine direction + let direction; + if (absX > absY) { + direction = displacement.x > 0 ? 'right' : 'left'; + } else { + direction = displacement.y > 0 ? 'down' : 'up'; + } + + this.performSwipe(direction); + } else { + // Spring back to center + this.animateSpringBack(); + } + } + + performSwipe(direction) { + this.state.isAnimating = true; + + // Show decision indicator + this.showEnhancedDecisionIndicator(direction); + + // Animate momentum-based exit + this.physics.animateMomentumExit( + direction, + (x, y, velocity, progress) => { + // Update card position during exit + const rotation = this.getExitRotation(direction, progress); + const scale = 1 - progress * 0.3; + const opacity = 1 - progress; + + this.card.style.transform = ` + translate3d(${x}px, ${y}px, 0) + rotate(${rotation}deg) + scale3d(${scale}, ${scale}, 1) + `; + this.card.style.opacity = opacity; + }, + () => { + // Animation complete + this.state.isAnimating = false; + this.onSwipe(direction); + this.resetCard(); + } + ); + } + + animateSpringBack() { + this.state.isAnimating = true; + + this.physics.animateSpringTo( + 0, 0, + (x, y, velocity) => { + // Update card position during spring-back + const velocityMagnitude = Math.sqrt(velocity.x * velocity.x + velocity.y * velocity.y); + const wobble = Math.sin(performance.now() * 0.01) * velocityMagnitude * 0.1; + + this.card.style.transform = ` + translate3d(${x}px, ${y}px, 0) + rotate(${wobble}deg) + scale3d(1, 1, 1) + `; + }, + () => { + // Spring-back complete + this.state.isAnimating = false; + this.visualEffects.resetEffects(); + this.card.style.transform = ''; + } + ); + } + + showEnhancedDecisionIndicator(direction) { + // Decision indicators removed - no visual feedback needed + // The swipe action will be handled directly without visual indicators + console.log(`Swipe direction: ${direction}`); + } + + getExitRotation(direction, progress) { + const maxRotation = { + left: -45, + right: 45, + up: 15, + down: -15 + }; + + return (maxRotation[direction] || 0) * progress; + } + + getSwipeDirection(x, y) { + const absX = Math.abs(x); + const absY = Math.abs(y); + + if (absX > absY) { + return x > 0 ? 'right' : 'left'; + } else { + return y > 0 ? 'down' : 'up'; + } + } + + startUpdateLoop() { + if (this.rafId) return; + + const update = () => { + if (this.state.isDragging) { + this.rafId = requestAnimationFrame(update); + } else { + this.rafId = null; + } + }; + + this.rafId = requestAnimationFrame(update); + } + + stopUpdateLoop() { + if (this.rafId) { + cancelAnimationFrame(this.rafId); + this.rafId = null; + } + } + + setImage(imageInfo) { + this.state.currentImageInfo = imageInfo; + + if (!imageInfo) { + this.card.innerHTML = '
No more images available.
'; + return; + } + + const cardImage = this.card.querySelector('img'); + if (!cardImage) return; + + // Enhanced image loading with fade effect + const preloadImg = new Image(); + preloadImg.onload = () => { + cardImage.style.opacity = 0; + cardImage.src = imageInfo.path; + + // Smooth fade-in with spring animation + setTimeout(() => { + cardImage.style.transition = 'opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)'; + cardImage.style.opacity = 1; + }, 50); + }; + preloadImg.src = imageInfo.path; + } + + showLoading() { + this.card.classList.add('loading', 'enhanced-loading'); + } + + hideLoading() { + this.card.classList.remove('loading', 'enhanced-loading'); + } + + resetCard() { + this.physics.reset(); + this.visualEffects.resetEffects(); + this.card.style.transform = ''; + this.card.style.opacity = ''; + this.card.style.filter = ''; + this.state.hasMoved = false; + this.state.isAnimating = false; + } + + destroy() { + this.stopUpdateLoop(); + this.physics.stopAnimation(); + + // Remove event listeners + if (this.boundHandlePointerDown) { + this.card.removeEventListener('mousedown', this.boundHandlePointerDown); + } + if (this.boundHandlePointerMove) { + document.removeEventListener('mousemove', this.boundHandlePointerMove); + } + if (this.boundHandlePointerUp) { + document.removeEventListener('mouseup', this.boundHandlePointerUp); + } + + // Clean up + this.visualEffects = null; + this.physics = null; + this.boundHandlePointerDown = null; + this.boundHandlePointerMove = null; + this.boundHandlePointerUp = null; + } +} \ No newline at end of file diff --git a/components/fallback-swipe-card.js b/components/fallback-swipe-card.js new file mode 100644 index 0000000..48c9ce3 --- /dev/null +++ b/components/fallback-swipe-card.js @@ -0,0 +1,168 @@ +/** + * Fallback Swipe Card Component + * Simple swipe implementation for compatibility mode + */ + +export default class FallbackSwipeCard { + constructor(options = {}) { + this.container = options.container || document.querySelector('.swipe-container'); + this.onSwipe = options.onSwipe || (() => {}); + this.threshold = options.threshold || 100; + + this.state = { + isDragging: false, + startX: 0, + startY: 0, + moveX: 0, + moveY: 0, + hasMoved: false, + currentImageInfo: null + }; + + this.card = null; + this.init(); + } + + init() { + this.card = this.container.querySelector('.image-card') || this.createCardElement(); + this.addEventListeners(); + console.log('FallbackSwipeCard initialized'); + } + + createCardElement() { + const card = document.createElement('div'); + card.className = 'image-card'; + card.id = 'current-card'; + card.setAttribute('role', 'img'); + card.setAttribute('aria-label', 'Image to be swiped'); + + const img = document.createElement('img'); + img.src = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22400%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22%23e0e0e0%22%2F%3E%3Ctext%20x%3D%22200%22%20y%3D%22200%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20alignment-baseline%3D%22middle%22%20fill%3D%22%23999%22%3ELoading...%3C%2Ftext%3E%3C%2Fsvg%3E'; + img.alt = 'Image'; + + const loadingIndicator = document.createElement('div'); + loadingIndicator.className = 'loading-indicator'; + loadingIndicator.textContent = 'Loading...'; + + card.appendChild(img); + card.appendChild(loadingIndicator); + this.container.appendChild(card); + + return card; + } + + addEventListeners() { + // Mouse events + this.card.addEventListener('mousedown', (e) => this.handlePointerDown(e.clientX, e.clientY)); + document.addEventListener('mousemove', (e) => this.handlePointerMove(e.clientX, e.clientY)); + document.addEventListener('mouseup', () => this.handlePointerUp()); + + // Touch events + this.card.addEventListener('touchstart', (e) => { + const touch = e.touches[0]; + this.handlePointerDown(touch.clientX, touch.clientY); + }, { passive: true }); + + this.card.addEventListener('touchmove', (e) => { + const touch = e.touches[0]; + this.handlePointerMove(touch.clientX, touch.clientY); + }, { passive: true }); + + this.card.addEventListener('touchend', () => this.handlePointerUp()); + } + + handlePointerDown(x, y) { + this.state.isDragging = true; + this.state.startX = x; + this.state.startY = y; + this.state.hasMoved = false; + this.card.classList.add('swiping'); + } + + handlePointerMove(x, y) { + if (!this.state.isDragging) return; + + this.state.moveX = x - this.state.startX; + this.state.moveY = y - this.state.startY; + + if (Math.abs(this.state.moveX) > 10 || Math.abs(this.state.moveY) > 10) { + this.state.hasMoved = true; + } + + // Simple transform without physics + this.card.style.transform = `translate(${this.state.moveX}px, ${this.state.moveY}px) rotate(${this.state.moveX * 0.05}deg)`; + } + + handlePointerUp() { + if (!this.state.isDragging) return; + + this.state.isDragging = false; + this.card.classList.remove('swiping'); + + const absX = Math.abs(this.state.moveX); + const absY = Math.abs(this.state.moveY); + + if (this.state.hasMoved && (absX > this.threshold || absY > this.threshold)) { + let direction; + if (absX > absY) { + direction = this.state.moveX > 0 ? 'right' : 'left'; + } else { + direction = this.state.moveY > 0 ? 'down' : 'up'; + } + + this.performSwipe(direction); + } else { + // Reset position + this.card.style.transition = 'transform 0.3s ease'; + this.card.style.transform = ''; + setTimeout(() => { + this.card.style.transition = ''; + }, 300); + } + + this.state.moveX = 0; + this.state.moveY = 0; + } + + performSwipe(direction) { + this.card.classList.add(`swipe-${direction}`); + this.onSwipe(direction); + + setTimeout(() => { + this.card.classList.remove(`swipe-${direction}`); + this.card.style.transform = ''; + }, 500); + } + + setImage(imageInfo) { + this.state.currentImageInfo = imageInfo; + + if (!imageInfo) { + this.card.innerHTML = '
No more images available.
'; + return; + } + + const cardImage = this.card.querySelector('img'); + if (cardImage) { + cardImage.src = imageInfo.path; + } + } + + showLoading() { + this.card.classList.add('loading'); + } + + hideLoading() { + this.card.classList.remove('loading'); + } + + destroy() { + // Remove event listeners + this.card.removeEventListener('mousedown', this.handlePointerDown); + document.removeEventListener('mousemove', this.handlePointerMove); + document.removeEventListener('mouseup', this.handlePointerUp); + + // Clean up + this.card = null; + } +} \ No newline at end of file diff --git a/components/swipe-card.js b/components/swipe-card.js index d3c1975..99e10c8 100644 --- a/components/swipe-card.js +++ b/components/swipe-card.js @@ -80,22 +80,13 @@ class SwipeCard { } createDecisionIndicators() { - const directions = ['left', 'right', 'up', 'down']; - const icons = ['fa-trash', 'fa-folder-plus', 'fa-star', 'fa-clock']; - - directions.forEach((direction, index) => { - // Check if indicator already exists - let indicator = this.container.querySelector(`.decision-${direction}`); - - if (!indicator) { - indicator = document.createElement('div'); - indicator.className = `swipe-decision decision-${direction}`; - indicator.innerHTML = ``; - this.container.appendChild(indicator); - } - - this.decisionIndicators[direction] = indicator; - }); + // Decision indicators removed - no longer creating visual icons + this.decisionIndicators = { + left: null, + right: null, + up: null, + down: null + }; } addEventListeners() { @@ -243,14 +234,8 @@ class SwipeCard { } showDecisionIndicator(direction) { - const indicator = this.decisionIndicators[direction]; - if (indicator) { - indicator.classList.add('visible'); - - setTimeout(() => { - indicator.classList.remove('visible'); - }, 800); - } + // Decision indicators removed - no visual feedback needed + console.log(`Swipe direction: ${direction}`); } setImage(imageInfo) { diff --git a/index.html b/index.html index 35d56ba..f4fd797 100644 --- a/index.html +++ b/index.html @@ -20,13 +20,6 @@ Image
Loading...
- -
-
Discard
-
Keep
-
Favorite
-
Review
-