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

reverted some stuff, fixed a couple bugs

Browse source
This commit is contained in:
ad044 2021-01-16 20:12:44 +04:00
parent 40545c74a5
commit c6040ba5cb
10 changed files with 156 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/MainScene/PauseSubscene/Pause.tsx
View file

@ -342,7 +342,6 @@ const Pause = (props: { visible: boolean }) => {
depthTest={false}
/>
</mesh>
<MainSceneEventManager loaded={!exit} />
</group>
</group>
) : (

8
src/components/MainScene/SyncedComponentLoader.tsx
View file

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

5
src/components/MainScene/SyncedComponents/Starfield.tsx
View file

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

22
src/components/TextRenderer/BigLetter.tsx
View file

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

26
src/components/TextRenderer/MediaYellowTextAnimator.tsx
View file

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

97
src/components/TextRenderer/YellowTextRenderer.tsx
View file

@ -1,45 +1,82 @@
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) => (
<a.group
key={idx}
position-x={posX}
position-y={posY}
position-z={-8.7}
scale={[0.04, 0.06, 0.04]}
>
<BigLetter
color={color}
letter={textArrRef.current[idx]}
letterIdx={idx}
key={idx}
/>
</a.group>
))}
<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}
position-y={posY}
position-z={-8.7}
scale={[0.04, 0.06, 0.04]}
>
<BigLetter
color={color}
xOffsetCoeff={transformRef.current.xOffset}
letter={textArrRef.current[idx]}
letterIdx={idx}
key={idx}
/>
</a.group>
))}
</group>
);
};

44
src/core/StateManagers/MainSceneEventManager.tsx
View file

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

1
src/core/StateManagers/MainSceneManagers/YellowTextManager.tsx
View file

@ -102,6 +102,7 @@ const YellowTextManager = (props: StateManagerProps) => {
// unshrink text
setTransformState(0, "xOffset");
}, 1200);
},
[setText, setTransformState, siteData]
);

1
src/scenes/MainScene.tsx
View file

@ -30,7 +30,6 @@ const MainScene = () => {
<Suspense fallback={null}>
<a.group>
<Preloader />
<Pause visible={isPaused} />
<LevelSelection />
<SyncedComponentLoader paused={isPaused} shouldIntro={shouldIntro} />
<OrbitControls />

33
src/scenes/MediaScene.tsx
View file

@ -75,22 +75,23 @@ const MediaScene = () => {
))}
</group>
<MediaYellowTextAnimator />
{activeNodeMedia.includes("XA") || idleMedia.includes("XA") ? (
<>
{currentScene !== "idle_media" ? (
<>
<RightSide activeMediaComponent={activeMediaComponent} />
<Lof />
<AudioVisualizer />
</>
) : (
<></>
)}
<Images />
</>
) : (
<></>
)}
<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>