mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
reverted some stuff, fixed a couple bugs
This commit is contained in:
parent
40545c74a5
commit
c6040ba5cb
10 changed files with 156 additions and 82 deletions
|
@ -342,7 +342,6 @@ const Pause = (props: { visible: boolean }) => {
|
|||
depthTest={false}
|
||||
/>
|
||||
</mesh>
|
||||
<MainSceneEventManager loaded={!exit} />
|
||||
</group>
|
||||
</group>
|
||||
) : (
|
||||
|
|
|
@ -7,6 +7,8 @@ import Starfield from "./SyncedComponents/Starfield";
|
|||
import Site from "./SyncedComponents/Site";
|
||||
import MiddleRing from "./SyncedComponents/MiddleRing";
|
||||
import MainSceneEventManager from "../../core/StateManagers/MainSceneEventManager";
|
||||
import Pause from "./PauseSubscene/Pause";
|
||||
import { a } from "@react-spring/three";
|
||||
|
||||
type SyncedComponentLoaderProps = {
|
||||
paused: boolean;
|
||||
|
@ -46,11 +48,15 @@ const SyncedComponentLoader = (props: SyncedComponentLoaderProps) => {
|
|||
<GrayPlanes />
|
||||
</group>
|
||||
<Starfield
|
||||
visible={!props.paused}
|
||||
shouldIntro={props.shouldIntro}
|
||||
introFinished={introFinished}
|
||||
/>
|
||||
<Pause visible={props.paused} />
|
||||
<Site shouldIntro={props.shouldIntro} introFinished={introFinished} />
|
||||
<MainSceneEventManager loaded={visible} />
|
||||
<MainSceneEventManager
|
||||
loaded={props.shouldIntro ? introFinished : true}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
|
|||
import Star from "./Starfield/Star";
|
||||
|
||||
type StarfieldProps = {
|
||||
visible: boolean;
|
||||
shouldIntro: boolean;
|
||||
introFinished: boolean;
|
||||
};
|
||||
|
@ -52,7 +53,7 @@ const Starfield = (props: StarfieldProps) => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<group visible={props.visible}>
|
||||
<group
|
||||
position={[0, -1, 2]}
|
||||
visible={props.shouldIntro ? mainVisible : true}
|
||||
|
@ -125,7 +126,7 @@ const Starfield = (props: StarfieldProps) => {
|
|||
) : (
|
||||
<></>
|
||||
)}
|
||||
</>
|
||||
</group>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -5,13 +5,13 @@ import * as THREE from "three";
|
|||
import { useLoader } from "react-three-fiber";
|
||||
import orange_font_json from "../../resources/font_data/big_font.json";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import React, { useEffect, useMemo } from "react";
|
||||
import { useBigTextStore } from "../../store";
|
||||
import React, { useMemo } from "react";
|
||||
|
||||
const BigLetter = (props: {
|
||||
color: string;
|
||||
letter: string;
|
||||
letterIdx: number;
|
||||
xOffsetCoeff: number;
|
||||
}) => {
|
||||
const colorToTexture = (color: string) => {
|
||||
const colorTexture = {
|
||||
|
@ -89,23 +89,15 @@ const BigLetter = (props: {
|
|||
return geometry;
|
||||
}, [letterData, lineYOffsets, props.letter]);
|
||||
|
||||
const [{ letterOffsetX }, set] = useSpring(() => ({
|
||||
letterOffsetX: props.letterIdx + 0.3 + (props.letterIdx + 0.3),
|
||||
const textRendererState = useSpring({
|
||||
letterOffsetXCoeff:
|
||||
props.letterIdx + 0.3 + (props.letterIdx + 0.3) * props.xOffsetCoeff,
|
||||
config: { duration: 200 },
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
useBigTextStore.subscribe(set, (state) => ({
|
||||
letterOffsetX:
|
||||
props.letterIdx +
|
||||
0.3 +
|
||||
(props.letterIdx + 0.3) * state.transformState.xOffset,
|
||||
}));
|
||||
}, [props.letterIdx, set]);
|
||||
});
|
||||
|
||||
return (
|
||||
<a.mesh
|
||||
position-x={letterOffsetX}
|
||||
position-x={textRendererState.letterOffsetXCoeff}
|
||||
position-y={-letterData[4] / 12.5}
|
||||
scale={[1, 1, 0]}
|
||||
geometry={geom}
|
||||
|
|
|
@ -1,24 +1,17 @@
|
|||
import React, { useEffect, useRef } from "react";
|
||||
import React from "react";
|
||||
import { useMediaBigTextStore } from "../../store";
|
||||
import { a, useTrail } from "@react-spring/three";
|
||||
import BigLetter from "./BigLetter";
|
||||
|
||||
const MediaYellowTextAnimator = () => {
|
||||
const textArrRef = useRef(useMediaBigTextStore.getState().text.split(""));
|
||||
const transformState = useMediaBigTextStore((state) => state.transformState);
|
||||
const textArr = useMediaBigTextStore((state) => state.text).split("");
|
||||
|
||||
const [trail, set] = useTrail(textArrRef.current.length, () => ({
|
||||
posX: 0,
|
||||
posY: 0,
|
||||
xOffset: 0,
|
||||
config: { duration: 200 },
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
useMediaBigTextStore.subscribe(set, (state) => ({
|
||||
posX: state.transformState.posX,
|
||||
posY: state.transformState.posY,
|
||||
}));
|
||||
}, [set]);
|
||||
const trail = useTrail(textArr.length, {
|
||||
posX: transformState.posX,
|
||||
posY: transformState.posY,
|
||||
config: { duration: 280 },
|
||||
});
|
||||
|
||||
return (
|
||||
<group position={[0, 0, 10]}>
|
||||
|
@ -32,7 +25,8 @@ const MediaYellowTextAnimator = () => {
|
|||
>
|
||||
<BigLetter
|
||||
color={"yellow"}
|
||||
letter={textArrRef.current[idx]}
|
||||
xOffsetCoeff={transformState.xOffset}
|
||||
letter={textArr[idx]}
|
||||
letterIdx={idx}
|
||||
key={idx}
|
||||
/>
|
||||
|
|
|
@ -1,30 +1,66 @@
|
|||
import React, { useEffect, useRef } from "react";
|
||||
import { BigTextState, useBigTextStore, useNodeStore } from "../../store";
|
||||
import { BigTextState, useBigTextStore } from "../../store";
|
||||
import { a, useSpring, useTrail } from "@react-spring/three";
|
||||
import BigLetter from "./BigLetter";
|
||||
|
||||
const YellowTextRenderer = () => {
|
||||
const YellowTextRenderer = (props: { visible?: boolean }) => {
|
||||
const disableTrail = useBigTextStore((state) => state.disableTrail);
|
||||
const transformState = useBigTextStore((state) => state.transformState);
|
||||
|
||||
const visible = useBigTextStore((state) => state.visible);
|
||||
const color = useBigTextStore((state) => state.color);
|
||||
|
||||
const textArrRef = useRef(useBigTextStore.getState().text.split(""));
|
||||
|
||||
const [trail, set] = useTrail(textArrRef.current.length, () => ({
|
||||
posX: 0,
|
||||
posY: 0,
|
||||
config: { duration: 280 },
|
||||
}));
|
||||
const transformRef = useRef(useBigTextStore.getState().transformState);
|
||||
|
||||
useEffect(() => {
|
||||
useBigTextStore.subscribe(set, (state) => ({
|
||||
posX: state.transformState.posX,
|
||||
posY: state.transformState.posY,
|
||||
}));
|
||||
}, [set]);
|
||||
// this is used to animate the letters moving one after another
|
||||
const trail = useTrail(textArrRef.current.length, {
|
||||
posX: transformRef.current.posX,
|
||||
posY: transformRef.current.posY,
|
||||
config: { duration: 280 },
|
||||
});
|
||||
|
||||
// this is used when the whole GROUP itself needs to be animated
|
||||
const spring = useSpring({
|
||||
posX: transformState.posX,
|
||||
posY: transformState.posY,
|
||||
config: { duration: 1200 },
|
||||
});
|
||||
|
||||
useEffect(
|
||||
() =>
|
||||
useBigTextStore.subscribe(
|
||||
(state) => {
|
||||
transformRef.current = (state as BigTextState).transformState;
|
||||
textArrRef.current = (state as BigTextState).text.split("");
|
||||
},
|
||||
(state) => state
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<group position={[0, 0, 10]} visible={visible}>
|
||||
{trail.map(({ posX, posY }, idx) => (
|
||||
<group position={[0, 0, 10]} visible={props.visible && visible}>
|
||||
{disableTrail
|
||||
? textArrRef.current.map((letter, idx) => (
|
||||
<a.group
|
||||
key={idx}
|
||||
position-x={spring.posX}
|
||||
position-y={spring.posY}
|
||||
position-z={-8.7}
|
||||
scale={[0.04, 0.06, 0.04]}
|
||||
>
|
||||
<BigLetter
|
||||
color={color}
|
||||
xOffsetCoeff={0}
|
||||
letter={textArrRef.current[idx]}
|
||||
letterIdx={idx}
|
||||
key={idx}
|
||||
/>
|
||||
</a.group>
|
||||
))
|
||||
: trail.map(({ posX, posY }, idx) => (
|
||||
<a.group
|
||||
key={idx}
|
||||
position-x={posX}
|
||||
|
@ -34,6 +70,7 @@ const YellowTextRenderer = () => {
|
|||
>
|
||||
<BigLetter
|
||||
color={color}
|
||||
xOffsetCoeff={transformRef.current.xOffset}
|
||||
letter={textArrRef.current[idx]}
|
||||
letterIdx={idx}
|
||||
key={idx}
|
||||
|
|
|
@ -23,6 +23,7 @@ import PauseComponentManager from "./MainSceneManagers/PauseComponentManager";
|
|||
import GameSaver from "./GameManagers/GameSaver";
|
||||
import GameLoader from "./GameManagers/GameLoader";
|
||||
import IdleManager from "./MainSceneManagers/IdleManager";
|
||||
import { useFrame } from "react-three-fiber";
|
||||
|
||||
type MainSceneEventManagerProps = {
|
||||
loaded: boolean;
|
||||
|
@ -49,6 +50,48 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
|
|||
|
||||
const [eventState, setEventState] = useState<any>();
|
||||
|
||||
useFrame(() => {
|
||||
const now = Date.now();
|
||||
if (
|
||||
timePassedSinceLastKeyPress.current > -1 &&
|
||||
mainSubscene !== "pause" &&
|
||||
mainSubscene !== "level_selection"
|
||||
) {
|
||||
if (now > timePassedSinceLastKeyPress.current + 5000) {
|
||||
setEventState({
|
||||
event: "play_idle_media",
|
||||
scene: "idle_media",
|
||||
site: currentSite,
|
||||
});
|
||||
timePassedSinceLastKeyPress.current = -1;
|
||||
} else if (now > timePassedSinceLastKeyPress.current + 10000) {
|
||||
const moves = [
|
||||
"prayer",
|
||||
"touch_sleeve",
|
||||
"thinking",
|
||||
"stretch_2",
|
||||
"stretch",
|
||||
"spin",
|
||||
"scratch_head",
|
||||
"blush",
|
||||
"hands_behind_head",
|
||||
"hands_on_hips",
|
||||
"hands_on_hips_2",
|
||||
"hands_together",
|
||||
"lean_forward",
|
||||
"lean_left",
|
||||
"lean_right",
|
||||
"look_around",
|
||||
"play_with_hair",
|
||||
];
|
||||
|
||||
const event = moves[Math.floor(Math.random() * moves.length)];
|
||||
setEventState({ event: event });
|
||||
timePassedSinceLastKeyPress.current = now - 2500;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const handleKeyPress = useCallback(
|
||||
(event) => {
|
||||
const { keyCode } = event;
|
||||
|
@ -70,6 +113,7 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
|
|||
gameProgress: gameProgress,
|
||||
currentSite: currentSite,
|
||||
});
|
||||
|
||||
setEventState(event);
|
||||
}
|
||||
},
|
||||
|
|
|
@ -102,6 +102,7 @@ const YellowTextManager = (props: StateManagerProps) => {
|
|||
// unshrink text
|
||||
setTransformState(0, "xOffset");
|
||||
}, 1200);
|
||||
|
||||
},
|
||||
[setText, setTransformState, siteData]
|
||||
);
|
||||
|
|
|
@ -30,7 +30,6 @@ const MainScene = () => {
|
|||
<Suspense fallback={null}>
|
||||
<a.group>
|
||||
<Preloader />
|
||||
<Pause visible={isPaused} />
|
||||
<LevelSelection />
|
||||
<SyncedComponentLoader paused={isPaused} shouldIntro={shouldIntro} />
|
||||
<OrbitControls />
|
||||
|
|
|
@ -75,22 +75,23 @@ const MediaScene = () => {
|
|||
))}
|
||||
</group>
|
||||
<MediaYellowTextAnimator />
|
||||
{activeNodeMedia.includes("XA") || idleMedia.includes("XA") ? (
|
||||
<>
|
||||
{currentScene !== "idle_media" ? (
|
||||
<>
|
||||
|
||||
<group
|
||||
visible={
|
||||
currentScene !== "idle_media" && activeNodeMedia.includes("XA")
|
||||
}
|
||||
>
|
||||
<RightSide activeMediaComponent={activeMediaComponent} />
|
||||
<Lof />
|
||||
<AudioVisualizer />
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<Images />
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</group>
|
||||
|
||||
<group
|
||||
visible={currentScene === "idle_media" && idleMedia.includes("XA")}
|
||||
>
|
||||
<Images />
|
||||
</group>
|
||||
</group>
|
||||
<MediaSceneEventManager />
|
||||
</perspectiveCamera>
|
||||
|
|
Loading…
Reference in a new issue