Merge branch 'main' of https://github.com/devsuoa/devsuoa-devs-sesa-beginner-hackathon-2026-pushing-twenty

Author: BakedAlaskaTM

src/pages/home/.ipynb_checkpoints/Home-checkpoint.tsx

@@ -5,10 +5,9 @@ import { main } from "./js/main.js";
 import { useMouseMoving } from "../../hooks/useMouseMoving.js";
 
 export default function Home() {
-    const lvlNum = 4;
     const canvasRef = useRef<HTMLCanvasElement | null>(null);
     const zoomOutRef = useRef<(() => void) | null>(null);
-
+    const getLevelRef = useRef<(() => number) | null>(null);
     const [isVisible, setIsVisible] = useState(false);
     const [mountKey, setMountKey] = useState(0);
     const isMouseMoving = useMouseMoving(2500);
@@ -26,8 +25,9 @@ export default function Home() {
 
     useEffect(() => {
         if (!canvasRef.current) return;
-        const { zoomOut } = main(canvasRef.current, handleOpen);
+        const { zoomOut, getLevel } = main(canvasRef.current, handleOpen);
         zoomOutRef.current = zoomOut;
+        getLevelRef.current = getLevel;
     }, []);
 
     return (
@@ -39,21 +39,24 @@ export default function Home() {
             }}
             >
                 <div className={styles["header-brand"]}>
-                    <h1>glorpython</h1>
+                    <img src="/logo.png" alt="" />
                 </div>
             </header>
             <section className="relative w-full h-screen">
-                {isVisible && (
-
-                    <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[90vw] h-[90vh] z-50">
-                        <LevelComponent
-                        key={mountKey}
-                        onClose={() => handleClose()}
-                        lvl={lvlNum}
-                        />
-                    </div>
-
-                )}
+                <div
+                    className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[90vw] z-50"
+                    style={{
+                        maxHeight: isVisible ? "100vh" : "0",
+                        overflow: "hidden",
+                        transition: "max-height 0.3s ease",
+                    }}
+                >
+                    <LevelComponent
+                    key={mountKey}
+                    onClose={() => handleClose()}
+                    lvl={getLevelRef.current ? getLevelRef.current() : 0}
+                    />
+                </div>
                 <canvas ref={canvasRef} className={styles.solarsystem}></canvas>
             </section>
         </div>

src/pages/home/.ipynb_checkpoints/solarsystem-checkpoint.js

@@ -3,13 +3,21 @@ timport * as THREE from "three";
 const ZOOM_DIST    = 5;       // how close the camera gets (in planet radii + offset)
 const TWEEN_SPEED  = 0.07;    // lerp factor for camera movement
 
-export function main(canvas) {
-
+export function main(canvas, onPlanetFocus) {
+    const loader = new THREE.TextureLoader();
     const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
     renderer.setPixelRatio(window.devicePixelRatio);
     renderer.toneMapping = THREE.ACESFilmicToneMapping;
     renderer.toneMappingExposure = 2.0;
 
+    const createRepeatingTexture = (path, repeatX = 2, repeatY = 1) => {
+        const tex = loader.load(path);
+        tex.wrapS = THREE.RepeatWrapping;
+        tex.wrapT = THREE.RepeatWrapping;
+        tex.repeat.set(repeatX, repeatY);
+        return tex;
+    };
+
     const fov = 45;
     const aspect = canvas.clientWidth / canvas.clientHeight;
     const near = 0.1;
@@ -37,20 +45,19 @@ export function main(canvas) {
     // Sun
     const sunGeo = new THREE.SphereGeometry(4.5, 64, 64);
     const sunMat = new THREE.MeshStandardMaterial({
-        color: 0xe8ffff,
-        emissive: 0x88ffee,
-        emissiveIntensity: 3.2,
-        roughness: 0.0,
-        metalness: 0.0
+        map: createRepeatingTexture('/textures/glorptest.png', 3, 3),
+        emissiveMap: loader.load('/textures/suntexture.webp'), // same tex drives the glow
+        emissive: 0x91ffaf,
+        emissiveIntensity: 0.1,
     });
     const sun = new THREE.Mesh(sunGeo, sunMat);
     scene.add(sun);
 
     // Planets
     const planetData = [
-        { radius: 1.1, orbitR: 14, speed: 0.8,  tilt: 0.2,  color: 0xff6644, emissive: 0x441100 },
-        { radius: 1.5, orbitR: 24, speed: 0.45, tilt: 0.35, color: 0x44aaff, emissive: 0x001133 },
-        { radius: 1.2, orbitR: 36, speed: 0.25, tilt: 0.15, color: 0x88dd55, emissive: 0x112200 },
+        { radius: 1.1, orbitR: 14, speed: 0.8,  tilt: 0.2,  color: 0xff6644, emissive: 0x441100, texture: '/textures/texture1.webp'},
+        { radius: 1.5, orbitR: 24, speed: 0.45, tilt: 0.35, color: 0x44aaff, emissive: 0x001133, texture: '/textures/texture2.webp' },
+        { radius: 1.2, orbitR: 36, speed: 0.25, tilt: 0.15, color: 0x88dd55, emissive: 0x112200, texture: '/textures/texture3.webp'},
     ];
 
     const planets = planetData.flatMap(d => {
@@ -74,9 +81,7 @@ export function main(canvas) {
         return [0, 1, 2].map(i => {
             const geo = new THREE.SphereGeometry(d.radius, 36, 36);
             const mat = new THREE.MeshStandardMaterial({
-                color: d.color,
-                emissive: d.emissive,
-                emissiveIntensity: 1.0,
+                map: loader.load(d.texture),
                 roughness: 0.65,
                 metalness: 0.05
             });
@@ -128,11 +133,23 @@ export function main(canvas) {
     const raycaster = new THREE.Raycaster();
     const pointer   = new THREE.Vector2();
 
-    let paused         = false;   // are planets frozen?
-    let focusedPlanet  = null;    // the planet object we zoomed into
-    let cameraTarget   = null;    // THREE.Vector3 we're tweening toward
-    let lookAtTarget   = null;    // THREE.Vector3 we're looking at
+    let paused         = false;
+    let focusedPlanet  = null;
+    let cameraTarget   = null;
+    let lookAtTarget   = null;
     let tweening       = false;
+    let popupFired     = false;
+
+    // Zoom out — resets focus and starts the camera tween back to the initial position.
+    // Called both by canvas clicks on empty space and externally (e.g. the ✕ button).
+    function zoomOut() {
+        console.log("Hi");
+        focusedPlanet = null;
+        paused        = false;
+        tweening      = true;
+        cameraTarget  = initPos.clone();
+        lookAtTarget  = new THREE.Vector3(0, 0, 0);
+    }
 
     canvas.addEventListener('click', e => {
         const rect = canvas.getBoundingClientRect();
@@ -144,20 +161,16 @@ export function main(canvas) {
         const hits   = raycaster.intersectObjects(meshes);
 
         if (hits.length > 0) {
-            // Clicked a planet — focus it
             const hit = hits[0];
             focusedPlanet = planets.find(p => p.mesh === hit.object);
-            paused  = true;
-            tweening = true;
+            paused     = true;
+            tweening   = true;
+            popupFired = false;
         } else {
-            // Clicked empty space — release
-            focusedPlanet = null;
-            paused   = false;
-            tweening  = true;
-            cameraTarget = initPos.clone();
-            lookAtTarget = new THREE.Vector3(0, 0, 0);
+            zoomOut();
         }
     });
+
     // ─────────────────────────────────────────────────────────────────────
 
     function resizeRendererToDisplaySize(renderer) {
@@ -172,7 +185,6 @@ export function main(canvas) {
 
     function render() {
 
-        // Advance planet orbits (only when not paused)
         planets.forEach(p => {
             if (!paused) {
                 p.angle += p.speed * 0.008;
@@ -187,47 +199,30 @@ export function main(canvas) {
 
         sun.rotation.y += 0.003;
 
-
-
-
-
-        
-
-        // Update the camera target each frame while focused
-        // (so the camera tracks the planet even mid-tween if it still moves slightly)
         if (focusedPlanet) {
             const pPos = focusedPlanet.mesh.position;
-            // Position the camera slightly behind & above the planet relative to the origin
             const dir = pPos.clone().normalize();
             cameraTarget = pPos.clone().add(dir.multiplyScalar(focusedPlanet.radius + ZOOM_DIST));
             cameraTarget.y += focusedPlanet.radius * 0.8;
             lookAtTarget = pPos.clone();
         }
 
-        // Tween camera
         if (tweening && cameraTarget && lookAtTarget) {
             camera.position.lerp(cameraTarget, TWEEN_SPEED);
             currentLookAt.lerp(lookAtTarget, TWEEN_SPEED);
             camera.lookAt(currentLookAt);
 
-            // Stop tweening once close enough
             if (camera.position.distanceTo(cameraTarget) < 0.05) {
                 tweening = false;
 
-
-
-
-                
-                // POP UP HERE
-
-
-
-
-
-                
+                if (focusedPlanet && !popupFired) {
+                    popupFired = true;
+                    if (typeof onPlanetFocus === 'function') {
+                        onPlanetFocus();
+                    }
+                }
             }
         } else if (!paused) {
-            // Normal parallax behaviour
             currentOffset.x += (targetOffset.x - currentOffset.x) * 0.13;
             currentOffset.y += (targetOffset.y - currentOffset.y) * 0.13;
 
@@ -240,11 +235,6 @@ export function main(canvas) {
             camera.lookAt(currentLookAt);
         }
 
-
-
-
-
-        
         if (resizeRendererToDisplaySize(renderer)) {
             camera.aspect = canvas.clientWidth / canvas.clientHeight;
             camera.updateProjectionMatrix();
@@ -255,4 +245,6 @@ export function main(canvas) {
     }
 
     requestAnimationFrame(render);
+
+    return { zoomOut };
 }

src/pages/home/Home.tsx

@@ -39,21 +39,24 @@ export default function Home() {
             }}
             >
                 <div className={styles["header-brand"]}>
-                    <h1>glorpython</h1>
+                    <img src="/logo.png" alt="" />
                 </div>
             </header>
             <section className="relative w-full h-screen">
-                {isVisible && (
-
-                    <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[90vw] h-[90vh] z-50">
-                        <LevelComponent
-                        // key={mountKey}
-                          selectedLevel={getLevelRef.current ? getLevelRef.current() : 0}
-                          onClose={() => handleClose()}
-                        />
-                    </div>
-
-                )}
+                <div
+                    className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[90vw] z-50"
+                    style={{
+                        maxHeight: isVisible ? "100vh" : "0",
+                        overflow: "hidden",
+                        transition: "max-height 0.3s ease",
+                    }}
+                >
+                    <LevelComponent
+                    key={mountKey}
+                    onClose={() => handleClose()}
+                    selectedLevel={getLevelRef.current ? getLevelRef.current() : 0}
+                    />
+                </div>
                 <canvas ref={canvasRef} className={styles.solarsystem}></canvas>
             </section>
         </div>

src/pages/home/js/.ipynb_checkpoints/main-checkpoint.js

@@ -23,6 +23,10 @@ export function main( canvas, onPlanetFocus ) {
     const currentLookAt = new THREE.Vector3(0, 0, 0);
     const origin = new THREE.Vector3(0, 0, 0);
 
+    function getLevel() {
+        if (!focus.focusedPlanet) return 0;
+        return focus.focusedPlanet.level;
+    }
 
     // --- Render loop ---
 
@@ -37,7 +41,7 @@ export function main( canvas, onPlanetFocus ) {
         renderer.render(scene, camera);
         requestAnimationFrame(render); 
 
-
+        
 
         // --- Done! (the rest is defining these functions) ---
 
@@ -85,14 +89,14 @@ export function main( canvas, onPlanetFocus ) {
             function updateFocusTarget() {
 
                 if (!focus.focusedPlanet) return;
-            
+
                 const planetPosition = focus.focusedPlanet.mesh.position;
                 const planetDirection = planetPosition.clone().normalize();
 
                 focus.cameraTarget = planetPosition.clone().add(planetDirection.multiplyScalar(focus.focusedPlanet.radius + ZOOM_DIST));
                 focus.cameraTarget.y += focus.focusedPlanet.radius * 0.8;
                 focus.lookAtTarget = planetPosition.clone();
-                
+
             }
 
             function updateCameraTween () {
@@ -156,6 +160,6 @@ export function main( canvas, onPlanetFocus ) {
 
     }
 
-    return { zoomOut };
+    return { zoomOut, getLevel };
 
 }