Nothing

rayishihara · rayishihara · commit 0dfa8951594d · 2026-04-19T12:55:56.000+12:00
diff --git a/src/pages/home/.ipynb_checkpoints/Home-checkpoint.tsx b/src/pages/home/.ipynb_checkpoints/Home-checkpoint.tsx
@@ -35,7 +35,7 @@ export default function Home() {
             <header style={{
                 transition: "opacity 0.4s ease",
                 opacity: hideUI ? 0 : 1,
-                pointerEvents: hideUI ? "none" : "auto",
+                pointerEvents: hideUI ? "none" : "auto",                
             }}
             >
                 <div className={styles["header-brand"]}>
@@ -54,11 +54,14 @@ export default function Home() {
                     <LevelComponent
                     key={mountKey}
                     onClose={() => handleClose()}
-                    lvl={getLevelRef.current ? getLevelRef.current() : 0}
+                    selectedLevel={getLevelRef.current ? getLevelRef.current() : 0}
                     />
                 </div>
                 <canvas ref={canvasRef} className={styles.solarsystem}></canvas>
             </section>
         </div>
     );
 }
+const onPlanetClick = () => {
+         setPlanetClicked(true);
+    }
diff --git a/src/pages/home/.ipynb_checkpoints/Home.module-checkpoint.css b/src/pages/home/.ipynb_checkpoints/Home.module-checkpoint.css
@@ -1,13 +1,3 @@
-* {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    vertical-align: baseline;
-    overflow: hidden;
-    /* outline: 1px solid red !important; */
-}
-
 html, body {
     width: 100%;
     height: 100%;
@@ -23,24 +13,42 @@ header {
     
     .header-brand {
         width: 80%;
-        margin-top: 40px;
+        margin-top: 0px;
         display: flex;
         justify-content: center;
 
-        h1 {
-            font-weight: 250;
-            font-size: 4rem;
-            line-height: 100%;
-            color: green;
+        img {
+            width: 35%;
         }
+        
     }
 
 }
 
+.cleardiv {
+    clear: both;
+}
 
 .solarsystem {
     width: 100%;
     height: 100%;
     display: block;
     position: absolute;
-}
+}
+
+button {
+    z-index: 100;
+    color: white;
+}
+
+/*
+{
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    overflow: hidden;
+    // outline: 1px solid red !important;
+}
+*/
diff --git a/src/pages/home/Home.module.css b/src/pages/home/Home.module.css
@@ -13,16 +13,14 @@ header {
     
     .header-brand {
         width: 80%;
-        margin-top: 40px;
+        margin-top: 0px;
         display: flex;
         justify-content: center;
 
-        h1 {
-            font-weight: 250;
-            font-size: 4rem;
-            line-height: 100%;
-            color: green;
+        img {
+            width: 35%;
         }
+        
     }
 
 }
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
@@ -35,7 +35,7 @@ export default function Home() {
             <header style={{
                 transition: "opacity 0.4s ease",
                 opacity: hideUI ? 0 : 1,
-                pointerEvents: hideUI ? "none" : "auto",
+                pointerEvents: hideUI ? "none" : "auto",                
             }}
             >
                 <div className={styles["header-brand"]}>
@@ -62,3 +62,6 @@ export default function Home() {
         </div>
     );
 }
+const onPlanetClick = () => {
+         setPlanetClicked(true);
+    }
diff --git a/src/pages/home/js/.ipynb_checkpoints/camera-checkpoint.js b/src/pages/home/js/.ipynb_checkpoints/camera-checkpoint.js
@@ -39,7 +39,7 @@ export function setupParallax( canvas ) {
     
 }
 
-export function setupFocus( canvas, camera, planets, basePosition ) {
+export function setupFocus( canvas, camera, planets, basePosition, onPlanetClick ) {
     
     const focus = {
         raycaster:    new THREE.Raycaster(),
@@ -66,6 +66,7 @@ export function setupFocus( canvas, camera, planets, basePosition ) {
             focus.paused   = true;
             focus.tweening  = true;
             focus.popupFired = false;
+            onPlanetClick()
         } 
         else {
             zoomOut();
diff --git a/src/pages/home/js/.ipynb_checkpoints/main-checkpoint.js b/src/pages/home/js/.ipynb_checkpoints/main-checkpoint.js
@@ -6,7 +6,7 @@ import { createScene } from "./scene.js";
 const ZOOM_DIST = 5;
 const TWEEN_SPEED = 0.07;
 
-export function main( canvas, onPlanetFocus ) {
+export function main( canvas, onPlanetClick, onPlanetFocus ) {
 
     // --- Initialisation ---
 
@@ -18,7 +18,7 @@ export function main( canvas, onPlanetFocus ) {
 
     const { targetOffset, currentOffset } = setupParallax( canvas );
 
-    const { focus, zoomOut } = setupFocus( canvas, camera, planets, basePosition );
+    const { focus, zoomOut } = setupFocus( canvas, camera, planets, basePosition, onPlanetClick );
 
     const currentLookAt = new THREE.Vector3(0, 0, 0);
     const origin = new THREE.Vector3(0, 0, 0);
@@ -111,8 +111,8 @@ export function main( canvas, onPlanetFocus ) {
                         focus.popupFired = true;
                         if (typeof onPlanetFocus === 'function') {
                             onPlanetFocus();
+                        }
                     }
-                }
                 };
             
             }
diff --git a/src/pages/home/js/.ipynb_checkpoints/scene-checkpoint.js b/src/pages/home/js/.ipynb_checkpoints/scene-checkpoint.js
@@ -56,7 +56,7 @@ export function createScene() {
     // Planets
     const planetData = [
         { level: 1, id: 1, radius: 1.1, orbitR: 14, speed:  0.8, angle:   0 * (Math.PI / 180), tilt: 0.2,  color: 0xff6644, emissive: 0x441100, texture: '/textures/texture1.webp'},
-        { level: 1, id: 2, radius: 1.1, orbitR: 14, speed:  0.8, angle: 120 * (Math.PI / 180),  tilt: 0.2,  color: 0xff6644, emissive: 0x441100, texture: '/textures/texture1.webp'},
+        { level: 1, id: 2, radius: 1.1, orbitR: 14, speed:  0.8, angle: 120 * (Math.PI / 180), tilt: 0.2,  color: 0xff6644, emissive: 0x441100, texture: '/textures/texture1.webp'},
         { level: 1, id: 3, radius: 1.1, orbitR: 14, speed:  0.8, angle: 240 * (Math.PI / 180), tilt: 0.2,  color: 0xff6644, emissive: 0x441100, texture: '/textures/texture1.webp'},
         { level: 2, id: 4, radius: 1.5, orbitR: 24, speed: 0.45, angle:   0 * (Math.PI / 180), tilt: 0.35, color: 0x44aaff, emissive: 0x001133, texture: '/textures/texture2.webp' },
         { level: 2, id: 5, radius: 1.5, orbitR: 24, speed: 0.45, angle: 120 * (Math.PI / 180), tilt: 0.35, color: 0x44aaff, emissive: 0x001133, texture: '/textures/texture2.webp' },
diff --git a/src/pages/home/js/camera.js b/src/pages/home/js/camera.js
@@ -39,7 +39,7 @@ export function setupParallax( canvas ) {
     
 }
 
-export function setupFocus( canvas, camera, planets, basePosition ) {
+export function setupFocus( canvas, camera, planets, basePosition, onPlanetClick ) {
     
     const focus = {
         raycaster:    new THREE.Raycaster(),
@@ -66,6 +66,7 @@ export function setupFocus( canvas, camera, planets, basePosition ) {
             focus.paused   = true;
             focus.tweening  = true;
             focus.popupFired = false;
+            onPlanetClick()
         } 
         else {
             zoomOut();
diff --git a/src/pages/home/js/main.js b/src/pages/home/js/main.js
@@ -6,7 +6,7 @@ import { createScene } from "./scene.js";
 const ZOOM_DIST = 5;
 const TWEEN_SPEED = 0.07;
 
-export function main( canvas, onPlanetFocus ) {
+export function main( canvas, onPlanetClick, onPlanetFocus ) {
 
     // --- Initialisation ---
 
@@ -18,7 +18,7 @@ export function main( canvas, onPlanetFocus ) {
 
     const { targetOffset, currentOffset } = setupParallax( canvas );
 
-    const { focus, zoomOut } = setupFocus( canvas, camera, planets, basePosition );
+    const { focus, zoomOut } = setupFocus( canvas, camera, planets, basePosition, onPlanetClick );
 
     const currentLookAt = new THREE.Vector3(0, 0, 0);
     const origin = new THREE.Vector3(0, 0, 0);
@@ -111,8 +111,8 @@ export function main( canvas, onPlanetFocus ) {
                         focus.popupFired = true;
                         if (typeof onPlanetFocus === 'function') {
                             onPlanetFocus();
+                        }
                     }
-                }
                 };
             
             }
diff --git a/src/pages/home/js/scene.js b/src/pages/home/js/scene.js
@@ -56,7 +56,7 @@ export function createScene() {
     // Planets
     const planetData = [
         { level: 1, id: 1, radius: 1.1, orbitR: 14, speed:  0.8, angle:   0 * (Math.PI / 180), tilt: 0.2,  color: 0xff6644, emissive: 0x441100, texture: '/textures/texture1.webp'},
-        { level: 1, id: 2, radius: 1.1, orbitR: 14, speed:  0.8, angle: 120 * (Math.PI / 180),  tilt: 0.2,  color: 0xff6644, emissive: 0x441100, texture: '/textures/texture1.webp'},
+        { level: 1, id: 2, radius: 1.1, orbitR: 14, speed:  0.8, angle: 120 * (Math.PI / 180), tilt: 0.2,  color: 0xff6644, emissive: 0x441100, texture: '/textures/texture1.webp'},
         { level: 1, id: 3, radius: 1.1, orbitR: 14, speed:  0.8, angle: 240 * (Math.PI / 180), tilt: 0.2,  color: 0xff6644, emissive: 0x441100, texture: '/textures/texture1.webp'},
         { level: 2, id: 4, radius: 1.5, orbitR: 24, speed: 0.45, angle:   0 * (Math.PI / 180), tilt: 0.35, color: 0x44aaff, emissive: 0x001133, texture: '/textures/texture2.webp' },
         { level: 2, id: 5, radius: 1.5, orbitR: 24, speed: 0.45, angle: 120 * (Math.PI / 180), tilt: 0.35, color: 0x44aaff, emissive: 0x001133, texture: '/textures/texture2.webp' },

Original file line number	Diff line number	Diff line change
`@@ -13,16 +13,14 @@ header {`
`13`	`13`
`14`	`14`	`.header-brand {`
`15`	`15`	`width: 80%;`
`16`		`- margin-top: 40px;`
	`16`	`+ margin-top: 0px;`
`17`	`17`	`display: flex;`
`18`	`18`	`justify-content: center;`
`19`	`19`
`20`		`- h1 {`
`21`		`- font-weight: 250;`
`22`		`- font-size: 4rem;`
`23`		`- line-height: 100%;`
`24`		`- color: green;`
	`20`	`+ img {`
	`21`	`+ width: 35%;`
`25`	`22`	`}`
	`23`	`+`
`26`	`24`	`}`
`27`	`25`
`28`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ export function setupParallax( canvas ) {`
`39`	`39`
`40`	`40`	`}`
`41`	`41`
`42`		`-export function setupFocus( canvas, camera, planets, basePosition ) {`
	`42`	`+export function setupFocus( canvas, camera, planets, basePosition, onPlanetClick ) {`
`43`	`43`
`44`	`44`	`const focus = {`
`45`	`45`	`raycaster: new THREE.Raycaster(),`
`@@ -66,6 +66,7 @@ export function setupFocus( canvas, camera, planets, basePosition ) {`
`66`	`66`	`focus.paused = true;`
`67`	`67`	`focus.tweening = true;`
`68`	`68`	`focus.popupFired = false;`
	`69`	`+ onPlanetClick()`
`69`	`70`	`}`
`70`	`71`	`else {`
`71`	`72`	`zoomOut();`