mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
got rid of yellow text manager, gota fix some bugs still
This commit is contained in:
parent
4f2298235a
commit
0258738867
10 changed files with 101 additions and 242 deletions
|
@ -41,7 +41,8 @@ const HUD = memo(() => {
|
|||
);
|
||||
const siteRotY = useStore((state) => state.siteRot[1]);
|
||||
const sitePosY = useStore((state) => state.sitePos[1]);
|
||||
const prevData = usePrevious({ siteRotY, sitePosY });
|
||||
const subscene = useStore((state) => state.mainSubscene);
|
||||
const prevData = usePrevious({ siteRotY, sitePosY, subscene });
|
||||
|
||||
// this part is imperative because it performs a lot better than having a toggleable spring.
|
||||
useFrame(() => {
|
||||
|
@ -87,7 +88,11 @@ const HUD = memo(() => {
|
|||
|
||||
useEffect(() => {
|
||||
if (activeRef.current !== undefined) {
|
||||
if (prevData?.siteRotY !== siteRotY || prevData?.sitePosY !== sitePosY) {
|
||||
if (
|
||||
prevData?.siteRotY !== siteRotY ||
|
||||
prevData?.sitePosY !== sitePosY ||
|
||||
subscene === "level_selection"
|
||||
) {
|
||||
activeRef.current = false;
|
||||
} else {
|
||||
const wasHidden = !activeRef.current;
|
||||
|
@ -145,6 +150,7 @@ const HUD = memo(() => {
|
|||
prevData?.siteRotY,
|
||||
sitePosY,
|
||||
siteRotY,
|
||||
subscene,
|
||||
]);
|
||||
|
||||
const longHudRef = useRef<THREE.Object3D>();
|
||||
|
|
|
@ -4,22 +4,23 @@ import * as THREE from "three";
|
|||
import { useLoader } from "react-three-fiber";
|
||||
import orange_font_json from "../../resources/font_data/big_font.json";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import React, { memo, useEffect, useMemo } from "react";
|
||||
import React, { memo, useEffect, useMemo, useState } from "react";
|
||||
import { useStore } from "../../store";
|
||||
import usePrevious from "../../hooks/usePrevious";
|
||||
|
||||
const BigLetter = memo(
|
||||
(props: {
|
||||
color: string;
|
||||
color?: string;
|
||||
letter: string;
|
||||
letterIdx: number;
|
||||
xOffset?: number;
|
||||
}) => {
|
||||
const [color, setColor] = useState("yellow");
|
||||
|
||||
const tex = useMemo(
|
||||
() =>
|
||||
props.color === "orange" || props.letterIdx === 0
|
||||
? orangeFont
|
||||
: yellowFont,
|
||||
[props.color, props.letterIdx]
|
||||
color === "orange" || props.letterIdx === 0 ? orangeFont : yellowFont,
|
||||
[color, props.letterIdx]
|
||||
);
|
||||
|
||||
const colorTexture: THREE.Texture = useLoader(THREE.TextureLoader, tex);
|
||||
|
@ -81,6 +82,7 @@ const BigLetter = memo(
|
|||
}, [letterData, lineYOffset]);
|
||||
|
||||
const activeNode = useStore((state) => state.activeNode);
|
||||
const subscene = useStore((state) => state.mainSubscene);
|
||||
|
||||
const [shrinkState, set] = useSpring(() => ({
|
||||
x: props.letterIdx + 0.3,
|
||||
|
@ -89,11 +91,17 @@ const BigLetter = memo(
|
|||
|
||||
useEffect(() => {
|
||||
set({ x: 0 });
|
||||
|
||||
if (subscene === "level_selection") {
|
||||
setColor("orange");
|
||||
} else {
|
||||
if (color === "orange") {
|
||||
setColor("yellow");
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
set({ x: props.letterIdx + 0.3 });
|
||||
}, 1200);
|
||||
}, [activeNode, props.letterIdx, set]);
|
||||
}, [activeNode, props.letterIdx, subscene, set, color]);
|
||||
|
||||
return (
|
||||
<a.mesh
|
||||
|
|
|
@ -3,23 +3,35 @@ import { useStore } from "../../store";
|
|||
import { a, useTrail } from "@react-spring/three";
|
||||
import BigLetter from "./BigLetter";
|
||||
import { getNodeHud } from "../../core/nodeSelector";
|
||||
import usePrevious from "../../hooks/usePrevious";
|
||||
|
||||
const YellowTextRenderer = (props: { visible?: boolean }) => {
|
||||
const visible = useStore((state) => state.bigTextVisible);
|
||||
const color = useStore((state) => state.bigTextColor);
|
||||
|
||||
const activeNode = useStore((state) => state.activeNode);
|
||||
const subscene = useStore((state) => state.mainSubscene);
|
||||
const prevData = usePrevious({ subscene });
|
||||
|
||||
const [text, setText] = useState(useStore.getState().bigText.split(""));
|
||||
const [text, setText] = useState(
|
||||
useStore.getState().activeNode.node_name.split("")
|
||||
);
|
||||
|
||||
const [trail, set] = useTrail(text.length, () => ({
|
||||
posX: useStore.getState().bigTextPos[0],
|
||||
posY: useStore.getState().bigTextPos[1],
|
||||
posX: getNodeHud(useStore.getState().activeNode.matrixIndices!).big_text[0],
|
||||
posY: getNodeHud(useStore.getState().activeNode.matrixIndices!).big_text[1],
|
||||
config: { duration: 280 },
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
if (prevData?.subscene !== "pause") {
|
||||
const hud = getNodeHud(activeNode.matrixIndices!);
|
||||
if (subscene === "level_selection") {
|
||||
setTimeout(() => {
|
||||
set({ posX: -0.02, posY: 0.005 });
|
||||
}, 400);
|
||||
|
||||
setTimeout(() => {
|
||||
setText("JumpTo".split(""));
|
||||
}, 1000);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
set({ posX: hud.big_text[0], posY: hud.big_text[1] });
|
||||
}, 400);
|
||||
|
@ -27,10 +39,12 @@ const YellowTextRenderer = (props: { visible?: boolean }) => {
|
|||
setTimeout(() => {
|
||||
setText(activeNode.node_name.split(""));
|
||||
}, 1000);
|
||||
}, [activeNode, set]);
|
||||
}
|
||||
}
|
||||
}, [activeNode, prevData?.subscene, set, subscene]);
|
||||
|
||||
return (
|
||||
<group position={[0, 0, 10]} visible={props.visible && visible}>
|
||||
<a.group position-z={10} visible={props.visible}>
|
||||
{trail.map(({ posX, posY }, idx) => (
|
||||
<a.group
|
||||
key={idx}
|
||||
|
@ -39,15 +53,10 @@ const YellowTextRenderer = (props: { visible?: boolean }) => {
|
|||
position-z={-8.7}
|
||||
scale={[0.04, 0.06, 0.04]}
|
||||
>
|
||||
<BigLetter
|
||||
color={color}
|
||||
letter={text[idx]}
|
||||
letterIdx={idx}
|
||||
key={idx}
|
||||
/>
|
||||
<BigLetter letter={text[idx]} letterIdx={idx} key={idx} />
|
||||
</a.group>
|
||||
))}
|
||||
</group>
|
||||
</a.group>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -17,10 +17,6 @@ const GameLoader = (props: StateManagerProps) => {
|
|||
// level setter
|
||||
// const setActiveLevel = useLevelStore((state) => state.setActiveLevel);
|
||||
|
||||
// big text setter
|
||||
const setBigTexPos = useStore((state) => state.setBigTextPos);
|
||||
const setBigText = useStore((state) => state.setBigText);
|
||||
|
||||
// site setter
|
||||
const setSiteRot = useStore((state) => state.setSiteRot);
|
||||
const setCurrentSite = useStore((state) => state.setActiveSite);
|
||||
|
|
|
@ -7,7 +7,6 @@ import SiteManager from "./MainSceneManagers/SiteManager";
|
|||
import LainManager from "./MainSceneManagers/LainManager";
|
||||
import MiddleRingManager from "./MainSceneManagers/MiddleRingManager";
|
||||
import SceneManager from "./GameManagers/SceneManager";
|
||||
import BigTextManager from "./MainSceneManagers/BigTextManager";
|
||||
import LevelManager from "./MainSceneManagers/LevelManager";
|
||||
import LevelSelectionManager from "./MainSceneManagers/LevelSelectionManager";
|
||||
import SubsceneManager from "./GameManagers/SubsceneManager";
|
||||
|
@ -142,7 +141,6 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
|
|||
<LainManager eventState={eventState!} />
|
||||
<MiddleRingManager eventState={eventState!} />
|
||||
<SceneManager eventState={eventState!} />
|
||||
<BigTextManager eventState={eventState!} />
|
||||
<LevelManager eventState={eventState!} />
|
||||
<LevelSelectionManager eventState={eventState!} />
|
||||
<SubsceneManager eventState={eventState!} />
|
||||
|
|
|
@ -1,173 +0,0 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { useStore } from "../../../store";
|
||||
import { NodeDataType } from "../../../components/MainScene/SyncedComponents/Site";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { HUDType } from "../../../components/MainScene/SyncedComponents/HUD";
|
||||
|
||||
const BigTextManager = (props: StateManagerProps) => {
|
||||
const setText = useStore((state) => state.setBigText);
|
||||
const setColor = useStore((state) => state.setBigTextColor);
|
||||
const setVisible = useStore((state) => state.setBigTextVisible);
|
||||
const setXOffset = useStore((state) => state.setBigTextXOffset);
|
||||
const setPos = useStore((state) => state.setBigTextPos);
|
||||
|
||||
const animateYellowTextWithMove = useCallback(
|
||||
(
|
||||
posXOffset: number,
|
||||
posYOffset: number,
|
||||
hud: HUDType,
|
||||
node: NodeDataType | "UNKNOWN",
|
||||
delay: number
|
||||
) => {
|
||||
// animate the letters to match that of site's
|
||||
// to create an illusion of not moving
|
||||
// setTimeout(() => {
|
||||
// addToTransformState(posXOffset, "posX");
|
||||
// addToTransformState(posYOffset, "posY");
|
||||
// }, delay);
|
||||
|
||||
setTimeout(() => {
|
||||
// make current hud big text shrink
|
||||
setXOffset(-1);
|
||||
}, 2500);
|
||||
|
||||
setTimeout(() => {
|
||||
// animate it to new pos x/y
|
||||
setPos(hud.big_text);
|
||||
// set new text according to the node name
|
||||
const targetText = node === "UNKNOWN" ? "Unknown" : node.node_name;
|
||||
|
||||
setText(targetText);
|
||||
}, 3000);
|
||||
|
||||
// unshrink text
|
||||
setTimeout(() => {
|
||||
setXOffset(0);
|
||||
}, 3900);
|
||||
},
|
||||
[setPos, setText, setXOffset]
|
||||
);
|
||||
|
||||
const initializeLevelSelection = useCallback(() => {
|
||||
setXOffset(-1);
|
||||
|
||||
setTimeout(() => {
|
||||
setPos([-0.02, 0.005, -8.7]);
|
||||
}, 400);
|
||||
|
||||
setTimeout(() => {
|
||||
setText("Jump To");
|
||||
setColor("orange");
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
setXOffset(0);
|
||||
}, 1200);
|
||||
}, [setColor, setPos, setText, setXOffset]);
|
||||
|
||||
const levelSelectionBack = useCallback(
|
||||
(node: NodeDataType, hud: HUDType) => {
|
||||
setXOffset(-1);
|
||||
|
||||
setTimeout(() => {
|
||||
setPos(hud.big_text);
|
||||
}, 400);
|
||||
|
||||
setTimeout(() => {
|
||||
setColor("yellow");
|
||||
setText(node.node_name);
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
setXOffset(0);
|
||||
}, 1200);
|
||||
},
|
||||
[setColor, setPos, setText, setXOffset]
|
||||
);
|
||||
|
||||
const toggleVisibleAfterLevelSelect = useCallback(
|
||||
(node: NodeDataType | "UNKNOWN", hud: HUDType) => {
|
||||
setVisible(false);
|
||||
|
||||
setTimeout(() => {
|
||||
setPos(hud.big_text);
|
||||
setColor("yellow");
|
||||
const targetText = node === "UNKNOWN" ? "Unknown" : node.node_name;
|
||||
|
||||
setText(targetText);
|
||||
}, 400);
|
||||
|
||||
setTimeout(() => {
|
||||
setVisible(true);
|
||||
}, 3900);
|
||||
},
|
||||
[setColor, setPos, setText, setVisible]
|
||||
);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(eventState: {
|
||||
event: string;
|
||||
hud: HUDType;
|
||||
node: NodeDataType;
|
||||
level: string;
|
||||
}) => {
|
||||
switch (eventState.event) {
|
||||
case "site_up":
|
||||
return {
|
||||
action: animateYellowTextWithMove,
|
||||
value: [0, -1.5, eventState.hud, eventState.node, 1300],
|
||||
};
|
||||
case "site_down":
|
||||
return {
|
||||
action: animateYellowTextWithMove,
|
||||
value: [0, 1.5, eventState.hud, eventState.node, 1300],
|
||||
};
|
||||
case "site_left":
|
||||
return {
|
||||
action: animateYellowTextWithMove,
|
||||
value: [Math.PI / 4, 0, eventState.hud, eventState.node, 1100],
|
||||
};
|
||||
case "site_right":
|
||||
return {
|
||||
action: animateYellowTextWithMove,
|
||||
value: [-Math.PI / 4, 0, eventState.hud, eventState.node, 1100],
|
||||
};
|
||||
case "level_selection_back":
|
||||
return {
|
||||
action: levelSelectionBack,
|
||||
value: [eventState.node, eventState.hud],
|
||||
};
|
||||
case "toggle_level_selection":
|
||||
return {
|
||||
action: initializeLevelSelection,
|
||||
};
|
||||
case "select_level_up":
|
||||
case "select_level_down":
|
||||
return {
|
||||
action: toggleVisibleAfterLevelSelect,
|
||||
value: [eventState.node, eventState.hud],
|
||||
};
|
||||
}
|
||||
},
|
||||
[
|
||||
animateYellowTextWithMove,
|
||||
initializeLevelSelection,
|
||||
levelSelectionBack,
|
||||
toggleVisibleAfterLevelSelect,
|
||||
]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.eventState) {
|
||||
const dispatchedObject = dispatchObject(props.eventState);
|
||||
|
||||
if (dispatchedObject) {
|
||||
(dispatchedObject.action as any).apply(null, dispatchedObject.value);
|
||||
}
|
||||
}
|
||||
}, [animateYellowTextWithMove, props.eventState, dispatchObject]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default BigTextManager;
|
|
@ -46,7 +46,7 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
nodeMatrixIndices = selectedNodeData.newNodeMatrixIndices;
|
||||
siteRotY = selectedNodeData.newSiteRotY;
|
||||
sitePosY = selectedNodeData.newSitePosY;
|
||||
level = selectedNodeData.newLevel;
|
||||
level = selectedNodeData.newLevel!;
|
||||
activeHud = selectedNodeData.newActiveHud;
|
||||
}
|
||||
|
||||
|
@ -155,11 +155,11 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
selectedLevel < level ? "select_level_down" : "select_level_up";
|
||||
return {
|
||||
event: event,
|
||||
nodeMatrixIndices: selectedNodeData.nodeMatrixIndices,
|
||||
sitePosY: -selectedNodeData.sitePosY!,
|
||||
level: selectedLevel.toString().padStart(2, "0"),
|
||||
activeNodeId: selectedNodeData.node,
|
||||
activeHud: selectedNodeData.newActiveHud,
|
||||
nodeMatrixIndices: selectedNodeData.newNodeMatrixIndices,
|
||||
sitePosY: -selectedNodeData.newSitePosY,
|
||||
node: selectedNodeData.node,
|
||||
hud: selectedNodeData.activeHud,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -442,11 +442,11 @@ const nodeSelector = (context: NodeSelectorContext) => {
|
|||
if (newNodeData) {
|
||||
return {
|
||||
node: newNodeData.node,
|
||||
newNodeMatrixIndices: newNodeData.newNodeMatrixIndices,
|
||||
newActiveHud: newNodeData.newNodeHud,
|
||||
newSiteRotY: context.siteRotY,
|
||||
newLevel: newNodeData.newLevel,
|
||||
newSitePosY: newNodeData.newSitePosY,
|
||||
nodeMatrixIndices: newNodeData.newNodeMatrixIndices,
|
||||
activeHud: newNodeData.newNodeHud,
|
||||
siteRotY: context.siteRotY,
|
||||
level: newNodeData.newLevel,
|
||||
sitePosY: newNodeData.newSitePosY,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
36
src/core/utils/bigTextUtils.ts
Normal file
36
src/core/utils/bigTextUtils.ts
Normal file
|
@ -0,0 +1,36 @@
|
|||
export const calculatePosAfterMove = (
|
||||
currentData: {
|
||||
siteRotY: number;
|
||||
sitePosY: number;
|
||||
matrixIndices: { rowIdx: number; colIdx: number; matrixIdx: number };
|
||||
},
|
||||
prevData: { siteRotY: number; sitePosY: number }
|
||||
) => {
|
||||
if (currentData.sitePosY > prevData.sitePosY) {
|
||||
// todo
|
||||
// instead of 1 i need to calculate the amplifier value
|
||||
return { posX: 0, posY: 1 * 1 };
|
||||
} else if (currentData.sitePosY < prevData.sitePosY) {
|
||||
return { posX: 0, posY: -1 * 1 };
|
||||
} else {
|
||||
if (
|
||||
currentData.matrixIndices.colIdx === 0 ||
|
||||
currentData.matrixIndices.colIdx === 3
|
||||
) {
|
||||
if (currentData.siteRotY > prevData.siteRotY) {
|
||||
return { posX: 1.5, posY: 0 };
|
||||
} else if (currentData.siteRotY < prevData.siteRotY) {
|
||||
return { posX: -1.5, posY: 0 };
|
||||
}
|
||||
} else if (
|
||||
currentData.matrixIndices.colIdx === 1 ||
|
||||
currentData.matrixIndices.colIdx === 2
|
||||
) {
|
||||
if (currentData.siteRotY > prevData.siteRotY) {
|
||||
return { posX: 0.5, posY: 0 };
|
||||
} else if (currentData.siteRotY < prevData.siteRotY) {
|
||||
return { posX: -0.5, posY: 0 };
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
21
src/store.ts
21
src/store.ts
|
@ -34,12 +34,6 @@ type State = {
|
|||
|
||||
intro: boolean;
|
||||
|
||||
bigText: string;
|
||||
bigTextVisible: boolean;
|
||||
bigTextColor: "yellow" | "orange";
|
||||
bigTextPos: number[];
|
||||
bigTextXOffset: 0 | -1;
|
||||
|
||||
hud: HUDType;
|
||||
hudActive: boolean;
|
||||
|
||||
|
@ -148,13 +142,6 @@ export const useStore = create(
|
|||
// whether or not to play the intro anim
|
||||
intro: true,
|
||||
|
||||
// big text (the one that displays node names)
|
||||
bigText: "Tda028",
|
||||
bigTextVisible: true,
|
||||
bigTextColor: "yellow",
|
||||
bigTextPos: [-0.35, 0.23, -8.7],
|
||||
bigTextXOffset: 0,
|
||||
|
||||
// hud
|
||||
hud: {
|
||||
mirrored: 0,
|
||||
|
@ -313,14 +300,6 @@ export const useStore = create(
|
|||
// intro setters
|
||||
setIntro: (to: boolean) => set(() => ({ intro: to })),
|
||||
|
||||
// big text setters
|
||||
setBigText: (to: string) => set(() => ({ bigText: to })),
|
||||
setBigTextVisible: (to: boolean) => set(() => ({ bigTextVisible: to })),
|
||||
setBigTextColor: (to: "yellow" | "orange") =>
|
||||
set(() => ({ bigTextColor: to })),
|
||||
setBigTextPos: (to: number[]) => set(() => ({ bigTextPos: to })),
|
||||
setBigTextXOffset: (to: 0 | -1) => set(() => ({ bigTextXOffset: to })),
|
||||
|
||||
// hud setters
|
||||
setHud: (to: HUDType) => set(() => ({ hud: to })),
|
||||
toggleHudActive: () => set((state) => ({ hudActive: !state.hudActive })),
|
||||
|
|
Loading…
Reference in a new issue