Bug fixes
This commit is contained in:
Aodhan Collins
497
components/enhanced-swipe-card.js
Normal file
497
components/enhanced-swipe-card.js
Normal file
@@ -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 = `
|
||||
<div class="loading-spinner physics-spinner"></div>
|
||||
<div class="loading-text">Loading...</div>
|
||||
`;
|
||||
|
||||
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 = `
|
||||
<div class="hint-icon"></div>
|
||||
<span class="hint-text">${text}</span>
|
||||
`;
|
||||
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 = '<div class="no-images-message enhanced-message">No more images available.</div>';
|
||||
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user