Elevate Shared Planet States, Refactors

src/Scene3.jsx

@@ -1,125 +1,39 @@
-import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { Canvas } from "@react-three/fiber";
-import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
+import { OrbitControls } from "@react-three/drei";
-import React, {
+import React, { Suspense, useRef, createContext, memo } from "react";
-  Suspense,
+
-  useState,
+import { ScreenOverlay } from "./omnioverlay.jsx";
-  useEffect,
+import { SharedPlanetState } from "./SharedPlanetState.jsx";
-  useRef,
-  createContext,
-  useContext,
-  forwardRef,
-  memo,
-  useMemo,
-} from "react";
-import { Earth } from "./earth.jsx";
-import { Mars } from "./mars.jsx";
-import { Jupiter } from "./jupiter.jsx";
-import { Saturn } from "./saturn.jsx";
-import { Mercury } from "./mercury.jsx";
-import { Venus } from "./venus.jsx";
-import { Neptune } from "./neptune.jsx";
-import { Uranus } from "./uranus.jsx";
-import { Sun } from "./sun.jsx";
-import * as THREE from "three";
-import { PlanetInfo } from "./planetInfo.jsx";
 import { Skybox } from "./skybox.jsx";
-import {
-  Selection,
-  Select,
-  EffectComposer,
-  Outline,
-} from "@react-three/postprocessing";
 
 export const MyContext = createContext();
-export const OtherContext = createContext();
-
-import { SharedPlanetState } from "./SharedPlanetState.jsx";
 
 const SolarSystemScene = () => {
-  const [data, setData] = useState(null);
-  const [vis, setVis] = useState("hidden");
   const controls = useRef();
-  const planetinfo = useRef();
   let customData = useRef({});
 
-  useEffect(() => {
+  return (
-    const fetchData = async () => {
+    <>
-      let res = await fetch(
+      <MyContext.Provider value={{ controls, customData }}>
-        "http://127.0.0.1:8000/duration?date=2023-08-06T21:53" //example and simple data
+        <ScreenOverlay />
-      );
+        <Suspense fallback={null}>
-      let response = await res.json();
+          <Canvas
-      setData(response); // parse json
+            camera={{
-      //console.log(response);
+              fov: 75,
-    };
+              near: 0.1,
-    fetchData();
+              far: 1000000,
-  }, []);
+              position: [0, 100, 200],
-
+            }}
-  function toggleVisibility() {
+          >
-    console.log(vis);
+            <Skybox />
-    if (vis === "hidden") {
+            <ambientLight intensity={0.5} />
-      setVis("visible");
+            <SharedPlanetState />
-      console.log("what");
+            <OrbitControls ref={controls} />
-    } else if (vis === "visible") {
+          </Canvas>
-      setVis("hidden");
+        </Suspense>
-      console.log("asdasd");
+      </MyContext.Provider>
-    }
+    </>
-  }
+  );
-
-  function handleChange(event) {
-    console.log(event.target.value);
-    customData.current.changeEarthSpeed(event.target.value);
-    customData.current.changeMarsSpeed(event.target.value);
-    customData.current.changeVenusSpeed(event.target.value);
-    customData.current.changeSaturnSpeed(event.target.value);
-    customData.current.changeUranusSpeed(event.target.value);
-    customData.current.changeJupiterSpeed(event.target.value);
-    customData.current.changeMercurySpeed(event.target.value);
-    customData.current.changeNeptuneSpeed(event.target.value);
-  }
-
-  if (data)
-    return (
-      <>
-        <div className="slidecontainer">
-          <input
-            type="range"
-            min="10"
-            max="360"
-            className="slider"
-            onChange={handleChange}
-            id="myRange"
-          />
-        </div>
-        <MyContext.Provider value={{ controls, toggleVisibility, customData }}>
-          <PlanetInfo ref={planetinfo} visi={vis} />
-          <Suspense fallback={null}>
-            <Canvas
-              camera={{
-                fov: 75,
-                near: 0.1,
-                far: 10000000,
-                position: [0, 100, 200],
-              }}
-            >
-              <Skybox />
-              <ambientLight intensity={0.5} />
-
-              <Earth positions={data["399"]} onClick={(e) => console.log(e)} />
-              <Mars positions={data["499"]} />
-              <Jupiter positions={data["599"]} />
-              <Saturn positions={data["699"]} />
-              <Mercury positions={data["199"]} />
-              <Venus positions={data["299"]} />
-              <Neptune positions={data["899"]} />
-              <Uranus positions={data["799"]} />
-              <Sun />
-
-              <OrbitControls ref={controls} maxZoom={10} />
-            </Canvas>
-          </Suspense>
-        </MyContext.Provider>
-      </>
-    );
 };
 
 const Smemo = memo(SolarSystemScene, true);

src/SharedPlanetState.jsx

@@ -23,74 +23,105 @@ import { Sun } from "./sun.jsx";
 import * as THREE from "three";
 import { PlanetInfo } from "./planetInfo.jsx";
 import { Skybox } from "./skybox.jsx";
-import {
+import { ReactPropTypes } from "react";
-  Selection,
+import { MyContext } from "./Scene3.jsx";
-  Select,
-  EffectComposer,
-  Outline,
-} from "@react-three/postprocessing";
 
 export const SharedPlanetState = () => {
-  const [data, setData] = useState(null);
+  const { customData } = useContext(MyContext);
-  const [vis, setVis] = useState("hidden");
-  const controls = useRef();
-  const planetinfo = useRef();
-  let customData = useRef({});
 
-  function toggleVisibility() {
+  let [nameVis, setNameVis] = useState("visible");
-    console.log(vis);
+  let [iconVis, setIconVis] = useState("visible");
-    if (vis === "hidden") {
+
-      setVis("visible");
+  const handleVisibility = () => {
-      console.log("what");
+    if (nameVis == "visible" && iconVis == "visible") {
-    } else if (vis === "visible") {
+      setNameVis("hidden");
-      setVis("hidden");
+      console.log(nameVis);
-      console.log("asdasd");
+      console.log("hiding names");
+    } else if (nameVis == "hidden" && iconVis == "visible") {
+      setIconVis("hidden");
+      console.log(nameVis);
+      console.log("hiding icons");
+    } else if (nameVis == "hidden" && iconVis == "hidden") {
+      setIconVis("visible");
+      setNameVis("visible");
+      console.log(nameVis);
+      console.log("showing everything");
     }
-  }
+  };
+  customData.current["handleVisibility"] = handleVisibility;
 
-  function handleChange(event) {
+  //set speed (timeinterval between positions 60000ms*speed)
-    console.log(event.target.value);
+  const [speed, setSpeed] = useState(0);
-    customData.current.changeEarthSpeed(event.target.value);
+  const updateSpeed = (newSpeed) => {
-    customData.current.changeMarsSpeed(event.target.value);
+    setSpeed(newSpeed);
-    customData.current.changeVenusSpeed(event.target.value);
+    speedChanged.current = true;
-    customData.current.changeSaturnSpeed(event.target.value);
+  };
-    customData.current.changeUranusSpeed(event.target.value);
+  customData.current["updateSpeed"] = updateSpeed;
-    customData.current.changeJupiterSpeed(event.target.value);
-    customData.current.changeMercurySpeed(event.target.value);
-    customData.current.changeNeptuneSpeed(event.target.value);
-  }
 
-  const [speed, setSpeed] = useState();
+  //get position data and reset if necessary
+  const dateTime = useRef(new Date(Date.now()));
+  const speedChanged = useRef(false);
+
+  const getPositions = (planet, setPosState, oldState, posCounter) => {
+    //if speed was changed delete old data an get new data
+
+    //???????Why when i set the speed to 0 it doesnt immidiatly stop? good enough for know
+    if (speedChanged.current) {
+      console.log(oldState.length);
+      setPosState(oldState.slice(0, posCounter));
+      speedChanged.current = true;
+      console.log(oldState.length);
+      console.log("SPEEDUPDOWNLEFTRIGHT!");
+    }
+
+    if (posCounter % 250 == 0 || speedChanged.current) {
+      if (oldState.length > 0 && speed > 0) {
+        dateTime.current = new Date(
+          oldState[oldState.length - 1].date
+        ).toUTCString();
+      }
+
+      const fetchData = async () => {
+        let res = await fetch(
+          `http://127.0.0.1:8000/duration/${planet}` +
+            `?date=${dateTime.current}&speed=${speed}`
+        );
+        let response = await res.json();
+        //console.log(response);
+        if (speed > 0) {
+          setPosState(oldState.concat(response));
+
+          //console.log(dateTime.current);
+        } else if (speed == 0) {
+          //this requests every frame do a function
+          //that requests every minute and clear intervall
+          //when apead is changed to above 0
+          setPosState([response]);
+          posCounter = 0;
+        }
+        speedChanged.current = false;
+      };
+      fetchData();
+      //console.log(speed);
+    }
+  };
 
-  const updateSpeed = (newSpeed) => setSpeed(newSpeed);
   return (
     <>
-      <PlanetInfo ref={planetinfo} visi={vis} />
+      <Earth
-      <Suspense fallback={null}>
+        speed={speed}
-        <Canvas
+        getPosition={getPositions}
-          camera={{
+        nameVis={nameVis}
-            fov: 75,
+        iconVis={iconVis}
-            near: 0.1,
+      />
-            far: 10000000,
+      <Mars speed={speed} />
-            position: [0, 100, 200],
+      <Jupiter speed={speed} />
-          }}
+      <Saturn speed={speed} />
-        >
+      <Mercury speed={speed} />
-          <Skybox />
+      <Venus speed={speed} />
-          <ambientLight intensity={0.5} />
+      <Neptune speed={speed} />
-
+      <Uranus speed={speed} />
-          <Earth positions={data["399"]} onClick={(e) => console.log(e)} />
+      <Sun />
-          <Mars positions={data["499"]} />
-          <Jupiter positions={data["599"]} />
-          <Saturn positions={data["699"]} />
-          <Mercury positions={data["199"]} />
-          <Venus positions={data["299"]} />
-          <Neptune positions={data["899"]} />
-          <Uranus positions={data["799"]} />
-          <Sun />
-
-          <OrbitControls ref={controls} maxZoom={10} />
-        </Canvas>
-      </Suspense>
     </>
   );
 };

src/earth.jsx

@@ -37,12 +37,12 @@ import { PlanetInfo } from "./planetInfo";
 import { PlanetPath } from "./path";
 import { MyContext } from "./Scene3";
 
-export const Earth = ({ positions }) => {
+export const Earth = ({ positions, speed, getPosition, nameVis, iconVis }) => {
   let distanceScaleFactor = 1000000;
   const [poss, setPos] = useState([]);
   const [lineposs, setLinePos] = useState([]);
   const [getAgain, setGetAgain] = useState(false);
-  const [speed, setSpeed] = useState(60);
+  //const [speed, setSpeed] = useState(60);
   const line = useRef();
   const clouds = useRef("clouds");
   const earth = useRef();
@@ -62,38 +62,18 @@ export const Earth = ({ positions }) => {
     return group;
   }
 
+  useEffect(() => {
+    console.log(speed);
+  }, [speed]);
+
   let currLinePoss = [];
 
   useFrame(() => {
-    if (poss.length % 1000 == 0) {
+    //console.log(nameVis);
-      setPos(poss.slice(0, 500));
-    }
-    let date;
-    if (firstRef.current) {
-      date = new Date(Date.now());
-      date.setMilliseconds(0);
-      date.setSeconds(0);
-    }
-    //console.log(poss.length);
-    //console.log(group.current.userData.counter);
-    if (group.current.userData.counter % 250 == 0 || getAgain) {
-      if (!firstRef.current)
-        date = new Date(poss[poss.length - 1].date).toUTCString();
-      const fetchData = async () => {
-        let res = await fetch(
-          `http://127.0.0.1:8000/duration/earth?date=${date}&speed=${speed}` //example and simple data
-        );
-        let response = await res.json();
-
-        setPos(poss.concat(response)); // parse json
-        firstRef.current = false;
-        setGetAgain(false);
-        //console.log(`psss : ${poss.length}`);
-      };
-      fetchData();
-    }
     clouds.current.rotation.y += 0.00025;
     earth.current.rotation.y += 0.00015;
+    getPosition("earth", setPos, poss, group.current.userData.counter);
+    console.log(poss);
     if (true && group.current.userData.counter < poss.length) {
       group.current.position.set(
         Number(
@@ -111,15 +91,6 @@ export const Earth = ({ positions }) => {
     }
   }, []);
 
-  const changeSpeed = (newSpeed) => {
-    setPos(poss.slice(0, group.current.userData.counter + 10));
-    setGetAgain(true);
-    console.log(poss);
-    setSpeed(newSpeed);
-  };
-
-  customData.current["changeEarthSpeed"] = changeSpeed;
-
   const col = useLoader(TextureLoader, "../img/earth/6k_earth_daymap.jpg");
   const bump = useLoader(TextureLoader, "../img/earth/earth_bump_1k.jpg");
   const spec = useLoader(
@@ -137,17 +108,8 @@ export const Earth = ({ positions }) => {
   });
   return (
     <>
-      <PlanetPath
-        positions={poss.slice(0, 1000)}
-        linePos={poss}
-        planet={group}
-        lineAt={group.current ? group.current.userData.counter : 0}
-        color={"lightgreen"}
-        datas={datas}
-        lineLength={20}
-      />
       <group ref={group}>
-        <PlanetOverlay planet={group} />
+        <PlanetOverlay planet={group} nameVis={nameVis} iconVis={iconVis} />
         <mesh ref={earth}>
           <sphereGeometry args={[6371.0 / 6000, 50, 50]} />
           <meshPhongMaterial

src/omnioverlay.jsx

@@ -0,0 +1,48 @@
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import React, {
+  Suspense,
+  useRef,
+  createContext,
+  memo,
+  useContext,
+} from "react";
+
+import { PlanetInfo } from "./planetInfo.jsx";
+import { MyContext } from "./Scene3.jsx";
+
+export const ScreenOverlay = () => {
+  const { customData } = useContext(MyContext);
+
+  const handleChange = (event) => {
+    customData.current.updateSpeed(event.target.value);
+  };
+
+  const handleReset = () => {
+    console.log("reset");
+  };
+
+  const handlePlanetOverlayVisibility = () => {
+    customData.current.handleVisibility();
+    console.log("asd");
+  };
+
+  return (
+    <>
+      <div className="slidecontainer">
+        <input
+          type="range"
+          min="10"
+          max="190"
+          step="60"
+          className="slider"
+          id="myRange"
+          onChange={handleChange}
+        />
+        <button onClick={handleReset}>Reset</button>
+        <button onClick={handlePlanetOverlayVisibility}>Hide things</button>
+      </div>
+      <PlanetInfo />
+    </>
+  );
+};

src/overlay.jsx

@@ -1 +0,0 @@
-

src/planetOverlay.jsx

@@ -27,10 +27,11 @@ import "./styles.css";
 
 import PropTypes from "prop-types";
 
-export const PlanetOverlay = ({ planet }) => {
+export const PlanetOverlay = ({ planet, nameVis, iconVis }) => {
   const ref = useRef();
   let [opacity, setOpacity] = useState(0);
   let [minDistance, setMinDistance] = useState(0);
+
   let [scolor, setSColor] = useState("white");
   let [follow, setFollow] = useState(false);
   const { camera } = useThree();
@@ -74,7 +75,7 @@ export const PlanetOverlay = ({ planet }) => {
     setName(planet.current.userData.name);
     setMinDistance(planet.current.userData.nearOvOp);
     setSColor(planet.current.userData.scolor);
-  }, [planet, name, minDistance, customData]);
+  }, [planet, name, minDistance, customData, iconVis, nameVis]);
 
   useFrame(() => {
     var distance = camera.position.distanceTo(planet.current.position);
@@ -87,6 +88,7 @@ export const PlanetOverlay = ({ planet }) => {
       controls.current.target.copy(planet.current.position.clone());
       controls.current.maxDistance = 20;
     }
+    //console.log(iconVis);
   }, []);
 
   function startFollow() {
@@ -112,6 +114,7 @@ export const PlanetOverlay = ({ planet }) => {
             className="icon"
             onClick={handleClick}
             onContextMenu={handleClick}
+            style={{ visibility: iconVis }}
           >
             <svg
               onMouseEnter={() => setSColor("blue")}
@@ -121,7 +124,9 @@ export const PlanetOverlay = ({ planet }) => {
               <circle cx="10" cy="10" r="9" strokeWidth="1" fill="none" />
             </svg>
           </span>
-          <span className="content">{name}</span>
+          <span className="content" style={{ visibility: nameVis }}>
+            {name}
+          </span>
         </div>
       </Html>
     </>