hover fix kinda + HUD setup

RidwanSharkar · Oct 29, 2024 · 13b4f06 · 13b4f06
1 parent 3253700
commit 13b4f06
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 35 deletions.
diff --git a/warpgate/EnhancedPlanet.tsx b/warpgate/EnhancedPlanet.tsx
@@ -5,6 +5,8 @@ import Moon from './Moon';
 import * as THREE from 'three';
 import { CelestialObjectGlow } from './CelestialObjectGlow';
 import { PlanetData } from './EnhancedPlanetGroup';
+import { ThreeEvent } from '@react-three/fiber';
+
 
 interface EnhancedPlanetProps extends PlanetData {
   index: number;
@@ -13,6 +15,8 @@ interface EnhancedPlanetProps extends PlanetData {
   selected: boolean;
 }
 
+/*=============================================================================================================*/
+
 const EnhancedPlanet: React.FC<EnhancedPlanetProps> = ({ 
   planetColor, 
   size,
@@ -35,7 +39,7 @@ const EnhancedPlanet: React.FC<EnhancedPlanetProps> = ({
 
   const logoTexture = useLoader(
     TextureLoader,
-    logoTexturePath || '/textures/transparent.png'
+    logoTexturePath || '/textures/transparent.png'//placeholder
   );
 
   useFrame(({ clock }) => {
@@ -74,6 +78,20 @@ const EnhancedPlanet: React.FC<EnhancedPlanetProps> = ({
 
   const logoRef = useRef<Mesh>(null);
 
+  const handlePointerOver = (e: ThreeEvent<PointerEvent>) => {
+    e.stopPropagation();
+    setTimeout(() => setHovered(true), 50);
+    document.body.style.cursor = 'pointer';
+  };
+
+  const handlePointerOut = (e: ThreeEvent<PointerEvent>) => {
+    e.stopPropagation();
+    setTimeout(() => setHovered(false), 50);
+    if (!selected) document.body.style.cursor = 'auto';
+  };
+
+/*=============================================================================================================*/
+
   useFrame(() => {
     if (logoRef.current) {
       logoRef.current.rotation.y += 0.01; // Logo rotation speed
@@ -97,25 +115,15 @@ const EnhancedPlanet: React.FC<EnhancedPlanetProps> = ({
       <mesh
         ref={meshRef}
         onClick={handleClick}
-        onPointerOver={(e) => {
-          e.stopPropagation();
-          setHovered(true);
-          document.body.style.cursor = 'pointer'; // Set cursor here for consistency
-        }}
-        onPointerOut={(e) => {
-          e.stopPropagation();
-          setHovered(false);
-          if (!selected) {
-            document.body.style.cursor = 'auto'; // Reset cursor if not selected
-          }
-        }}
+        onPointerOver={handlePointerOver}
+        onPointerOut={handlePointerOut}
         scale={selected ? [1.0, 1.0, 1.0] : [1, 1, 1]} // scale when selected meh
       >
-        <sphereGeometry args={[size, 96, 96]} />
+        <sphereGeometry args={[size, 64, 64]} />
         <meshStandardMaterial color={planetColor} />
 
         {/* HOVER + SELECT GLOW */}
-        {(hovered || selected) && (
+        {(selected) && (
           <CelestialObjectGlow 
             color={planetColor} 
             size={size} 
@@ -164,7 +172,7 @@ const EnhancedPlanet: React.FC<EnhancedPlanetProps> = ({
             ref={logoRef}
             position={[0, size + 0.5, 0]} 
             rotation={[0, 0, 0]}
-            scale={[0.7, 0.7, 0.7]} 
+            scale={[1, 1, 1]} 
           >
             <planeGeometry args={[1, 1]} />
             <meshBasicMaterial 
@@ -176,8 +184,6 @@ const EnhancedPlanet: React.FC<EnhancedPlanetProps> = ({
         )}
 
 
-
-
       </mesh>
     </group>
   );

diff --git a/warpgate/EnhancedPlanetGroup.tsx b/warpgate/EnhancedPlanetGroup.tsx
@@ -71,7 +71,7 @@ const EnhancedPlanetGroup: React.FC<EnhancedPlanetGroupProps> = ({ onSelectPlane
     // PLANET 2: GITHUB
     {
       position: [0, 0, 0],
-      link: 'https://github.com/ridwansharkar',
+      link: 'https://github.com/RidwanSharkar',
       label: 'GitHub',
       description: 'Explore()',
       orbitRadius: 5.0,
@@ -105,15 +105,15 @@ const EnhancedPlanetGroup: React.FC<EnhancedPlanetGroupProps> = ({ onSelectPlane
           orbitSpeed: 0.9,
           size: 0.15,
           moonColor: '#80FF72',
-          link: 'https://github.com/ridwansharkar/Pharmacological-Compound-Classifier.com',
+          link: 'https://github.com/RidwanSharkar/Pharmacological-Compound-Classifier',
           label: 'Compound Classifier',
         },
         { // Moon 4: MMA Arbitrager
           orbitRadius: 2.1,
           orbitSpeed: 0.1,
           size: 0.11,
           moonColor: '#f0a5ab',
-          link: 'https://github.com/ridwansharkar/Arbitrage-Better',
+          link: 'https://github.com/RidwanSharkar/Arbitrage-Better',
           label: 'MMA Arbitrager',
         },
       ],
@@ -151,7 +151,7 @@ const EnhancedPlanetGroup: React.FC<EnhancedPlanetGroupProps> = ({ onSelectPlane
     {
       position: [0, 0, 0],
       link: 'https://mythos.store',
-      label: 'Mythos',
+      label: 'Mythos.store',
       description: 'browse() and buy()',
       orbitRadius: 10,
       orbitSpeed: 0.3,

diff --git a/warpgate/InfoPanel.module.css b/warpgate/InfoPanel.module.css
@@ -3,11 +3,10 @@
 .infoPanel {
   position: fixed;
   top: 30px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex; /* Flexbox for row layout */
-  align-items: center; /* Center content vertically */
-  justify-content: space-between; /* Space between elements */
+  left: 35.5%;
+  display: flex; 
+  align-items: center;
+  justify-content: space-between; 
   background: rgba(0, 0, 0, 0.7);
   color: #ffffff;
   padding: 15px 22.5px;
@@ -25,7 +24,6 @@
 }
 
 
-
 .infoPanel::before {
   content: '';
   position: absolute;
@@ -40,6 +38,16 @@
   border-radius: 12px;
 }
 
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5); /* Semi-transparent dark background */
+  z-index: 999; /* Behind the info panel */
+}
+
 .closeButton:hover {
   color: #ff6b6b; /* Change color on hover */
 }

diff --git a/warpgate/InfoPanel.tsx b/warpgate/InfoPanel.tsx
@@ -13,29 +13,40 @@ const InfoPanel: React.FC<InfoPanelProps> = ({ planet, onClose }) => {
   const [visible, setVisible] = useState(false);
 
   useEffect(() => {
-    setVisible(true);
+    setVisible(true); // Show panel on mount
   }, []);
 
+  const handleClose = () => {
+    setVisible(false); // Trigger exit animation
+    setTimeout(onClose, 500); // Wait for animation to finish before closing
+  };
+
   return (
     <AnimatePresence>
       {visible && (
-        <motion.div
+        <>
+          {/* Overlay detects external click */}
+          <div className={styles.overlay} onClick={handleClose}></div>
+
+          <motion.div
           className={styles.infoPanel}
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: -20 }}
           transition={{ duration: 0.5 }}
         >
-          <button className={styles.closeButton} onClick={onClose}>×</button>
-          <h2>{planet.label}</h2>
-          <p>{planet.description || 'No description available.'}</p>
+          <div>
+            <h2>{planet.label}</h2>
+            <p>{planet.description || 'No description available.'}</p>
+          </div>
           <a href={planet.link} target="_blank" rel="noopener noreferrer" className={styles.infoButton}>
             Visit
           </a>
-        </motion.div>
+          </motion.div>
+        </>
       )}
     </AnimatePresence>
   );
 };
 
-export default InfoPanel;
+export default InfoPanel;