cleaning

RidwanSharkar · Oct 29, 2024 · 7617880 · 7617880
1 parent 47c5a09
commit 7617880
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 31 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -19,20 +19,19 @@ const HomePage: NextPage = () => {
   };
 
   return (
-    <div className="w-screen h-screen bg-gray-900 relative"> {/* Full-screen container */}
+    <div className="w-screen h-screen bg-gray-900 relative"> {/* Full-screen */}
       <Head>
         <title>Planetfolio</title>
         <meta name="description" content="Ridwan Sharkar Landing Page" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      {/* Render PlanetCanvas with the onSelectPlanet handler */}
       <PlanetCanvas 
         onSelectPlanet={handleSelectPlanet} 
-        selectedPlanet={selectedPlanet} // Add this line to fix the error
+        selectedPlanet={selectedPlanet}
       />
 
-      {/* Render InfoPanel as an overlay */}
+      {/* InfoPanel overlay */}
       {selectedPlanet && (
         <InfoPanel
           planet={selectedPlanet.planet}

diff --git a/styles/globals.css b/styles/globals.css
@@ -3,27 +3,23 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Reset some default browser styles */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-/* Set full height and width */
 html,
 body,
 #__next {
   height: 100%;
   width: 100%;
-  overflow: hidden; /* Prevent scrollbars */
+  overflow: hidden; 
 }
 
-/* Set a default font and background color */
 body {
   font-family: 'Roboto', sans-serif;
-  background-color: #000; /* Black background for space theme */
-  color: #fff; /* White text for contrast */
+  background-color: #000; 
+  color: #fff; 
 }
 
-/* Optional: Add any other global styles here */
diff --git a/warpgate/CelestialObjectGlow.tsx b/warpgate/CelestialObjectGlow.tsx
@@ -4,7 +4,7 @@ import * as THREE from 'three';
 import React, { useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
 import { ShaderMaterial, Color } from 'three';
-import { glowVertexShader, glowFragmentShader } from './Glow'; // Ensure these shaders are correctly defined
+import { glowVertexShader, glowFragmentShader } from './Glow';
 
 interface GlowProps {
   color: string;
@@ -25,7 +25,7 @@ export const CelestialObjectGlow: React.FC<GlowProps> = ({
     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
@@ -48,7 +48,7 @@ const EnhancedPlanet: React.FC<EnhancedPlanetProps> = ({
       // 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<EnhancedPlanetProps> = ({
 
   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<EnhancedPlanetProps> = ({
           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
       >
         <sphereGeometry args={[size, 64, 64]} />
         <meshStandardMaterial color={planetColor} />
 
-        {/* Show glow on hover or if selected */}
+        {/* HOVER + SELECT GLOW */}
         {(hovered || selected) && (
           <CelestialObjectGlow 
             color={planetColor} 
             size={size} 
             intensity={0.4} 
-            isSelected={selected} // Pass selected state
+            isSelected={selected} 
           />
         )}
 
@@ -189,6 +189,8 @@ const EnhancedPlanet: React.FC<EnhancedPlanetProps> = ({
             <span>{label}</span>
           </Html>
         )}
+
+
       </mesh>
     </group>
   );

diff --git 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<EnhancedPlanetGroupProps> = ({ onSelectPlanet, selectedPlanet }) => {
   const [explosions, setExplosions] = useState<ExplosionData[]>([]);
 
@@ -122,7 +120,7 @@ const EnhancedPlanetGroup: React.FC<EnhancedPlanetGroupProps> = ({ 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<EnhancedPlanetGroupProps> = ({ onSelectPlane
     },
   ]; 
 
+  //========================================================================================================
+
   const handleCollision = (index: number) => {
     const planet = planets[index];
     const currentTime = Date.now();
@@ -224,12 +224,12 @@ const EnhancedPlanetGroup: React.FC<EnhancedPlanetGroupProps> = ({ 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) => (
         <Explosion
           key={explosion.id}

diff --git a/warpgate/InfoPanel.tsx b/warpgate/InfoPanel.tsx
@@ -1,8 +1,8 @@
 // warpgate/InfoPanel.tsx
 import React, { useEffect, useState } from 'react';
 import { PlanetData } from './EnhancedPlanetGroup';
-import styles from './InfoPanel.module.css'; // Import the CSS Module
-import { motion, AnimatePresence } from 'framer-motion'; // Optional for enhanced animations
+import styles from './InfoPanel.module.css'; 
+import { motion, AnimatePresence } from 'framer-motion'; 
 
 interface InfoPanelProps {
   planet: PlanetData;
@@ -13,16 +13,14 @@ const InfoPanel: React.FC<InfoPanelProps> = ({ 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 (
     <AnimatePresence>
       {visible && (
         <motion.div
-          className={styles.infoPanel} // Use CSS Module class
+          className={styles.infoPanel}
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: -20 }}