feat: overhaul orbit system and expand alien database

Author: appo357

public/alien_cyra.jpeg

@@ -1,32 +1,80 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { mockAliens } from '../data/mockAliens';
 import type { AlienProfile } from '../data/mockAliens';
 import { useAppContext } from '../context/AppContext';
 import ProfileModal from './ProfileModal';
 import MatchOverlay from './MatchOverlay';
 
 export default function OrbitSystem() {
-  const { preferences, addMatch } = useAppContext();
+  const { preferences, addMatch, matches } = useAppContext();
   const [selectedAlien, setSelectedAlien] = useState<AlienProfile | null>(null);
   const [matchedAlien, setMatchedAlien] = useState<AlienProfile | null>(null);
+  const [dismissedIds, setDismissedIds] = useState<Set<string>>(new Set());
+  
+  // Keep exactly 5 slots for the 5 orbit tracks
+  const [activeIds, setActiveIds] = useState<(string | null)[]>([null, null, null, null, null]);
+
+  useEffect(() => {
+    if (!preferences) return;
+    
+    // Available aliens are those within distance, not matched, not dismissed, and not currently active
+    const available = mockAliens.filter(a => 
+      a.distanceAU <= preferences.maxDistanceAU &&
+      !matches.find(m => m.id === a.id) &&
+      !dismissedIds.has(a.id) &&
+      !activeIds.includes(a.id)
+    );
+
+    let changed = false;
+    const newActiveIds = [...activeIds];
+    
+    // Check each of the 5 tracks
+    for (let i = 0; i < 5; i++) {
+      const currentId = newActiveIds[i];
+      // Check if the current alien in this track is still valid
+      const isStillValid = currentId && 
+        mockAliens.find(a => a.id === currentId && a.distanceAU <= preferences.maxDistanceAU) &&
+        !matches.find(m => m.id === currentId) &&
+        !dismissedIds.has(currentId);
+
+      if (!isStillValid) {
+        // The slot is empty or invalid, pull a new alien from available pool
+        const nextAlien = available.shift();
+        newActiveIds[i] = nextAlien ? nextAlien.id : null;
+        changed = true;
+      }
+    }
+
+    if (changed) {
+      setActiveIds(newActiveIds);
+    }
+  }, [preferences, matches, dismissedIds, activeIds]);
 
   if (!preferences) return null;
 
-  // Filter aliens based on max distance
-  const visibleAliens = mockAliens.filter(a => a.distanceAU <= preferences.maxDistanceAU);
-  
   const handleMatch = (alien: AlienProfile) => {
     addMatch(alien);
     setSelectedAlien(null);
     setMatchedAlien(alien);
   };
 
+  const handleDismiss = (alien: AlienProfile) => {
+    setDismissedIds(prev => {
+      const newSet = new Set(prev);
+      newSet.add(alien.id);
+      return newSet;
+    });
+    setSelectedAlien(null);
+  };
+
+  const visibleAliens = mockAliens.filter(a => activeIds.includes(a.id));
+
   return (
     <>
       <style>{`
         @keyframes orbit {
-          from { transform: rotate(0deg) translateX(var(--radius)) rotate(0deg); }
-          to   { transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg); }
+          from { offset-distance: 0%; }
+          to   { offset-distance: 100%; }
         }
         .orbit-ring {
           position: absolute;
@@ -39,14 +87,14 @@ export default function OrbitSystem() {
         }
         .orbit-item {
           position: absolute;
-          top: 50%;
-          left: 50%;
-          margin-top: -30px;
-          margin-left: -30px;
           width: 60px;
           height: 60px;
+          margin-top: -30px; /* Center relative to offset path */
+          margin-left: -30px;
           border-radius: 50%;
           cursor: pointer;
+          offset-path: ellipse(var(--rx) var(--ry) at 50% 50%);
+          offset-rotate: 0deg;
           animation: orbit var(--duration) linear infinite;
         }
         .orbit-avatar {
@@ -69,7 +117,7 @@ export default function OrbitSystem() {
         }
       `}</style>
 
-      <div style={{ position: 'relative', width: '100%', maxWidth: '800px', height: '600px', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
+      <div style={{ position: 'relative', width: '100%', maxWidth: '800px', height: '500px', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
 
         {/* User Center */}
         <div style={{
@@ -90,27 +138,34 @@ export default function OrbitSystem() {
         </div>
 
         {/* Orbit Rings and Aliens */}
-        {visibleAliens.map((alien, i) => {
-          // Calculate radius based on distance (min 80px, max 280px)
-          const radiusRatio = preferences.maxDistanceAU > 0 ? alien.distanceAU / preferences.maxDistanceAU : 1;
-          const radius = 80 + (radiusRatio * 200);
-          const duration = 15 + (radius / 10); // Slower orbit for further objects
-          const startAngle = (i * (360 / visibleAliens.length));
+        {activeIds.map((id, i) => {
+          if (!id) return null; // If no alien is available for this slot, don't render it
+          
+          const alien = mockAliens.find(a => a.id === id);
+          if (!alien) return null;
+
+          // Assign each slot to a distinct track (0 to 4)
+          const rx = 120 + (i * 65); 
+          const ry = 80 + (i * 40);  
+          const duration = 15 + (i * 8); 
+          
+          const delay = -1 * (i * (duration / 5));
 
           return (
-            <div key={alien.id}>
+            <div key={`track-${i}-${alien.id}`}>
               {/* Ring */}
-              <div className="orbit-ring" style={{ width: `${radius * 2}px`, height: `${radius * 2}px` }} />
+              <div className="orbit-ring" style={{ width: `${rx * 2}px`, height: `${ry * 2}px` }} />
 
               {/* Profile */}
               <div 
                 className="orbit-item"
                 onClick={() => setSelectedAlien(alien)}
                 style={{
                   // @ts-ignore
-                  '--radius': `${radius}px`,
+                  '--rx': `${rx}px`,
+                  '--ry': `${ry}px`,
                   '--duration': `${duration}s`,
-                  animationDelay: `-${startAngle}s` // Stagger start positions
+                  animationDelay: `${delay}s`
                 }}
                 title={`${alien.name} (${alien.distanceAU} AU)`}
               >
@@ -126,6 +181,7 @@ export default function OrbitSystem() {
           alien={selectedAlien} 
           onClose={() => setSelectedAlien(null)} 
           onMatch={handleMatch} 
+          onDismiss={handleDismiss}
         />
       )}
 

public/alien_ignis.jpeg

@@ -5,9 +5,10 @@ interface ProfileModalProps {
   alien: AlienProfile;
   onClose: () => void;
   onMatch: (alien: AlienProfile) => void;
+  onDismiss: (alien: AlienProfile) => void;
 }
 
-export default function ProfileModal({ alien, onClose, onMatch }: ProfileModalProps) {
+export default function ProfileModal({ alien, onClose, onMatch, onDismiss }: ProfileModalProps) {
   return (
     <div style={{
       position: 'fixed',
@@ -119,7 +120,7 @@ export default function ProfileModal({ alien, onClose, onMatch }: ProfileModalPr
 
           <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '24px' }}>
             <button 
-              onClick={onClose}
+              onClick={() => onDismiss(alien)}
               style={{
                 width: '60px', height: '60px', borderRadius: '50%',
                 background: 'rgba(46, 41, 78, 0.8)', border: '2px solid var(--color-white)',