fixes

src/components/MainScene/HUD.tsx

@@ -23,13 +23,13 @@ const HUD = memo(() => {
   const activeLevel = useStore((state) => state.activeLevel);
   const subscene = useStore((state) => state.mainSubscene);
   const scene = useStore((state) => state.currentScene);
-  const protocolLinesToggled = useStore((state) => state.protocolLinesToggled);
+  const protocolLinesEnabled = useStore((state) => state.protocolLinesEnabled);
   const prevData = usePrevious({
     siteRotY,
     activeLevel,
     subscene,
     scene,
-    protocolLinesToggled,
+    protocolLinesEnabled,
   });
 
   const longHudRef = useRef<THREE.Object3D>();
@@ -78,7 +78,7 @@ const HUD = memo(() => {
       nodeTitleRef.current!.scale.x = -Math.abs(nodeTitleRef.current!.scale.x);
       nodeTitleRef.current!.position.x = 0.2;
 
-      if (protocolLinesToggled) {
+      if (protocolLinesEnabled) {
         protocolLineTitleRefs.current.forEach((ref) => {
           ref.current!.scale.x = -Math.abs(ref.current!.scale.x);
           ref.current!.position.x = 0.2;
@@ -93,7 +93,7 @@ const HUD = memo(() => {
       nodeTitleRef.current!.scale.x = Math.abs(nodeTitleRef.current!.scale.x);
       nodeTitleRef.current!.position.x = -0.2;
 
-      if (protocolLinesToggled) {
+      if (protocolLinesEnabled) {
         protocolLineTitleRefs.current.forEach((ref) => {
           ref.current!.scale.x = Math.abs(ref.current!.scale.x);
           ref.current!.position.x = -0.2;
@@ -138,7 +138,7 @@ const HUD = memo(() => {
         !(scene === "main" && prevData?.scene === "main") ||
         (subscene === "site" && prevData?.subscene === "pause") ||
         subscene === "pause" ||
-        protocolLinesToggled !== prevData?.protocolLinesToggled
+        protocolLinesEnabled !== prevData?.protocolLinesEnabled
       ) {
         // set to final pos instantly
         setPos(hud, "position");
@@ -176,11 +176,11 @@ const HUD = memo(() => {
     prevData?.scene,
     prevData?.siteRotY,
     prevData?.subscene,
-    prevData?.protocolLinesToggled,
+    prevData?.protocolLinesEnabled,
     scene,
     siteRotY,
     subscene,
-    protocolLinesToggled,
+    protocolLinesEnabled,
     activeNode.matrixIndices,
     activeNode.node_name,
   ]);
@@ -221,7 +221,7 @@ const HUD = memo(() => {
         <group ref={nodeTitleRef} scale={[0.016, 0.03, 0.016]}>
           <GreenTextRenderer textToRender={activeNode.title.split("")} />
         </group>
-        {protocolLinesToggled && (
+        {protocolLinesEnabled && (
           <>
             <group ref={protocolLine1Ref}>
               <mesh scale={[0.5, 0.06, 1]} renderOrder={2}>

src/components/MainScene/Pause/Pause.tsx

@@ -70,10 +70,9 @@ const Pause = () => {
 
   useEffect(() => {
     if (subscene === "pause") {
-      let timers: ReturnType<typeof setTimeout>[] = [];
-      timers.push(setTimeout(() => setVisible(true), 4400));
-      timers.push(setTimeout(() => setFinished(true), 7300));
-      timers.push(setTimeout(() => setInputCooldown(1000), 7600));
+      setTimeout(() => setVisible(true), 4400);
+      setTimeout(() => setFinished(true), 7300);
+      setTimeout(() => setInputCooldown(1000), 7600);
 
       return () => {
         setExit(true);
@@ -89,10 +88,6 @@ const Pause = () => {
           setFinished(false);
           setExit(false);
         }
-
-        for (const timer of timers) {
-          clearTimeout(timer);
-        }
       };
     }
   }, [setInputCooldown, subscene]);

src/core/eventTemplates.ts

@@ -409,6 +409,7 @@ export const loadGame = (calculatedState: {
         promptVisible: false,
         activePromptComponent: "no",
         activePauseComponent: "change",
+        protocolLinesEnabled: false,
       },
       delay: 1200,
     },
@@ -440,6 +441,7 @@ export const changeSite = (calculatedState: {
         promptVisible: false,
         activePromptComponent: "no",
         mainSubscene: "site",
+        protocolLinesEnabled: false,
         // load state
         activeSite: calculatedState.newActiveSite,
         activeNode: calculatedState.newActiveNode,
@@ -723,6 +725,7 @@ export const exitUserAuthorization = {
   audio: [{ sfx: [audio.sound29] }],
 };
 
+// todo reset state
 export const startNewGame = {
   state: [
     { mutation: { currentScene: "main", intro: true, inputCooldown: -1 } },
@@ -816,12 +819,12 @@ export const playLainIdleAnim = (calculatedState: {
 });
 
 export const setProtocolLines = (calculatedState: {
-  protocolLinesToggled: boolean;
+  protocolLinesEnabled: boolean;
 }) => ({
   state: [
     {
       mutation: {
-        protocolLinesToggled: calculatedState.protocolLinesToggled,
+        protocolLinesEnabled: calculatedState.protocolLinesEnabled,
         inputCooldown: 0,
       },
     },

src/core/input-handlers/handleMainSceneInput.ts

@@ -60,7 +60,7 @@ const handleMainSceneInput = (
     siteSaveState,
     wordNotFound,
     canLainMove,
-    protocolLinesToggled,
+    protocolLinesEnabled,
     cameraTiltValue,
     lastCameraTiltValue,
   } = mainSceneContext;
@@ -260,7 +260,7 @@ const handleMainSceneInput = (
               isNodeVisible(activeNode, gameProgress)
             ) {
               return setProtocolLines({
-                protocolLinesToggled: !protocolLinesToggled,
+                protocolLinesEnabled: !protocolLinesEnabled,
               });
             } else return resetInputCooldown;
           case "R2":

src/dom-components/Notes.tsx

@@ -44,6 +44,11 @@ const Notes = () => {
                 Browsers require user permission to autoplay audio. If you're
                 not hearing any sound effects, just click somewhere around the
                 page.
+                <br /> <br />
+                We've also had an issue where the player left the game idle for
+                30~ mins, and the browser's autoplay permissions reset. Again,
+                if this happens to you, just click around the page and it'll get
+                fixed.
               </p>
             </td>
           </tr>

src/scenes/EndScene.tsx

@@ -4,6 +4,7 @@ import { useFrame } from "react-three-fiber";
 import { useStore } from "../store";
 import createAudioAnalyser from "../utils/createAudioAnalyser";
 import EndSelectionScreen from "../components/EndScene/EndSelectionScreen";
+import introSpeechVtt from "../static/media/webvtt/Xa0001.vtt";
 import introSpeech from "../static/media/audio/LAIN21.XA[31].mp4";
 import outroSpeech from "../static/media/audio/LAIN21.XA[16].mp4";
 import LainSpeak from "../components/LainSpeak";
@@ -52,6 +53,7 @@ const EndScene = () => {
 
   useEffect(() => {
     const mediaElement = document.getElementById("media") as HTMLMediaElement;
+    const trackElement = document.getElementById("track") as HTMLMediaElement;
 
     if (mediaElement) {
       const playMedia = async (idx: number) => {
@@ -63,6 +65,7 @@ const EndScene = () => {
 
             await sleep(3800);
             mediaElement.src = introSpeech;
+            trackElement.src = introSpeechVtt;
 
             mediaElement.load();
             mediaElement.play();
@@ -100,6 +103,9 @@ const EndScene = () => {
       playMedia(0);
       mediaElement.addEventListener("ended", () => {
         playedMediaCountRef.current++;
+        if (playedMediaCountRef.current === 1) {
+          trackElement.removeAttribute("src");
+        }
         if (playedMediaCountRef.current <= playerNameVoices.length + 1)
           playMedia(playedMediaCountRef.current);
       });

src/store.ts

@@ -46,7 +46,7 @@ type State = {
   activeNodeRot: number[];
   activeNodeAttributes: NodeAttributes;
 
-  protocolLinesToggled: boolean;
+  protocolLinesEnabled: boolean;
 
   lainMoveState: string;
   canLainMove: boolean;
@@ -145,7 +145,7 @@ export const useStore = create(
       canLainMove: true,
 
       // extra node data display
-      protocolLinesToggled: false,
+      protocolLinesEnabled: false,
 
       // camera tilt
       lastCameraTiltValue: -0.08,
@@ -377,7 +377,7 @@ export const getMainSceneContext = (): MainSceneContext => {
     siteSaveState: state.siteSaveState,
     wordNotFound: state.wordNotFound,
     canLainMove: state.canLainMove,
-    protocolLinesToggled: state.protocolLinesToggled,
+    protocolLinesEnabled: state.protocolLinesEnabled,
     cameraTiltValue: state.cameraTiltValue,
     lastCameraTiltValue: state.lastCameraTiltValue,
   };

src/types/types.ts

@@ -114,7 +114,7 @@ export interface MainSceneContext extends PromptContext {
   wordNotFound: boolean;
   siteSaveState: SiteSaveState;
   canLainMove: boolean;
-  protocolLinesToggled: boolean;
+  protocolLinesEnabled: boolean;
   cameraTiltValue: number;
   lastCameraTiltValue: number;
 }