fixing subtitles, almost done with sounds

src/components/GateScene/GateSide.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { useMemo, useRef } from "react";
 import blueBinary from "../../static/sprite/blue_binary.png";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import { OrbitControls } from "@react-three/drei";
 
 const GateSide = () => {
   const blueBinaryTex = useLoader(THREE.TextureLoader, blueBinary);
@@ -15,13 +14,17 @@ const GateSide = () => {
     return blueBinaryTex;
   }, [blueBinaryTex]);
 
-  useEffect(() => {
-    setInterval(() => {
-      if (matRef.current) {
+  const last = useRef(0);
+
+  useFrame(() => {
+    const now = Date.now();
+    if (matRef.current && last.current) {
+      if (now > last.current + 50) {
         matRef.current.uniforms.offset.value += 0.5;
+        last.current = now;
       }
-    }, 50);
-  }, []);
+    }
+  });
 
   const matRef = useRef<THREE.ShaderMaterial>();
 

src/components/MainScene/PauseSubscene/About.tsx

@@ -1,8 +1,9 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import aboutBg from "../../../static/sprite/about_background.png";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import { useStore } from "../../../store";
+import { playAudio, useStore } from "../../../store";
+import { sound27, sound6, sound7 } from "../../../static/sfx";
 
 const About = () => {
   const setShowingAbout = useStore((state) => state.setShowingAbout);

src/components/MainScene/Site/NodeAnimations/NodeExplosion.tsx

@@ -7,9 +7,7 @@ import GoldNode from "./NodeExplosion/GoldNode";
 import { useStore } from "../../../../store";
 
 const NodeExplosion = () => {
-  const explosionVisible = useStore(
-    (state) => state.activeNodeState.exploding
-  );
+  const explosionVisible = useStore((state) => state.activeNodeState.exploding);
 
   const [shouldAnimate, setShouldAnimate] = useState(false);
   const [shouldRotate, setShouldRotate] = useState(false);

src/components/MediaScene/MediaPlayer.tsx

@@ -4,22 +4,19 @@ import React, {
   useEffect,
   useMemo,
   useRef,
-  useState,
 } from "react";
 import { useStore } from "../../store";
-import t from "../../static/webvtt/test.vtt";
 import endroll from "../../static/movie/ENDROLL1.STR[0].webm";
 import xa0001 from "../../static/audio/Xa0001.mp4";
 import xa0006 from "../../static/audio/Xa0006.mp4";
 
 const MediaPlayer = () => {
-  const [mediaSource, setMediaSource] = useState<any>();
-
   const currentScene = useStore((state) => state.currentScene);
   const setScene = useStore((state) => state.setScene);
 
   const setPercentageElapsed = useStore((state) => state.setPercentageElapsed);
 
+  const nodeName = useStore((state) => state.activeNode.node_name);
   const idleMedia = useStore((state) => state.idleMedia);
   const nodeMedia = useStore((state) => state.activeNode.media_file);
 
@@ -29,6 +26,8 @@ const MediaPlayer = () => {
 
   const requestRef = useRef();
   const videoRef = createRef<HTMLVideoElement>();
+  const audioRef = createRef<HTMLVideoElement>();
+  const trackRef = createRef<HTMLTrackElement>();
 
   // end scene specific stuff
   const endMediaPlayedCount = useStore((state) => state.endMediaPlayedCount);
@@ -97,6 +96,7 @@ const MediaPlayer = () => {
   }, [endMediaPlayedCount]);
 
   useEffect(() => {
+    console.log("here");
     if (currentScene === "end") {
       if (endMediaPlayedCount === 0) {
         if (videoRef.current) {
@@ -116,6 +116,11 @@ const MediaPlayer = () => {
         }
       }
     } else {
+      import("../../static/webvtt/" + nodeName + ".vtt").then((vtt) => {
+        if (trackRef.current) {
+          trackRef.current.src = vtt.default;
+        }
+      });
       if (
         currentScene === "media" ||
         currentScene === "tak" ||
@@ -128,8 +133,8 @@ const MediaPlayer = () => {
           if (mediaToPlay.includes("XA")) {
             import("../../static/audio/" + mediaToPlay + ".ogg").then(
               (media) => {
-                setMediaSource(media.default);
                 if (videoRef.current) {
+                  videoRef.current.src = media.default;
                   videoRef.current.load();
                 }
               }
@@ -137,9 +142,11 @@ const MediaPlayer = () => {
           } else {
             import("../../static/movie/" + mediaToPlay + "[0].webm").then(
               (media) => {
-                setMediaSource(media.default);
-                if (videoRef.current) {
+                if (videoRef.current && audioRef.current) {
+                  videoRef.current.src = media.default;
+                  audioRef.current.src = xa0006;
                   videoRef.current.load();
+                  audioRef.current.load();
                 }
               }
             );
@@ -152,26 +159,21 @@ const MediaPlayer = () => {
     endMediaPlayedCount,
     idleMedia,
     nodeMedia,
+    nodeName,
     setPercentageElapsed,
+    trackRef,
     videoRef,
   ]);
 
   return (
-    <video
-      width="800"
-      height="600"
-      controls
-      id="media"
-      ref={videoRef}
-      style={{
-        display: ["media", "idle_media", "tak", "end"].includes(currentScene)
-          ? "block"
-          : "none",
-      }}
-      src={currentScene === "end" ? endMediaSource : mediaSource}
-    >
-      <track src={t} kind="captions" default />
-    </video>
+    <>
+      <video width="800" height="600" id="media" ref={videoRef}>
+        <track kind="captions" default />
+      </video>
+      <video width="800" height="600" id="audio" ref={audioRef}>
+        <track ref={trackRef} kind="captions" default />
+      </video>
+    </>
   );
 };
 

src/core/setters/soundManager.ts

@@ -4,6 +4,41 @@ import * as audio from "../../static/sfx";
 const soundManager = (eventState: any) => {
   const dispatchAction = (eventState: { event: string; scene: string }) => {
     switch (eventState.event) {
+      case "knock_and_fall":
+        return {
+          action: () => {
+            setTimeout(() => {
+              playAudio(audio.sound14);
+            }, 1200);
+
+            setTimeout(() => {
+              playAudio(audio.sound19);
+            }, 2300);
+
+            setTimeout(() => {
+              playAudio(audio.sound33);
+            }, 3150);
+          },
+        };
+      case "knock":
+        return {
+          action: () => {
+            setTimeout(() => {
+              playAudio(audio.sound18);
+            }, 1200);
+          },
+        };
+      case "touch_and_scare":
+        return {
+          action: () => {
+            setTimeout(() => {
+              playAudio(audio.sound17);
+            }, 2400);
+            setTimeout(() => {
+              playAudio(audio.sound33);
+            }, 3150);
+          },
+        };
       case "throw_node_media":
       case "throw_node_gate":
       case "throw_node_sskn":
@@ -50,6 +85,7 @@ const soundManager = (eventState: any) => {
       case "show_permission_denied":
       case "pause_about_select":
       case "display_prompt":
+      case "pause_exit_select":
         return {
           action: () => playAudio(audio.sound0),
         };
@@ -131,6 +167,7 @@ const soundManager = (eventState: any) => {
       case "exit_prompt":
       case "pause_save_select":
       case "pause_load_select":
+      case "pause_change_select":
         return {
           action: () => playAudio(audio.sound28),
         };

src/store.ts

@@ -1,10 +1,10 @@
 import create from "zustand";
 import { combine } from "zustand/middleware";
 import * as THREE from "three";
-import authorize_user_letters from "./resources/authorize_user_letters.json";
 import game_progress from "./resources/initial_progress.json";
 import { NodeDataType } from "./components/MainScene/Site";
 import { getNodeById } from "./utils/node-utils";
+import site_a from "./resources/site_a.json";
 
 type State = {
   currentScene: string;
@@ -122,7 +122,7 @@ export const useStore = create(
   combine(
     {
       // scene data
-      currentScene: "boot",
+      currentScene: "media",
 
       // game progress
       gameProgress: game_progress,
@@ -134,43 +134,7 @@ export const useStore = create(
       intro: true,
 
       // nodes
-      activeNode: {
-        id: "0422",
-        image_table_indices: {
-          "1": "93",
-          "2": "356",
-          "3": "562",
-        },
-        media_file: "LAIN08.XA[26]",
-        node_name: "Tda028",
-        protocol_lines: {
-          "1": "TOUKO's_DIARY",
-          "2": "authorized_il",
-          "3": "decoded file:t",
-          "4": "ftp/tl.S_server",
-        },
-        required_final_video_viewcount: 0,
-        site: "A",
-        title: "TOUKO's DIARY",
-        triggers_final_video: 0,
-        type: 2,
-        unlocked_by: "",
-        upgrade_requirement: 0,
-        words: {
-          "1": "eye",
-          "2": "quiet",
-          "3": "hallucination",
-        },
-        matrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },
-      },
-      activeNodePos: [0, 0, 0],
-      activeNodeRot: [0, 0, 0],
-      activeNodeState: {
-        interactedWith: false,
-        exploding: false,
-        shrinking: false,
-        visible: true,
-      },
+      activeNode: site_a["17"]["1717"],
 
       // lain
       lainMoveState: "standing",
@@ -548,7 +512,7 @@ export const getBootSceneContext = () => {
 export const playAudio = (audio: HTMLAudioElement) => {
   audio.currentTime = 0;
   audio.currentTime = 0;
-  audio.volume = 1;
+  audio.volume = 0.5;
   audio.loop = false;
   audio.play();
 };