mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
site change bug fix and some additions to it
This commit is contained in:
parent
3e9f0ced1b
commit
cb5cf6a1c1
9 changed files with 80 additions and 52 deletions
|
@ -54,6 +54,9 @@ const Pause = (props: { visible: boolean }) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
setAnimation(false);
|
||||||
|
setIntro(true);
|
||||||
|
setShowActiveComponent(false);
|
||||||
if (props.visible) {
|
if (props.visible) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setAnimation(true);
|
setAnimation(true);
|
||||||
|
@ -63,20 +66,10 @@ const Pause = (props: { visible: boolean }) => {
|
||||||
setIntro(false);
|
setIntro(false);
|
||||||
}, 3500);
|
}, 3500);
|
||||||
}
|
}
|
||||||
return () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
setAnimation(false);
|
|
||||||
setIntro(true);
|
|
||||||
setShowActiveComponent(false);
|
|
||||||
}, 700);
|
|
||||||
};
|
|
||||||
}, [props.visible]);
|
}, [props.visible]);
|
||||||
|
|
||||||
return animation ? (
|
return animation ? (
|
||||||
<group
|
<group position={[-0.85, -0.7, 0]} scale={[0.85, 0.85, 0]}>
|
||||||
position={[-0.85, -0.7, 0]}
|
|
||||||
scale={[0.85, 0.85, 0]}
|
|
||||||
>
|
|
||||||
{[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) =>
|
{[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) =>
|
||||||
[0, 1, 2, 3, 4, 5, 6].map((col: number) => {
|
[0, 1, 2, 3, 4, 5, 6].map((col: number) => {
|
||||||
if (rowIdx === 5 && col > 0 && col < 5) {
|
if (rowIdx === 5 && col > 0 && col < 5) {
|
||||||
|
|
|
@ -30,6 +30,7 @@ export type SiteType = {
|
||||||
|
|
||||||
const Site = () => {
|
const Site = () => {
|
||||||
const siteTransformState = useSiteStore((state) => state.transformState);
|
const siteTransformState = useSiteStore((state) => state.transformState);
|
||||||
|
const introAnim = useSiteStore((state) => state.introAnim);
|
||||||
|
|
||||||
const siteState = useSpring({
|
const siteState = useSpring({
|
||||||
siteRotY: siteTransformState.rotY,
|
siteRotY: siteTransformState.rotY,
|
||||||
|
@ -41,7 +42,7 @@ const Site = () => {
|
||||||
const introSiteState = useSpring({
|
const introSiteState = useSpring({
|
||||||
posZ: 0,
|
posZ: 0,
|
||||||
rotX: 0,
|
rotX: 0,
|
||||||
from: { posZ: -7, rotX: Math.PI / 2 },
|
from: { posZ: introAnim ? -7 : 0, rotX: introAnim ? Math.PI / 2 : 0 },
|
||||||
config: { duration: 3900 },
|
config: { duration: 3900 },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -56,8 +57,8 @@ const Site = () => {
|
||||||
rotation-y={siteState.siteRotY}
|
rotation-y={siteState.siteRotY}
|
||||||
position-y={siteState.sitePosY}
|
position-y={siteState.sitePosY}
|
||||||
>
|
>
|
||||||
{/*<ActiveLevelNodes />*/}
|
<ActiveLevelNodes />
|
||||||
{/*<InactiveLevelNodes />*/}
|
<InactiveLevelNodes />
|
||||||
<Rings />
|
<Rings />
|
||||||
</a.group>
|
</a.group>
|
||||||
</a.group>
|
</a.group>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { useNodeStore } from "../../store";
|
import { useNodeStore, useSiteSaveStore } from "../../store";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
|
|
||||||
const NodeManager = (props: StateManagerProps) => {
|
const NodeManager = (props: StateManagerProps) => {
|
||||||
|
@ -7,6 +7,8 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
const setNodeMatrixIndices = useNodeStore(
|
const setNodeMatrixIndices = useNodeStore(
|
||||||
(state) => state.setNodeMatrixIndices
|
(state) => state.setNodeMatrixIndices
|
||||||
);
|
);
|
||||||
|
const siteASaveState = useSiteSaveStore((state) => state.a);
|
||||||
|
const siteBSaveState = useSiteSaveStore((state) => state.b);
|
||||||
|
|
||||||
const animateActiveNodeThrow = useCallback(
|
const animateActiveNodeThrow = useCallback(
|
||||||
(siteRotY: number) => {
|
(siteRotY: number) => {
|
||||||
|
@ -53,14 +55,14 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
|
|
||||||
const updateActiveNode = useCallback(
|
const updateActiveNode = useCallback(
|
||||||
(
|
(
|
||||||
delay: number,
|
|
||||||
isMoving: boolean,
|
|
||||||
newActiveNodeId: string,
|
newActiveNodeId: string,
|
||||||
newNodeMatrixIndices: {
|
newNodeMatrixIndices: {
|
||||||
matrixIdx: number;
|
matrixIdx: number;
|
||||||
rowIdx: number;
|
rowIdx: number;
|
||||||
colIdx: number;
|
colIdx: number;
|
||||||
}
|
},
|
||||||
|
isMoving?: boolean,
|
||||||
|
delay?: number
|
||||||
) => {
|
) => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveNodeState(newActiveNodeId, "id");
|
setActiveNodeState(newActiveNodeId, "id");
|
||||||
|
@ -70,6 +72,15 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
[setActiveNodeState, setNodeMatrixIndices]
|
[setActiveNodeState, setNodeMatrixIndices]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const setAfterChangeSite = useCallback(
|
||||||
|
(newSite: string) => {
|
||||||
|
const siteToLoad = newSite === "a" ? siteASaveState : siteBSaveState;
|
||||||
|
setActiveNodeState(siteToLoad.activeNodeId, "id");
|
||||||
|
setNodeMatrixIndices(siteToLoad.nodeMatrixIndices);
|
||||||
|
},
|
||||||
|
[setActiveNodeState, setNodeMatrixIndices, siteASaveState, siteBSaveState]
|
||||||
|
);
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
const dispatchObject = useCallback(
|
||||||
(
|
(
|
||||||
event: string,
|
event: string,
|
||||||
|
@ -79,7 +90,8 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
rowIdx: number;
|
rowIdx: number;
|
||||||
colIdx: number;
|
colIdx: number;
|
||||||
},
|
},
|
||||||
newSiteRotY: number
|
newSiteRotY: number,
|
||||||
|
newSite: string
|
||||||
) => {
|
) => {
|
||||||
switch (event) {
|
switch (event) {
|
||||||
case "site_up":
|
case "site_up":
|
||||||
|
@ -90,12 +102,17 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
case "select_level_down":
|
case "select_level_down":
|
||||||
return {
|
return {
|
||||||
action: updateActiveNode,
|
action: updateActiveNode,
|
||||||
value: [3900, true, newActiveNodeId, newNodeMatrixIndices],
|
value: [newActiveNodeId, newNodeMatrixIndices, true, 3900],
|
||||||
};
|
};
|
||||||
case "change_node":
|
case "change_node":
|
||||||
return {
|
return {
|
||||||
action: updateActiveNode,
|
action: updateActiveNode,
|
||||||
value: [0, false, newActiveNodeId, newNodeMatrixIndices],
|
value: [newActiveNodeId, newNodeMatrixIndices],
|
||||||
|
};
|
||||||
|
case "pause_change_select":
|
||||||
|
return {
|
||||||
|
action: setAfterChangeSite,
|
||||||
|
value: [newSite],
|
||||||
};
|
};
|
||||||
case "throw_node_media":
|
case "throw_node_media":
|
||||||
case "throw_node_gate":
|
case "throw_node_gate":
|
||||||
|
@ -115,17 +132,23 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
const eventAction = props.eventState.event;
|
const eventAction = props.eventState.event;
|
||||||
const newActiveNodeId = props.eventState.newActiveNodeId;
|
const newActiveNodeId = props.eventState.newActiveNodeId;
|
||||||
const newNodeMatrixIndices = props.eventState.newNodeMatrixIndices;
|
const newNodeMatrixIndices = props.eventState.newNodeMatrixIndices;
|
||||||
|
|
||||||
const newSiteRotY = props.eventState.newSiteRotY;
|
const newSiteRotY = props.eventState.newSiteRotY;
|
||||||
|
const newSite = props.eventState.newSite;
|
||||||
|
|
||||||
const dispatchedObject = dispatchObject(
|
const dispatchedObject = dispatchObject(
|
||||||
eventAction,
|
eventAction,
|
||||||
newActiveNodeId,
|
newActiveNodeId,
|
||||||
newNodeMatrixIndices,
|
newNodeMatrixIndices,
|
||||||
newSiteRotY
|
newSiteRotY,
|
||||||
|
newSite
|
||||||
);
|
);
|
||||||
|
|
||||||
if (dispatchedObject) {
|
if (dispatchedObject) {
|
||||||
dispatchedObject.action.apply(null, dispatchedObject.value as never);
|
(dispatchedObject.action as any).apply(
|
||||||
|
null,
|
||||||
|
dispatchedObject.value as never
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [props.eventState, setActiveNodeState, dispatchObject]);
|
}, [props.eventState, setActiveNodeState, dispatchObject]);
|
||||||
|
|
|
@ -31,6 +31,12 @@ const SceneManager = (props: StateManagerProps) => {
|
||||||
value: "main",
|
value: "main",
|
||||||
delay: 6000,
|
delay: 6000,
|
||||||
};
|
};
|
||||||
|
case "pause_change_select":
|
||||||
|
return {
|
||||||
|
action: setScene,
|
||||||
|
value: "change_disc",
|
||||||
|
delay: 0,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[setScene]
|
[setScene]
|
||||||
|
|
|
@ -5,6 +5,7 @@ import { StateManagerProps } from "./EventManager";
|
||||||
const SiteManager = (props: StateManagerProps) => {
|
const SiteManager = (props: StateManagerProps) => {
|
||||||
const setTransformState = useSiteStore((state) => state.setTransformState);
|
const setTransformState = useSiteStore((state) => state.setTransformState);
|
||||||
const setCurrentSite = useSiteStore((state) => state.setCurrentSite);
|
const setCurrentSite = useSiteStore((state) => state.setCurrentSite);
|
||||||
|
const setIntroAnim = useSiteStore((state) => state.setIntroAnim);
|
||||||
|
|
||||||
const setSiteSaveState = useSiteSaveStore((state) => state.setSiteSaveState);
|
const setSiteSaveState = useSiteSaveStore((state) => state.setSiteSaveState);
|
||||||
const siteASaveState = useSiteSaveStore((state) => state.a);
|
const siteASaveState = useSiteSaveStore((state) => state.a);
|
||||||
|
@ -23,6 +24,9 @@ const SiteManager = (props: StateManagerProps) => {
|
||||||
sitePosY: number,
|
sitePosY: number,
|
||||||
newSite: string
|
newSite: string
|
||||||
) => {
|
) => {
|
||||||
|
setTransformState(0, "rotX");
|
||||||
|
setIntroAnim(true);
|
||||||
|
|
||||||
setSiteSaveState(currentSite, {
|
setSiteSaveState(currentSite, {
|
||||||
activeNodeId: activeNodeId,
|
activeNodeId: activeNodeId,
|
||||||
nodeMatrixIndices: activeNodeMatrixIndices,
|
nodeMatrixIndices: activeNodeMatrixIndices,
|
||||||
|
@ -33,13 +37,12 @@ const SiteManager = (props: StateManagerProps) => {
|
||||||
const siteToLoad = newSite === "a" ? siteASaveState : siteBSaveState;
|
const siteToLoad = newSite === "a" ? siteASaveState : siteBSaveState;
|
||||||
|
|
||||||
setCurrentSite(newSite);
|
setCurrentSite(newSite);
|
||||||
setTransformState(siteToLoad.rotY, "rotY");
|
setTransformState(siteToLoad.siteRotY, "rotY");
|
||||||
setTransformState(siteToLoad.posY, "posY");
|
setTransformState(siteToLoad.sitePosY, "posY");
|
||||||
|
|
||||||
console.log(newSite)
|
|
||||||
},
|
},
|
||||||
[
|
[
|
||||||
setCurrentSite,
|
setCurrentSite,
|
||||||
|
setIntroAnim,
|
||||||
setSiteSaveState,
|
setSiteSaveState,
|
||||||
setTransformState,
|
setTransformState,
|
||||||
siteASaveState,
|
siteASaveState,
|
||||||
|
@ -103,9 +106,14 @@ const SiteManager = (props: StateManagerProps) => {
|
||||||
],
|
],
|
||||||
actionDelay: 0,
|
actionDelay: 0,
|
||||||
};
|
};
|
||||||
|
case "throw_node_media":
|
||||||
|
case "throw_node_gate":
|
||||||
|
case "throw_node_sskn":
|
||||||
|
case "throw_node_tak":
|
||||||
|
return { action: setIntroAnim, value: [false], actionDelay: 0 };
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[changeSite, setTransformState]
|
[changeSite, setIntroAnim, setTransformState]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -30,6 +30,7 @@ const SubsceneManager = (props: StateManagerProps) => {
|
||||||
delay: 0,
|
delay: 0,
|
||||||
};
|
};
|
||||||
case "pause_exit_select":
|
case "pause_exit_select":
|
||||||
|
case "pause_change_select":
|
||||||
return {
|
return {
|
||||||
action: setMainSubscene,
|
action: setMainSubscene,
|
||||||
value: "site",
|
value: "site",
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import node_matrices from "../resources/node_matrices.json";
|
|
||||||
import site_a from "../resources/site_a.json";
|
import site_a from "../resources/site_a.json";
|
||||||
import site_b from "../resources/site_b.json";
|
import site_b from "../resources/site_b.json";
|
||||||
import nodeSelector, { getNodeHudId, getNodeId } from "./nodeSelector";
|
import nodeSelector, { getNodeHudId, getNodeId } from "./nodeSelector";
|
||||||
|
@ -193,7 +192,7 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
event: `pause_${activePauseComponent}_select`,
|
event: `pause_${activePauseComponent}_select`,
|
||||||
currentSite: currentSite,
|
currentSite: currentSite,
|
||||||
newSitePosY: newSitePosY,
|
newSitePosY: newSitePosY,
|
||||||
newtSiteRotY: newSiteRotY,
|
newSiteRotY: newSiteRotY,
|
||||||
activeNodeId: newActiveNodeId,
|
activeNodeId: newActiveNodeId,
|
||||||
activeNodeMatrixIndices: nodeMatrixIndices,
|
activeNodeMatrixIndices: nodeMatrixIndices,
|
||||||
newSite: currentSite === "a" ? "b" : "a",
|
newSite: currentSite === "a" ? "b" : "a",
|
||||||
|
|
|
@ -1,29 +1,23 @@
|
||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
|
import { useSceneStore } from "../store";
|
||||||
import lof from "../../src/static/sprite/disc_lof.png";
|
|
||||||
import changeSiteText from "../../src/static/sprite/disc_change_site.png";
|
|
||||||
import { useLoader } from "react-three-fiber";
|
|
||||||
import * as THREE from "three";
|
|
||||||
|
|
||||||
const ChangeDiscScene = () => {
|
const ChangeDiscScene = () => {
|
||||||
const lofTex = useLoader(THREE.TextureLoader, lof);
|
const setScene = useSceneStore((state) => state.setScene);
|
||||||
const changeSiteTextTex = useLoader(THREE.TextureLoader, changeSiteText);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.getElementsByTagName("canvas")[0].className =
|
document.getElementsByTagName("canvas")[0].className =
|
||||||
"change-disc-scene-background";
|
"change-disc-scene-background";
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
setTimeout(() => {
|
||||||
<>
|
setScene("main");
|
||||||
<sprite scale={[3, 1, 0]} position={[0, 2, 0]}>
|
}, 3500);
|
||||||
<spriteMaterial map={lofTex} attach="material" />
|
|
||||||
</sprite>
|
return () => {
|
||||||
<sprite scale={[5, 1, 0]} position={[0, 0, 0]}>
|
document.getElementsByTagName("canvas")[0].className =
|
||||||
<spriteMaterial map={changeSiteTextTex} attach="material" />
|
"main-scene-background";
|
||||||
</sprite>
|
};
|
||||||
</>
|
}, [setScene]);
|
||||||
);
|
|
||||||
|
return <></>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ChangeDiscScene;
|
export default ChangeDiscScene;
|
||||||
|
|
|
@ -58,6 +58,7 @@ type StarfieldState = {
|
||||||
};
|
};
|
||||||
|
|
||||||
type SiteState = {
|
type SiteState = {
|
||||||
|
introAnim: boolean;
|
||||||
currentSite: "a" | "b";
|
currentSite: "a" | "b";
|
||||||
transformState: {
|
transformState: {
|
||||||
posY: number;
|
posY: number;
|
||||||
|
@ -303,6 +304,7 @@ export const useStarfieldStore = create<StarfieldState>((set) => ({
|
||||||
export const useSiteStore = create(
|
export const useSiteStore = create(
|
||||||
combine(
|
combine(
|
||||||
{
|
{
|
||||||
|
introAnim: true,
|
||||||
currentSite: "a",
|
currentSite: "a",
|
||||||
transformState: {
|
transformState: {
|
||||||
posY: 0,
|
posY: 0,
|
||||||
|
@ -317,6 +319,7 @@ export const useSiteStore = create(
|
||||||
})),
|
})),
|
||||||
setCurrentSite: (to: string) =>
|
setCurrentSite: (to: string) =>
|
||||||
set(() => ({ currentSite: to as "a" | "b" })),
|
set(() => ({ currentSite: to as "a" | "b" })),
|
||||||
|
setIntroAnim: (to: boolean) => set(() => ({ introAnim: to })),
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
@ -423,7 +426,7 @@ export const useSSknStore = create<SSknState>((set) => ({
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useSceneStore = create<SceneState>((set) => ({
|
export const useSceneStore = create<SceneState>((set) => ({
|
||||||
currentScene: "change_disc",
|
currentScene: "main",
|
||||||
setScene: (to) => set(() => ({ currentScene: to })),
|
setScene: (to) => set(() => ({ currentScene: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
@ -533,8 +536,8 @@ export const useSiteSaveStore = create(
|
||||||
sitePosY: 0,
|
sitePosY: 0,
|
||||||
},
|
},
|
||||||
b: {
|
b: {
|
||||||
activeNodeId: "0422",
|
activeNodeId: "0414",
|
||||||
nodeMatrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },
|
nodeMatrixIndices: { matrixIdx: 7, rowIdx: 1, colIdx: 0 },
|
||||||
siteRotY: 0,
|
siteRotY: 0,
|
||||||
sitePosY: 0,
|
sitePosY: 0,
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue