more fixing

src/components/MediaPlayer.tsx

@@ -67,7 +67,7 @@ const MediaPlayer = () => {
 
   return (
     <>
-      <video id="media" ref={videoRef} controls>
+      <video id="media" ref={videoRef}>
         <track id={"track"} ref={trackRef} kind="metadata" default />
       </video>
       <div id={"subtitle-container"}>

src/core/eventTemplates.ts

@@ -459,13 +459,10 @@ export const changeMediaSide = (calculatedState: {
   ],
 });
 
-export const playMedia = (calculatedState: { activeNode: NodeData }) => ({
+export const playMedia = {
   state: [{ mutation: { mediaPercentageElapsed: 0, inputCooldown: 500 } }],
-  effects: [
+  effects: [playMediaElement],
-    playMediaElement,
+};
-    () => setNodeViewed(calculatedState.activeNode.node_name),
-  ],
-});
 
 export const exitMedia = {
   state: [

src/core/input-handlers/handleMainSceneInput.ts

@@ -121,7 +121,7 @@ const handleMainSceneInput = (
               true
             );
 
-            if (!nodeData) return;
+            if (!nodeData) return resetInputCooldown;
 
             const lainMoveAnimation = `move_${direction}`;
             const newSiteRot = [
@@ -145,9 +145,7 @@ const handleMainSceneInput = (
                 siteRot: newSiteRot,
                 activeNode: newNode,
               });
-            } else {
+            } else return changeNode({ activeNode: newNode });
-              return changeNode({ activeNode: newNode });
-            }
           }
           case "UP":
           case "DOWN": {
@@ -195,7 +193,7 @@ const handleMainSceneInput = (
               activeNode.id === "" ||
               !isNodeVisible(activeNode, gameProgress)
             )
-              return;
+              return resetInputCooldown;
 
             if (activeNode.upgrade_requirement > gameProgress.sskn_level) {
               const rejectEvents = [knockNodeAndFall, knockNode, explodeNode];
@@ -229,7 +227,7 @@ const handleMainSceneInput = (
           case "CIRCLE":
             if (!canLainMove) return resetInputCooldown;
 
-            if (level === selectedLevel) return;
+            if (level === selectedLevel) return resetInputCooldown;
 
             const direction = selectedLevel > level ? "up" : "down";
 

src/core/input-handlers/handleMediaSceneInput.ts

@@ -59,7 +59,7 @@ const handleMediaSceneInput = (
               ) as HTMLMediaElement;
 
               if (!mediaElement.paused) return;
-              return playMedia({ activeNode: activeNode });
+              return playMedia;
             case "exit":
               return exitMedia;
           }

src/scenes/ChangeDiscScene.tsx

@@ -55,7 +55,11 @@ const ChangeDiscScene = () => {
       </sprite>
 
       {[...Array(2).keys()].map((idx) => (
-        <sprite scale={[9, 0.03, 0]} position={[0, 0.5 - idx / 10, 0]}>
+        <sprite
+          scale={[9, 0.03, 0]}
+          position={[0, 0.5 - idx / 10, 0]}
+          key={idx}
+        >
           <spriteMaterial attach="material" map={discLineTex} />
         </sprite>
       ))}
@@ -68,13 +72,21 @@ const ChangeDiscScene = () => {
       </sprite>
 
       {[...Array(7).keys()].map((idx) => (
-        <sprite scale={[9, 0.03, 0]} position={[0, -1.5 - idx / 9, 0]}>
+        <sprite
+          scale={[9, 0.03, 0]}
+          position={[0, -1.5 - idx / 9, 0]}
+          key={idx}
+        >
           <spriteMaterial attach="material" map={discLineTex} />
         </sprite>
       ))}
 
       {[...Array(2).keys()].map((idx) => (
-        <sprite scale={[8, 0.13, 0]} position={[0, -2.2 - idx / 8, 0]}>
+        <sprite
+          scale={[8, 0.13, 0]}
+          position={[0, -2.2 - idx / 8, 0]}
+          key={idx}
+        >
           <spriteMaterial attach="material" map={discSlopeLineTex} />
         </sprite>
       ))}

src/scenes/EndScene.tsx

@@ -1,10 +1,8 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import * as THREE from "three";
 import { useFrame } from "react-three-fiber";
-import { useStore } from "../store";
+import { createAudioAnalyser, useStore } from "../store";
 import EndSelectionScreen from "../components/EndScene/EndSelectionScreen";
-import endroll from "../static/media/movie/ENDROLL1.STR[0].mp4";
-import endrollVtt from "../static/media/webvtt/Endroll.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";
@@ -18,6 +16,7 @@ const EndScene = () => {
   const setSelectionVisible = useStore(
     (state) => state.setEndSceneSelectionVisible
   );
+  const setAudioAnalyser = useStore((state) => state.setAudioAnalyser);
 
   useFrame(() => {
     if (mainCylinderRef.current) {
@@ -43,13 +42,16 @@ const EndScene = () => {
   const playerName = useStore((state) => state.playerName);
   const playerNameVoices = useMemo(() => playerName.split(""), [playerName]);
 
+  const setInputCooldown = useStore((state) => state.setInputCooldown);
+
   useEffect(() => {
     const mediaElement = document.getElementById("media") as HTMLMediaElement;
 
-    const playNextMedia = async () => {
+    if (mediaElement) {
-      playedMediaCountRef.current++;
+      const playMedia = async (idx: number) => {
-      mediaElement.currentTime = 0;
+        switch (idx) {
-      if (playedMediaCountRef.current === 1) {
+          case 0:
+            setAudioAnalyser(createAudioAnalyser());
             setObjectsVisible(true);
             setIsIntro(true);
 
@@ -59,57 +61,41 @@ const EndScene = () => {
             mediaElement.load();
             mediaElement.play();
             setIsIntro(false);
-      }
+            break;
-
+          default:
-      if (
+            import("../static/voice/" + playerNameVoices[idx - 1] + ".mp4")
-        playedMediaCountRef.current > 1 &&
+              .then((media) => {
-        playedMediaCountRef.current < playerNameVoices.length + 1
-      ) {
-        import(
-          "../static/voice/" +
-            playerNameVoices[playedMediaCountRef.current - 1] +
-            ".WAV"
-        ).then((media) => {
                 mediaElement.src = media.default;
                 mediaElement.load();
                 mediaElement.play();
-        });
+              })
-      }
+              .catch((e) => console.log(e));
-
+            break;
-      if (playedMediaCountRef.current === playerNameVoices.length + 1) {
+          case playerNameVoices.length + 1:
             mediaElement.src = outroSpeech;
-
             mediaElement.load();
             mediaElement.play();
 
-        await sleep(4000);
             setIsOutro(true);
+
+            await sleep(4000);
             setSceneOutro(true);
 
             await sleep(3000);
             setObjectsVisible(false);
             setShowSelectionScreen(true);
             setSelectionVisible(true);
+            setInputCooldown(0);
         }
       };
 
-    mediaElement.addEventListener("ended", playNextMedia);
+      playMedia(0);
-  }, [playerNameVoices, setSelectionVisible]);
+      mediaElement.addEventListener("ended", () => {
-
+        playedMediaCountRef.current++;
-  useEffect(() => {
+        playMedia(playedMediaCountRef.current);
-    const mediaElement = document.getElementById("media") as HTMLMediaElement;
+      });
-    const trackElement = document.getElementById("track") as HTMLTrackElement;
-
-    if (mediaElement) {
-      mediaElement.currentTime = 0;
-
-      trackElement.src = endrollVtt;
-      mediaElement.src = endroll;
-
-      mediaElement.load();
-      mediaElement.play();
     }
-  }, []);
+  }, [playerNameVoices, setAudioAnalyser, setInputCooldown, setSelectionVisible]);
 
   return (
     <>

src/scenes/MediaScene.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { createAudioAnalyser, useStore } from "../store";
 import LeftSide from "../components/MediaScene/Selectables/LeftSide";
 import RightSide from "../components/MediaScene/Selectables/RightSide";
@@ -9,6 +9,8 @@ import Images from "../components/Images";
 import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer";
 import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextAnimator";
 import Loading from "../components/Loading";
+import endroll from "../static/media/movie/ENDROLL1.STR[0].mp4";
+import endrollVtt from "../static/media/webvtt/Endroll.vtt";
 
 const MediaScene = () => {
   const percentageElapsed = useStore((state) => state.mediaPercentageElapsed);
@@ -23,15 +25,47 @@ const MediaScene = () => {
     (state) => state.incrementFinalVideoViewCount
   );
 
+  const endrollPlayingRef = useRef(false);
+  const mediaSceneGroupRef = useRef<THREE.Group>();
+
+  const setNodeViewed = useStore.getState().setNodeViewed;
+
   useEffect(() => {
-    if (percentageElapsed === 100 && activeNode.triggers_final_video) {
+    if (percentageElapsed === 100) {
-      setScene("end");
+      setNodeViewed(activeNode.node_name);
+
+      if (endrollPlayingRef.current) setScene("end");
+
+      else if (!endrollPlayingRef.current && activeNode.triggers_final_video) {
+        if (mediaSceneGroupRef.current)
+          mediaSceneGroupRef.current.visible = false;
+
+        const mediaElement = document.getElementById(
+          "media"
+        ) as HTMLMediaElement;
+        const trackElement = document.getElementById(
+          "track"
+        ) as HTMLTrackElement;
+
+        if (mediaElement) {
+          mediaElement.currentTime = 0;
+
+          trackElement.src = endrollVtt;
+          mediaElement.src = endroll;
+
+          mediaElement.load();
+          mediaElement.play();
           incrementFinalVideoViewCount();
+          endrollPlayingRef.current = true;
+        }
+      }
     }
   }, [
+    activeNode.node_name,
     activeNode.triggers_final_video,
     incrementFinalVideoViewCount,
     percentageElapsed,
+    setNodeViewed,
     setScene,
   ]);
 
@@ -87,7 +121,7 @@ const MediaScene = () => {
   }, [setInputCooldown]);
 
   return (
-    <group position-z={3}>
+    <group position-z={3} ref={mediaSceneGroupRef}>
       {loaded ? (
         <group position={[0.4, -0.3, 0]}>
           <pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />

src/store.ts

@@ -224,7 +224,7 @@ export const useStore = create(
       siteSaveState: {
         a: {
           activeNode: {
-            ...getNodeById("0408", "a"),
+            ...getNodeById("0414", "a"),
             matrixIndices: { matrixIdx: 7, rowIdx: 1, colIdx: 0 },
           },
           siteRot: [0, 0, 0],