mirror_maker/lainTSX
1
0
Fork 0
mirror of https://github.com/ad044/lainTSX.git synced 2024-10-22 23:19:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

more fixing

Browse source
This commit is contained in:
ad044 2021-03-15 01:24:35 +04:00
parent 604ff41008
commit 6003e80e73
8 changed files with 112 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/MediaPlayer.tsx
View file

@ -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"}>

9
src/core/eventTemplates.ts
View file

@ -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: [

10
src/core/input-handlers/handleMainSceneInput.ts
View file

@ -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";

2
src/core/input-handlers/handleMediaSceneInput.ts
View file

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

18
src/scenes/ChangeDiscScene.tsx
View file

@ -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>
))}

110
src/scenes/EndScene.tsx
View file

@ -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 (
<>

44
src/scenes/MediaScene.tsx
View file

@ -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]} />

2
src/store.ts
View file

@ -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],