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
-      ? 0
-      : 1,
+    activeNodeScale: useNodeStore.getState().activeNodeState.shrinking ? 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,17 +69,22 @@ const MediaPlayer = () => {
         setPercentageElapsed(percentageElapsed);
         if (percentageElapsed === 100) {
           videoRef.current.currentTime = 0;
-          if (currentScene === "end") {
-            incrementEndMediaPlayedCount();
+          if (currentScene === "idle_media") {
+            videoRef.current.pause();
+            setScene("main");
           } else {
-            if (
-              (siteData as SiteType)[activeLevel][activeNodeId]
-                .triggers_final_video === 1
-            ) {
-              resetEndMediaPlayedCount();
-              setScene("end");
+            if (currentScene === "end") {
+              incrementEndMediaPlayedCount();
             } else {
-              videoRef.current.pause();
+              if (
+                (siteData as SiteType)[activeLevel][activeNodeId]
+                  .triggers_final_video === 1
+              ) {
+                resetEndMediaPlayedCount();
+                setScene("end");
+              } else {
+                videoRef.current.pause();
+              }
             }
           }
         }
@@ -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,111 +5,113 @@ 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: {
-  color: string;
-  letter: string;
-  letterIdx: number;
-  xOffsetCoeff: number;
-}) => {
-  const colorToTexture = (color: string) => {
-    const colorTexture = {
-      orange: orangeFont,
-      yellow: yellowFont,
-      white: whiteFont,
+const BigLetter = memo(
+  (props: {
+    color: string;
+    letter: string;
+    letterIdx: number;
+    xOffsetCoeff: number;
+  }) => {
+    const colorToTexture = (color: string) => {
+      const colorTexture = {
+        orange: orangeFont,
+        yellow: yellowFont,
+        white: whiteFont,
+      };
+      return colorTexture[color as keyof typeof colorTexture];
     };
-    return colorTexture[color as keyof typeof colorTexture];
-  };
 
-  // first letter in big font is always orange in this case so make it orange if so. else,
-  // run through the function.
-  const color =
-    props.letterIdx === 0 ? orangeFont : colorToTexture(props.color);
+    // first letter in big font is always orange in this case so make it orange if so. else,
+    // run through the function.
+    const color =
+      props.letterIdx === 0 ? orangeFont : colorToTexture(props.color);
 
-  const colorTexture: THREE.Texture = useLoader(THREE.TextureLoader, color);
+    const colorTexture: THREE.Texture = useLoader(THREE.TextureLoader, color);
 
-  // i have yet to figure out a genrealizable way of
-  // calculating the y offset, this shit will do for now
-  // also, we dont have all the lines since i dont need them yet.
-  // also, baseline offsets dont work properly since i dont need them yet either
-  // should be trivial to calculate though, im just lazy
-  const getLineNum = (letter: string) => {
-    const lineOne = "ABCDEFGHIJKLMNOPQ";
-    const lineTwo = "RSTUVWXYZ01234567";
-    const lineThree = "89abcdefghijklmnopqrs";
+    // i have yet to figure out a genrealizable way of
+    // calculating the y offset, this shit will do for now
+    // also, we dont have all the lines since i dont need them yet.
+    // also, baseline offsets dont work properly since i dont need them yet either
+    // should be trivial to calculate though, im just lazy
+    const getLineNum = (letter: string) => {
+      const lineOne = "ABCDEFGHIJKLMNOPQ";
+      const lineTwo = "RSTUVWXYZ01234567";
+      const lineThree = "89abcdefghijklmnopqrs";
 
-    if (letter === " ") return 5;
+      if (letter === " ") return 5;
 
-    if (lineOne.includes(letter)) {
-      return 1;
-    } else if (lineTwo.includes(letter)) {
-      return 2;
-    } else if (lineThree.includes(letter)) {
-      return 3;
-    } else {
-      return 4;
-    }
-  };
+      if (lineOne.includes(letter)) {
+        return 1;
+      } else if (lineTwo.includes(letter)) {
+        return 2;
+      } else if (lineThree.includes(letter)) {
+        return 3;
+      } else {
+        return 4;
+      }
+    };
 
-  const lineYOffsets = useMemo(
-    () => ({
-      1: 0.884,
-      2: 0.765,
-      3: 0.648,
-      4: 0.47,
-      5: 1,
-    }),
-    []
-  );
+    const lineYOffsets = useMemo(
+      () => ({
+        1: 0.884,
+        2: 0.765,
+        3: 0.648,
+        4: 0.47,
+        5: 1,
+      }),
+      []
+    );
 
-  const letterData =
-    orange_font_json.glyphs[
-      props.letter as keyof typeof orange_font_json.glyphs
-    ];
+    const letterData =
+      orange_font_json.glyphs[
+        props.letter as keyof typeof orange_font_json.glyphs
+      ];
 
-  const geom = useMemo(() => {
-    const geometry = new THREE.PlaneBufferGeometry();
+    const geom = useMemo(() => {
+      const geometry = new THREE.PlaneBufferGeometry();
 
-    const uvAttribute = geometry.attributes.uv;
+      const uvAttribute = geometry.attributes.uv;
 
-    for (let i = 0; i < uvAttribute.count; i++) {
-      let u = uvAttribute.getX(i);
-      let v = uvAttribute.getY(i);
+      for (let i = 0; i < uvAttribute.count; i++) {
+        let u = uvAttribute.getX(i);
+        let v = uvAttribute.getY(i);
 
-      u = (u * letterData[2]) / 256 + letterData[0] / 256;
+        u = (u * letterData[2]) / 256 + letterData[0] / 256;
 
-      v =
-        (v * letterData[3]) / 136 +
-        lineYOffsets[getLineNum(props.letter)] -
-        letterData[4] / 136;
+        v =
+          (v * letterData[3]) / 136 +
+          lineYOffsets[getLineNum(props.letter)] -
+          letterData[4] / 136;
 
-      uvAttribute.setXY(i, u, v);
-    }
-    return geometry;
-  }, [letterData, lineYOffsets, props.letter]);
+        uvAttribute.setXY(i, u, v);
+      }
+      return geometry;
+    }, [letterData, lineYOffsets, props.letter]);
 
-  const textRendererState = useSpring({
-    letterOffsetXCoeff:
-      props.letterIdx + 0.3 + (props.letterIdx + 0.3) * props.xOffsetCoeff,
-    config: { duration: 200 },
-  });
+    const textRendererState = useSpring({
+      letterOffsetXCoeff:
+        props.letterIdx + 0.3 + (props.letterIdx + 0.3) * props.xOffsetCoeff,
+      config: { duration: 200 },
+    });
 
-  return (
-    <a.mesh
-      position-x={textRendererState.letterOffsetXCoeff}
-      position-y={-letterData[4] / 12.5}
-      scale={[1, 1, 0]}
-      geometry={geom}
-      renderOrder={props.letterIdx === 0 ? 11 : 10}
-    >
-      <meshBasicMaterial
-        map={colorTexture}
-        attach="material"
-        transparent={true}
-      />
-    </a.mesh>
-  );
-};
+    return (
+      <a.mesh
+        position-x={textRendererState.letterOffsetXCoeff}
+        position-y={-letterData[4] / 12.5}
+        scale={[1, 1, 0]}
+        geometry={geom}
+        renderOrder={props.letterIdx === 0 ? 11 : 10}
+      >
+        <meshBasicMaterial
+          map={colorTexture}
+          attach="material"
+          transparent={true}
+        />
+      </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: {
-  letter: string;
-  letterIdx: number;
-}) => {
+const MediumLetter = memo((props: { 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
-          visible={
-            currentScene !== "idle_media" && activeNodeMedia.includes("XA")
-          }
-        >
+        <group visible={activeNodeMedia.includes("XA")}>
           <RightSide activeMediaComponent={activeMediaComponent} />
           <Lof />
           <AudioVisualizer />
           <Images />
         </group>
-
-        <group
-          visible={currentScene === "idle_media" && idleMedia.includes("XA")}
-        >
-          <Images />
-        </group>
       </group>
       <MediaSceneEventManager />
     </perspectiveCamera>