mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
more fixing
This commit is contained in:
parent
604ff41008
commit
6003e80e73
8 changed files with 112 additions and 85 deletions
|
@ -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"}>
|
||||
|
|
|
@ -459,13 +459,10 @@ export const changeMediaSide = (calculatedState: {
|
|||
],
|
||||
});
|
||||
|
||||
export const playMedia = (calculatedState: { activeNode: NodeData }) => ({
|
||||
export const playMedia = {
|
||||
state: [{ mutation: { mediaPercentageElapsed: 0, inputCooldown: 500 } }],
|
||||
effects: [
|
||||
playMediaElement,
|
||||
() => setNodeViewed(calculatedState.activeNode.node_name),
|
||||
],
|
||||
});
|
||||
effects: [playMediaElement],
|
||||
};
|
||||
|
||||
export const exitMedia = {
|
||||
state: [
|
||||
|
|
|
@ -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 {
|
||||
return changeNode({ activeNode: newNode });
|
||||
}
|
||||
} else 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";
|
||||
|
||||
|
|
|
@ -59,7 +59,7 @@ const handleMediaSceneInput = (
|
|||
) as HTMLMediaElement;
|
||||
|
||||
if (!mediaElement.paused) return;
|
||||
return playMedia({ activeNode: activeNode });
|
||||
return playMedia;
|
||||
case "exit":
|
||||
return exitMedia;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
))}
|
||||
|
|
|
@ -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,73 +42,60 @@ const EndScene = () => {
|
|||
const playerName = useStore((state) => state.playerName);
|
||||
const playerNameVoices = useMemo(() => playerName.split(""), [playerName]);
|
||||
|
||||
useEffect(() => {
|
||||
const mediaElement = document.getElementById("media") as HTMLMediaElement;
|
||||
|
||||
const playNextMedia = async () => {
|
||||
playedMediaCountRef.current++;
|
||||
mediaElement.currentTime = 0;
|
||||
if (playedMediaCountRef.current === 1) {
|
||||
setObjectsVisible(true);
|
||||
setIsIntro(true);
|
||||
|
||||
await sleep(3800);
|
||||
mediaElement.src = introSpeech;
|
||||
|
||||
mediaElement.load();
|
||||
mediaElement.play();
|
||||
setIsIntro(false);
|
||||
}
|
||||
|
||||
if (
|
||||
playedMediaCountRef.current > 1 &&
|
||||
playedMediaCountRef.current < playerNameVoices.length + 1
|
||||
) {
|
||||
import(
|
||||
"../static/voice/" +
|
||||
playerNameVoices[playedMediaCountRef.current - 1] +
|
||||
".WAV"
|
||||
).then((media) => {
|
||||
mediaElement.src = media.default;
|
||||
mediaElement.load();
|
||||
mediaElement.play();
|
||||
});
|
||||
}
|
||||
|
||||
if (playedMediaCountRef.current === playerNameVoices.length + 1) {
|
||||
mediaElement.src = outroSpeech;
|
||||
|
||||
mediaElement.load();
|
||||
mediaElement.play();
|
||||
|
||||
await sleep(4000);
|
||||
setIsOutro(true);
|
||||
setSceneOutro(true);
|
||||
|
||||
await sleep(3000);
|
||||
setObjectsVisible(false);
|
||||
setShowSelectionScreen(true);
|
||||
setSelectionVisible(true);
|
||||
}
|
||||
};
|
||||
|
||||
mediaElement.addEventListener("ended", playNextMedia);
|
||||
}, [playerNameVoices, setSelectionVisible]);
|
||||
const setInputCooldown = useStore((state) => state.setInputCooldown);
|
||||
|
||||
useEffect(() => {
|
||||
const mediaElement = document.getElementById("media") as HTMLMediaElement;
|
||||
const trackElement = document.getElementById("track") as HTMLTrackElement;
|
||||
|
||||
if (mediaElement) {
|
||||
mediaElement.currentTime = 0;
|
||||
const playMedia = async (idx: number) => {
|
||||
switch (idx) {
|
||||
case 0:
|
||||
setAudioAnalyser(createAudioAnalyser());
|
||||
setObjectsVisible(true);
|
||||
setIsIntro(true);
|
||||
|
||||
trackElement.src = endrollVtt;
|
||||
mediaElement.src = endroll;
|
||||
await sleep(3800);
|
||||
mediaElement.src = introSpeech;
|
||||
|
||||
mediaElement.load();
|
||||
mediaElement.play();
|
||||
mediaElement.load();
|
||||
mediaElement.play();
|
||||
setIsIntro(false);
|
||||
break;
|
||||
default:
|
||||
import("../static/voice/" + playerNameVoices[idx - 1] + ".mp4")
|
||||
.then((media) => {
|
||||
mediaElement.src = media.default;
|
||||
mediaElement.load();
|
||||
mediaElement.play();
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
break;
|
||||
case playerNameVoices.length + 1:
|
||||
mediaElement.src = outroSpeech;
|
||||
mediaElement.load();
|
||||
mediaElement.play();
|
||||
|
||||
setIsOutro(true);
|
||||
|
||||
await sleep(4000);
|
||||
setSceneOutro(true);
|
||||
|
||||
await sleep(3000);
|
||||
setObjectsVisible(false);
|
||||
setShowSelectionScreen(true);
|
||||
setSelectionVisible(true);
|
||||
setInputCooldown(0);
|
||||
}
|
||||
};
|
||||
|
||||
playMedia(0);
|
||||
mediaElement.addEventListener("ended", () => {
|
||||
playedMediaCountRef.current++;
|
||||
playMedia(playedMediaCountRef.current);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
}, [playerNameVoices, setAudioAnalyser, setInputCooldown, setSelectionVisible]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
@ -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) {
|
||||
setScene("end");
|
||||
incrementFinalVideoViewCount();
|
||||
if (percentageElapsed === 100) {
|
||||
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]} />
|
||||
|
|
|
@ -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],
|
||||
|
|
Loading…
Reference in a new issue