mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
ported to zustand, still gotta do some bugfixing.
This commit is contained in:
parent
ba9a16ea74
commit
6554e689ab
38 changed files with 557 additions and 783 deletions
5
package-lock.json
generated
5
package-lock.json
generated
|
@ -10842,11 +10842,6 @@
|
||||||
"util.promisify": "^1.0.0"
|
"util.promisify": "^1.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"recoil": {
|
|
||||||
"version": "0.0.10",
|
|
||||||
"resolved": "https://registry.npmjs.org/recoil/-/recoil-0.0.10.tgz",
|
|
||||||
"integrity": "sha512-+9gRqehw3yKETmoZbhSnWu4GO10HDb5xYf1CjLF1oXGK2uT6GX5Lu9mfTXwjxV/jXxEKx8MIRUUbgPxvbJ8SEw=="
|
|
||||||
},
|
|
||||||
"recursive-readdir": {
|
"recursive-readdir": {
|
||||||
"version": "2.2.2",
|
"version": "2.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
|
||||||
|
|
|
@ -17,7 +17,6 @@
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
"react-scripts": "3.4.3",
|
"react-scripts": "3.4.3",
|
||||||
"react-three-fiber": "^4.2.20",
|
"react-three-fiber": "^4.2.20",
|
||||||
"recoil": "0.0.10",
|
|
||||||
"three": "^0.119.1",
|
"three": "^0.119.1",
|
||||||
"three-plain-animator": "^1.0.2",
|
"three-plain-animator": "^1.0.2",
|
||||||
"ts-node": "^9.0.0",
|
"ts-node": "^9.0.0",
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import MainScene from "./components/MainScene/MainScene";
|
import MainScene from "./components/MainScene";
|
||||||
import "./static/css/hub.css";
|
import "./static/css/hub.css";
|
||||||
import "./static/css/main.css";
|
import "./static/css/main.css";
|
||||||
import { Canvas } from "react-three-fiber";
|
import { Canvas } from "react-three-fiber";
|
||||||
import { RecoilRoot } from "recoil";
|
|
||||||
import Boot from "./components/Boot";
|
import Boot from "./components/Boot";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
|
@ -22,9 +21,7 @@ const App = () => {
|
||||||
{/*<Boot setMoveToGame={setMoveToGame} />*/}
|
{/*<Boot setMoveToGame={setMoveToGame} />*/}
|
||||||
{/* {moveToGame ? <MainScene /> : <Boot setMoveToGame={setMoveToGame} />} */}
|
{/* {moveToGame ? <MainScene /> : <Boot setMoveToGame={setMoveToGame} />} */}
|
||||||
<Canvas concurrent>
|
<Canvas concurrent>
|
||||||
<RecoilRoot>
|
|
||||||
<MainScene />
|
<MainScene />
|
||||||
</RecoilRoot>
|
|
||||||
</Canvas>
|
</Canvas>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -2,28 +2,21 @@ import React, { memo, useMemo, useRef } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import { useSpring, a } from "@react-spring/three";
|
import { useSpring, a } from "@react-spring/three";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import Cou from "../../static/sprites/Cou.png";
|
import Cou from "../static/sprites/Cou.png";
|
||||||
import CouActive from "../../static/sprites/Cou_active.png";
|
import CouActive from "../static/sprites/Cou_active.png";
|
||||||
import Dc from "../../static/sprites/Dc.png";
|
import Dc from "../static/sprites/Dc.png";
|
||||||
import DcActive from "../../static/sprites/Dc_active.png";
|
import DcActive from "../static/sprites/Dc_active.png";
|
||||||
import SSkn from "../../static/sprites/SSkn.png";
|
import SSkn from "../static/sprites/SSkn.png";
|
||||||
import SSKnActive from "../../static/sprites/SSkn_active.png";
|
import SSKnActive from "../static/sprites/SSkn_active.png";
|
||||||
import Tda from "../../static/sprites/Tda.png";
|
import Tda from "../static/sprites/Tda.png";
|
||||||
import TdaActive from "../../static/sprites/Tda_active.png";
|
import TdaActive from "../static/sprites/Tda_active.png";
|
||||||
import Dia from "../../static/sprites/Dia.png";
|
import Dia from "../static/sprites/Dia.png";
|
||||||
import DiaActive from "../../static/sprites/Dia_active.png";
|
import DiaActive from "../static/sprites/Dia_active.png";
|
||||||
import Lda from "../../static/sprites/Lda.png";
|
import Lda from "../static/sprites/Lda.png";
|
||||||
import LdaActive from "../../static/sprites/Lda_active.png";
|
import LdaActive from "../static/sprites/Lda_active.png";
|
||||||
import MULTI from "../../static/sprites/MULTI.png";
|
import MULTI from "../static/sprites/MULTI.png";
|
||||||
import MULTIActive from "../../static/sprites/MULTI_active.png";
|
import MULTIActive from "../static/sprites/MULTI_active.png";
|
||||||
import level_y_values from "../../resources/level_y_values.json";
|
import level_y_values from "../resources/level_y_values.json";
|
||||||
import { useRecoilValue } from "recoil";
|
|
||||||
import {
|
|
||||||
currentBlueOrbAnimatingAtom,
|
|
||||||
currentBlueOrbPosXAtom,
|
|
||||||
currentBlueOrbPosYAtom,
|
|
||||||
currentBlueOrbPosZAtom,
|
|
||||||
} from "./CurrentBlueOrbAtom";
|
|
||||||
|
|
||||||
type BlueOrbContructorProps = {
|
type BlueOrbContructorProps = {
|
||||||
sprite: string;
|
sprite: string;
|
||||||
|
@ -46,10 +39,6 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
|
||||||
// dynamically importnig them would be worse for performance,
|
// dynamically importnig them would be worse for performance,
|
||||||
// so we import all of them here and then use this function to
|
// so we import all of them here and then use this function to
|
||||||
// associate a sprite with the path
|
// associate a sprite with the path
|
||||||
const currentBlueOrbAnimating = useRecoilValue(currentBlueOrbAnimatingAtom);
|
|
||||||
const currentBlueOrbPosX = useRecoilValue(currentBlueOrbPosXAtom);
|
|
||||||
const currentBlueOrbPosY = useRecoilValue(currentBlueOrbPosYAtom);
|
|
||||||
const currentBlueOrbPosZ = useRecoilValue(currentBlueOrbPosZAtom);
|
|
||||||
|
|
||||||
const spriteToPath = (sprite: string) => {
|
const spriteToPath = (sprite: string) => {
|
||||||
if (sprite.includes("S")) {
|
if (sprite.includes("S")) {
|
||||||
|
@ -128,31 +117,12 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const currentBlueOrbState = useSpring({
|
|
||||||
currentBlueOrbPosX: currentBlueOrbPosX,
|
|
||||||
currentBlueOrbPosY: currentBlueOrbPosY,
|
|
||||||
currentBlueOrbPosZ: currentBlueOrbPosZ,
|
|
||||||
config: { duration: 900 },
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group position={[0, (level_y_values as LevelYValues)[props.level], 0]}>
|
<group position={[0, (level_y_values as LevelYValues)[props.level], 0]}>
|
||||||
<a.mesh
|
<a.mesh
|
||||||
position-x={
|
position-x={props.position[0]}
|
||||||
props.active && currentBlueOrbAnimating
|
position-y={props.position[1]}
|
||||||
? currentBlueOrbState.currentBlueOrbPosX
|
position-z={props.position[2]}
|
||||||
: props.position[0]
|
|
||||||
}
|
|
||||||
position-y={
|
|
||||||
props.active && currentBlueOrbAnimating
|
|
||||||
? currentBlueOrbState.currentBlueOrbPosY
|
|
||||||
: props.position[1]
|
|
||||||
}
|
|
||||||
position-z={
|
|
||||||
props.active && currentBlueOrbAnimating
|
|
||||||
? currentBlueOrbState.currentBlueOrbPosZ
|
|
||||||
: props.position[2]
|
|
||||||
}
|
|
||||||
rotation-y={props.rotation[1]}
|
rotation-y={props.rotation[1]}
|
||||||
scale={[0.36, 0.18, 0.36]}
|
scale={[0.36, 0.18, 0.36]}
|
||||||
renderOrder={1}
|
renderOrder={1}
|
|
@ -1,26 +0,0 @@
|
||||||
import { atom } from "recoil";
|
|
||||||
|
|
||||||
export const currentBlueOrbAtom = atom({
|
|
||||||
key: "currentBlueOrbAtom",
|
|
||||||
default: "0422",
|
|
||||||
});
|
|
||||||
|
|
||||||
export const currentBlueOrbAnimatingAtom = atom({
|
|
||||||
key: "currentBlueOrbAnimatingAtom",
|
|
||||||
default: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const currentBlueOrbPosXAtom = atom({
|
|
||||||
key: "currentBlueOrbPosXAtom",
|
|
||||||
default: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const currentBlueOrbPosYAtom = atom({
|
|
||||||
key: "currentBlueOrbPosYAtom",
|
|
||||||
default: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const currentBlueOrbPosZAtom = atom({
|
|
||||||
key: "currentBlueOrbPosZAtom",
|
|
||||||
default: 0,
|
|
||||||
});
|
|
|
@ -1,13 +1,14 @@
|
||||||
import React, { createRef, memo, RefObject, useRef } from "react";
|
import React, { createRef, memo, RefObject, useRef } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import { useRecoilValue } from "recoil";
|
import { useGrayPlanesStore } from "../store";
|
||||||
import { grayPlanesVisibleAtom } from "./GrayPlanesAtom";
|
|
||||||
|
|
||||||
const GrayPlanes = memo(() => {
|
const GrayPlanes = memo(() => {
|
||||||
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
const grayPlanesVisible = useRecoilValue(grayPlanesVisibleAtom);
|
const grayPlanesVisible = useGrayPlanesStore(
|
||||||
|
(state) => state.grayPlanesVisible
|
||||||
|
);
|
||||||
|
|
||||||
const grayPlanePoses = [
|
const grayPlanePoses = [
|
||||||
[1.2, 0, -1.2],
|
[1.2, 0, -1.2],
|
|
@ -1,6 +0,0 @@
|
||||||
import { atom } from "recoil";
|
|
||||||
|
|
||||||
export const grayPlanesVisibleAtom = atom({
|
|
||||||
key: "grayPlanesVisibleAtom",
|
|
||||||
default: false,
|
|
||||||
});
|
|
|
@ -1,25 +1,23 @@
|
||||||
import React, { memo } from "react";
|
import React, { memo } from "react";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import bigHud from "../../static/sprites/big_hud.png";
|
import bigHud from "../static/sprites/big_hud.png";
|
||||||
import bigHudMirrored from "../../static/sprites/big_hud_mirrored.png";
|
import bigHudMirrored from "../static/sprites/big_hud_mirrored.png";
|
||||||
import longHud from "../../static/sprites/long_hud.png";
|
import longHud from "../static/sprites/long_hud.png";
|
||||||
import longHudMirrored from "../../static/sprites/long_hud_mirrored.png";
|
import longHudMirrored from "../static/sprites/long_hud_mirrored.png";
|
||||||
import boringHud from "../../static/sprites/long_hud_boring.png";
|
import boringHud from "../static/sprites/long_hud_boring.png";
|
||||||
import boringHudMirrored from "../../static/sprites/long_hud_boring_mirrored.png";
|
import boringHudMirrored from "../static/sprites/long_hud_boring_mirrored.png";
|
||||||
import { a, useSpring, useTrail } from "@react-spring/three";
|
import { a, useSpring, useTrail } from "@react-spring/three";
|
||||||
import { useRecoilValue } from "recoil";
|
import { useBlueOrbStore, useSiteStore } from "../store";
|
||||||
import { useBlueOrbStore } from "../store";
|
import blue_orb_huds from "../resources/blue_orb_huds.json";
|
||||||
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
import site_a from "../resources/site_a.json";
|
||||||
import site_a from "../../resources/site_a.json";
|
import { BigLetter, MediumLetter } from "./TextRenderer";
|
||||||
import { BigLetter, MediumLetter } from "../TextRenderer/TextRenderer";
|
|
||||||
import { isSiteYChangingAtom } from "../Site/SiteAtom";
|
|
||||||
|
|
||||||
export type HUDElementProps = {
|
export type HUDElementProps = {
|
||||||
hudVisibility: boolean;
|
hudVisibility: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const HUDElement = memo((props: HUDElementProps) => {
|
const HUD = memo((props: HUDElementProps) => {
|
||||||
const hudActive = useBlueOrbStore((state) => state.hudActive);
|
const hudActive = useBlueOrbStore((state) => state.hudActive);
|
||||||
|
|
||||||
const currentBlueOrbId = useBlueOrbStore((state) => state.blueOrbId);
|
const currentBlueOrbId = useBlueOrbStore((state) => state.blueOrbId);
|
||||||
|
@ -37,23 +35,22 @@ const HUDElement = memo((props: HUDElementProps) => {
|
||||||
const yellowTextArr = currentYellowHudText.split("");
|
const yellowTextArr = currentYellowHudText.split("");
|
||||||
const greenTextArr = currentGreenHudText.split("");
|
const greenTextArr = currentGreenHudText.split("");
|
||||||
|
|
||||||
const yellowLetterPosY = yellowHudTextPosY;
|
const isSiteChangingY = useSiteStore((state) => state.isSiteChangingY);
|
||||||
const yellowLetterPosX = yellowHudTextPosX;
|
|
||||||
|
|
||||||
const isSiteChangingY = useRecoilValue(isSiteYChangingAtom);
|
|
||||||
|
|
||||||
// this one is used for letter actions
|
// this one is used for letter actions
|
||||||
const letterTrail = useTrail(currentYellowHudText.length, {
|
const letterTrail = useTrail(currentYellowHudText.length, {
|
||||||
yellowLetterPosX: yellowLetterPosX,
|
yellowLetterPosX: yellowHudTextPosX,
|
||||||
yellowLetterPosY: yellowLetterPosY,
|
yellowLetterPosY: yellowHudTextPosY,
|
||||||
config: { duration: 280 },
|
config: { duration: 280 },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
console.log(yellowHudTextPosY);
|
||||||
|
console.log(yellowHudTextPosX);
|
||||||
// this one is used when the site moves up/down and
|
// this one is used when the site moves up/down and
|
||||||
// the text has to stay stationary
|
// the text has to stay stationary
|
||||||
const letterStaticState = useSpring({
|
const letterStaticState = useSpring({
|
||||||
yellowLetterPosX: yellowLetterPosX,
|
yellowLetterPosX: yellowHudTextPosX,
|
||||||
yellowLetterPosY: yellowLetterPosY,
|
yellowLetterPosY: yellowHudTextPosY,
|
||||||
config: { duration: 1200 },
|
config: { duration: 1200 },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -230,4 +227,4 @@ const HUDElement = memo((props: HUDElementProps) => {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
export default HUDElement;
|
export default HUD;
|
|
@ -1,42 +0,0 @@
|
||||||
import { atom } from "recoil";
|
|
||||||
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
|
||||||
|
|
||||||
export const hudVisibilityAtom = atom({
|
|
||||||
key: "hudVisibilityAtom",
|
|
||||||
default: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const currentHUDAtom = atom({
|
|
||||||
key: "currentHUDAtom",
|
|
||||||
default: blue_orb_huds.fg_hud_1,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const yellowLetterPosYAtom = atom({
|
|
||||||
key: "yellowLetterPosYAtom",
|
|
||||||
default: blue_orb_huds.fg_hud_1.big_text[1],
|
|
||||||
});
|
|
||||||
|
|
||||||
export const yellowLetterPosXAtom = atom({
|
|
||||||
key: "yellowLetterPosXAtom",
|
|
||||||
default: blue_orb_huds.fg_hud_1.big_text[0],
|
|
||||||
});
|
|
||||||
|
|
||||||
export const bigHudTextAtom = atom({
|
|
||||||
key: "bigHudTextAtom",
|
|
||||||
default: "Tda031",
|
|
||||||
});
|
|
||||||
|
|
||||||
export const mediumHudTextAtom = atom({
|
|
||||||
key: "mediumHudTextAtom",
|
|
||||||
default: "TOUKO's DIARY",
|
|
||||||
});
|
|
||||||
|
|
||||||
export const mediumHudTextPosYAtom = atom({
|
|
||||||
key: "mediumHudTextPosYAtom",
|
|
||||||
default: 0.16,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const mediumHudTextPosXAtom = atom({
|
|
||||||
key: "mediumHudTextPosXAtom",
|
|
||||||
default: 0.18,
|
|
||||||
});
|
|
|
@ -1,21 +1,12 @@
|
||||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import { useSetRecoilState } from "recoil";
|
import blue_orb_directions from "../resources/blue_orb_directions.json";
|
||||||
import {
|
import site_a from "../resources/site_a.json";
|
||||||
currentBlueOrbAnimatingAtom,
|
import SiteStateManager from "./StateManagers/SiteStateManager";
|
||||||
currentBlueOrbPosXAtom,
|
import MiddleRingStateManager from "./StateManagers/MiddleRingStateManager";
|
||||||
currentBlueOrbPosYAtom,
|
import LainStateManager from "./StateManagers/LainStateManager";
|
||||||
currentBlueOrbPosZAtom,
|
import BlueOrbStateManager from "./StateManagers/BlueOrbStateManager";
|
||||||
} from "../BlueOrb/CurrentBlueOrbAtom";
|
import BlueOrbHUDStateManager from "./StateManagers/BlueOrbHUDStateManager";
|
||||||
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
import BlueOrbHUDTextStateManager from "./StateManagers/BlueOrbHUDTextStateManager";
|
||||||
import blue_orb_positions from "../../resources/blue_orb_positions.json";
|
|
||||||
import level_y_values from "../../resources/level_y_values.json";
|
|
||||||
import site_a from "../../resources/site_a.json";
|
|
||||||
import SiteStateManager from "./SiteStateManager";
|
|
||||||
import MiddleRingStateManager from "./MiddleRingStateManager";
|
|
||||||
import LainStateManager from "./LainStateManager";
|
|
||||||
import BlueOrbStateManager from "./BlueOrbStateManager";
|
|
||||||
import BlueOrbHUDStateManager from "./BlueOrbHUDStateManager";
|
|
||||||
import BlueOrbHUDTextStateManager from "./BlueOrbHUDTextStateManager";
|
|
||||||
import { useBlueOrbStore } from "../store";
|
import { useBlueOrbStore } from "../store";
|
||||||
|
|
||||||
type KeyCodeAssociations = {
|
type KeyCodeAssociations = {
|
||||||
|
@ -41,16 +32,9 @@ type BlueOrbStateData = {
|
||||||
const InputHandler = () => {
|
const InputHandler = () => {
|
||||||
const [eventState, setEventState] = useState<string>();
|
const [eventState, setEventState] = useState<string>();
|
||||||
const currentBlueOrb = useBlueOrbStore((state) => state.blueOrbId);
|
const currentBlueOrb = useBlueOrbStore((state) => state.blueOrbId);
|
||||||
const setCurrentBlueOrbAnimating = useSetRecoilState(
|
|
||||||
currentBlueOrbAnimatingAtom
|
|
||||||
);
|
|
||||||
|
|
||||||
const [blueOrbStateData, setBlueOrbStateData] = useState<BlueOrbStateData>();
|
const [blueOrbStateData, setBlueOrbStateData] = useState<BlueOrbStateData>();
|
||||||
|
|
||||||
const setCurrentBlueOrbPosX = useSetRecoilState(currentBlueOrbPosXAtom);
|
|
||||||
const setCurrentBlueOrbPosY = useSetRecoilState(currentBlueOrbPosYAtom);
|
|
||||||
const setCurrentBlueOrbPosZ = useSetRecoilState(currentBlueOrbPosZAtom);
|
|
||||||
|
|
||||||
const [inputCooldown, setInputCooldown] = useState(false);
|
const [inputCooldown, setInputCooldown] = useState(false);
|
||||||
|
|
||||||
const moveEvents = useMemo(
|
const moveEvents = useMemo(
|
||||||
|
@ -126,43 +110,9 @@ const InputHandler = () => {
|
||||||
setEventState(event);
|
setEventState(event);
|
||||||
}
|
}
|
||||||
} else if (blueOrbPressKeys.includes(keyPress) && !inputCooldown) {
|
} else if (blueOrbPressKeys.includes(keyPress) && !inputCooldown) {
|
||||||
const currentBlueOrbLevel = currentBlueOrb.substr(0, 2);
|
|
||||||
const currentBlueOrbPosId = currentBlueOrb.substr(2);
|
|
||||||
|
|
||||||
const levelYVal =
|
|
||||||
level_y_values[currentBlueOrbLevel as keyof typeof level_y_values];
|
|
||||||
|
|
||||||
const currentBlueOrbPos =
|
|
||||||
blue_orb_positions[
|
|
||||||
currentBlueOrbPosId as keyof typeof blue_orb_positions
|
|
||||||
].position;
|
|
||||||
|
|
||||||
setCurrentBlueOrbPosX(currentBlueOrbPos[0]);
|
|
||||||
setCurrentBlueOrbPosY(currentBlueOrbPos[1] + levelYVal);
|
|
||||||
setCurrentBlueOrbPosZ(currentBlueOrbPos[2]);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setCurrentBlueOrbAnimating(true);
|
|
||||||
setCurrentBlueOrbPosX(0.5);
|
|
||||||
setCurrentBlueOrbPosY(levelYVal);
|
|
||||||
setCurrentBlueOrbPosZ(0);
|
|
||||||
}, 1500);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setCurrentBlueOrbAnimating(false);
|
|
||||||
}, 4200);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[
|
[inputCooldown, currentBlueOrb, moveEvents, blueOrbChangeEvents]
|
||||||
inputCooldown,
|
|
||||||
currentBlueOrb,
|
|
||||||
moveEvents,
|
|
||||||
blueOrbChangeEvents,
|
|
||||||
setCurrentBlueOrbPosX,
|
|
||||||
setCurrentBlueOrbPosY,
|
|
||||||
setCurrentBlueOrbPosZ,
|
|
||||||
setCurrentBlueOrbAnimating,
|
|
||||||
]
|
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
|
@ -1,57 +0,0 @@
|
||||||
import React, { useEffect, useMemo } from "react";
|
|
||||||
import { useSetRecoilState } from "recoil";
|
|
||||||
import {
|
|
||||||
isSiteYChangingAtom,
|
|
||||||
sitePosYAtom,
|
|
||||||
siteRotYAtom,
|
|
||||||
} from "../Site/SiteAtom";
|
|
||||||
|
|
||||||
const SiteStateManager = (props: any) => {
|
|
||||||
const setSiteRotY = useSetRecoilState(siteRotYAtom);
|
|
||||||
const setSitePosY = useSetRecoilState(sitePosYAtom);
|
|
||||||
const setIsSiteYChanging = useSetRecoilState(isSiteYChangingAtom);
|
|
||||||
|
|
||||||
const dispatcherObjects = useMemo(
|
|
||||||
() => ({
|
|
||||||
moveUp: { action: setSitePosY, value: -1.5, actionDelay: 1300 },
|
|
||||||
moveDown: { action: setSitePosY, value: 1.5, actionDelay: 1300 },
|
|
||||||
moveLeft: { action: setSiteRotY, value: Math.PI / 4, actionDelay: 1100 },
|
|
||||||
moveRight: {
|
|
||||||
action: setSiteRotY,
|
|
||||||
value: -Math.PI / 4,
|
|
||||||
actionDelay: 1100,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
[setSitePosY, setSiteRotY]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (props.eventState) {
|
|
||||||
const dispatchedAction =
|
|
||||||
dispatcherObjects[props.eventState as keyof typeof dispatcherObjects];
|
|
||||||
|
|
||||||
if (dispatchedAction) {
|
|
||||||
setIsSiteYChanging(true);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
dispatchedAction.action(
|
|
||||||
(prev: number) => prev + dispatchedAction.value
|
|
||||||
);
|
|
||||||
}, dispatchedAction.actionDelay);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setIsSiteYChanging(false);
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [
|
|
||||||
dispatcherObjects,
|
|
||||||
props.eventState,
|
|
||||||
setIsSiteYChanging,
|
|
||||||
setSitePosY,
|
|
||||||
setSiteRotY,
|
|
||||||
]);
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SiteStateManager;
|
|
|
@ -2,15 +2,14 @@ import React, { Suspense, useState } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
|
import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
|
||||||
import moveDownSpriteSheet from "../../static/sprites/jump_down.png";
|
import moveDownSpriteSheet from "../static/sprites/jump_down.png";
|
||||||
import moveUpSpriteSheet from "../../static/sprites/jump_up.png";
|
import moveUpSpriteSheet from "../static/sprites/jump_up.png";
|
||||||
import moveLeftSpriteSheet from "../../static/sprites/move_left.png";
|
import moveLeftSpriteSheet from "../static/sprites/move_left.png";
|
||||||
import moveRightSpriteSheet from "../../static/sprites/move_right.png";
|
import moveRightSpriteSheet from "../static/sprites/move_right.png";
|
||||||
import standingSpriteSheet from "../../static/sprites/standing.png";
|
import standingSpriteSheet from "../static/sprites/standing.png";
|
||||||
import introSpriteSheet from "../../static/sprites/intro.png";
|
import introSpriteSheet from "../static/sprites/intro.png";
|
||||||
import throwBlueOrbSpriteSheet from "../../static/sprites/throw_blue_orb.png";
|
import throwBlueOrbSpriteSheet from "../static/sprites/throw_blue_orb.png";
|
||||||
import { useRecoilValue } from "recoil";
|
import { useLainStore } from "../store";
|
||||||
import { lainMoveStateAtom } from "./LainAtom";
|
|
||||||
|
|
||||||
type LainConstructorProps = {
|
type LainConstructorProps = {
|
||||||
sprite: string;
|
sprite: string;
|
||||||
|
@ -113,12 +112,24 @@ export const LainThrowBlueOrb = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const Lain = () => {
|
const Lain = () => {
|
||||||
const lainMoveState = useRecoilValue(lainMoveStateAtom);
|
const lainMoveState = useLainStore((state) => state.lainMoveState);
|
||||||
|
|
||||||
|
const lainAnimationDispatch = {
|
||||||
|
standing: <LainStanding />,
|
||||||
|
moveLeft: <LainMoveLeft />,
|
||||||
|
moveRight: <LainMoveRight />,
|
||||||
|
moveUp: <LainMoveUp />,
|
||||||
|
moveDown: <LainMoveDown />,
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Suspense fallback={<>loading...</>}>
|
<Suspense fallback={<>loading...</>}>
|
||||||
<sprite scale={[4.5, 4.5, 4.5]} position={[0, -0.15, 0]}>
|
<sprite scale={[4.5, 4.5, 4.5]} position={[0, -0.15, 0]}>
|
||||||
{lainMoveState}
|
{
|
||||||
|
lainAnimationDispatch[
|
||||||
|
lainMoveState as keyof typeof lainAnimationDispatch
|
||||||
|
]
|
||||||
|
}
|
||||||
</sprite>
|
</sprite>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
);
|
);
|
|
@ -1,7 +0,0 @@
|
||||||
import { atom } from "recoil";
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
export const lainMoveStateAtom = atom({
|
|
||||||
key: "lainMoveStateAtom",
|
|
||||||
default: <></>,
|
|
||||||
});
|
|
|
@ -1,29 +1,23 @@
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { OrbitControls } from "drei";
|
import { OrbitControls } from "drei";
|
||||||
import React, { Suspense, useEffect } from "react";
|
import React, { Suspense, useEffect } from "react";
|
||||||
import Site from "../Site/Site";
|
import Site from "./Site";
|
||||||
import Lain, { LainStanding } from "../Lain/Lain";
|
import Lain from "./Lain";
|
||||||
import Lights from "../Lights";
|
import Lights from "./Lights";
|
||||||
import OrthoCamera from "../OrthoCamera/OrthoCamera";
|
import OrthoCamera from "./OrthoCamera";
|
||||||
import Preloader from "../Preloader";
|
import Preloader from "./Preloader";
|
||||||
import { useRecoilValue, useSetRecoilState } from "recoil";
|
import InputHandler from "./InputHandler";
|
||||||
import { lainMoveStateAtom } from "../Lain/LainAtom";
|
|
||||||
import InputHandler from "../InputHandler/InputHandler";
|
|
||||||
import MainSceneIntro from "./MainSceneIntro";
|
import MainSceneIntro from "./MainSceneIntro";
|
||||||
import {
|
import GrayPlanes from "./GrayPlanes";
|
||||||
mainGroupPosYAtom,
|
import MiddleRing from "./MiddleRing";
|
||||||
mainGroupPosZAtom,
|
import Starfield from "./Starfield";
|
||||||
mainGroupRotXAtom,
|
import { useLainStore, useMainGroupStore } from "../store";
|
||||||
} from "./MainGroupAtom";
|
|
||||||
import GrayPlanes from "../GrayPlanes/GrayPlanes";
|
|
||||||
import MiddleRing from "../MiddleRing/MiddleRing";
|
|
||||||
import Starfield from "../Starfield/Starfield";
|
|
||||||
|
|
||||||
const MainScene = () => {
|
const MainScene = () => {
|
||||||
const setLainMoveState = useSetRecoilState(lainMoveStateAtom);
|
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
||||||
const mainGroupPosY = useRecoilValue(mainGroupPosYAtom);
|
const mainGroupPosY = useMainGroupStore((state) => state.mainGroupPosY);
|
||||||
const mainGroupPosZ = useRecoilValue(mainGroupPosZAtom);
|
const mainGroupPosZ = useMainGroupStore((state) => state.mainGroupPosZ);
|
||||||
const mainGroupRotX = useRecoilValue(mainGroupRotXAtom);
|
const mainGroupRotX = useMainGroupStore((state) => state.mainGroupRotX);
|
||||||
|
|
||||||
const mainGroupStatePos = useSpring({
|
const mainGroupStatePos = useSpring({
|
||||||
mainGroupPosY: mainGroupPosY,
|
mainGroupPosY: mainGroupPosY,
|
||||||
|
@ -37,7 +31,7 @@ const MainScene = () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setLainMoveState(<LainStanding />);
|
setLainMoveState("standing");
|
||||||
}, [setLainMoveState]);
|
}, [setLainMoveState]);
|
||||||
// set lain intro spritesheet before the page loads fully
|
// set lain intro spritesheet before the page loads fully
|
||||||
useEffect(() => {
|
useEffect(() => {
|
|
@ -1,19 +0,0 @@
|
||||||
import { atom } from "recoil";
|
|
||||||
|
|
||||||
// -2.5 - intro val
|
|
||||||
export const mainGroupPosYAtom = atom({
|
|
||||||
key: "mainGroupPosYAtom",
|
|
||||||
default: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
//-9.5 - intro val
|
|
||||||
export const mainGroupPosZAtom = atom({
|
|
||||||
key: "mainGroupPosZAtom",
|
|
||||||
default: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
//1.5 - intro val
|
|
||||||
export const mainGroupRotXAtom = atom({
|
|
||||||
key: "mainGroupRotXAtom",
|
|
||||||
default: 0,
|
|
||||||
});
|
|
|
@ -1,95 +0,0 @@
|
||||||
import React, { memo, useEffect } from "react";
|
|
||||||
import { useSetRecoilState } from "recoil";
|
|
||||||
import { hudVisibilityAtom } from "../HUD/HUDElementAtom";
|
|
||||||
import {
|
|
||||||
mainGroupPosYAtom,
|
|
||||||
mainGroupPosZAtom,
|
|
||||||
mainGroupRotXAtom,
|
|
||||||
} from "./MainGroupAtom";
|
|
||||||
import { LainStanding } from "../Lain/Lain";
|
|
||||||
import { lainMoveStateAtom } from "../Lain/LainAtom";
|
|
||||||
import { orbVisibilityAtom } from "../Orb/OrbAtom";
|
|
||||||
import {
|
|
||||||
introStarfieldVisibilityAtom,
|
|
||||||
mainStarfieldBoostValAtom,
|
|
||||||
mainStarfieldVisibilityAtom,
|
|
||||||
} from "../Starfield/StarfieldAtom";
|
|
||||||
import { grayPlanesVisibleAtom } from "../GrayPlanes/GrayPlanesAtom";
|
|
||||||
import { useBlueOrbStore } from "../store";
|
|
||||||
|
|
||||||
// ghost component to manipulate the intro action for the main scene.
|
|
||||||
|
|
||||||
// we separate this file because having something like this
|
|
||||||
// inside <Suspense> tags makes it behave in a more stable manner
|
|
||||||
// by waiting for the components to load and synchronously calling the functions.
|
|
||||||
const MainSceneIntro = memo(() => {
|
|
||||||
const toggleHud = useBlueOrbStore((state) => state.toggleHud);
|
|
||||||
|
|
||||||
const setHudVisible = useSetRecoilState(hudVisibilityAtom);
|
|
||||||
const setOrbVisible = useSetRecoilState(orbVisibilityAtom);
|
|
||||||
|
|
||||||
const setLainMoveState = useSetRecoilState(lainMoveStateAtom);
|
|
||||||
|
|
||||||
const setIntroStarfieldVisible = useSetRecoilState(
|
|
||||||
introStarfieldVisibilityAtom
|
|
||||||
);
|
|
||||||
const setMainStarfieldVisible = useSetRecoilState(
|
|
||||||
mainStarfieldVisibilityAtom
|
|
||||||
);
|
|
||||||
const setMainStarfieldBoostVal = useSetRecoilState(mainStarfieldBoostValAtom);
|
|
||||||
|
|
||||||
const setMainGroupPosY = useSetRecoilState(mainGroupPosYAtom);
|
|
||||||
const setMainGroupPosZ = useSetRecoilState(mainGroupPosZAtom);
|
|
||||||
const setMainGroupRotX = useSetRecoilState(mainGroupRotXAtom);
|
|
||||||
|
|
||||||
const setGrayPlanesVisible = useSetRecoilState(grayPlanesVisibleAtom);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setMainGroupPosY(0);
|
|
||||||
setMainGroupPosZ(0);
|
|
||||||
setTimeout(() => {
|
|
||||||
setMainGroupRotX(0);
|
|
||||||
}, 2400);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setGrayPlanesVisible(true);
|
|
||||||
}, 2500);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setMainStarfieldVisible(true);
|
|
||||||
setMainStarfieldBoostVal(0);
|
|
||||||
}, 2800);
|
|
||||||
|
|
||||||
toggleHud();
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setLainMoveState(<LainStanding />);
|
|
||||||
|
|
||||||
setOrbVisible(true);
|
|
||||||
setHudVisible(true);
|
|
||||||
|
|
||||||
setIntroStarfieldVisible(false);
|
|
||||||
|
|
||||||
toggleHud();
|
|
||||||
setTimeout(() => {
|
|
||||||
document.getElementsByTagName("canvas")[0].className = "hub-background";
|
|
||||||
}, 300);
|
|
||||||
}, 3860);
|
|
||||||
}, [
|
|
||||||
setGrayPlanesVisible,
|
|
||||||
setMainStarfieldBoostVal,
|
|
||||||
setMainStarfieldVisible,
|
|
||||||
setHudVisible,
|
|
||||||
setOrbVisible,
|
|
||||||
setIntroStarfieldVisible,
|
|
||||||
setMainGroupRotX,
|
|
||||||
setMainGroupPosZ,
|
|
||||||
setMainGroupPosY,
|
|
||||||
setLainMoveState,
|
|
||||||
toggleHud,
|
|
||||||
]);
|
|
||||||
|
|
||||||
return <></>;
|
|
||||||
});
|
|
||||||
|
|
||||||
export default MainSceneIntro;
|
|
89
src/components/MainSceneIntro.tsx
Normal file
89
src/components/MainSceneIntro.tsx
Normal file
|
@ -0,0 +1,89 @@
|
||||||
|
import React, { memo, useEffect } from "react";
|
||||||
|
import {
|
||||||
|
useBlueOrbStore,
|
||||||
|
useGrayPlanesStore,
|
||||||
|
useLainStore,
|
||||||
|
useMainGroupStore,
|
||||||
|
useStarfieldStore,
|
||||||
|
useYellowOrbStore,
|
||||||
|
} from "../store";
|
||||||
|
|
||||||
|
// ghost component to manipulate the intro action for the main scene.
|
||||||
|
|
||||||
|
// we separate this file because having something like this
|
||||||
|
// inside <Suspense> tags makes it behave in a more stable manner
|
||||||
|
// by waiting for the components to load and synchronously calling the functions.
|
||||||
|
const MainSceneIntro = memo(() => {
|
||||||
|
const toggleHud = useBlueOrbStore((state) => state.toggleHud);
|
||||||
|
|
||||||
|
//const setHudVisible = useSetRecoilState(hudVisibilityAtom);
|
||||||
|
const setOrbVisible = useYellowOrbStore((state) => state.setYellowOrbVisible);
|
||||||
|
|
||||||
|
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
||||||
|
|
||||||
|
const setIntroStarfieldVisible = useStarfieldStore(
|
||||||
|
(state) => state.setIntroStarfieldVisible
|
||||||
|
);
|
||||||
|
const setMainStarfieldVisible = useStarfieldStore(
|
||||||
|
(state) => state.setMainStarfieldVisible
|
||||||
|
);
|
||||||
|
const setMainStarfieldBoostVal = useStarfieldStore(
|
||||||
|
(state) => state.setMainStarfieldBoostVal
|
||||||
|
);
|
||||||
|
|
||||||
|
const setMainGroupPosY = useMainGroupStore((state) => state.setMainGroupPosY);
|
||||||
|
const setMainGroupPosZ = useMainGroupStore((state) => state.setMainGroupPosZ);
|
||||||
|
const setMainGroupRotX = useMainGroupStore((state) => state.setMainGroupRotX);
|
||||||
|
|
||||||
|
const setGrayPlanesVisible = useGrayPlanesStore(
|
||||||
|
(state) => state.setGrayPlanesVisible
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMainGroupPosY(0);
|
||||||
|
setMainGroupPosZ(0);
|
||||||
|
setTimeout(() => {
|
||||||
|
setMainGroupRotX(0);
|
||||||
|
}, 2400);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setGrayPlanesVisible(true);
|
||||||
|
}, 2500);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setMainStarfieldVisible(true);
|
||||||
|
setMainStarfieldBoostVal(0);
|
||||||
|
}, 2800);
|
||||||
|
|
||||||
|
toggleHud();
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setLainMoveState("standing");
|
||||||
|
|
||||||
|
setOrbVisible(true);
|
||||||
|
//setHudVisible(true);
|
||||||
|
|
||||||
|
setIntroStarfieldVisible(false);
|
||||||
|
|
||||||
|
toggleHud();
|
||||||
|
setTimeout(() => {
|
||||||
|
document.getElementsByTagName("canvas")[0].className = "hub-background";
|
||||||
|
}, 300);
|
||||||
|
}, 3860);
|
||||||
|
}, [
|
||||||
|
setGrayPlanesVisible,
|
||||||
|
setMainStarfieldBoostVal,
|
||||||
|
setMainStarfieldVisible,
|
||||||
|
setOrbVisible,
|
||||||
|
setIntroStarfieldVisible,
|
||||||
|
setMainGroupRotX,
|
||||||
|
setMainGroupPosZ,
|
||||||
|
setMainGroupPosY,
|
||||||
|
setLainMoveState,
|
||||||
|
toggleHud,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return <></>;
|
||||||
|
});
|
||||||
|
|
||||||
|
export default MainSceneIntro;
|
|
@ -1,29 +1,27 @@
|
||||||
import React, { useMemo, useRef } from "react";
|
import React, { useMemo, useRef } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import middleRingTexture from "../../static/sprites/middle_ring_tex.png";
|
import middleRingTexture from "../static/sprites/middle_ring_tex.png";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import {
|
import { useMiddleRingStore } from "../store";
|
||||||
middleRingAnimDurationAtom,
|
|
||||||
middleRingNoiseAtom, middleRingPosYAtom,
|
|
||||||
middleRingRotatingAtom,
|
|
||||||
middleRingRotXAtom,
|
|
||||||
middleRingRotZAtom,
|
|
||||||
middleRingWobbleStrengthAtom,
|
|
||||||
} from "./MiddleRingAtom";
|
|
||||||
import { useRecoilValue } from "recoil";
|
|
||||||
|
|
||||||
const MiddleRing = () => {
|
const MiddleRing = () => {
|
||||||
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
|
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
|
||||||
|
|
||||||
const middleRingWobbleStrength = useRecoilValue(middleRingWobbleStrengthAtom);
|
const middleRingWobbleStrength = useMiddleRingStore(
|
||||||
const middleRingRotating = useRecoilValue(middleRingRotatingAtom);
|
(state) => state.middleRingWobbleStrength
|
||||||
const middleRingNoise = useRecoilValue(middleRingNoiseAtom);
|
);
|
||||||
const middleRingPosY = useRecoilValue(middleRingPosYAtom);
|
const middleRingRotating = useMiddleRingStore(
|
||||||
const middleRingRotX = useRecoilValue(middleRingRotXAtom);
|
(state) => state.middleRingRotating
|
||||||
const middleRingRotZ = useRecoilValue(middleRingRotZAtom);
|
);
|
||||||
|
const middleRingNoise = useMiddleRingStore((state) => state.middleRingNoise);
|
||||||
|
const middleRingPosY = useMiddleRingStore((state) => state.middleRingPosY);
|
||||||
|
const middleRingRotX = useMiddleRingStore((state) => state.middleRingRotX);
|
||||||
|
const middleRingRotZ = useMiddleRingStore((state) => state.middleRingRotZ);
|
||||||
|
|
||||||
const middleRingAnimDuration = useRecoilValue(middleRingAnimDurationAtom);
|
const middleRingAnimDuration = useMiddleRingStore(
|
||||||
|
(state) => state.middleRingAnimDuration
|
||||||
|
);
|
||||||
|
|
||||||
const middleRingWobbleState = useSpring({
|
const middleRingWobbleState = useSpring({
|
||||||
middleRingWobbleStrength: middleRingWobbleStrength,
|
middleRingWobbleStrength: middleRingWobbleStrength,
|
||||||
|
@ -212,9 +210,7 @@ const MiddleRing = () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a.group
|
<a.group rotation-z={middleRingRotState.middleRingRotZ}>
|
||||||
rotation-z={middleRingRotState.middleRingRotZ}
|
|
||||||
>
|
|
||||||
<a.mesh
|
<a.mesh
|
||||||
position={[0, 0, 0.3]}
|
position={[0, 0, 0.3]}
|
||||||
position-y={middleRingPosState.middleRingPosY}
|
position-y={middleRingPosState.middleRingPosY}
|
|
@ -1,36 +0,0 @@
|
||||||
import { atom } from "recoil";
|
|
||||||
|
|
||||||
export const middleRingWobbleStrengthAtom = atom({
|
|
||||||
key: "middleRingWobbleStrengthAtom",
|
|
||||||
default: 0.0,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const middleRingRotatingAtom = atom({
|
|
||||||
key: "middleRingRotatingAtom",
|
|
||||||
default: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const middleRingNoiseAtom = atom({
|
|
||||||
key: "middleRingNoiseAtom",
|
|
||||||
default: 0.03,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const middleRingPosYAtom = atom({
|
|
||||||
key: "middleRingPosYAtom",
|
|
||||||
default: -0.11,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const middleRingRotXAtom = atom({
|
|
||||||
key: "middleRingRotXAtom",
|
|
||||||
default: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const middleRingRotZAtom = atom({
|
|
||||||
key: "middleRingRotZAtom",
|
|
||||||
default: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const middleRingAnimDurationAtom = atom({
|
|
||||||
key: "middleRingAnimDurationAtom",
|
|
||||||
default: 600,
|
|
||||||
});
|
|
|
@ -1,6 +0,0 @@
|
||||||
import { atom } from "recoil";
|
|
||||||
|
|
||||||
export const orbVisibilityAtom = atom({
|
|
||||||
key: "orbVisibilityAtom",
|
|
||||||
default: false,
|
|
||||||
});
|
|
36
src/components/OrthoCamera.tsx
Normal file
36
src/components/OrthoCamera.tsx
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
import React, { memo, useMemo, useRef } from "react";
|
||||||
|
import { useFrame, useThree } from "react-three-fiber";
|
||||||
|
import { Scene } from "three";
|
||||||
|
import HUD from "./HUD";
|
||||||
|
import YellowOrb from "./YellowOrb";
|
||||||
|
import { useBlueOrbStore } from "../store";
|
||||||
|
|
||||||
|
const OrthoCamera = memo(() => {
|
||||||
|
const { gl, scene, camera } = useThree();
|
||||||
|
const virtualScene = useMemo(() => new Scene(), []);
|
||||||
|
const virtualCam = useRef();
|
||||||
|
|
||||||
|
const hudVisible = useBlueOrbStore((state) => state.hudVisible);
|
||||||
|
|
||||||
|
useFrame(() => {
|
||||||
|
gl.autoClear = false;
|
||||||
|
gl.clear();
|
||||||
|
gl.render(scene, camera);
|
||||||
|
gl.clearDepth();
|
||||||
|
gl.render(virtualScene, virtualCam.current!);
|
||||||
|
}, 1);
|
||||||
|
|
||||||
|
//-0.6
|
||||||
|
return (
|
||||||
|
<orthographicCamera
|
||||||
|
ref={virtualCam}
|
||||||
|
position={[0, 0, 10]}
|
||||||
|
rotation={[0, 0, 0]}
|
||||||
|
>
|
||||||
|
<HUD key={1} hudVisibility={hudVisible} />
|
||||||
|
<YellowOrb />
|
||||||
|
</orthographicCamera>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default OrthoCamera;
|
|
@ -1,53 +0,0 @@
|
||||||
import React, { memo, useMemo, useRef } from "react";
|
|
||||||
import { useFrame, useThree } from "react-three-fiber";
|
|
||||||
import { Scene } from "three";
|
|
||||||
import HUDElement from "../HUD/HUDElement";
|
|
||||||
import Orb from "../Orb/Orb";
|
|
||||||
import { useRecoilValue } from "recoil";
|
|
||||||
import { orthoCamPosYAtom, orthoCamRotYAtom } from "./OrthoCameraAtom";
|
|
||||||
import { useSpring, a } from "@react-spring/three";
|
|
||||||
import { orbVisibilityAtom } from "../Orb/OrbAtom";
|
|
||||||
import { hudVisibilityAtom } from "../HUD/HUDElementAtom";
|
|
||||||
|
|
||||||
const OrthoCamera = memo(() => {
|
|
||||||
const { gl, scene, camera } = useThree();
|
|
||||||
const virtualScene = useMemo(() => new Scene(), []);
|
|
||||||
const virtualCam = useRef();
|
|
||||||
const orthoCameraPosY = useRecoilValue(orthoCamPosYAtom);
|
|
||||||
const orthoCameraRotY = useRecoilValue(orthoCamRotYAtom);
|
|
||||||
|
|
||||||
const orbVisible = useRecoilValue(orbVisibilityAtom);
|
|
||||||
|
|
||||||
const hudVisible = useRecoilValue(hudVisibilityAtom);
|
|
||||||
|
|
||||||
const orthoCameraState = useSpring({
|
|
||||||
orthoCameraPosY: orthoCameraPosY,
|
|
||||||
orthoCameraRotY: orthoCameraRotY,
|
|
||||||
config: { duration: 1200 },
|
|
||||||
});
|
|
||||||
|
|
||||||
useFrame(() => {
|
|
||||||
gl.autoClear = false;
|
|
||||||
gl.clear();
|
|
||||||
gl.render(scene, camera);
|
|
||||||
gl.clearDepth();
|
|
||||||
gl.render(virtualScene, virtualCam.current!);
|
|
||||||
}, 1);
|
|
||||||
|
|
||||||
//-0.6
|
|
||||||
return (
|
|
||||||
<a.group rotation={[0, 0, 0]} rotation-y={orthoCameraState.orthoCameraRotY}>
|
|
||||||
<a.orthographicCamera
|
|
||||||
ref={virtualCam}
|
|
||||||
position={[0, 0, 10]}
|
|
||||||
rotation={[0, 0, 0]}
|
|
||||||
position-y={orthoCameraState.orthoCameraPosY}
|
|
||||||
>
|
|
||||||
<HUDElement key={1} hudVisibility={hudVisible} />
|
|
||||||
<Orb orbVisibility={orbVisible} />
|
|
||||||
</a.orthographicCamera>
|
|
||||||
</a.group>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export default OrthoCamera;
|
|
|
@ -1,13 +0,0 @@
|
||||||
import { atom } from "recoil";
|
|
||||||
|
|
||||||
export const orthoCamPosYAtom = atom({
|
|
||||||
key: "orthoCamPosYAtom",
|
|
||||||
default: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const orthoCamRotYAtom = atom({
|
|
||||||
key: "orthoCamRotYAtom",
|
|
||||||
default: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
|
@ -1,19 +1,17 @@
|
||||||
import React, { memo, Suspense } from "react";
|
import React, { memo, Suspense } from "react";
|
||||||
import site_a from "../../resources/site_a.json";
|
import site_a from "../resources/site_a.json";
|
||||||
import Level from "../Level";
|
import Level from "./Level";
|
||||||
import level_y_values from "../../resources/level_y_values.json";
|
import level_y_values from "../resources/level_y_values.json";
|
||||||
import blue_orb_positions from "../../resources/blue_orb_positions.json";
|
import blue_orb_positions from "../resources/blue_orb_positions.json";
|
||||||
import BlueOrb from "../BlueOrb/BlueOrb";
|
import BlueOrb from "./BlueOrb";
|
||||||
import { useRecoilValue } from "recoil";
|
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { sitePosYAtom, siteRotYAtom } from "./SiteAtom";
|
import { useBlueOrbStore, useSiteStore } from "../store";
|
||||||
import { useBlueOrbStore } from "../store";
|
|
||||||
|
|
||||||
const Site = memo(() => {
|
const Site = memo(() => {
|
||||||
const currentBlueOrbId = useBlueOrbStore((state) => state.blueOrbId);
|
const currentBlueOrbId = useBlueOrbStore((state) => state.blueOrbId);
|
||||||
|
|
||||||
const siteRotY = useRecoilValue(siteRotYAtom);
|
const siteRotY = useSiteStore((state) => state.siteRotY);
|
||||||
const sitePosY = useRecoilValue(sitePosYAtom);
|
const sitePosY = useSiteStore((state) => state.sitePosY);
|
||||||
|
|
||||||
const siteState = useSpring({
|
const siteState = useSpring({
|
||||||
siteRotY: siteRotY,
|
siteRotY: siteRotY,
|
|
@ -1,16 +0,0 @@
|
||||||
import { atom } from "recoil";
|
|
||||||
|
|
||||||
export const siteRotYAtom = atom({
|
|
||||||
key: "siteRotYatom",
|
|
||||||
default: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const sitePosYAtom = atom({
|
|
||||||
key: "sitePosYAtom",
|
|
||||||
default: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const isSiteYChangingAtom = atom({
|
|
||||||
key: "isSiteYChangingAtom",
|
|
||||||
default: false,
|
|
||||||
});
|
|
|
@ -2,12 +2,7 @@ import { a, useSpring } from "@react-spring/three";
|
||||||
import React, { createRef, memo, RefObject, useMemo, useRef } from "react";
|
import React, { createRef, memo, RefObject, useMemo, useRef } from "react";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import {
|
import { useStarfieldStore } from "../store";
|
||||||
introStarfieldVisibilityAtom,
|
|
||||||
mainStarfieldBoostValAtom,
|
|
||||||
mainStarfieldVisibilityAtom,
|
|
||||||
} from "./StarfieldAtom";
|
|
||||||
import { useRecoilValue } from "recoil";
|
|
||||||
|
|
||||||
type StarRefsAndInitialPoses = [
|
type StarRefsAndInitialPoses = [
|
||||||
React.MutableRefObject<React.RefObject<THREE.Object3D>[]>,
|
React.MutableRefObject<React.RefObject<THREE.Object3D>[]>,
|
||||||
|
@ -35,10 +30,16 @@ type IntroStarfieldObjectData = {
|
||||||
const Starfield = memo(() => {
|
const Starfield = memo(() => {
|
||||||
const introStarfieldGroupRef = useRef<THREE.Object3D>();
|
const introStarfieldGroupRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
const introStarfieldVisible = useRecoilValue(introStarfieldVisibilityAtom);
|
const introStarfieldVisible = useStarfieldStore(
|
||||||
const mainStarfieldVisible = useRecoilValue(mainStarfieldVisibilityAtom);
|
(state) => state.introStarfieldVisible
|
||||||
|
);
|
||||||
|
const mainStarfieldVisible = useStarfieldStore(
|
||||||
|
(state) => state.mainStarfieldVisible
|
||||||
|
);
|
||||||
|
|
||||||
const mainStarfieldBoostVal = useRecoilValue(mainStarfieldBoostValAtom);
|
const mainStarfieldBoostVal = useStarfieldStore(
|
||||||
|
(state) => state.mainStarfieldBoostVal
|
||||||
|
);
|
||||||
|
|
||||||
const starfieldState = useSpring({
|
const starfieldState = useSpring({
|
||||||
starfieldBoostVal: mainStarfieldBoostVal,
|
starfieldBoostVal: mainStarfieldBoostVal,
|
|
@ -1,16 +0,0 @@
|
||||||
import { atom } from "recoil";
|
|
||||||
|
|
||||||
export const introStarfieldVisibilityAtom = atom({
|
|
||||||
key: "introStarfieldVisibilityAtom",
|
|
||||||
default: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const mainStarfieldVisibilityAtom = atom({
|
|
||||||
key: "mainStarfieldVisibilityAtom",
|
|
||||||
default: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const mainStarfieldBoostValAtom = atom({
|
|
||||||
key: "mainStarfieldBoostVal",
|
|
||||||
default: 0.2,
|
|
||||||
});
|
|
|
@ -1,18 +1,10 @@
|
||||||
import React, { useEffect, useMemo } from "react";
|
import React, { useEffect, useMemo } from "react";
|
||||||
import { useSetRecoilState } from "recoil";
|
import { useBlueOrbStore } from "../../store";
|
||||||
import {
|
|
||||||
currentHUDAtom,
|
|
||||||
mediumHudTextAtom,
|
|
||||||
} from "../HUD/HUDElementAtom";
|
|
||||||
import { useBlueOrbStore } from "../store";
|
|
||||||
|
|
||||||
const BlueOrbHUDStateManager = (props: any) => {
|
const BlueOrbHUDStateManager = (props: any) => {
|
||||||
const setCurrentHudId = useBlueOrbStore((state) => state.setCurrentHudId);
|
const setCurrentHudId = useBlueOrbStore((state) => state.setCurrentHudId);
|
||||||
const toggleHud = useBlueOrbStore((state) => state.toggleHud);
|
const toggleHud = useBlueOrbStore((state) => state.toggleHud);
|
||||||
|
|
||||||
const setCurrentHUDElement = useSetRecoilState(currentHUDAtom);
|
|
||||||
const setMediumHudText = useSetRecoilState(mediumHudTextAtom);
|
|
||||||
|
|
||||||
const dispatcherObjects = useMemo(
|
const dispatcherObjects = useMemo(
|
||||||
() => ({
|
() => ({
|
||||||
moveUp: { duration: 3903.704 },
|
moveUp: { duration: 3903.704 },
|
||||||
|
@ -34,13 +26,11 @@ const BlueOrbHUDStateManager = (props: any) => {
|
||||||
const dispatchedAction =
|
const dispatchedAction =
|
||||||
dispatcherObjects[props.eventState as keyof typeof dispatcherObjects];
|
dispatcherObjects[props.eventState as keyof typeof dispatcherObjects];
|
||||||
|
|
||||||
// setHudActive((prev: boolean) => !prev);
|
|
||||||
toggleHud();
|
toggleHud();
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setCurrentHudId(targetBlueOrbHudId);
|
setCurrentHudId(targetBlueOrbHudId);
|
||||||
// setCurrentHUDElement(targetBlueOrbHudData);
|
|
||||||
// setMediumHudText(targetBlueOrbGreenText);
|
|
||||||
toggleHud();
|
toggleHud();
|
||||||
}, dispatchedAction.duration);
|
}, dispatchedAction.duration);
|
||||||
}
|
}
|
||||||
|
@ -49,9 +39,7 @@ const BlueOrbHUDStateManager = (props: any) => {
|
||||||
props.eventState,
|
props.eventState,
|
||||||
props.targetBlueOrbGreenText,
|
props.targetBlueOrbGreenText,
|
||||||
props.targetBlueOrbHudId,
|
props.targetBlueOrbHudId,
|
||||||
setCurrentHUDElement,
|
|
||||||
setCurrentHudId,
|
setCurrentHudId,
|
||||||
setMediumHudText,
|
|
||||||
toggleHud,
|
toggleHud,
|
||||||
]);
|
]);
|
||||||
return null;
|
return null;
|
|
@ -1,9 +1,7 @@
|
||||||
import React, { useCallback, useEffect, useMemo } from "react";
|
import React, { useCallback, useEffect, useMemo } from "react";
|
||||||
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
||||||
import site_a from "../../resources/site_a.json";
|
import site_a from "../../resources/site_a.json";
|
||||||
import { useSetRecoilState } from "recoil";
|
import { useBlueOrbStore } from "../../store";
|
||||||
import { bigHudTextAtom } from "../HUD/HUDElementAtom";
|
|
||||||
import { useBlueOrbStore } from "../store";
|
|
||||||
|
|
||||||
const BlueOrbHUDTextStateManager = (props: any) => {
|
const BlueOrbHUDTextStateManager = (props: any) => {
|
||||||
const currentBlueOrbHudId = useBlueOrbStore((state) => state.hudId);
|
const currentBlueOrbHudId = useBlueOrbStore((state) => state.hudId);
|
||||||
|
@ -24,11 +22,7 @@ const BlueOrbHUDTextStateManager = (props: any) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
const animateYellowTextWithMove = useCallback(
|
const animateYellowTextWithMove = useCallback(
|
||||||
(
|
(yellowLetterPosYOffset: number) => {
|
||||||
targetBlueOrbHudId: string,
|
|
||||||
targetBlueOrbId: string,
|
|
||||||
yellowLetterPosYOffset: number
|
|
||||||
) => {
|
|
||||||
// animate the letters to match that of site's
|
// animate the letters to match that of site's
|
||||||
// to create an illusion of not moving
|
// to create an illusion of not moving
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
@ -72,8 +66,7 @@ const BlueOrbHUDTextStateManager = (props: any) => {
|
||||||
]
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
const animateYellowTextWithoutMove = useCallback(
|
const animateYellowTextWithoutMove = useCallback(() => {
|
||||||
(targetBlueOrbHudId: string, targetBlueOrbId: string) => {
|
|
||||||
// make current hud big text shrink
|
// make current hud big text shrink
|
||||||
setYellowHudTextOffsetXCoeff(-1);
|
setYellowHudTextOffsetXCoeff(-1);
|
||||||
|
|
||||||
|
@ -100,16 +93,14 @@ const BlueOrbHUDTextStateManager = (props: any) => {
|
||||||
// unshrink text
|
// unshrink text
|
||||||
setYellowHudTextOffsetXCoeff(0);
|
setYellowHudTextOffsetXCoeff(0);
|
||||||
}, 1200);
|
}, 1200);
|
||||||
},
|
}, [
|
||||||
[
|
|
||||||
currentBlueOrbHudId,
|
currentBlueOrbHudId,
|
||||||
currentBlueOrbId,
|
currentBlueOrbId,
|
||||||
setYellowHudText,
|
setYellowHudText,
|
||||||
setYellowHudTextOffsetXCoeff,
|
setYellowHudTextOffsetXCoeff,
|
||||||
setYellowHudTextPosX,
|
setYellowHudTextPosX,
|
||||||
setYellowHudTextPosY,
|
setYellowHudTextPosY,
|
||||||
]
|
]);
|
||||||
);
|
|
||||||
|
|
||||||
const dispatcherObjects = useMemo(
|
const dispatcherObjects = useMemo(
|
||||||
() => ({
|
() => ({
|
||||||
|
@ -159,20 +150,13 @@ const BlueOrbHUDTextStateManager = (props: any) => {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.eventState) {
|
if (props.eventState) {
|
||||||
const targetBlueOrbId = props.targetBlueOrbId;
|
|
||||||
const targetBlueOrbHudId = props.targetBlueOrbHudId;
|
|
||||||
|
|
||||||
const dispatchedAction =
|
const dispatchedAction =
|
||||||
dispatcherObjects[props.eventState as keyof typeof dispatcherObjects];
|
dispatcherObjects[props.eventState as keyof typeof dispatcherObjects];
|
||||||
|
|
||||||
if (dispatchedAction.action === "animateWithMove") {
|
if (dispatchedAction.action === "animateWithMove") {
|
||||||
animateYellowTextWithMove(
|
animateYellowTextWithMove(dispatchedAction.yellowLetterPosYOffset);
|
||||||
targetBlueOrbHudId,
|
|
||||||
targetBlueOrbId,
|
|
||||||
dispatchedAction.yellowLetterPosYOffset
|
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
animateYellowTextWithoutMove(targetBlueOrbHudId, targetBlueOrbId);
|
animateYellowTextWithoutMove();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [
|
}, [
|
|
@ -1,10 +1,7 @@
|
||||||
import React, { useEffect, useMemo } from "react";
|
import React, { useEffect, useMemo } from "react";
|
||||||
import { useSetRecoilState } from "recoil";
|
import { useBlueOrbStore } from "../../store";
|
||||||
import { currentBlueOrbAtom } from "../BlueOrb/CurrentBlueOrbAtom";
|
|
||||||
import { useBlueOrbStore } from "../store";
|
|
||||||
|
|
||||||
const BlueOrbStateManager = (props: any) => {
|
const BlueOrbStateManager = (props: any) => {
|
||||||
// const setCurrentBlueOrb = useSetRecoilState(currentBlueOrbAtom);
|
|
||||||
const setCurrentBlueOrb = useBlueOrbStore(
|
const setCurrentBlueOrb = useBlueOrbStore(
|
||||||
(state) => state.setCurrentBlueOrbId
|
(state) => state.setCurrentBlueOrbId
|
||||||
);
|
);
|
|
@ -1,24 +1,15 @@
|
||||||
import React, { useEffect, useMemo } from "react";
|
import React, { useEffect, useMemo } from "react";
|
||||||
import { useSetRecoilState } from "recoil";
|
import { useLainStore } from "../../store";
|
||||||
import { lainMoveStateAtom } from "../Lain/LainAtom";
|
|
||||||
import {
|
|
||||||
LainMoveDown,
|
|
||||||
LainMoveLeft,
|
|
||||||
LainMoveRight,
|
|
||||||
LainMoveUp,
|
|
||||||
LainStanding,
|
|
||||||
LainThrowBlueOrb,
|
|
||||||
} from "../Lain/Lain";
|
|
||||||
|
|
||||||
const LainStateManager = (props: any) => {
|
const LainStateManager = (props: any) => {
|
||||||
const setLainMoveState = useSetRecoilState(lainMoveStateAtom);
|
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
||||||
|
|
||||||
const dispatcherObjects = useMemo(
|
const dispatcherObjects = useMemo(
|
||||||
() => ({
|
() => ({
|
||||||
moveUp: { action: <LainMoveUp />, duration: 3903.704 },
|
moveUp: { action: "moveUp", duration: 3903.704 },
|
||||||
moveDown: { action: <LainMoveDown />, duration: 3903.704 },
|
moveDown: { action: "moveDown", duration: 3903.704 },
|
||||||
moveLeft: { action: <LainMoveLeft />, duration: 3903.704 },
|
moveLeft: { action: "moveLeft", duration: 3903.704 },
|
||||||
moveRight: { action: <LainMoveRight />, duration: 3903.704 },
|
moveRight: { action: "moveRight", duration: 3903.704 },
|
||||||
}),
|
}),
|
||||||
[]
|
[]
|
||||||
);
|
);
|
||||||
|
@ -32,7 +23,7 @@ const LainStateManager = (props: any) => {
|
||||||
setLainMoveState(dispatchedAction.action);
|
setLainMoveState(dispatchedAction.action);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setLainMoveState(<LainStanding />);
|
setLainMoveState("standing");
|
||||||
}, dispatchedAction.duration);
|
}, dispatchedAction.duration);
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,26 +1,27 @@
|
||||||
import React, { useCallback, useEffect, useMemo } from "react";
|
import React, { useCallback, useEffect, useMemo } from "react";
|
||||||
import { useSetRecoilState } from "recoil";
|
import { useMiddleRingStore } from "../../store";
|
||||||
import {
|
|
||||||
middleRingAnimDurationAtom,
|
|
||||||
middleRingNoiseAtom,
|
|
||||||
middleRingPosYAtom,
|
|
||||||
middleRingRotatingAtom,
|
|
||||||
middleRingRotXAtom,
|
|
||||||
middleRingRotZAtom,
|
|
||||||
middleRingWobbleStrengthAtom,
|
|
||||||
} from "../MiddleRing/MiddleRingAtom";
|
|
||||||
|
|
||||||
const MiddleRingStateManager = (props: any) => {
|
const MiddleRingStateManager = (props: any) => {
|
||||||
const setMiddleRingWobbleStrength = useSetRecoilState(
|
const setMiddleRingWobbleStrength = useMiddleRingStore(
|
||||||
middleRingWobbleStrengthAtom
|
(state) => state.setMiddleRingWobbleStrength
|
||||||
);
|
);
|
||||||
const setMiddleRingRotating = useSetRecoilState(middleRingRotatingAtom);
|
const setMiddleRingRotating = useMiddleRingStore(
|
||||||
const setMiddleRingNoise = useSetRecoilState(middleRingNoiseAtom);
|
(state) => state.setMiddleRingRotating
|
||||||
const setMiddleRingPosY = useSetRecoilState(middleRingPosYAtom);
|
);
|
||||||
const setMiddleRingRotX = useSetRecoilState(middleRingRotXAtom);
|
const setMiddleRingNoise = useMiddleRingStore(
|
||||||
const setMiddleRingRotZ = useSetRecoilState(middleRingRotZAtom);
|
(state) => state.setMiddleRingNoise
|
||||||
const setMiddleRingAnimDuration = useSetRecoilState(
|
);
|
||||||
middleRingAnimDurationAtom
|
const addToMiddleRingPosY = useMiddleRingStore(
|
||||||
|
(state) => state.addToMiddleRingPosY
|
||||||
|
);
|
||||||
|
const setMiddleRingRotX = useMiddleRingStore(
|
||||||
|
(state) => state.setMiddleRingRotX
|
||||||
|
);
|
||||||
|
const setMiddleRingRotZ = useMiddleRingStore(
|
||||||
|
(state) => state.setMiddleRingRotZ
|
||||||
|
);
|
||||||
|
const setMiddleRingAnimDuration = useMiddleRingStore(
|
||||||
|
(state) => state.setMiddleRingAnimDuration
|
||||||
);
|
);
|
||||||
|
|
||||||
const rotateMiddleRingRight = useCallback(() => {
|
const rotateMiddleRingRight = useCallback(() => {
|
||||||
|
@ -66,7 +67,7 @@ const MiddleRingStateManager = (props: any) => {
|
||||||
}, 700);
|
}, 700);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setMiddleRingPosY((prev: number) => prev + 1.5);
|
addToMiddleRingPosY(1.5);
|
||||||
}, 1300);
|
}, 1300);
|
||||||
|
|
||||||
// set ring rotation on x axis to craete motion effect
|
// set ring rotation on x axis to craete motion effect
|
||||||
|
@ -79,11 +80,11 @@ const MiddleRingStateManager = (props: any) => {
|
||||||
}, 2900);
|
}, 2900);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setMiddleRingPosY((prev: number) => prev - 1.7);
|
addToMiddleRingPosY(-1.7);
|
||||||
}, 3000);
|
}, 3000);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setMiddleRingPosY((prev: number) => prev + 0.2);
|
addToMiddleRingPosY(0.2);
|
||||||
}, 3150);
|
}, 3150);
|
||||||
|
|
||||||
// rotate it again, set ring noise to 0
|
// rotate it again, set ring noise to 0
|
||||||
|
@ -108,9 +109,9 @@ const MiddleRingStateManager = (props: any) => {
|
||||||
setMiddleRingNoise(0.03);
|
setMiddleRingNoise(0.03);
|
||||||
}, 11600);
|
}, 11600);
|
||||||
}, [
|
}, [
|
||||||
|
addToMiddleRingPosY,
|
||||||
setMiddleRingAnimDuration,
|
setMiddleRingAnimDuration,
|
||||||
setMiddleRingNoise,
|
setMiddleRingNoise,
|
||||||
setMiddleRingPosY,
|
|
||||||
setMiddleRingRotX,
|
setMiddleRingRotX,
|
||||||
setMiddleRingRotating,
|
setMiddleRingRotating,
|
||||||
]);
|
]);
|
||||||
|
@ -136,7 +137,7 @@ const MiddleRingStateManager = (props: any) => {
|
||||||
// set the anim duration value to match that of the site's
|
// set the anim duration value to match that of the site's
|
||||||
setMiddleRingAnimDuration(1200);
|
setMiddleRingAnimDuration(1200);
|
||||||
// animate it after
|
// animate it after
|
||||||
setMiddleRingPosY((prev: number) => prev - 1.5);
|
addToMiddleRingPosY(-1.5);
|
||||||
}, 1300);
|
}, 1300);
|
||||||
|
|
||||||
// reset the ring bend, set the rotation to slightly curve
|
// reset the ring bend, set the rotation to slightly curve
|
||||||
|
@ -154,13 +155,13 @@ const MiddleRingStateManager = (props: any) => {
|
||||||
}, 2300);
|
}, 2300);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setMiddleRingPosY((prev: number) => prev + 1.7);
|
addToMiddleRingPosY(1.7);
|
||||||
}, 2400);
|
}, 2400);
|
||||||
|
|
||||||
// reset the rotation value to 0
|
// reset the rotation value to 0
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setMiddleRingRotX(0);
|
setMiddleRingRotX(0);
|
||||||
setMiddleRingPosY((prev: number) => prev - 0.2);
|
addToMiddleRingPosY(-0.2);
|
||||||
}, 2650);
|
}, 2650);
|
||||||
|
|
||||||
// enable noise again in about 8~ secs
|
// enable noise again in about 8~ secs
|
||||||
|
@ -168,9 +169,9 @@ const MiddleRingStateManager = (props: any) => {
|
||||||
setMiddleRingNoise(0.03);
|
setMiddleRingNoise(0.03);
|
||||||
}, 7800);
|
}, 7800);
|
||||||
}, [
|
}, [
|
||||||
|
addToMiddleRingPosY,
|
||||||
setMiddleRingAnimDuration,
|
setMiddleRingAnimDuration,
|
||||||
setMiddleRingNoise,
|
setMiddleRingNoise,
|
||||||
setMiddleRingPosY,
|
|
||||||
setMiddleRingRotX,
|
setMiddleRingRotX,
|
||||||
setMiddleRingRotating,
|
setMiddleRingRotating,
|
||||||
setMiddleRingWobbleStrength,
|
setMiddleRingWobbleStrength,
|
||||||
|
@ -205,7 +206,6 @@ const MiddleRingStateManager = (props: any) => {
|
||||||
props.eventState,
|
props.eventState,
|
||||||
setMiddleRingAnimDuration,
|
setMiddleRingAnimDuration,
|
||||||
setMiddleRingNoise,
|
setMiddleRingNoise,
|
||||||
setMiddleRingPosY,
|
|
||||||
setMiddleRingRotX,
|
setMiddleRingRotX,
|
||||||
setMiddleRingRotZ,
|
setMiddleRingRotZ,
|
||||||
setMiddleRingRotating,
|
setMiddleRingRotating,
|
48
src/components/StateManagers/SiteStateManager.tsx
Normal file
48
src/components/StateManagers/SiteStateManager.tsx
Normal file
|
@ -0,0 +1,48 @@
|
||||||
|
import React, { useEffect, useMemo } from "react";
|
||||||
|
import { useSiteStore } from "../../store";
|
||||||
|
|
||||||
|
const SiteStateManager = (props: any) => {
|
||||||
|
const incrementSiteRotY = useSiteStore((state) => state.incrementSiteRotY);
|
||||||
|
const incrementSitePosY = useSiteStore((state) => state.incrementSitePosY);
|
||||||
|
const setIsSiteYChanging = useSiteStore((state) => state.setIsSiteChanging);
|
||||||
|
|
||||||
|
const dispatcherObjects = useMemo(
|
||||||
|
() => ({
|
||||||
|
moveUp: { action: incrementSitePosY, value: -1.5, actionDelay: 1300 },
|
||||||
|
moveDown: { action: incrementSitePosY, value: 1.5, actionDelay: 1300 },
|
||||||
|
moveLeft: {
|
||||||
|
action: incrementSiteRotY,
|
||||||
|
value: Math.PI / 4,
|
||||||
|
actionDelay: 1100,
|
||||||
|
},
|
||||||
|
moveRight: {
|
||||||
|
action: incrementSiteRotY,
|
||||||
|
value: -Math.PI / 4,
|
||||||
|
actionDelay: 1100,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
[incrementSitePosY, incrementSiteRotY]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (props.eventState) {
|
||||||
|
const dispatchedAction =
|
||||||
|
dispatcherObjects[props.eventState as keyof typeof dispatcherObjects];
|
||||||
|
|
||||||
|
if (dispatchedAction) {
|
||||||
|
setIsSiteYChanging(true);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
dispatchedAction.action(dispatchedAction.value);
|
||||||
|
}, dispatchedAction.actionDelay);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setIsSiteYChanging(false);
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [dispatcherObjects, props.eventState, setIsSiteYChanging]);
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SiteStateManager;
|
|
@ -1,14 +1,12 @@
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import orangeFont from "../../static/sprites/orange_font_texture.png";
|
import orangeFont from "../static/sprites/orange_font_texture.png";
|
||||||
import greenFont from "../../static/sprites/white_and_green_texture.png";
|
import greenFont from "../static/sprites/white_and_green_texture.png";
|
||||||
import yellowFont from "../../static/sprites/yellow_font_texture.png";
|
import yellowFont from "../static/sprites/yellow_font_texture.png";
|
||||||
import orange_font_json from "../../resources/orange_font.json";
|
import orange_font_json from "../resources/orange_font.json";
|
||||||
import medium_font_json from "../../resources/medium_font.json";
|
import medium_font_json from "../resources/medium_font.json";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useRecoilValue } from "recoil";
|
|
||||||
import { bigLetterOffsetXCoeffAtom } from "./TextRendererAtom";
|
|
||||||
import { useBlueOrbStore } from "../store";
|
import { useBlueOrbStore } from "../store";
|
||||||
|
|
||||||
type LetterProps = {
|
type LetterProps = {
|
|
@ -1,6 +0,0 @@
|
||||||
import { atom } from "recoil";
|
|
||||||
|
|
||||||
export const bigLetterOffsetXCoeffAtom = atom({
|
|
||||||
key: "bigLetterOFfsetXCoeffAtom",
|
|
||||||
default: 0,
|
|
||||||
});
|
|
|
@ -1,18 +1,16 @@
|
||||||
import React, { memo, useRef, useState } from "react";
|
import React, { memo, useRef, useState } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import orbSprite from "../../static/sprites/orb.png";
|
import orbSprite from "../static/sprites/orb.png";
|
||||||
|
import { useYellowOrbStore } from "../store";
|
||||||
|
|
||||||
// initialize outside the component otherwise it gets overwritten when it rerenders
|
// initialize outside the component otherwise it gets overwritten when it rerenders
|
||||||
let orbIdx = 0;
|
let orbIdx = 0;
|
||||||
let orbDirectionChangeCount = 0;
|
let orbDirectionChangeCount = 0;
|
||||||
let renderOrder = -1;
|
let renderOrder = -1;
|
||||||
|
|
||||||
type OrbProps = {
|
const YellowOrb = memo(() => {
|
||||||
orbVisibility: boolean;
|
const yellowOrbVisible = useYellowOrbStore((state) => state.yellowOrbVisible);
|
||||||
};
|
|
||||||
|
|
||||||
const Orb = memo((props: OrbProps) => {
|
|
||||||
const orbRef = useRef<THREE.Object3D>();
|
const orbRef = useRef<THREE.Object3D>();
|
||||||
const [orbDirection, setOrbDirection] = useState("left");
|
const [orbDirection, setOrbDirection] = useState("left");
|
||||||
const [currentCurve, setCurrentCurve] = useState("first");
|
const [currentCurve, setCurrentCurve] = useState("first");
|
||||||
|
@ -34,7 +32,7 @@ const Orb = memo((props: OrbProps) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (props.orbVisibility) {
|
if (yellowOrbVisible) {
|
||||||
let orbPosFirst = firstCurve.getPoint(orbIdx / 250);
|
let orbPosFirst = firstCurve.getPoint(orbIdx / 250);
|
||||||
let orbPosSecond = secondCurve.getPoint(orbIdx / 250);
|
let orbPosSecond = secondCurve.getPoint(orbIdx / 250);
|
||||||
|
|
||||||
|
@ -110,7 +108,7 @@ const Orb = memo((props: OrbProps) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group position={[0, -0.1, -9]} visible={props.orbVisibility}>
|
<group position={[0, -0.1, -9]} visible={yellowOrbVisible}>
|
||||||
<sprite scale={[0.5, 0.5, 0.5]} ref={orbRef} renderOrder={renderOrder}>
|
<sprite scale={[0.5, 0.5, 0.5]} ref={orbRef} renderOrder={renderOrder}>
|
||||||
<spriteMaterial
|
<spriteMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
|
@ -123,4 +121,4 @@ const Orb = memo((props: OrbProps) => {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
export default Orb;
|
export default YellowOrb;
|
|
@ -1,39 +0,0 @@
|
||||||
import create from "zustand";
|
|
||||||
|
|
||||||
type HUDState = {
|
|
||||||
blueOrbId: string;
|
|
||||||
hudId: string;
|
|
||||||
hudActive: number;
|
|
||||||
yellowHudText: string;
|
|
||||||
yellowHudTextPosY: number;
|
|
||||||
yellowHudTextPosX: number;
|
|
||||||
yellowHudTextOffsetXCoeff: number;
|
|
||||||
setCurrentBlueOrbId: (to: string) => void;
|
|
||||||
setCurrentHudId: (to: string) => void;
|
|
||||||
toggleHud: () => void;
|
|
||||||
setYellowHudText: (to: string) => void;
|
|
||||||
incrementYellowHudTextPosY: (by: number) => void;
|
|
||||||
setYellowHudTextPosY: (to: number) => void;
|
|
||||||
setYellowHudTextPosX: (to: number) => void;
|
|
||||||
setYellowHudTextOffsetXCoeff: (to: number) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useBlueOrbStore = create<HUDState>((set) => ({
|
|
||||||
blueOrbId: "0422",
|
|
||||||
hudId: "fg_hud_1",
|
|
||||||
hudActive: 1,
|
|
||||||
yellowHudText: "",
|
|
||||||
yellowHudTextPosY: 0,
|
|
||||||
yellowHudTextPosX: 0,
|
|
||||||
yellowHudTextOffsetXCoeff: 0,
|
|
||||||
setCurrentBlueOrbId: (to) => set(() => ({ blueOrbId: to })),
|
|
||||||
setCurrentHudId: (to) => set(() => ({ hudId: to })),
|
|
||||||
toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })),
|
|
||||||
setYellowHudText: (to) => set(() => ({ yellowHudText: to })),
|
|
||||||
incrementYellowHudTextPosY: (by) =>
|
|
||||||
set((state) => ({ yellowHudTextPosY: state.yellowHudTextPosY + by })),
|
|
||||||
setYellowHudTextPosY: (to) => set(() => ({ yellowHudTextPosY: to })),
|
|
||||||
setYellowHudTextPosX: (to) => set(() => ({ yellowHudTextPosY: to })),
|
|
||||||
setYellowHudTextOffsetXCoeff: (to) =>
|
|
||||||
set(() => ({ yellowHudTextOffsetXCoeff: to })),
|
|
||||||
}));
|
|
173
src/store.ts
Normal file
173
src/store.ts
Normal file
|
@ -0,0 +1,173 @@
|
||||||
|
import create from "zustand";
|
||||||
|
|
||||||
|
type BlueOrbState = {
|
||||||
|
blueOrbId: string;
|
||||||
|
hudId: string;
|
||||||
|
hudActive: number;
|
||||||
|
hudVisible: boolean;
|
||||||
|
yellowHudText: string;
|
||||||
|
yellowHudTextPosY: number;
|
||||||
|
yellowHudTextPosX: number;
|
||||||
|
yellowHudTextOffsetXCoeff: number;
|
||||||
|
setCurrentBlueOrbId: (to: string) => void;
|
||||||
|
setCurrentHudId: (to: string) => void;
|
||||||
|
toggleHud: () => void;
|
||||||
|
setYellowHudText: (to: string) => void;
|
||||||
|
incrementYellowHudTextPosY: (by: number) => void;
|
||||||
|
setYellowHudTextPosY: (to: number) => void;
|
||||||
|
setYellowHudTextPosX: (to: number) => void;
|
||||||
|
setYellowHudTextOffsetXCoeff: (to: number) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type LainState = {
|
||||||
|
lainMoveState: string;
|
||||||
|
setLainMoveState: (to: string) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type MainGroupState = {
|
||||||
|
mainGroupPosY: number;
|
||||||
|
mainGroupPosZ: number;
|
||||||
|
mainGroupRotX: number;
|
||||||
|
setMainGroupPosY: (to: number) => void;
|
||||||
|
setMainGroupPosZ: (to: number) => void;
|
||||||
|
setMainGroupRotX: (to: number) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type GrayPlanesState = {
|
||||||
|
grayPlanesVisible: boolean;
|
||||||
|
setGrayPlanesVisible: (to: boolean) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type StarfieldState = {
|
||||||
|
introStarfieldVisible: boolean;
|
||||||
|
mainStarfieldVisible: boolean;
|
||||||
|
mainStarfieldBoostVal: number;
|
||||||
|
setIntroStarfieldVisible: (to: boolean) => void;
|
||||||
|
setMainStarfieldVisible: (to: boolean) => void;
|
||||||
|
setMainStarfieldBoostVal: (to: number) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type YellowOrbState = {
|
||||||
|
yellowOrbVisible: boolean;
|
||||||
|
setYellowOrbVisible: (to: boolean) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type SiteState = {
|
||||||
|
siteRotY: number;
|
||||||
|
sitePosY: number;
|
||||||
|
isSiteChangingY: boolean;
|
||||||
|
incrementSiteRotY: (by: number) => void;
|
||||||
|
incrementSitePosY: (by: number) => void;
|
||||||
|
setSiteRotY: (to: number) => void;
|
||||||
|
setSitePosY: (to: number) => void;
|
||||||
|
setIsSiteChanging: (to: boolean) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type MiddleRingState = {
|
||||||
|
middleRingWobbleStrength: number;
|
||||||
|
middleRingRotating: boolean;
|
||||||
|
middleRingNoise: number;
|
||||||
|
middleRingPosY: number;
|
||||||
|
middleRingRotX: number;
|
||||||
|
middleRingRotZ: number;
|
||||||
|
middleRingAnimDuration: number;
|
||||||
|
setMiddleRingWobbleStrength: (to: number) => void;
|
||||||
|
setMiddleRingRotating: (to: boolean) => void;
|
||||||
|
setMiddleRingNoise: (to: number) => void;
|
||||||
|
addToMiddleRingPosY: (val: number) => void;
|
||||||
|
setMiddleRingPosY: (to: number) => void;
|
||||||
|
setMiddleRingRotX: (to: number) => void;
|
||||||
|
setMiddleRingRotZ: (to: number) => void;
|
||||||
|
setMiddleRingAnimDuration: (to: number) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useBlueOrbStore = create<BlueOrbState>((set) => ({
|
||||||
|
blueOrbId: "0422",
|
||||||
|
hudId: "fg_hud_1",
|
||||||
|
hudActive: 1,
|
||||||
|
hudVisible: true,
|
||||||
|
yellowHudText: "",
|
||||||
|
yellowHudTextPosY: 0,
|
||||||
|
yellowHudTextPosX: 0,
|
||||||
|
yellowHudTextOffsetXCoeff: 0,
|
||||||
|
setCurrentBlueOrbId: (to) => set(() => ({ blueOrbId: to })),
|
||||||
|
setCurrentHudId: (to) => set(() => ({ hudId: to })),
|
||||||
|
toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })),
|
||||||
|
setYellowHudText: (to) => set(() => ({ yellowHudText: to })),
|
||||||
|
incrementYellowHudTextPosY: (by) =>
|
||||||
|
set((state) => ({ yellowHudTextPosY: state.yellowHudTextPosY + by })),
|
||||||
|
setYellowHudTextPosY: (to) => set(() => ({ yellowHudTextPosY: to })),
|
||||||
|
setYellowHudTextPosX: (to) => set(() => ({ yellowHudTextPosX: to })),
|
||||||
|
setYellowHudTextOffsetXCoeff: (to) =>
|
||||||
|
set(() => ({ yellowHudTextOffsetXCoeff: to })),
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const useLainStore = create<LainState>((set) => ({
|
||||||
|
lainMoveState: "standing",
|
||||||
|
setLainMoveState: (to) => set(() => ({ lainMoveState: to })),
|
||||||
|
}));
|
||||||
|
|
||||||
|
// -2.5 - intro val
|
||||||
|
//-9.5 - intro val
|
||||||
|
//1.5 - intro val
|
||||||
|
export const useMainGroupStore = create<MainGroupState>((set) => ({
|
||||||
|
mainGroupPosY: 0,
|
||||||
|
mainGroupPosZ: 0,
|
||||||
|
mainGroupRotX: 0,
|
||||||
|
setMainGroupPosY: (to) => set(() => ({ mainGroupPosY: to })),
|
||||||
|
setMainGroupPosZ: (to) => set(() => ({ mainGroupPosZ: to })),
|
||||||
|
setMainGroupRotX: (to) => set(() => ({ mainGroupRotX: to })),
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const useGrayPlanesStore = create<GrayPlanesState>((set) => ({
|
||||||
|
grayPlanesVisible: true,
|
||||||
|
setGrayPlanesVisible: (to) => set(() => ({ grayPlanesVisible: to })),
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const useStarfieldStore = create<StarfieldState>((set) => ({
|
||||||
|
introStarfieldVisible: false,
|
||||||
|
mainStarfieldVisible: true,
|
||||||
|
mainStarfieldBoostVal: 0.2,
|
||||||
|
setIntroStarfieldVisible: (to) => set(() => ({ introStarfieldVisible: to })),
|
||||||
|
setMainStarfieldVisible: (to) => set(() => ({ mainStarfieldVisible: to })),
|
||||||
|
setMainStarfieldBoostVal: (to) => set(() => ({ mainStarfieldBoostVal: to })),
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const useYellowOrbStore = create<YellowOrbState>((set) => ({
|
||||||
|
yellowOrbVisible: false,
|
||||||
|
setYellowOrbVisible: (to) => set(() => ({ yellowOrbVisible: to })),
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const useSiteStore = create<SiteState>((set) => ({
|
||||||
|
sitePosY: 0,
|
||||||
|
siteRotY: 0,
|
||||||
|
isSiteChangingY: false,
|
||||||
|
incrementSitePosY: (by) =>
|
||||||
|
set((state) => ({ sitePosY: state.sitePosY + by })),
|
||||||
|
incrementSiteRotY: (by) =>
|
||||||
|
set((state) => ({ siteRotY: state.siteRotY + by })),
|
||||||
|
setSitePosY: (to) => set(() => ({ sitePosY: to })),
|
||||||
|
setSiteRotY: (to) => set(() => ({ siteRotY: to })),
|
||||||
|
setIsSiteChanging: (to) => set(() => ({ isSiteChangingY: to })),
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const useMiddleRingStore = create<MiddleRingState>((set) => ({
|
||||||
|
middleRingWobbleStrength: 0,
|
||||||
|
middleRingRotating: true,
|
||||||
|
middleRingNoise: 0.03,
|
||||||
|
middleRingPosY: -0.11,
|
||||||
|
middleRingRotX: 0,
|
||||||
|
middleRingRotZ: 0,
|
||||||
|
middleRingAnimDuration: 600,
|
||||||
|
setMiddleRingWobbleStrength: (to) =>
|
||||||
|
set(() => ({ middleRingWobbleStrength: to })),
|
||||||
|
setMiddleRingRotating: (to) => set(() => ({ middleRingRotating: to })),
|
||||||
|
setMiddleRingNoise: (to) => set(() => ({ middleRingNoise: to })),
|
||||||
|
addToMiddleRingPosY: (by) =>
|
||||||
|
set((state) => ({ middleRingPosY: state.middleRingPosY + by })),
|
||||||
|
setMiddleRingPosY: (to) => set(() => ({ middleRingPosY: to })),
|
||||||
|
setMiddleRingRotX: (to) => set(() => ({ middleRingRotX: to })),
|
||||||
|
setMiddleRingRotZ: (to) => set(() => ({ middleRingRotZ: to })),
|
||||||
|
setMiddleRingAnimDuration: (to) =>
|
||||||
|
set(() => ({ middleRingAnimDuration: to })),
|
||||||
|
}));
|
Loading…
Reference in a new issue