code improvmeents wip

src/App.tsx

@@ -13,6 +13,7 @@ import PolytanScene from "./scenes/PolytanScene";
 import TaKScene from "./scenes/TaKScene";
 import ChangeDiscScene from "./scenes/ChangeDiscScene";
 import EndScene from "./scenes/EndScene";
+import IdleMediaScene from "./scenes/IdleMediaScene";
 
 const App = () => {
   const currentScene = useSceneStore((state) => state.currentScene);
@@ -25,7 +26,7 @@ const App = () => {
     return {
       main: <MainScene />,
       media: <MediaScene />,
-      idle_media: <MediaScene />,
+      idle_media: <IdleMediaScene />,
       gate: <GateScene />,
       boot: <BootScene />,
       sskn: <SSknScene />,

src/components/MainScene/SyncedComponents/GrayPlanes.tsx

@@ -6,6 +6,31 @@ import GrayPlane from "./GrayPlanes/GrayPlane";
 const GrayPlanes = () => {
   const grayPlaneGroupRef = useRef<THREE.Object3D>();
 
+  const grayPlanesGeom = useMemo(() => {
+    const singleGeom = new THREE.Geometry();
+
+    const grayPlanePoses = [
+      [1.2, 0, -1.2],
+      [1.2, 0, 1.2],
+      [1.2, 0, -0.5],
+      [-1.2, 0, -1.2],
+      [-1.2, 0, 1.2],
+      [-1.2, 0, 1],
+      [0.5, 0, 1],
+    ];
+
+    for (let i = 0; i < grayPlanePoses.length; i++) {
+      const mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry());
+      mesh.position.set(
+        grayPlanePoses[i][0],
+        grayPlanePoses[i][1],
+        grayPlanePoses[i][2]
+      );
+    }
+
+    return singleGeom;
+  }, []);
+
   const grayPlanePoses = useMemo(
     () => [
       [1.2, 0, -1.2],
@@ -28,6 +53,15 @@ const GrayPlanes = () => {
       {grayPlanePoses.map((pos, idx: number) => (
         <GrayPlane position={pos as [number, number, number]} key={idx} />
       ))}
+      {/*<mesh geometry={grayPlanesGeom}>*/}
+      {/*  <meshBasicMaterial*/}
+      {/*    attach="material"*/}
+      {/*    color={0xd3d3d3}*/}
+      {/*    opacity={0.2}*/}
+      {/*    transparent={true}*/}
+      {/*    side={THREE.DoubleSide}*/}
+      {/*  />*/}
+      {/*</mesh>*/}
     </group>
   );
 };

src/components/MainScene/SyncedComponents/HUD.tsx

@@ -67,6 +67,12 @@ const HUD = () => {
     ]
   );
 
+  const spriteTypeToSprite = useMemo(()=> {
+
+
+  }, [])
+
+  //todo
   const spriteTypeToSprite = (spriteType: string, hudElement: string) => {
     switch (spriteType) {
       case "normal":

src/components/MainScene/SyncedComponents/Site/Node.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef, memo } from "react";
 import { useFrame, useLoader } from "react-three-fiber";
 import { a, useSpring } from "@react-spring/three";
 import * as THREE from "three";
@@ -34,7 +34,7 @@ type NodeContructorProps = {
   level: string;
 };
 
-const Node = (props: NodeContructorProps) => {
+const Node = memo((props: NodeContructorProps) => {
   // the game only has a couple of sprite that it displays in the hub
   // dynamically importnig them would be worse for performance,
   // so we import all of them here and then use this function to
@@ -139,9 +139,7 @@ const Node = (props: NodeContructorProps) => {
     activeNodeRotZ: useNodeStore.getState().activeNodeState.interactedWith
       ? useNodeStore.getState().activeNodeState.rotZ
       : 0,
-    activeNodeScale: useNodeStore.getState().activeNodeState.shrinking
+    activeNodeScale: useNodeStore.getState().activeNodeState.shrinking ? 0 : 1,
-      ? 0
-      : 1,
     activeNodeVisible: true,
     config: { duration: 800 },
   }));
@@ -182,6 +180,8 @@ const Node = (props: NodeContructorProps) => {
     }
   });
 
+  console.log("rendered");
+
   return (
     <group
       position={[
@@ -239,6 +239,6 @@ const Node = (props: NodeContructorProps) => {
       )}
     </group>
   );
-};
+});
 
 export default Node;

src/components/MediaScene/MediaPlayer.tsx

@@ -69,6 +69,10 @@ const MediaPlayer = () => {
         setPercentageElapsed(percentageElapsed);
         if (percentageElapsed === 100) {
           videoRef.current.currentTime = 0;
+          if (currentScene === "idle_media") {
+            videoRef.current.pause();
+            setScene("main");
+          } else {
             if (currentScene === "end") {
               incrementEndMediaPlayedCount();
             } else {
@@ -85,6 +89,7 @@ const MediaPlayer = () => {
           }
         }
       }
+    }
   }, [
     activeLevel,
     activeNodeId,
@@ -165,6 +170,7 @@ const MediaPlayer = () => {
               setMediaSource(media.default);
               if (videoRef.current) {
                 videoRef.current.load();
+                videoRef.current.play();
               }
             });
           } else {
@@ -173,6 +179,7 @@ const MediaPlayer = () => {
                 setMediaSource(media.default);
                 if (videoRef.current) {
                   videoRef.current.load();
+                  videoRef.current.play();
                 }
               }
             );

src/components/TextRenderer/BigLetter.tsx

@@ -5,9 +5,10 @@ import * as THREE from "three";
 import { useLoader } from "react-three-fiber";
 import orange_font_json from "../../resources/font_data/big_font.json";
 import { a, useSpring } from "@react-spring/three";
-import React, { useMemo } from "react";
+import React, { useMemo, memo } from "react";
 
-const BigLetter = (props: {
+const BigLetter = memo(
+  (props: {
     color: string;
     letter: string;
     letterIdx: number;
@@ -110,6 +111,7 @@ const BigLetter = (props: {
         />
       </a.mesh>
     );
-};
+  }
+);
 
 export default BigLetter;

src/components/TextRenderer/MediumLetter.tsx

@@ -3,12 +3,9 @@ import * as THREE from "three";
 import greenFont from "../../static/sprite/white_and_green_texture.png";
 import medium_font_json from "../../resources/font_data/medium_font.json";
 import { a } from "@react-spring/three";
-import React, { useMemo } from "react";
+import React, { useMemo, memo } from "react";
 
-const MediumLetter = (props: {
+const MediumLetter = memo((props: { letter: string; letterIdx: number }) => {
-  letter: string;
-  letterIdx: number;
-}) => {
   const colorTexture = useLoader(THREE.TextureLoader, greenFont);
   // i have yet to figure out a genrealizable way of
   // calculating the y offset, this shit will do for now
@@ -88,6 +85,6 @@ const MediumLetter = (props: {
       />
     </a.mesh>
   );
-};
+});
 
 export default MediumLetter;

src/scenes/IdleMediaScene.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from "react";
+import { useIdleStore } from "../store";
+import Images from "../components/MediaScene/Images";
+
+const IdleMediaScene = () => {
+  const idleMedia = useIdleStore((state) => state.media);
+
+  useEffect(() => {
+    document.getElementsByTagName("canvas")[0].className =
+      "media-scene-background";
+
+    return () => {
+      document.getElementsByTagName("canvas")[0].className = "";
+    };
+  }, []);
+
+  return (
+    <group visible={idleMedia.includes("XA")}>
+      <Images />
+    </group>
+  );
+};
+
+export default IdleMediaScene;

src/scenes/MediaScene.tsx

@@ -76,22 +76,12 @@ const MediaScene = () => {
         </group>
         <MediaYellowTextAnimator />
 
-        <group
+        <group visible={activeNodeMedia.includes("XA")}>
-          visible={
-            currentScene !== "idle_media" && activeNodeMedia.includes("XA")
-          }
-        >
           <RightSide activeMediaComponent={activeMediaComponent} />
           <Lof />
           <AudioVisualizer />
           <Images />
         </group>
-
-        <group
-          visible={currentScene === "idle_media" && idleMedia.includes("XA")}
-        >
-          <Images />
-        </group>
       </group>
       <MediaSceneEventManager />
     </perspectiveCamera>