diff --git a/src/components/MainScene/HUD.tsx b/src/components/MainScene/HUD.tsx
index 241317f..8766654 100644
--- a/src/components/MainScene/HUD.tsx
+++ b/src/components/MainScene/HUD.tsx
@@ -1,15 +1,15 @@
-import React, {memo, useEffect, useRef} from "react";
-import {useFrame, useLoader} from "react-three-fiber";
+import React, { memo, useEffect, useRef } from "react";
+import { useFrame, useLoader } from "react-three-fiber";
import * as THREE from "three";
import bigHud from "../../static/sprite/big_hud.png";
import longHud from "../../static/sprite/long_hud.png";
import boringHud from "../../static/sprite/long_hud_boring.png";
-import {useStore} from "../../store";
+import { useStore } from "../../store";
import lerp from "../../utils/lerp";
import GreenTextRenderer from "../TextRenderer/GreenTextRenderer";
import usePrevious from "../../hooks/usePrevious";
-import {getNodeHud} from "../../helpers/node-helpers";
-import {HUDData} from "../../types/types";
+import { getNodeHud } from "../../helpers/node-helpers";
+import { HUDData } from "../../types/types";
const HUD = memo(() => {
const activeRef = useRef(true);
diff --git a/src/components/MainScene/Site/MainSceneBackground.tsx b/src/components/MainScene/Site/MainSceneBackground.tsx
new file mode 100644
index 0000000..e40b4ac
--- /dev/null
+++ b/src/components/MainScene/Site/MainSceneBackground.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import mainSceneBg from "../../../static/sprite/main_scene_background.png";
+import { useLoader } from "react-three-fiber";
+import * as THREE from "three";
+
+const MainSceneBackground = () => {
+ const mainSceneBgTex = useLoader(THREE.TextureLoader, mainSceneBg);
+
+ return (
+
+
+
+
+ );
+};
+
+export default MainSceneBackground;
diff --git a/src/components/MainScene/Site/Site.tsx b/src/components/MainScene/Site/Site.tsx
index 4c3b6fc..1603e0a 100644
--- a/src/components/MainScene/Site/Site.tsx
+++ b/src/components/MainScene/Site/Site.tsx
@@ -67,7 +67,7 @@ const Site = (props: SiteProps) => {
);
return (
-
+ : null}>
diff --git a/src/components/MainScene/Starfield/Starfield.tsx b/src/components/MainScene/Starfield/Starfield.tsx
index 8b5d140..f73347f 100644
--- a/src/components/MainScene/Starfield/Starfield.tsx
+++ b/src/components/MainScene/Starfield/Starfield.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useMemo, useRef, useState } from "react";
+import React, { memo, useMemo } from "react";
import Star from "./Star";
import IntroStar from "./IntroStar";
diff --git a/src/scenes/ChangeDiscScene.tsx b/src/scenes/ChangeDiscScene.tsx
index 2f3370f..fe7ef55 100644
--- a/src/scenes/ChangeDiscScene.tsx
+++ b/src/scenes/ChangeDiscScene.tsx
@@ -7,6 +7,7 @@ const ChangeDiscScene = () => {
useEffect(() => {
if (activeSite === "a") {
+ // todo actually rip the assets from the original
document.getElementsByTagName("canvas")[0].className =
"change-disc-scene-a-background";
} else if (activeSite === "b") {
@@ -15,11 +16,6 @@ const ChangeDiscScene = () => {
}
setTimeout(() => setScene("main"), 3500);
-
- return () => {
- document.getElementsByTagName("canvas")[0].className =
- "main-scene-background";
- };
}, [activeSite, setScene]);
return <>>;
diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx
index 35104ea..922a9f6 100644
--- a/src/scenes/MainScene.tsx
+++ b/src/scenes/MainScene.tsx
@@ -17,6 +17,8 @@ import Popups from "../components/MainScene/Popups/Popups";
import * as audio from "../static/audio/sfx";
import Loading from "../components/Loading";
import usePrevious from "../hooks/usePrevious";
+import MainSceneBackground from "../components/MainScene/Site/MainSceneBackground";
+import { useSpring, a } from "@react-spring/three";
const MainScene = () => {
const intro = useStore((state) => state.intro);
@@ -29,14 +31,22 @@ const MainScene = () => {
const setInputCooldown = useStore((state) => state.setInputCooldown);
const wordNotFound = useStore((state) => state.wordNotFound);
+ const [bgState, setBgState] = useSpring(() => ({
+ posY: 0,
+ duration: 1200,
+ }));
+
useEffect(() => {
if (subscene === "pause") {
+ setTimeout(() => setBgState({ posY: 2 }), 3600);
setTimeout(() => setPaused(true), 3400);
} else if (prevData?.subscene === "pause" && subscene === "site") {
+ setBgState({ posY: 0 });
setPaused(false);
}
- }, [prevData?.subscene, subscene]);
+ }, [prevData?.subscene, setBgState, subscene]);
+ // move up instead of rotate todo
useEffect(() => {
if (wordSelected) {
setTimeout(() => setWordSelected(false), 3100);
@@ -50,6 +60,11 @@ const MainScene = () => {
setStarfieldIntro(false);
setLainIntroAnim(false);
setIntroFinished(false);
+
+ starfieldIntroRef.current = false;
+ lainIntroRef.current = false;
+ introFinishedRef.current = false;
+
setInputCooldown(-1);
} else {
setInputCooldown(0);
@@ -57,23 +72,28 @@ const MainScene = () => {
}, [intro, setInputCooldown]);
const [starfieldIntro, setStarfieldIntro] = useState(false);
+ const starfieldIntroRef = useRef(false);
const [lainIntroAnim, setLainIntroAnim] = useState(false);
+ const lainIntroRef = useRef(false);
const [introFinished, setIntroFinished] = useState(false);
+ const introFinishedRef = useRef(false);
useFrame(() => {
if (!introFinished && intro && introWrapperRef.current) {
if (introWrapperRef.current.position.z === -10) playAudio(audio.sound32);
if (
Math.round(introWrapperRef.current.position.z) === -3 &&
- !starfieldIntro
+ !starfieldIntroRef.current
) {
setStarfieldIntro(true);
+ starfieldIntroRef.current = true;
}
if (
Math.round(introWrapperRef.current.position.z) === -1 &&
- !lainIntroAnim
+ !lainIntroRef.current
) {
setLainIntroAnim(true);
+ lainIntroRef.current = true;
}
if (introWrapperRef.current.position.z < 0) {
@@ -84,13 +104,14 @@ const MainScene = () => {
}
if (
- !introFinished &&
+ !introFinishedRef.current &&
!(
introWrapperRef.current.rotation.x > 0 &&
introWrapperRef.current.position.z < 0
)
) {
setIntroFinished(true);
+ introFinishedRef.current = true;
setInputCooldown(0);
}
}
@@ -102,6 +123,9 @@ const MainScene = () => {
+
+
+
diff --git a/src/scenes/MediaScene.tsx b/src/scenes/MediaScene.tsx
index 2a46a2a..d532793 100644
--- a/src/scenes/MediaScene.tsx
+++ b/src/scenes/MediaScene.tsx
@@ -23,15 +23,6 @@ const MediaScene = () => {
(state) => state.incrementFinalVideoViewCount
);
- useEffect(() => {
- document.getElementsByTagName("canvas")[0].className =
- "media-scene-background";
-
- return () => {
- document.getElementsByTagName("canvas")[0].className = "";
- };
- }, []);
-
useEffect(() => {
if (percentageElapsed === 100 && activeNode.triggers_final_video) {
setScene("end");