diff --git a/src/components/GateScene/GateSide.tsx b/src/components/GateScene/GateSide.tsx index 717df7d..61e965e 100644 --- a/src/components/GateScene/GateSide.tsx +++ b/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(); diff --git a/src/components/MainScene/PauseSubscene/About.tsx b/src/components/MainScene/PauseSubscene/About.tsx index b247ea2..23f9142 100644 --- a/src/components/MainScene/PauseSubscene/About.tsx +++ b/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); diff --git a/src/components/MainScene/Site/NodeAnimations/NodeExplosion.tsx b/src/components/MainScene/Site/NodeAnimations/NodeExplosion.tsx index 4fd3f08..6779d72 100644 --- a/src/components/MainScene/Site/NodeAnimations/NodeExplosion.tsx +++ b/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); diff --git a/src/components/MediaScene/MediaPlayer.tsx b/src/components/MediaScene/MediaPlayer.tsx index 4cc3184..0501d9b 100644 --- a/src/components/MediaScene/MediaPlayer.tsx +++ b/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(); - 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(); + const audioRef = createRef(); + const trackRef = createRef(); // 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 ( - + <> + + + ); }; diff --git a/src/core/setters/soundManager.ts b/src/core/setters/soundManager.ts index 65a386c..0e2a507 100644 --- a/src/core/setters/soundManager.ts +++ b/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), }; diff --git a/src/store.ts b/src/store.ts index 514c0b7..3269a77 100644 --- a/src/store.ts +++ b/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(); };