Implemented level control from planets

Author: BakedAlaskaTM

package-lock.json

@@ -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 (
@@ -49,7 +49,7 @@ export default function Home() {
                         <LevelComponent
                         key={mountKey}
                         onClose={() => handleClose()}
-                        lvl={lvlNum}
+                        lvl={getLevelRef.current ? getLevelRef.current() : 0}
                         />
                     </div>
 

src/pages/home/Home.tsx

@@ -24,6 +24,11 @@ export function main( canvas, onPlanetFocus ) {
     const origin = new THREE.Vector3(0, 0, 0);
 
 
+    function getLevel() {
+        if (!focus.focusedPlanet) return 0;
+        return focus.focusedPlanet.level;
+    }
+    
     // --- Render loop ---
 
     requestAnimationFrame(render);
@@ -36,8 +41,6 @@ export function main( canvas, onPlanetFocus ) {
 
         renderer.render(scene, camera);
         requestAnimationFrame(render); 
-
-
 
         // --- Done! (the rest is defining these functions) ---
 
@@ -85,14 +88,12 @@ 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 +157,6 @@ export function main( canvas, onPlanetFocus ) {
 
     }
 
-    return { zoomOut };
+    return { zoomOut, getLevel };
 
 }