mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
fixing subtitles, almost done with sounds
This commit is contained in:
parent
203acb6a2d
commit
662bdfb3f7
6 changed files with 79 additions and 74 deletions
|
@ -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>();
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -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),
|
||||
};
|
||||
|
|
44
src/store.ts
44
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();
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue