diff --git a/warpgate/EnhancedPlanet.tsx b/warpgate/EnhancedPlanet.tsx index 5c3c75f..bc14ed2 100644 --- a/warpgate/EnhancedPlanet.tsx +++ b/warpgate/EnhancedPlanet.tsx @@ -1,7 +1,6 @@ import React, { useRef, useState, useEffect } from 'react'; import { useFrame, useLoader } from '@react-three/fiber'; import { Mesh, Euler, TextureLoader } from 'three'; -import { Html } from '@react-three/drei'; import Moon from './Moon'; import * as THREE from 'three'; import { CelestialObjectGlow } from './CelestialObjectGlow'; @@ -58,7 +57,7 @@ const EnhancedPlanet: React.FC = ({ const handleClick = () => { onSelectPlanet(index, { - position: [0, 0, 0], // MAKE RANDOM + position: [0, 0, 0], link, label, description, @@ -101,14 +100,18 @@ const EnhancedPlanet: React.FC = ({ 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 + } }} - scale={selected ? [1.1, 1.1, 1.1] : [1, 1, 1]} // scale when selected + scale={selected ? [1.0, 1.0, 1.0] : [1, 1, 1]} // scale when selected meh > - + {/* HOVER + SELECT GLOW */} @@ -172,22 +175,7 @@ const EnhancedPlanet: React.FC = ({ )} - {/* Tooltip */} - {(hovered || selected) && label && ( - - - )} + diff --git a/warpgate/EnhancedPlanetGroup.tsx b/warpgate/EnhancedPlanetGroup.tsx index c84fa1c..4684f20 100644 --- a/warpgate/EnhancedPlanetGroup.tsx +++ b/warpgate/EnhancedPlanetGroup.tsx @@ -105,7 +105,7 @@ const EnhancedPlanetGroup: React.FC = ({ 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.com', label: 'Compound Classifier', }, { // Moon 4: MMA Arbitrager @@ -113,7 +113,7 @@ const EnhancedPlanetGroup: React.FC = ({ onSelectPlane 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', }, ], diff --git a/warpgate/InfoPanel.module.css b/warpgate/InfoPanel.module.css index b8c9db7..f5fde02 100644 --- a/warpgate/InfoPanel.module.css +++ b/warpgate/InfoPanel.module.css @@ -2,24 +2,30 @@ .infoPanel { position: fixed; - top:30px; /* Distance from the top of the screen */ - left: 39%; /* Center horizontally */ - background: rgba(0, 0, 0, 0.7); /* Semi-transparent dark background */ + 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 */ + background: rgba(0, 0, 0, 0.7); color: #ffffff; padding: 15px 22.5px; border-radius: 20px; - width: 300px; - max-width: 90%; + width: 30%; /* Adjust width as needed */ + max-width: 600px; /* Set a maximum width */ box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); - backdrop-filter: blur(10px); /* Frosted glass effect */ + backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; - z-index: 1000; + z-index: 1000; border: 2px solid transparent; background-clip: padding-box; font-family: 'Roboto', sans-serif; } + + .infoPanel::before { content: ''; position: absolute; @@ -34,18 +40,6 @@ border-radius: 12px; } -.closeButton { - position: absolute; - top: 10px; - right: 15px; - background: transparent; - border: none; - color: #ffffff; - font-size: 1.5rem; - cursor: pointer; - transition: color 0.3s ease; -} - .closeButton:hover { color: #ff6b6b; /* Change color on hover */ } diff --git a/warpgate/Sun.tsx b/warpgate/Sun.tsx index 2afb282..3f8b314 100644 --- a/warpgate/Sun.tsx +++ b/warpgate/Sun.tsx @@ -87,7 +87,7 @@ const Sun = forwardRef(({ // Glow const glowMaterial = glowRef.current?.material as ShaderMaterial; if (glowMaterial?.uniforms) { - glowMaterial.uniforms.intensity.value = 1.0 + Math.sin(t) * 0.1; + glowMaterial.uniforms.intensity.value = 1.0 + Math.sin(t) * 0.4; } });