mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
refactoring inputhandler
This commit is contained in:
parent
ba8abe69b9
commit
a94f701d3e
6 changed files with 336 additions and 331 deletions
|
@ -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,84 +90,85 @@ 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 getKeyCodeAssociation = (keyCode: number): string => {
|
||||
return ({
|
||||
40: "down",
|
||||
37: "left",
|
||||
38: "up",
|
||||
39: "right",
|
||||
} as KeyCodeAssociations)[keyCode];
|
||||
};
|
||||
|
||||
const setAnimationState = useCallback(
|
||||
(key: string) => {
|
||||
switch (key) {
|
||||
case "down":
|
||||
setLainMoveState(<LainMoveDown />);
|
||||
|
||||
setTimeout(() => {
|
||||
moveCamera(1.5);
|
||||
}, 1300);
|
||||
|
||||
const moveMiddleRingUp = useCallback(() => {
|
||||
// make noise appear again
|
||||
setTimeout(() => {
|
||||
setMiddleRingNoise(0.06);
|
||||
|
@ -220,34 +205,9 @@ const InputHandler = () => {
|
|||
setTimeout(() => {
|
||||
setMiddleRingNoise(0.03);
|
||||
}, 11600);
|
||||
}, [setMiddleRingNoise, setMiddleRingRotX, setMiddleRingRotating]);
|
||||
|
||||
break;
|
||||
case "left":
|
||||
setTimeout(() => {
|
||||
rotateCamera(0.55);
|
||||
}, 1100);
|
||||
|
||||
setTimeout(() => {
|
||||
setMiddleRingRotZ(0.07);
|
||||
}, 2300);
|
||||
|
||||
setTimeout(() => {
|
||||
setMiddleRingRotZ(-0.03);
|
||||
}, 3500);
|
||||
|
||||
setTimeout(() => {
|
||||
setMiddleRingRotZ(0);
|
||||
}, 4500);
|
||||
|
||||
setLainMoveState(<LainMoveLeft />);
|
||||
break;
|
||||
case "up":
|
||||
setLainMoveState(<LainMoveUp />);
|
||||
|
||||
setTimeout(() => {
|
||||
moveCamera(-1.5);
|
||||
}, 1300);
|
||||
|
||||
const moveMiddleRingDown = useCallback(() => {
|
||||
// change noise to 0, make the ring bend downwards
|
||||
setTimeout(() => {
|
||||
setMiddleRingNoise(0);
|
||||
|
@ -282,28 +242,72 @@ const InputHandler = () => {
|
|||
setTimeout(() => {
|
||||
setMiddleRingNoise(0.03);
|
||||
}, 7800);
|
||||
}, [
|
||||
setMiddleRingNoise,
|
||||
setMiddleRingRotX,
|
||||
setMiddleRingRotating,
|
||||
setMiddleRingWobbleStrength,
|
||||
]);
|
||||
|
||||
const setAnimationState = useCallback(
|
||||
(key: string) => {
|
||||
switch (key) {
|
||||
case "down":
|
||||
setLainMoveState(<LainMoveDown />);
|
||||
|
||||
break;
|
||||
case "right":
|
||||
setTimeout(() => {
|
||||
rotateCamera(-0.55);
|
||||
setSitePosY((prev: number) => prev + 1.5);
|
||||
}, 1300);
|
||||
|
||||
moveMiddleRingDown();
|
||||
break;
|
||||
case "left":
|
||||
setTimeout(() => {
|
||||
setSiteRotY((prev: number) => prev + Math.PI / 4);
|
||||
}, 1100);
|
||||
|
||||
setLainMoveState(<LainMoveLeft />);
|
||||
|
||||
rotateMiddleRing("left");
|
||||
break;
|
||||
case "up":
|
||||
setLainMoveState(<LainMoveUp />);
|
||||
|
||||
setTimeout(() => {
|
||||
setMiddleRingRotZ(-0.07);
|
||||
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.
|
||||
|
||||
// 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(() => {
|
||||
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(<LainMoveRight />);
|
||||
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(() => {
|
||||
|
|
|
@ -58,7 +58,6 @@ const MainScene = () => {
|
|||
position-z={3}
|
||||
position-y={cameraState.camPosY}
|
||||
rotation-y={cameraState.camRotY}
|
||||
aspect={0.1}
|
||||
>
|
||||
<Suspense fallback={null}>
|
||||
<MainSceneIntro />
|
||||
|
|
|
@ -4,6 +4,7 @@ import middleRingTexture from "../../static/sprites/middle_ring_tex.png";
|
|||
import * as THREE from "three";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import {
|
||||
middleRingAnimDurationAtom,
|
||||
middleRingNoiseAtom,
|
||||
middleRingPosYAtom,
|
||||
middleRingRotatingAtom,
|
||||
|
@ -25,6 +26,8 @@ const MiddleRing = () => {
|
|||
const middleRingRotZ = useRecoilValue(middleRingRotZAtom);
|
||||
const middleRingRotY = useRecoilValue(middleRingRotYAtom);
|
||||
|
||||
const middleRingAnimDuration = useRecoilValue(middleRingAnimDurationAtom);
|
||||
|
||||
const middleRingWobbleState = useSpring({
|
||||
middleRingWobbleStrength: middleRingWobbleStrength,
|
||||
middleRingNoise: middleRingNoise,
|
||||
|
@ -33,7 +36,7 @@ const MiddleRing = () => {
|
|||
|
||||
const middleRingPosState = useSpring({
|
||||
middleRingPosY: middleRingPosY,
|
||||
config: { duration: 500 },
|
||||
config: { duration: middleRingAnimDuration },
|
||||
});
|
||||
|
||||
const middleRingRotState = useSpring({
|
||||
|
|
|
@ -35,3 +35,7 @@ export const middleRingRotYAtom = atom({
|
|||
default: 0,
|
||||
});
|
||||
|
||||
export const middleRingAnimDurationAtom = atom({
|
||||
key: "middleRingAnimDurationAtom",
|
||||
default: 500,
|
||||
});
|
||||
|
|
|
@ -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 (
|
||||
<>
|
||||
<Suspense fallback={<>loading...</>}>
|
||||
{/*distance between LEVELS is 1.5*/}
|
||||
<a.group rotation-y={siteState.siteRotY} position-y={siteState.sitePosY}>
|
||||
{Object.entries(level_y_values).map((level: [string, number]) => {
|
||||
return (
|
||||
<Level levelPosY={level[1]} key={level[1]} level={(level[0]).toString()} />
|
||||
<Level
|
||||
levelPosY={level[1]}
|
||||
key={level[1]}
|
||||
level={level[0].toString()}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
|
@ -87,8 +102,8 @@ const Site = memo(() => {
|
|||
/>
|
||||
);
|
||||
})}
|
||||
</a.group>
|
||||
</Suspense>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
11
src/components/Site/SiteAtom.tsx
Normal file
11
src/components/Site/SiteAtom.tsx
Normal file
|
@ -0,0 +1,11 @@
|
|||
import { atom } from "recoil";
|
||||
|
||||
export const siteRotYAtom = atom({
|
||||
key: "siteRotYatom",
|
||||
default: 0,
|
||||
});
|
||||
|
||||
export const sitePosYAtom = atom({
|
||||
key: "sitePosYAtom",
|
||||
default: 0,
|
||||
});
|
Loading…
Reference in a new issue