Merge remote-tracking branch 'origin/level-binding'

Author: BakedAlaskaTM

package-lock.json

@@ -1,29 +1,61 @@
-import { useEffect, useRef } from "react";
-import { main } from "./solarsystem.js";
 import styles from "./Home.module.css";
+import { useState, useEffect, useRef } from "react";
+import LevelComponent from "../../components/LevelComponent";
+import { main } from "./js/main.js";
+import { useMouseMoving } from "../../hooks/useMouseMoving.js";
 
-function Home() {
-    
+export default function Home() {
+    const lvlNum = 4;
     const canvasRef = useRef<HTMLCanvasElement | null>(null);
+    const zoomOutRef = useRef<(() => void) | null>(null);
+
+    const [isVisible, setIsVisible] = useState(false);
+    const [mountKey, setMountKey] = useState(0);
+    const isMouseMoving = useMouseMoving(2500);
+    const hideUI = isMouseMoving || isVisible;
+
+    const handleOpen = () => {
+        setMountKey(k => k + 1);
+        setIsVisible(true);
+    };
+
+    const handleClose = () => {
+        setIsVisible(false);
+        zoomOutRef.current?.();
+    };
 
     useEffect(() => {
-        
         if (!canvasRef.current) return;
-        
-        main(canvasRef.current);
-
+        const { zoomOut } = main(canvasRef.current, handleOpen);
+        zoomOutRef.current = zoomOut;
     }, []);
 
     return (
-        <>
-            <header>
+        <div>
+            <header style={{
+                transition: "opacity 0.4s ease",
+                opacity: hideUI ? 0 : 1,
+                pointerEvents: hideUI ? "none" : "auto",
+            }}
+            >
                 <div className={styles["header-brand"]}>
-                    <h1>Glorpython</h1>
+                    <h1>glorpython</h1>
                 </div>
             </header>
-            <canvas ref={canvasRef} className={styles.solarsystem}></canvas>
-        </>
+            <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>
+
+                )}
+                <canvas ref={canvasRef} className={styles.solarsystem}></canvas>
+            </section>
+        </div>
     );
 }
-
-export default Home;

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

@@ -1,4 +1,4 @@
-import * as THREE from "three";
+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
@@ -54,6 +54,8 @@ export function main(canvas) {
     ];
 
     const planets = planetData.flatMap(d => {
+    
+        
         const pts = [];
         for (let i = 0; i <= 128; i++) {
             const a = (i / 128) * Math.PI * 2;
@@ -101,6 +103,10 @@ export function main(canvas) {
         scene.add(new THREE.Points(starGeo, starMat));
     }
 
+
+
+    
+
     // Mouse parallax
     let targetOffset = { x: 0, y: 0 };
     let currentOffset = { x: 0, y: 0 };

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

@@ -1,13 +1,13 @@
 import styles from "./Home.module.css";
 import { useState, useEffect, useRef } from "react";
 import LevelComponent from "../../components/LevelComponent";
-import { main } from "./solarsystem.js";
+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);
@@ -25,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 (
@@ -47,9 +48,8 @@ export default function Home() {
                     <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={1}
+                          selectedLevel={getLevelRef.current ? getLevelRef.current() : 0}
                           onClose={() => handleClose()}
-                          
                         />
                     </div>
 

src/pages/home/Home.tsx

@@ -0,0 +1,88 @@
+import * as THREE from "three";
+
+export function createCamera( canvas ) {
+    
+    const fov = 45;
+    const aspect = canvas.clientWidth / canvas.clientHeight;
+    const near = 0.1;
+    const far = 500;
+    const basePosition = new THREE.Vector3(0, 40, 70);
+    
+    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
+    
+    camera.position.copy(basePosition);
+
+    return { camera, basePosition };
+    
+}
+
+export function setupParallax( canvas ) {
+    
+    // Mouse parallax
+    const targetOffset = { x: 0, y: 0 };
+    const currentOffset = { x: 0, y: 0 };
+
+    window.addEventListener('mousemove', e => {
+        const rect = canvas.getBoundingClientRect();
+        const nx = (e.clientX - rect.left) / rect.width  - 0.5;
+        const ny = (e.clientY - rect.top)  / rect.height - 0.5;
+        targetOffset.x =  nx * 20;
+        targetOffset.y = -ny * 20;
+    });
+
+    window.addEventListener('mouseleave', () => {
+        targetOffset.x = 0;
+        targetOffset.y = 0;
+    });
+
+    return { targetOffset, currentOffset };
+    
+}
+
+export function setupFocus( canvas, camera, planets, basePosition ) {
+    
+    const focus = {
+        raycaster:    new THREE.Raycaster(),
+        pointer:      new THREE.Vector2(),
+        paused:       false,
+        focusedPlanet: null,
+        cameraTarget:  null,
+        lookAtTarget:  null,
+        tweening:      false,
+        popupFired: false,
+    };
+
+    canvas.addEventListener('click', e => {
+        const rect = canvas.getBoundingClientRect();
+        focus.pointer.x =  ((e.clientX - rect.left) / rect.width)  * 2 - 1;
+        focus.pointer.y = -((e.clientY - rect.top)  / rect.height) * 2 + 1;
+        focus.raycaster.setFromCamera(focus.pointer, camera);
+
+        const meshes = planets.map(p => p.mesh);
+        const hits   = focus.raycaster.intersectObjects(meshes);
+
+        if (hits.length > 0) {
+            focus.focusedPlanet = planets.find(p => p.mesh === hits[0].object);
+            focus.paused   = true;
+            focus.tweening  = true;
+            focus.popupFired = false;
+        } 
+        else {
+            zoomOut();
+        }
+    });
+
+    function zoomOut() {
+        focus.focusedPlanet = null;
+        focus.paused        = false;
+        focus.tweening      = true;
+        focus.cameraTarget  = basePosition.clone();
+        focus.lookAtTarget  = new THREE.Vector3(0, 0, 0);
+    }
+
+    return { focus, zoomOut };
+    
+}
+
+
+