bugfixes

src/components/MainScene/Lain.tsx

@@ -33,6 +33,7 @@ import lookAroundSpriteSheet from "../../static/sprites/lain/look_around.png";
 import playWithHairSpriteSheet from "../../static/sprites/lain/play_with_hair.png";
 
 import { useStore } from "../../store";
+import usePrevious from "../../hooks/usePrevious";
 
 type LainConstructorProps = {
   sprite: string;
@@ -416,11 +417,29 @@ const Lain = (props: LainProps) => {
   }, [glowColor, wordSelected]);
 
   useFrame(() => {
-    if (lainRef.current) {
+    if (lainRef.current)
       lainRef.current.material.color.lerp(regularColor, 0.07);
-    }
   });
 
+  const subscene = useStore((state) => state.mainSubscene);
+  const prevData = usePrevious({ subscene });
+
+  useEffect(() => {
+    if (subscene === "pause") {
+      setTimeout(() => {
+        if (lainRef.current) {
+          lainRef.current.material.depthTest = false;
+          lainRef.current.renderOrder = 2;
+        }
+      }, 3400);
+    } else if (prevData?.subscene === "pause" && subscene === "site") {
+      if (lainRef.current) {
+        lainRef.current.material.depthTest = true;
+        lainRef.current.renderOrder = 0;
+      }
+    }
+  }, [prevData?.subscene, subscene]);
+
   return (
     <Suspense fallback={null}>
       <sprite scale={[4.5, 4.5, 4.5]} position={[0, -0.15, 0]} ref={lainRef}>

src/components/MainScene/LevelSelection.tsx

@@ -47,6 +47,8 @@ const LevelSelection = () => {
   const upArrowRef = useRef<THREE.Sprite>();
   const downArrowRef = useRef<THREE.Sprite>();
 
+  const upperLimit = useStore((state) => (state.activeSite === "a" ? 22 : 13));
+
   useEffect(() => {
     const generateGeom = (number: number) => {
       const geometry = new THREE.PlaneBufferGeometry();
@@ -173,6 +175,7 @@ const LevelSelection = () => {
           scale={[0.3, 0.15, 0]}
           position={[1.1, -0.35, 0]}
           renderOrder={4}
+          visible={parseInt(selectedLevel) !== 1}
           ref={downArrowRef}
         >
           <spriteMaterial
@@ -186,6 +189,7 @@ const LevelSelection = () => {
         <sprite
           scale={[0.3, 0.15, 0]}
           position={[1.1, 0.5, 0]}
+          visible={ parseInt(selectedLevel) !== upperLimit}
           renderOrder={4}
           ref={upArrowRef}
         >

src/components/MainScene/Popups/About.tsx

@@ -14,7 +14,7 @@ const About = () => {
 
   useFrame(() => {
     if (bgRef.current) {
-      bgRef.current.position.y += 0.03;
+      bgRef.current.position.y += 0.01;
       if (Math.round(bgRef.current.position.y) === 14) {
         setShowingAbout(false);
       }
@@ -50,7 +50,7 @@ const About = () => {
           <sprite
             ref={bgRef}
             scale={[10.5 / 2.5, 52.8 / 2.5, 0]}
-            position={[1.1, -13, 0.1]}
+            position={[1.1, -11.5, 0.1]}
             renderOrder={200}
           >
             <spriteMaterial

src/components/MainScene/Site/Node.tsx

@@ -67,6 +67,8 @@ const Node = memo((props: NodeContructorProps) => {
     }
   }, [props.nodeName]);
 
+  const paused = useStore((state) => state.mainSubscene === "pause");
+
   const materialRef = useRef<THREE.ShaderMaterial>();
 
   const nonActiveTexture = useLoader(
@@ -172,7 +174,7 @@ const Node = memo((props: NodeContructorProps) => {
         0,
       ]}
     >
-      {props.active ? (
+      {props.active && !paused ? (
         <a.group
           scale-x={activeNodeScale}
           scale-y={activeNodeScale}

src/components/MediaPlayer.tsx

@@ -44,9 +44,17 @@ const MediaPlayer = () => {
       ) {
         setPercentageElapsed(percentageElapsed);
         lastSetPercentageRef.current = percentageElapsed;
+
+        if (subtitleRef.current) {
+          if (percentageElapsed === 0) {
+            subtitleRef.current.style.visibility = "visible";
+          } else if (percentageElapsed === 100) {
+            subtitleRef.current.style.visibility = "hidden";
+          }
+        }
       }
     }
-  }, [setPercentageElapsed, videoRef]);
+  }, [setPercentageElapsed, videoRef, subtitleRef]);
 
   useEffect(() => {
     (requestRef.current as any) = requestAnimationFrame(updateTime);
@@ -59,13 +67,8 @@ const MediaPlayer = () => {
 
   return (
     <>
-      <video id="media" ref={videoRef}>
-        <track
-          id={"track"}
-          ref={trackRef}
-          kind="metadata"
-          default
-        />
+      <video id="media" ref={videoRef} controls>
+        <track id={"track"} ref={trackRef} kind="metadata" default />
       </video>
       <div id={"subtitle-container"}>
         <p ref={subtitleRef} id={"subtitle"} />

src/components/TextRenderer/MainYellowTextAnimator.tsx

@@ -3,12 +3,13 @@ import { useStore } from "../../store";
 import { a, useTrail } from "@react-spring/three";
 import BigLetter from "./BigLetter";
 import usePrevious from "../../hooks/usePrevious";
-import { getNodeHud } from "../../helpers/node-helpers";
+import { getNodeHud, isNodeVisible } from "../../helpers/node-helpers";
 
 const MainYellowTextAnimator = (props: { visible?: boolean }) => {
   const activeNode = useStore((state) => state.activeNode);
   const subscene = useStore((state) => state.mainSubscene);
   const prevData = usePrevious({ subscene });
+  const gameProgress = useStore((state) => state.gameProgress);
 
   const [text, setText] = useState(
     useStore.getState().activeNode.node_name.split("")
@@ -31,9 +32,14 @@ const MainYellowTextAnimator = (props: { visible?: boolean }) => {
         () => set({ posX: hud.big_text[0], posY: hud.big_text[1] }),
         400
       );
-      setTimeout(() => setText(activeNode.node_name.split("")), 1000);
+
+      if (isNodeVisible(activeNode, gameProgress)) {
+        setTimeout(() => setText(activeNode.node_name.split("")), 1000);
+      } else {
+        setText("Unknown".split(""));
+      }
     }
-  }, [activeNode, prevData?.subscene, set, subscene]);
+  }, [activeNode, prevData?.subscene, set, subscene, gameProgress]);
 
   return (
     <a.group position-z={10} visible={props.visible}>

src/core/eventTemplates.ts

@@ -599,7 +599,21 @@ export const changeEndComponent = (calculatedState: {
 });
 
 export const endGame = (calculatedState: { userSaveState: UserSaveState }) => ({
-  state: [{ mutation: { currentScene: "boot", inputCooldown: -1 } }],
+  state: [
+    {
+      mutation: {
+        currentScene: "boot",
+        inputCooldown: -1,
+        activeMainMenuComponent: "authorize_user",
+        authorizeUserMatrixIndices: {
+          rowIdx: 1,
+          colIdx: 7,
+        },
+        bootSubscene: "main_menu",
+        playerName: "",
+      },
+    },
+  ],
   audio: [{ sfx: [audio.sound0] }],
   effects: [() => saveUserProgress(calculatedState.userSaveState)],
 });

src/core/input-handlers/handleMainSceneInput.ts

@@ -300,7 +300,7 @@ const handleMainSceneInput = (
               case "change":
                 if (
                   activePauseComponent === "change" &&
-                  gameProgress.gate_level > 4
+                  gameProgress.gate_level < 4
                 )
                   return showPermissionDenied;
                 else return displayPrompt;

src/store.ts

@@ -331,6 +331,7 @@ export const useStore = create(
           activeSite: userState.activeSite,
           gameProgress: userState.gameProgress,
           playerName: userState.playerName,
+          polytanUnlockedParts: userState.polytanUnlockedParts,
         })),
     })
   )
@@ -423,6 +424,7 @@ export const getCurrentUserState = (): UserSaveState => {
     activeSite: state.activeSite,
     gameProgress: state.gameProgress,
     playerName: state.playerName,
+    polytanUnlockedParts: state.polytanUnlockedParts,
   };
 };
 

src/types/types.ts

@@ -202,4 +202,5 @@ export type UserSaveState = {
   activeSite: ActiveSite;
   gameProgress: GameProgress;
   playerName: string;
+  polytanUnlockedParts: PolytanBodyParts;
 };