swiping on profiles

Author: natashaw17

src/components/OrbitSystem.tsx

@@ -64,7 +64,26 @@ export default function OrbitSystem() {
       newSet.add(alien.id);
       return newSet;
     });
-    setSelectedAlien(null);
+
+    // Find the next available alien in activeIds
+    const currentIndex = activeIds.indexOf(alien.id);
+    let nextId = null;
+    if (currentIndex >= 0) {
+      for(let i=1; i<5; i++) {
+        const candidate = activeIds[(currentIndex + i) % 5];
+        if (candidate && candidate !== alien.id) {
+          nextId = candidate;
+          break;
+        }
+      }
+    }
+
+    if (nextId) {
+      const nextAlien = mockAliens.find(a => a.id === nextId);
+      setSelectedAlien(nextAlien || null);
+    } else {
+      setSelectedAlien(null);
+    }
   };
 
   const visibleAliens = mockAliens.filter(a => activeIds.includes(a.id));

src/components/ProfileModal.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import type { AlienProfile } from '../data/mockAliens';
 import { X, Heart, Info, Globe, Wind } from 'lucide-react';
 
@@ -9,8 +10,38 @@ interface ProfileModalProps {
 }
 
 export default function ProfileModal({ alien, onClose, onMatch, onDismiss }: ProfileModalProps) {
+  const [swipeDirection, setSwipeDirection] = useState<'left' | 'right' | null>(null);
+
+  useEffect(() => {
+    setSwipeDirection(null);
+  }, [alien.id]);
+
+  const handleMatch = () => {
+    setSwipeDirection('right');
+    setTimeout(() => onMatch(alien), 300);
+  };
+
+  const handleDismiss = () => {
+    setSwipeDirection('left');
+    setTimeout(() => onDismiss(alien), 300);
+  };
+
   return (
-    <div style={{
+    <>
+      <style>{`
+        .swipe-card {
+          transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+        }
+        .swipe-card.left {
+          transform: translateX(-150%) rotate(-15deg);
+          opacity: 0;
+        }
+        .swipe-card.right {
+          transform: translateX(150%) rotate(15deg);
+          opacity: 0;
+        }
+      `}</style>
+      <div style={{
       position: 'fixed',
       top: 0, left: 0, right: 0, bottom: 0,
       backgroundColor: 'rgba(15, 23, 42, 0.8)',
@@ -21,13 +52,30 @@ export default function ProfileModal({ alien, onClose, onMatch, onDismiss }: Pro
       zIndex: 1000,
       padding: '20px'
     }}>
-      <div className="glass-panel" style={{
-        maxWidth: '500px',
-        width: '100%',
-        maxHeight: '90vh',
-        overflowY: 'auto',
-        position: 'relative'
-      }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '24px', width: '100%', maxWidth: '700px', justifyContent: 'center' }}>
+        
+        {/* Reject Button */}
+        <button 
+          onClick={handleDismiss}
+          style={{
+            width: '60px', height: '60px', borderRadius: '50%',
+            background: 'rgba(46, 41, 78, 0.8)', border: '2px solid var(--color-white)',
+            color: 'var(--color-white)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+            cursor: 'pointer', transition: 'all 0.2s ease', flexShrink: 0
+          }}
+          onMouseOver={e => e.currentTarget.style.transform = 'scale(1.1)'}
+          onMouseOut={e => e.currentTarget.style.transform = 'scale(1)'}
+        >
+          <X size={28} />
+        </button>
+
+        <div className={`glass-panel swipe-card ${swipeDirection || ''}`} style={{
+          maxWidth: '500px',
+          width: '100%',
+          maxHeight: '90vh',
+          overflowY: 'auto',
+          position: 'relative'
+        }}>
         <button 
           onClick={onClose}
           style={{
@@ -118,38 +166,26 @@ export default function ProfileModal({ alien, onClose, onMatch, onDismiss }: Pro
             </div>
           </div>
 
-          <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '24px' }}>
-            <button 
-              onClick={() => onDismiss(alien)}
-              style={{
-                width: '60px', height: '60px', borderRadius: '50%',
-                background: 'rgba(46, 41, 78, 0.8)', border: '2px solid var(--color-white)',
-                color: 'var(--color-white)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                cursor: 'pointer', transition: 'all 0.2s ease'
-              }}
-              onMouseOver={e => e.currentTarget.style.transform = 'scale(1.1)'}
-              onMouseOut={e => e.currentTarget.style.transform = 'scale(1)'}
-            >
-              <X size={28} />
-            </button>
-            
-            <button 
-              onClick={() => onMatch(alien)}
-              style={{
-                width: '60px', height: '60px', borderRadius: '50%',
-                background: 'linear-gradient(135deg, var(--color-primary), var(--color-secondary))', border: 'none',
-                color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                boxShadow: '0 4px 15px rgba(217, 3, 104, 0.5)',
-                cursor: 'pointer', transition: 'all 0.2s ease'
-              }}
-              onMouseOver={e => e.currentTarget.style.transform = 'scale(1.1)'}
-              onMouseOut={e => e.currentTarget.style.transform = 'scale(1)'}
-            >
-              <Heart size={28} fill="white" />
-            </button>
           </div>
         </div>
+        
+        {/* Match Button */}
+        <button 
+          onClick={handleMatch}
+          style={{
+            width: '60px', height: '60px', borderRadius: '50%',
+            background: 'linear-gradient(135deg, var(--color-primary), var(--color-secondary))', border: 'none',
+            color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
+            boxShadow: '0 4px 15px rgba(217, 3, 104, 0.5)',
+            cursor: 'pointer', transition: 'all 0.2s ease', flexShrink: 0
+          }}
+          onMouseOver={e => e.currentTarget.style.transform = 'scale(1.1)'}
+          onMouseOut={e => e.currentTarget.style.transform = 'scale(1)'}
+        >
+          <Heart size={28} fill="white" />
+        </button>
       </div>
     </div>
+    </>
   );
 }