bugfixes and minor tweaks

README.md

@@ -58,11 +58,11 @@ Once you've saved the game manually (going into pause => selecting Save), look i
   <img src="markdown/8.png" width="49%">
 </p>
 
-## Reporting bugs/Contributing
+## Reporting bugs and contributing
 
 If you have any ideas/suggestions/found an issue or want to help us with the translation or anything else, please submit an issue or join our [Discord server](https://discord.com/invite/W22Ga2R).
 
-## Tools used while developing
+## Tools used during development
 
 - [`jPSXdec`](https://github.com/m35/jpsxdec) - PlayStation 1 audio/video converter.
 - [`three.js`](https://github.com/mrdoob/three.js/) - JavaScript 3D renderer.

src/components/MainScene/Pause/Pause.tsx

@@ -1,9 +1,14 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import * as THREE from "three";
 import PauseSquare from "./PauseSquare";
 import PauseBigLetter from "../../TextRenderer/PauseBigLetter";
 import { useStore } from "../../../store";
-import usePrevious from "../../../hooks/usePrevious";
 
 const Pause = () => {
   const generateSqaureGeom = useCallback((row: number, square: number) => {
@@ -41,7 +46,7 @@ const Pause = () => {
   );
 
   const subscene = useStore((state) => state.mainSubscene);
-  const prevData = usePrevious({ subscene });
+  const scene = useStore((state) => state.currentScene);
   const setInputCooldown = useStore((state) => state.setInputCooldown);
 
   const [visible, setVisible] = useState(false);
@@ -54,22 +59,43 @@ const Pause = () => {
     ])
   );
 
+  const isMountedRef = useRef<boolean>();
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, [scene]);
+
   useEffect(() => {
     if (subscene === "pause") {
-      setTimeout(() => setVisible(true), 4400);
-      setTimeout(() => setFinished(true), 7300);
-      setTimeout(() => setInputCooldown(1000), 7600);
-    }
+      let timers: ReturnType<typeof setTimeout>[] = [];
+      timers.push(setTimeout(() => setVisible(true), 4400));
+      timers.push(setTimeout(() => setFinished(true), 7300));
+      timers.push(setTimeout(() => setInputCooldown(1000), 7600));
 
-    if (prevData?.subscene === "pause" && subscene === "site") {
-      setExit(true);
-      setTimeout(() => {
-        setVisible(false);
-        setFinished(false);
-        setExit(false);
-      }, 1200);
+      return () => {
+        setExit(true);
+
+        if (isMountedRef.current) {
+          setTimeout(() => {
+            setVisible(false);
+            setFinished(false);
+            setExit(false);
+          }, 1200);
+        } else {
+          setVisible(false);
+          setFinished(false);
+          setExit(false);
+        }
+
+        for (const timer of timers) {
+          clearTimeout(timer);
+        }
+      };
     }
-  }, [prevData?.subscene, setInputCooldown, subscene]);
+  }, [setInputCooldown, subscene]);
 
   const whenActive = useCallback((rowIdx: number, colIdx: number) => {
     switch (rowIdx) {

src/core/input-handlers/handleMainSceneInput.ts

@@ -255,12 +255,14 @@ const handleMainSceneInput = (
               activeNode: newNode,
             });
           case "SQUARE":
-            if (activeNode.node_name !== "Unknown") {
+            if (
+              activeNode.node_name !== "Unknown" &&
+              isNodeVisible(activeNode, gameProgress)
+            ) {
               return setProtocolLines({
                 protocolLinesToggled: !protocolLinesToggled,
               });
-            }
-            break;
+            } else return resetInputCooldown;
           case "R2":
             if (cameraTiltValue === 0) {
               return setCameraTilt({
@@ -358,11 +360,7 @@ const handleMainSceneInput = (
               case "load":
                 return displayPrompt;
               case "change":
-                if (
-                  activePauseComponent === "change" &&
-                  gameProgress.gate_level < 4
-                )
-                  return showPermissionDenied;
+                if (gameProgress.gate_level > 4) return showPermissionDenied;
                 else return displayPrompt;
             }
         }

src/dom-components/Guide.tsx

@@ -1,8 +1,12 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Header from "./Header";
 import "../static/css/guide.css";
 
 const Guide = () => {
+  useEffect(() => {
+    document.title = "< guide >";
+  }, []);
+
   return (
     <>
       <Header />
@@ -82,15 +86,15 @@ const Guide = () => {
         <br /> <br />
         Category C - Upgrades:
         <br />
-        SSkn - Not sure what SSkn stands for - The main upgrade inside the game.
-        Some nodes have an "upgrade requirement" that you need to meet to be
-        able to view them, the way you do that is by collecting these. So, the
-        next time you see Lain try to knock on a node and fall over, know that
-        you need to collect more SSkn nodes.
+        SSkn - Saisei-kun (roughly translates to Mr. Recovery) - The main
+        upgrade inside the game. Some nodes have an "upgrade requirement" that
+        you need to meet to be able to view them, the way you do that is by
+        collecting these. So, the next time you see Lain try to knock on a node
+        and fall over, know that you need to collect more SSkn nodes.
         <br />
         GaTE - Gate (I guess) - A "gate pass" as the game calls it - after
-        collecting all of them, you unlock Site B, which contains
-        more nodes and is the place where you continue the story.
+        collecting all of them, you unlock Site B, which contains more nodes and
+        is the place where you continue the story.
         <br /> <br />
       </p>
     </>

src/dom-components/MainPage.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Link } from "react-router-dom";
 import "../static/css/mainpage.css";
 import Credit from "./Credit";
@@ -6,6 +6,10 @@ import Header from "./Header";
 import QA from "./QA";
 
 const MainPage = () => {
+  useEffect(() => {
+    document.title = "< index >";
+  }, []);
+
   return (
     <>
       <Header />