diff --git a/pages/index.tsx b/pages/index.tsx index 12b8ae6..1414996 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -19,20 +19,19 @@ const HomePage: NextPage = () => { }; return ( -
{/* Full-screen container */} +
{/* Full-screen */} Planetfolio - {/* Render PlanetCanvas with the onSelectPlanet handler */} - {/* Render InfoPanel as an overlay */} + {/* InfoPanel overlay */} {selectedPlanet && ( = ({ if (glowRef.current) { const t = clock.getElapsedTime(); const dynamicIntensity = isSelected - ? intensity * 1.2 // Increase intensity when selected + ? intensity * 1.2 // intensity when selected : intensity * (1.0 + Math.sin(t * 2) * 0.1); glowRef.current.uniforms.intensity.value = dynamicIntensity; } diff --git a/warpgate/EnhancedPlanet.tsx b/warpgate/EnhancedPlanet.tsx index eab56f1..354cadc 100644 --- a/warpgate/EnhancedPlanet.tsx +++ b/warpgate/EnhancedPlanet.tsx @@ -48,7 +48,7 @@ const EnhancedPlanet: React.FC = ({ // Planet rotation meshRef.current.rotation.y += rotationSpeed; - // Collision detection (placeholder logic) + // Collision detection placeholder logic const distance = meshRef.current.position.length(); if (distance < 0.1) { onCollision(index); @@ -58,7 +58,7 @@ const EnhancedPlanet: React.FC = ({ const handleClick = () => { onSelectPlanet(index, { - position: [0, 0, 0], // Ensure this is correctly set + position: [0, 0, 0], // MAKE RANDOM link, label, description, @@ -106,18 +106,18 @@ const EnhancedPlanet: React.FC = ({ e.stopPropagation(); setHovered(false); }} - scale={selected ? [1.1, 1.1, 1.1] : [1, 1, 1]} // Optional: scale when selected + scale={selected ? [1.1, 1.1, 1.1] : [1, 1, 1]} // scale when selected > - {/* Show glow on hover or if selected */} + {/* HOVER + SELECT GLOW */} {(hovered || selected) && ( )} @@ -189,6 +189,8 @@ const EnhancedPlanet: React.FC = ({ {label} )} + + ); diff --git a/warpgate/EnhancedPlanetGroup.tsx b/warpgate/EnhancedPlanetGroup.tsx index 94625d4..a572cd7 100644 --- a/warpgate/EnhancedPlanetGroup.tsx +++ b/warpgate/EnhancedPlanetGroup.tsx @@ -6,11 +6,8 @@ import { Vector3 } from 'three'; import * as THREE from 'three'; import { extend } from '@react-three/fiber'; import { OrbitControls, TransformControls } from 'three-stdlib'; - -// Extend R3F's catalogue extend({ OrbitControls, TransformControls }); - interface EnhancedPlanetGroupProps { onSelectPlanet: (index: number, planet: PlanetData) => void; selectedPlanet: { index: number; planet: PlanetData } | null; @@ -25,7 +22,6 @@ interface MoonData { label?: string; } - export interface PlanetData { position: [number, number, number]; link: string; @@ -52,6 +48,8 @@ interface ExplosionData { id: number; } +//======================================================================================================== + const EnhancedPlanetGroup: React.FC = ({ onSelectPlanet, selectedPlanet }) => { const [explosions, setExplosions] = useState([]); @@ -122,7 +120,7 @@ const EnhancedPlanetGroup: React.FC = ({ onSelectPlane logoTexturePath: '/textures/Github_logo.svg', }, - // PLANET 3: INSTAGRAM + // PLANET 3: INSTAGRAM ART STATION { position: [0, 0, 0], link: 'https://instagram.com/ridwansharkar/?hl=en', @@ -177,6 +175,8 @@ const EnhancedPlanetGroup: React.FC = ({ onSelectPlane }, ]; + //======================================================================================================== + const handleCollision = (index: number) => { const planet = planets[index]; const currentTime = Date.now(); @@ -224,12 +224,12 @@ const EnhancedPlanetGroup: React.FC = ({ onSelectPlane {...planet} index={index} onCollision={handleCollision} - onSelectPlanet={onSelectPlanet} // Pass the handler prop - selected={selectedPlanet?.index === index} // Correctly determine if this planet is selected + onSelectPlanet={onSelectPlanet} + selected={selectedPlanet?.index === index} /> ))} - {/* Render explosions */} + {/* Render explosions - dormant */} {explosions.map((explosion) => ( = ({ planet, onClose }) => { const [visible, setVisible] = useState(false); useEffect(() => { - // Trigger the animation after component mounts setVisible(true); }, []); - // Optional: Use framer-motion for more advanced animations return ( {visible && (