diff --git a/src/components/MainScene/PauseSubscene/Pause.tsx b/src/components/MainScene/PauseSubscene/Pause.tsx
index ae96f51..52b7d41 100644
--- a/src/components/MainScene/PauseSubscene/Pause.tsx
+++ b/src/components/MainScene/PauseSubscene/Pause.tsx
@@ -342,7 +342,6 @@ const Pause = (props: { visible: boolean }) => {
depthTest={false}
/>
-
) : (
diff --git a/src/components/MainScene/SyncedComponentLoader.tsx b/src/components/MainScene/SyncedComponentLoader.tsx
index c0d5073..fc4c803 100644
--- a/src/components/MainScene/SyncedComponentLoader.tsx
+++ b/src/components/MainScene/SyncedComponentLoader.tsx
@@ -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) => {
+
-
+
>
);
};
diff --git a/src/components/MainScene/SyncedComponents/Starfield.tsx b/src/components/MainScene/SyncedComponents/Starfield.tsx
index d191ed1..8be1432 100644
--- a/src/components/MainScene/SyncedComponents/Starfield.tsx
+++ b/src/components/MainScene/SyncedComponents/Starfield.tsx
@@ -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 (
- <>
+
{
) : (
<>>
)}
- >
+
);
};
diff --git a/src/components/TextRenderer/BigLetter.tsx b/src/components/TextRenderer/BigLetter.tsx
index 70729b1..a3ec508 100644
--- a/src/components/TextRenderer/BigLetter.tsx
+++ b/src/components/TextRenderer/BigLetter.tsx
@@ -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 (
{
- 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 (
@@ -32,7 +25,8 @@ const MediaYellowTextAnimator = () => {
>
diff --git a/src/components/TextRenderer/YellowTextRenderer.tsx b/src/components/TextRenderer/YellowTextRenderer.tsx
index d8dc0ab..20e23be 100644
--- a/src/components/TextRenderer/YellowTextRenderer.tsx
+++ b/src/components/TextRenderer/YellowTextRenderer.tsx
@@ -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 (
-
- {trail.map(({ posX, posY }, idx) => (
-
-
-
- ))}
+
+ {disableTrail
+ ? textArrRef.current.map((letter, idx) => (
+
+
+
+ ))
+ : trail.map(({ posX, posY }, idx) => (
+
+
+
+ ))}
);
};
diff --git a/src/core/StateManagers/MainSceneEventManager.tsx b/src/core/StateManagers/MainSceneEventManager.tsx
index 175f282..758000a 100644
--- a/src/core/StateManagers/MainSceneEventManager.tsx
+++ b/src/core/StateManagers/MainSceneEventManager.tsx
@@ -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();
+ 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);
}
},
diff --git a/src/core/StateManagers/MainSceneManagers/YellowTextManager.tsx b/src/core/StateManagers/MainSceneManagers/YellowTextManager.tsx
index cc8d419..4eeafbb 100644
--- a/src/core/StateManagers/MainSceneManagers/YellowTextManager.tsx
+++ b/src/core/StateManagers/MainSceneManagers/YellowTextManager.tsx
@@ -102,6 +102,7 @@ const YellowTextManager = (props: StateManagerProps) => {
// unshrink text
setTransformState(0, "xOffset");
}, 1200);
+
},
[setText, setTransformState, siteData]
);
diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx
index a750fe9..3ef6646 100644
--- a/src/scenes/MainScene.tsx
+++ b/src/scenes/MainScene.tsx
@@ -30,7 +30,6 @@ const MainScene = () => {
-
diff --git a/src/scenes/MediaScene.tsx b/src/scenes/MediaScene.tsx
index c618134..47ef21e 100644
--- a/src/scenes/MediaScene.tsx
+++ b/src/scenes/MediaScene.tsx
@@ -75,22 +75,23 @@ const MediaScene = () => {
))}
- {activeNodeMedia.includes("XA") || idleMedia.includes("XA") ? (
- <>
- {currentScene !== "idle_media" ? (
- <>
-
-
-
- >
- ) : (
- <>>
- )}
-
- >
- ) : (
- <>>
- )}
+
+
+
+
+
+
+
+
+
+
+