diff --git a/src/components/InputHandler.tsx b/src/components/InputHandler.tsx index ae349b3..5bfae6d 100644 --- a/src/components/InputHandler.tsx +++ b/src/components/InputHandler.tsx @@ -9,47 +9,31 @@ import { import { useRecoilState, useSetRecoilState } from "recoil"; import { bigHudTextAtom, - currentHUDAtom, - hudActiveAtom, bigLetterPosXAtom, bigLetterPosYAtom, + currentHUDAtom, + hudActiveAtom, } from "./HUD/HUDElementAtom"; import { currentBlueOrbAtom } from "./BlueOrb/CurrentBlueOrbAtom"; import lain_animations from "../resources/lain_animations.json"; import blue_orb_huds from "../resources/blue_orb_huds.json"; import blue_orb_directions from "../resources/blue_orb_directions.json"; import site_a from "../resources/site_a.json"; -import { - lainMoveStateAtom, - lainMovingAtom, - lainPosYAtom, -} from "./Lain/LainAtom"; -import { camPosYAtom, camRotYAtom } from "./MainScene/CameraAtom"; -import { - starfieldPosYAtom, - starfieldRotYAtom, -} from "./Starfield/StarfieldAtom"; +import { lainMoveStateAtom, lainMovingAtom } from "./Lain/LainAtom"; import { BlueOrbHuds } from "./HUD/HUDElement"; import { - orthoCamPosYAtom, - orthoCamRotYAtom, -} from "./OrthoCamera/OrthoCameraAtom"; -import { - grayPlanesPosYAtom, - grayPlanesRotYAtom, -} from "./GrayPlanes/GrayPlanesAtom"; -import { + middleRingAnimDurationAtom, middleRingNoiseAtom, middleRingPosYAtom, middleRingRotatingAtom, middleRingRotXAtom, - middleRingRotYAtom, middleRingRotZAtom, middleRingWobbleStrengthAtom, } from "./MiddleRing/MiddleRingAtom"; -import { lightPosYAtom, lightRotYAtom } from "./Lights/LightsAtom"; import { bigLetterOffsetXCoeffAtom } from "./TextRenderer/TextRendererAtom"; import { SiteData } from "./Site/Site"; +import { sitePosYAtom, siteRotYAtom } from "./Site/SiteAtom"; + type KeyCodeAssociations = { [keyCode: number]: string; }; @@ -70,6 +54,20 @@ type LainAnimations = { [sprite: string]: LainAnimationData; }; +// helpers +const getMove = (currentLoc: string, key: string): string => { + return (blue_orb_directions as SpriteDirections)[currentLoc][key]; +}; + +const getKeyCodeAssociation = (keyCode: number): string => { + return ({ + 40: "down", + 37: "left", + 38: "up", + 39: "right", + } as KeyCodeAssociations)[keyCode]; +}; + const InputHandler = () => { const [currentBlueOrb, setCurrentBlueOrb] = useRecoilState( currentBlueOrbAtom @@ -84,20 +82,6 @@ const InputHandler = () => { const setHudActive = useSetRecoilState(hudActiveAtom); - const setCamPosY = useSetRecoilState(camPosYAtom); - const setCamRotY = useSetRecoilState(camRotYAtom); - - const setOrthoCamPosY = useSetRecoilState(orthoCamPosYAtom); - const setOrthoCamRotY = useSetRecoilState(orthoCamRotYAtom); - - const setLainPosY = useSetRecoilState(lainPosYAtom); - - const setGrayPlanePosY = useSetRecoilState(grayPlanesPosYAtom); - const setGrayPlaneRotY = useSetRecoilState(grayPlanesRotYAtom); - - const setStarfieldPosY = useSetRecoilState(starfieldPosYAtom); - const setStarfieldRotY = useSetRecoilState(starfieldRotYAtom); - const setMiddleRingWobbleStrength = useSetRecoilState( middleRingWobbleStrengthAtom ); @@ -106,73 +90,164 @@ const InputHandler = () => { const setMiddleRingPosY = useSetRecoilState(middleRingPosYAtom); const setMiddleRingRotX = useSetRecoilState(middleRingRotXAtom); const setMiddleRingRotZ = useSetRecoilState(middleRingRotZAtom); - const setMiddleRingRotY = useSetRecoilState(middleRingRotYAtom); + const setMiddleRingAnimDuration = useSetRecoilState( + middleRingAnimDurationAtom + ); - const setLightPosY = useSetRecoilState(lightPosYAtom); - const setLightRotY = useSetRecoilState(lightRotYAtom); + const setSiteRotY = useSetRecoilState(siteRotYAtom); + const setSitePosY = useSetRecoilState(sitePosYAtom); - const moveCamera = useCallback( - (val: number) => { - setCamPosY((prev: number) => prev + val); - setLainPosY((prev: number) => prev - val); - setStarfieldPosY((prev: number) => prev - val); - setOrthoCamPosY((prev: number) => prev - val); - setGrayPlanePosY((prev: number) => prev - val); - setLightPosY((prev: number) => prev - val); + const setBigLetterOffSetXCoeff = useSetRecoilState(bigLetterOffsetXCoeffAtom); + const setBigLetterPosY = useSetRecoilState(bigLetterPosYAtom); + const setBigLetterPosX = useSetRecoilState(bigLetterPosXAtom); + const setBigHudText = useSetRecoilState(bigHudTextAtom); + + // hud toggler (animating hud from left to right) + const toggleHud = useCallback(() => { + setHudActive((prev: number) => Number(!prev)); + }, [setHudActive]); + + // ===================================== BIG TEXT ANIMATIONS ================================================ + + const animateBigText = useCallback( + (move: string) => { + // make current hud big text shrink + setBigLetterOffSetXCoeff(-1); setTimeout(() => { - setMiddleRingPosY((prev: number) => prev - (val - 0.2)); - }, 1300); + // animate it to new pos x/y + setBigLetterPosX( + (blue_orb_huds as BlueOrbHuds)[move.substr(2)]["big_text"][0] + ); + setBigLetterPosY( + (blue_orb_huds as BlueOrbHuds)[move.substr(2)]["big_text"][1] + ); + }, 400); setTimeout(() => { - setMiddleRingPosY((prev: number) => prev - 0.2); - }, 1800); + // change hud while its hidden + setCurrentHUDElement((blue_orb_huds as BlueOrbHuds)[move.substr(2)]); + // toggle it again to be shown in the new position + toggleHud(); + }, 500); + + setTimeout(() => { + setBigHudText((site_a as SiteData)[move]["node_name"]); + }, 1000); + + setTimeout(() => { + setBigLetterOffSetXCoeff(0); + }, 1200); }, [ - setCamPosY, - setLainPosY, - setStarfieldPosY, - setOrthoCamPosY, - setGrayPlanePosY, - setMiddleRingPosY, - setLightPosY, + setBigHudText, + setBigLetterOffSetXCoeff, + setBigLetterPosX, + setBigLetterPosY, + setCurrentHUDElement, + toggleHud, ] ); - const rotateCamera = useCallback( - (val: number) => { - setCamRotY((prev: number) => prev + val); - setStarfieldRotY((prev: number) => prev - val); - setOrthoCamRotY((prev: number) => prev - val); - setGrayPlaneRotY((prev: number) => prev - val); - setLightRotY((prev: number) => prev - val); + // ===================================== MIDDLE RING ANIMATIONS ================================================ + + const rotateMiddleRing = useCallback( + (direction: string) => { + setTimeout(() => { + setMiddleRingRotZ(direction === "left" ? 0.07 : -0.07); + }, 2300); setTimeout(() => { - setMiddleRingRotY((prev: number) => prev - 0.55); - }, 1800); + setMiddleRingRotZ(direction === "left" ? -0.03 : 0.03); + }, 3500); + + setTimeout(() => { + setMiddleRingRotZ(0); + }, 4500); }, - [ - setCamRotY, - setStarfieldRotY, - setOrthoCamRotY, - setGrayPlaneRotY, - setLightRotY, - setMiddleRingRotY, - ] + [setMiddleRingRotZ] ); - const getMove = (currentLoc: string, key: string): string => { - return (blue_orb_directions as SpriteDirections)[currentLoc][key]; - }; + const moveMiddleRingUp = useCallback(() => { + // make noise appear again + setTimeout(() => { + setMiddleRingNoise(0.06); + }, 800); - const getKeyCodeAssociation = (keyCode: number): string => { - return ({ - 40: "down", - 37: "left", - 38: "up", - 39: "right", - } as KeyCodeAssociations)[keyCode]; - }; + // disable rotation of the ring + setTimeout(() => { + setMiddleRingRotating(false); + }, 700); + + // set ring rotation on x axis to craete motion effect + setTimeout(() => { + setMiddleRingRotX(0.3); + }, 1500); + + // rotate it again, set ring noise to 0 + setTimeout(() => { + setMiddleRingRotX(-0.1); + setMiddleRingNoise(0); + }, 3500); + + // rotate it back AGAIN (holy fuk psx game) + setTimeout(() => { + setMiddleRingRotX(0.05); + }, 4500); + + // reset value, set noise to 0 + setTimeout(() => { + setMiddleRingRotX(0); + setMiddleRingRotating(true); + }, 4800); + + // enable noise again in about 11-12 secs + setTimeout(() => { + setMiddleRingNoise(0.03); + }, 11600); + }, [setMiddleRingNoise, setMiddleRingRotX, setMiddleRingRotating]); + + const moveMiddleRingDown = useCallback(() => { + // change noise to 0, make the ring bend downwards + setTimeout(() => { + setMiddleRingNoise(0); + setMiddleRingWobbleStrength(0.2); + }, 300); + + // disable rotation of the ring + setTimeout(() => { + setMiddleRingRotating(false); + }, 700); + + // make the ring bend upwards + setTimeout(() => { + setMiddleRingWobbleStrength(-0.3); + }, 1300); + + // reset the ring bend, set the rotation to slightly curve + // to replicate a motion effect (since its moving upwards) + // and enable rotation again + setTimeout(() => { + setMiddleRingWobbleStrength(0.0); + setMiddleRingRotX(-0.2); + setMiddleRingRotating(true); + }, 1500); + + // reset the rotation value to 0 + setTimeout(() => { + setMiddleRingRotX(0); + }, 2500); + + // enable noise again in about 8~ secs + setTimeout(() => { + setMiddleRingNoise(0.03); + }, 7800); + }, [ + setMiddleRingNoise, + setMiddleRingRotX, + setMiddleRingRotating, + setMiddleRingWobbleStrength, + ]); const setAnimationState = useCallback( (key: string) => { @@ -181,129 +256,58 @@ const InputHandler = () => { setLainMoveState(); setTimeout(() => { - moveCamera(1.5); + setSitePosY((prev: number) => prev + 1.5); }, 1300); - // make noise appear again - setTimeout(() => { - setMiddleRingNoise(0.06); - }, 800); - - // disable rotation of the ring - setTimeout(() => { - setMiddleRingRotating(false); - }, 700); - - // set ring rotation on x axis to craete motion effect - setTimeout(() => { - setMiddleRingRotX(0.3); - }, 1500); - - // rotate it again, set ring noise to 0 - setTimeout(() => { - setMiddleRingRotX(-0.1); - setMiddleRingNoise(0); - }, 3500); - - // rotate it back AGAIN (holy fuk psx game) - setTimeout(() => { - setMiddleRingRotX(0.05); - }, 4500); - - // reset value, set noise to 0 - setTimeout(() => { - setMiddleRingRotX(0); - setMiddleRingRotating(true); - }, 4800); - - // enable noise again in about 11-12 secs - setTimeout(() => { - setMiddleRingNoise(0.03); - }, 11600); - + moveMiddleRingDown(); break; case "left": setTimeout(() => { - rotateCamera(0.55); + setSiteRotY((prev: number) => prev + Math.PI / 4); }, 1100); - setTimeout(() => { - setMiddleRingRotZ(0.07); - }, 2300); - - setTimeout(() => { - setMiddleRingRotZ(-0.03); - }, 3500); - - setTimeout(() => { - setMiddleRingRotZ(0); - }, 4500); - setLainMoveState(); + + rotateMiddleRing("left"); break; case "up": setLainMoveState(); setTimeout(() => { - moveCamera(-1.5); - }, 1300); + setSitePosY((prev: number) => prev - 1.5); + // the middle ring stays in place, therefore we animate it + // in the same direction as the site, creating that illusion. - // change noise to 0, make the ring bend downwards - setTimeout(() => { - setMiddleRingNoise(0); - setMiddleRingWobbleStrength(0.2); - }, 300); - - // disable rotation of the ring - setTimeout(() => { - setMiddleRingRotating(false); - }, 700); - - // make the ring bend upwards - setTimeout(() => { - setMiddleRingWobbleStrength(-0.3); - }, 1300); - - // reset the ring bend, set the rotation to slightly curve - // to replicate a motion effect (since its moving upwards) - // and enable rotation again - setTimeout(() => { - setMiddleRingWobbleStrength(0.0); - setMiddleRingRotX(-0.2); - setMiddleRingRotating(true); - }, 1500); - - // reset the rotation value to 0 - setTimeout(() => { - setMiddleRingRotX(0); - }, 2500); - - // enable noise again in about 8~ secs - setTimeout(() => { - setMiddleRingNoise(0.03); - }, 7800); - - break; - case "right": - setTimeout(() => { - rotateCamera(-0.55); + // set the anim duration value to match that of the site's + setMiddleRingAnimDuration(1500); + // animate it after + setMiddleRingPosY((prev: number) => prev - 1.5); }, 1100); + // reset anim duration back to default setTimeout(() => { - setMiddleRingRotZ(-0.07); + setMiddleRingAnimDuration(500); }, 2300); setTimeout(() => { - setMiddleRingRotZ(0.03); - }, 3500); + setMiddleRingPosY((prev: number) => prev + 1.7); + }, 2400); setTimeout(() => { - setMiddleRingRotZ(0); - }, 4500); + setMiddleRingPosY((prev: number) => prev - 0.2); + }, 2400); + + moveMiddleRingUp(); + break; + case "right": + setTimeout(() => { + setSiteRotY((prev: number) => prev - Math.PI / 4); + }, 1100); setLainMoveState(); - break; + rotateMiddleRing("right"); + break; default: break; } @@ -321,23 +325,19 @@ const InputHandler = () => { }, (lain_animations as LainAnimations)[key]["duration"]); }, [ - moveCamera, - rotateCamera, setLainMoveState, setLainMoving, - setMiddleRingNoise, - setMiddleRingRotX, - setMiddleRingRotZ, - setMiddleRingRotating, - setMiddleRingWobbleStrength, + moveMiddleRingUp, + moveMiddleRingDown, + rotateMiddleRing, + setMiddleRingAnimDuration, + setMiddleRingPosY, + setSitePosY, + setSiteRotY, ] ); - const updateHUD = useCallback(() => { - setHudActive((prev: number) => Number(!prev)); - }, [setHudActive]); - - const moveDispatcher = useCallback( + const dispatchAction = useCallback( (move: string, key: string) => { switch (move[0]) { // do nothing / cant move @@ -348,20 +348,25 @@ const InputHandler = () => { // will be chosen. case "+": if (!spriteUpdateCooldown) { - // hide the hud - updateHUD(); + // get rid of the +, since its useless after code execution is already here + const filteredMove = move.substr(1); + + toggleHud(); // disable glow on current sprite setCurrentBlueOrb(""); setSpriteUpdateCooldown(true); setAnimationState(key); setTimeout(() => { - updateHUD(); + toggleHud(); // skip the "+" - setCurrentBlueOrb(move.substr(1)); + setCurrentBlueOrb(filteredMove); setCurrentHUDElement( - (blue_orb_huds as BlueOrbHuds)[move.substr(3)] + (blue_orb_huds as BlueOrbHuds)[filteredMove.substr(2)] ); }, (lain_animations as LainAnimations)[key]["duration"] + 200); + + animateBigText(filteredMove); + setTimeout(() => { setSpriteUpdateCooldown(false); }, 1000); @@ -372,57 +377,25 @@ const InputHandler = () => { if (!spriteUpdateCooldown) { setCurrentBlueOrb(move); setSpriteUpdateCooldown(true); - // toggle hud to go back in - updateHUD(); - - // make current hud big text shrink - setBigLetterOffSetXCoeff(-1); - - setTimeout(() => { - // animate it to new pos x/y - setBigLetterPosX( - (blue_orb_huds as BlueOrbHuds)[move.substr(2)]["big_text"][0] - ); - setBigLetterPosY( - (blue_orb_huds as BlueOrbHuds)[move.substr(2)]["big_text"][1] - ); - }, 400); - - setTimeout(() => { - // change hud while its hidden - setCurrentHUDElement( - (blue_orb_huds as BlueOrbHuds)[move.substr(2)] - ); - // toggle it again to be shown in the new position - updateHUD(); - }, 500); + toggleHud(); + animateBigText(move); setTimeout(() => { setSpriteUpdateCooldown(false); - setBigHudText((site_a as SiteData)[move]["node_name"]); }, 1000); - - - setTimeout(() => { - setBigLetterOffSetXCoeff(0); - }, 1200); } } }, [ setAnimationState, - updateHUD, + toggleHud, spriteUpdateCooldown, setCurrentHUDElement, setCurrentBlueOrb, + animateBigText, ] ); - const setBigLetterOffSetXCoeff = useSetRecoilState(bigLetterOffsetXCoeffAtom); - const setBigLetterPosY = useSetRecoilState(bigLetterPosYAtom); - const setBigLetterPosX = useSetRecoilState(bigLetterPosXAtom); - const setBigHudText = useSetRecoilState(bigHudTextAtom); - const handleKeyPress = useCallback( (event) => { const { keyCode } = event; @@ -432,10 +405,10 @@ const InputHandler = () => { if (key && !lainMoving) { const move = getMove(currentBlueOrb, key); - moveDispatcher(move, key); + dispatchAction(move, key); } }, - [lainMoving, currentBlueOrb, moveDispatcher, rotateCamera] + [lainMoving, currentBlueOrb, dispatchAction] ); useEffect(() => { diff --git a/src/components/MainScene/MainScene.tsx b/src/components/MainScene/MainScene.tsx index 141199b..43cd060 100644 --- a/src/components/MainScene/MainScene.tsx +++ b/src/components/MainScene/MainScene.tsx @@ -58,7 +58,6 @@ const MainScene = () => { position-z={3} position-y={cameraState.camPosY} rotation-y={cameraState.camRotY} - aspect={0.1} > diff --git a/src/components/MiddleRing/MiddleRing.tsx b/src/components/MiddleRing/MiddleRing.tsx index f1a5797..ac54444 100644 --- a/src/components/MiddleRing/MiddleRing.tsx +++ b/src/components/MiddleRing/MiddleRing.tsx @@ -4,59 +4,62 @@ import middleRingTexture from "../../static/sprites/middle_ring_tex.png"; import * as THREE from "three"; import { a, useSpring } from "@react-spring/three"; import { - middleRingNoiseAtom, - middleRingPosYAtom, - middleRingRotatingAtom, - middleRingRotXAtom, - middleRingRotYAtom, - middleRingRotZAtom, - middleRingWobbleStrengthAtom, + middleRingAnimDurationAtom, + middleRingNoiseAtom, + middleRingPosYAtom, + middleRingRotatingAtom, + middleRingRotXAtom, + middleRingRotYAtom, + middleRingRotZAtom, + middleRingWobbleStrengthAtom, } from "./MiddleRingAtom"; import { useRecoilValue } from "recoil"; const MiddleRing = () => { - const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture); + const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture); - const middleRingWobbleStrength = useRecoilValue(middleRingWobbleStrengthAtom); - const middleRingRotating = useRecoilValue(middleRingRotatingAtom); - const middleRingNoise = useRecoilValue(middleRingNoiseAtom); - const middleRingPosY = useRecoilValue(middleRingPosYAtom); - const middleRingRotX = useRecoilValue(middleRingRotXAtom); - const middleRingRotZ = useRecoilValue(middleRingRotZAtom); - const middleRingRotY = useRecoilValue(middleRingRotYAtom); + const middleRingWobbleStrength = useRecoilValue(middleRingWobbleStrengthAtom); + const middleRingRotating = useRecoilValue(middleRingRotatingAtom); + const middleRingNoise = useRecoilValue(middleRingNoiseAtom); + const middleRingPosY = useRecoilValue(middleRingPosYAtom); + const middleRingRotX = useRecoilValue(middleRingRotXAtom); + const middleRingRotZ = useRecoilValue(middleRingRotZAtom); + const middleRingRotY = useRecoilValue(middleRingRotYAtom); - const middleRingWobbleState = useSpring({ - middleRingWobbleStrength: middleRingWobbleStrength, - middleRingNoise: middleRingNoise, - config: { duration: 200 }, - }); + const middleRingAnimDuration = useRecoilValue(middleRingAnimDurationAtom); - const middleRingPosState = useSpring({ - middleRingPosY: middleRingPosY, - config: { duration: 500 }, - }); + const middleRingWobbleState = useSpring({ + middleRingWobbleStrength: middleRingWobbleStrength, + middleRingNoise: middleRingNoise, + config: { duration: 200 }, + }); - const middleRingRotState = useSpring({ - middleRingRotX: middleRingRotX, - middleRingRotZ: middleRingRotZ, - middleRingRotY: middleRingRotY, - config: { duration: 1000 }, - }); + const middleRingPosState = useSpring({ + middleRingPosY: middleRingPosY, + config: { duration: middleRingAnimDuration }, + }); - const uniforms = useMemo( - () => ({ - tex: { type: "t", value: middleRingTex }, - uTime: { value: 1.0 }, - wobbleStrength: { value: 0.0 }, - noiseAmp: { value: 0.03 }, - }), - [middleRingTex] - ); + const middleRingRotState = useSpring({ + middleRingRotX: middleRingRotX, + middleRingRotZ: middleRingRotZ, + middleRingRotY: middleRingRotY, + config: { duration: 1000 }, + }); - const middleRingMaterialRef = useRef(); - const middleRingRef = useRef(); + const uniforms = useMemo( + () => ({ + tex: { type: "t", value: middleRingTex }, + uTime: { value: 1.0 }, + wobbleStrength: { value: 0.0 }, + noiseAmp: { value: 0.03 }, + }), + [middleRingTex] + ); - const vertexShader = ` + const middleRingMaterialRef = useRef(); + const middleRingRef = useRef(); + + const vertexShader = ` varying vec2 vUv; uniform float uTime; uniform float wobbleStrength; @@ -187,7 +190,7 @@ const MiddleRing = () => { } `; - const fragmentShader = ` + const fragmentShader = ` uniform sampler2D tex; varying vec2 vUv; @@ -197,49 +200,49 @@ const MiddleRing = () => { } `; - const clock = new THREE.Clock(); + const clock = new THREE.Clock(); - useFrame(() => { - if (middleRingMaterialRef.current) { - middleRingMaterialRef.current.uniforms.uTime.value = clock.getElapsedTime(); - middleRingMaterialRef.current.uniforms.wobbleStrength.value = middleRingWobbleState.middleRingWobbleStrength.get(); - middleRingMaterialRef.current.uniforms.noiseAmp.value = middleRingWobbleState.middleRingNoise.get(); + useFrame(() => { + if (middleRingMaterialRef.current) { + middleRingMaterialRef.current.uniforms.uTime.value = clock.getElapsedTime(); + middleRingMaterialRef.current.uniforms.wobbleStrength.value = middleRingWobbleState.middleRingWobbleStrength.get(); + middleRingMaterialRef.current.uniforms.noiseAmp.value = middleRingWobbleState.middleRingNoise.get(); - middleRingMaterialRef.current.needsUpdate = true; - } - if (middleRingRotating) { - middleRingRef.current!.rotation.y += 0.05; - } - }); + middleRingMaterialRef.current.needsUpdate = true; + } + if (middleRingRotating) { + middleRingRef.current!.rotation.y += 0.05; + } + }); - return ( - - - - - - - ); + return ( + + + + + + + ); }; export default MiddleRing; diff --git a/src/components/MiddleRing/MiddleRingAtom.tsx b/src/components/MiddleRing/MiddleRingAtom.tsx index 48f7484..aa3eb97 100644 --- a/src/components/MiddleRing/MiddleRingAtom.tsx +++ b/src/components/MiddleRing/MiddleRingAtom.tsx @@ -35,3 +35,7 @@ export const middleRingRotYAtom = atom({ default: 0, }); +export const middleRingAnimDurationAtom = atom({ + key: "middleRingAnimDurationAtom", + default: 500, +}); diff --git a/src/components/Site/Site.tsx b/src/components/Site/Site.tsx index 3fa841e..2e187b6 100644 --- a/src/components/Site/Site.tsx +++ b/src/components/Site/Site.tsx @@ -6,6 +6,8 @@ import blue_orb_positions from "../../resources/blue_orb_positions.json"; import BlueOrb from "../BlueOrb/BlueOrb"; import { useRecoilValue } from "recoil"; import { currentBlueOrbAtom } from "../BlueOrb/CurrentBlueOrbAtom"; +import { useSpring, a } from "@react-spring/three"; +import {sitePosYAtom, siteRotYAtom} from "./SiteAtom"; type ImageTableIndices = { 1: string; @@ -50,19 +52,32 @@ type BlueOrbPositions = { }; export type SiteData = { - [id: string]: BlueOrbData -} + [id: string]: BlueOrbData; +}; const Site = memo(() => { const currentBlueOrb = useRecoilValue(currentBlueOrbAtom); + const siteRotY = useRecoilValue(siteRotYAtom); + const sitePosY = useRecoilValue(sitePosYAtom); + + const siteState = useSpring({ + siteRotY: siteRotY, + sitePosY: sitePosY, + config: { duration: 1200 }, + }); + return ( - <> - loading...}> - {/*distance between LEVELS is 1.5*/} + loading...}> + {/*distance between LEVELS is 1.5*/} + {Object.entries(level_y_values).map((level: [string, number]) => { return ( - + ); })} @@ -87,8 +102,8 @@ const Site = memo(() => { /> ); })} - - + + ); }); diff --git a/src/components/Site/SiteAtom.tsx b/src/components/Site/SiteAtom.tsx new file mode 100644 index 0000000..6065b74 --- /dev/null +++ b/src/components/Site/SiteAtom.tsx @@ -0,0 +1,11 @@ +import { atom } from "recoil"; + +export const siteRotYAtom = atom({ + key: "siteRotYatom", + default: 0, +}); + +export const sitePosYAtom = atom({ + key: "sitePosYAtom", + default: 0, +});