mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
bugfixes
This commit is contained in:
parent
82436249d1
commit
03ec3d8f89
12 changed files with 70 additions and 45 deletions
|
@ -139,7 +139,7 @@ const Node = (props: NodeContructorProps) => {
|
||||||
? state.activeNodeState.posX
|
? state.activeNodeState.posX
|
||||||
: props.position[0],
|
: props.position[0],
|
||||||
activeNodePosY: useNodeStore.getState().activeNodeState.interactedWith
|
activeNodePosY: useNodeStore.getState().activeNodeState.interactedWith
|
||||||
? level_y_values[props.level as keyof typeof level_y_values]
|
? 0
|
||||||
: props.position[1],
|
: props.position[1],
|
||||||
activeNodePosZ: useNodeStore.getState().activeNodeState.interactedWith
|
activeNodePosZ: useNodeStore.getState().activeNodeState.interactedWith
|
||||||
? state.activeNodeState.posZ
|
? state.activeNodeState.posZ
|
||||||
|
|
|
@ -43,7 +43,6 @@ const GreenTextRenderer = (props: { visible?: boolean }) => {
|
||||||
>
|
>
|
||||||
{textArrRef.current.map((letter, idx) => (
|
{textArrRef.current.map((letter, idx) => (
|
||||||
<MediumLetter
|
<MediumLetter
|
||||||
color={"yellow"}
|
|
||||||
letter={letter}
|
letter={letter}
|
||||||
letterIdx={idx}
|
letterIdx={idx}
|
||||||
key={idx}
|
key={idx}
|
||||||
|
|
|
@ -6,7 +6,6 @@ import { a } from "@react-spring/three";
|
||||||
import React, { useMemo } from "react";
|
import React, { useMemo } from "react";
|
||||||
|
|
||||||
const MediumLetter = (props: {
|
const MediumLetter = (props: {
|
||||||
color: string;
|
|
||||||
letter: string;
|
letter: string;
|
||||||
letterIdx: number;
|
letterIdx: number;
|
||||||
}) => {
|
}) => {
|
||||||
|
|
|
@ -46,23 +46,6 @@ const GreenTextManager = (props: StateManagerProps) => {
|
||||||
[setGreenText, setTransformState, toggleActive]
|
[setGreenText, setTransformState, toggleActive]
|
||||||
);
|
);
|
||||||
|
|
||||||
const initializeGreenTextForMediaScene = useCallback(
|
|
||||||
(activeNodeId: string, level: string) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
setGreenText((site_a as SiteType)[level][activeNodeId].node_name);
|
|
||||||
setTransformState(
|
|
||||||
{
|
|
||||||
initial: 0,
|
|
||||||
final: 0.009,
|
|
||||||
},
|
|
||||||
"posX"
|
|
||||||
);
|
|
||||||
setTransformState(0.675, "posY");
|
|
||||||
}, 3950);
|
|
||||||
},
|
|
||||||
[setGreenText, setTransformState]
|
|
||||||
);
|
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
const dispatchObject = useCallback(
|
||||||
(
|
(
|
||||||
event: string,
|
event: string,
|
||||||
|
@ -84,12 +67,8 @@ const GreenTextManager = (props: StateManagerProps) => {
|
||||||
action: toggleAndSetGreenText,
|
action: toggleAndSetGreenText,
|
||||||
value: [newActiveNodeId, newActiveHudId, newLevel, 500, true],
|
value: [newActiveNodeId, newActiveHudId, newLevel, 500, true],
|
||||||
};
|
};
|
||||||
case "throw_node_media":
|
|
||||||
return {
|
|
||||||
action: initializeGreenTextForMediaScene,
|
|
||||||
value: [newActiveNodeId, newLevel],
|
|
||||||
};
|
|
||||||
case "toggle_level_selection":
|
case "toggle_level_selection":
|
||||||
|
case "level_selection_back":
|
||||||
return {
|
return {
|
||||||
action: toggleActive,
|
action: toggleActive,
|
||||||
};
|
};
|
||||||
|
@ -101,7 +80,7 @@ const GreenTextManager = (props: StateManagerProps) => {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[initializeGreenTextForMediaScene, toggleActive, toggleAndSetGreenText]
|
[toggleActive, toggleAndSetGreenText]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -57,6 +57,7 @@ const NodeHUDManager = (props: StateManagerProps) => {
|
||||||
value: [targetNodeHudId],
|
value: [targetNodeHudId],
|
||||||
};
|
};
|
||||||
case "toggle_level_selection":
|
case "toggle_level_selection":
|
||||||
|
case "level_selection_back":
|
||||||
return {
|
return {
|
||||||
action: toggleActive,
|
action: toggleActive,
|
||||||
};
|
};
|
||||||
|
|
|
@ -14,7 +14,7 @@ const SceneManager = (props: StateManagerProps) => {
|
||||||
return {
|
return {
|
||||||
action: setScene,
|
action: setScene,
|
||||||
value: newScene,
|
value: newScene,
|
||||||
delay: 3904.704,
|
delay: 3450,
|
||||||
};
|
};
|
||||||
case "exit_select":
|
case "exit_select":
|
||||||
case "exit_gate":
|
case "exit_gate":
|
||||||
|
|
|
@ -206,7 +206,12 @@ const YellowTextManager = (props: StateManagerProps) => {
|
||||||
"posY"
|
"posY"
|
||||||
);
|
);
|
||||||
setColor("yellow");
|
setColor("yellow");
|
||||||
setText((site_a as SiteType)[level][activeNodeId].node_name);
|
const targetText =
|
||||||
|
activeNodeId === "UNKNOWN"
|
||||||
|
? "Unknown"
|
||||||
|
: (site_a as SiteType)[level][activeNodeId].node_name;
|
||||||
|
|
||||||
|
setText(targetText);
|
||||||
}, 400);
|
}, 400);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
|
@ -59,9 +59,11 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
// in this case we have to check the type of the blue orb
|
// in this case we have to check the type of the blue orb
|
||||||
// and dispatch an action depending on that, so we have to precalculate the
|
// and dispatch an action depending on that, so we have to precalculate the
|
||||||
// new active blue orb here.
|
// new active blue orb here.
|
||||||
newActiveNodeId = getNodeId(gameContext.activeLevel, nodeMatrixIndices);
|
newActiveNodeId = getNodeId(level, nodeMatrixIndices);
|
||||||
|
|
||||||
const nodeType = (site_a as any)[newLevel][newActiveNodeId].type;
|
const nodeType = (site_a as any)[gameContext.activeLevel][
|
||||||
|
newActiveNodeId
|
||||||
|
].type;
|
||||||
|
|
||||||
const eventAnimation = "throw_node_";
|
const eventAnimation = "throw_node_";
|
||||||
|
|
||||||
|
@ -116,9 +118,9 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
case "X":
|
case "X":
|
||||||
return {
|
return {
|
||||||
event: "level_selection_back",
|
event: "level_selection_back",
|
||||||
newActiveNodeId: getNodeId(gameContext.level, nodeMatrixIndices),
|
newActiveNodeId: getNodeId(newLevel, nodeMatrixIndices),
|
||||||
newActiveHudId: getNodeHudId(nodeMatrixIndices),
|
newActiveHudId: getNodeHudId(nodeMatrixIndices),
|
||||||
newLevel: newLevel,
|
newLevel: newLevel.toString().padStart(2, "0"),
|
||||||
};
|
};
|
||||||
case "CIRCLE":
|
case "CIRCLE":
|
||||||
const selectedNodeData = nodeSelector({
|
const selectedNodeData = nodeSelector({
|
||||||
|
|
|
@ -93,10 +93,12 @@ const findNodeAfterLevelSelection = (
|
||||||
targetLevel: number,
|
targetLevel: number,
|
||||||
nodeMatrixIndices: { matrixIdx: number; rowIdx: number; colIdx: number }
|
nodeMatrixIndices: { matrixIdx: number; rowIdx: number; colIdx: number }
|
||||||
) => {
|
) => {
|
||||||
let newMatIndices = nodeMatrixIndices;
|
let newMatIndices = Object.assign({}, nodeMatrixIndices);
|
||||||
|
|
||||||
let triedCols: number[] = [];
|
let triedCols: number[] = [];
|
||||||
|
|
||||||
|
newMatIndices.rowIdx = 0;
|
||||||
|
|
||||||
let newNodeId = getNodeId(targetLevel, newMatIndices);
|
let newNodeId = getNodeId(targetLevel, newMatIndices);
|
||||||
|
|
||||||
while (!isNodeVisible(newNodeId, unlockedNodes)) {
|
while (!isNodeVisible(newNodeId, unlockedNodes)) {
|
||||||
|
@ -106,11 +108,17 @@ const findNodeAfterLevelSelection = (
|
||||||
if (colToTry !== undefined) {
|
if (colToTry !== undefined) {
|
||||||
newMatIndices.colIdx = colToTry;
|
newMatIndices.colIdx = colToTry;
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
if (newMatIndices.rowIdx === 2) {
|
||||||
|
newMatIndices.colIdx = nodeMatrixIndices.colIdx;
|
||||||
|
newNodeId = "UNKNOWN";
|
||||||
|
break;
|
||||||
} else {
|
} else {
|
||||||
newMatIndices.rowIdx++;
|
newMatIndices.rowIdx++;
|
||||||
triedCols = [];
|
triedCols = [];
|
||||||
newMatIndices.colIdx = 0;
|
newMatIndices.colIdx = 0;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
newNodeId = getNodeId(targetLevel, newMatIndices);
|
newNodeId = getNodeId(targetLevel, newMatIndices);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -254,15 +262,18 @@ const findNodeHorizontal = (
|
||||||
newMatIndices.rowIdx = rowToTry;
|
newMatIndices.rowIdx = rowToTry;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
if (newMatIndices.colIdx > 3 && didMove) return;
|
||||||
|
|
||||||
if (newMatIndices.colIdx < 0) {
|
if (newMatIndices.colIdx < 0) {
|
||||||
didMove = true;
|
|
||||||
if (activeId === "UNKNOWN") {
|
if (activeId === "UNKNOWN") {
|
||||||
|
didMove = true;
|
||||||
newMatIndices.colIdx = nodeMatrixIndices.colIdx;
|
newMatIndices.colIdx = nodeMatrixIndices.colIdx;
|
||||||
newMatIndices.matrixIdx =
|
newMatIndices.matrixIdx =
|
||||||
newMatIndices.matrixIdx + 1 > 8 ? 1 : newMatIndices.matrixIdx + 1;
|
newMatIndices.matrixIdx + 1 > 8 ? 1 : newMatIndices.matrixIdx + 1;
|
||||||
newNodeId = "UNKNOWN";
|
newNodeId = "UNKNOWN";
|
||||||
break;
|
break;
|
||||||
} else {
|
} else {
|
||||||
|
didMove = true;
|
||||||
newMatIndices.colIdx = 0;
|
newMatIndices.colIdx = 0;
|
||||||
newMatIndices.matrixIdx =
|
newMatIndices.matrixIdx =
|
||||||
newMatIndices.matrixIdx + 1 > 8 ? 1 : newMatIndices.matrixIdx + 1;
|
newMatIndices.matrixIdx + 1 > 8 ? 1 : newMatIndices.matrixIdx + 1;
|
||||||
|
@ -281,6 +292,7 @@ const findNodeHorizontal = (
|
||||||
let triedRows: number[] = [];
|
let triedRows: number[] = [];
|
||||||
|
|
||||||
if (newMatIndices.colIdx > 3) {
|
if (newMatIndices.colIdx > 3) {
|
||||||
|
didMove = true;
|
||||||
newMatIndices.colIdx = 3;
|
newMatIndices.colIdx = 3;
|
||||||
newMatIndices.matrixIdx =
|
newMatIndices.matrixIdx =
|
||||||
newMatIndices.matrixIdx - 1 < 1 ? 8 : newMatIndices.matrixIdx - 1;
|
newMatIndices.matrixIdx - 1 < 1 ? 8 : newMatIndices.matrixIdx - 1;
|
||||||
|
@ -296,18 +308,26 @@ const findNodeHorizontal = (
|
||||||
newMatIndices.rowIdx = rowToTry;
|
newMatIndices.rowIdx = rowToTry;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
if (newMatIndices.colIdx < 0 && didMove) return;
|
||||||
|
|
||||||
if (newMatIndices.colIdx > 3) {
|
if (newMatIndices.colIdx > 3) {
|
||||||
didMove = true;
|
|
||||||
if (activeId === "UNKNOWN") {
|
if (activeId === "UNKNOWN") {
|
||||||
|
didMove = true;
|
||||||
newMatIndices.colIdx = nodeMatrixIndices.colIdx;
|
newMatIndices.colIdx = nodeMatrixIndices.colIdx;
|
||||||
newMatIndices.matrixIdx =
|
newMatIndices.matrixIdx =
|
||||||
newMatIndices.matrixIdx - 1 < 1 ? 8 : newMatIndices.matrixIdx - 1;
|
newMatIndices.matrixIdx - 1 < 1 ? 8 : newMatIndices.matrixIdx - 1;
|
||||||
newNodeId = "UNKNOWN";
|
newNodeId = "UNKNOWN";
|
||||||
break;
|
break;
|
||||||
} else {
|
} else {
|
||||||
|
if (didMove) return;
|
||||||
|
else {
|
||||||
|
didMove = true;
|
||||||
newMatIndices.colIdx = 3;
|
newMatIndices.colIdx = 3;
|
||||||
newMatIndices.matrixIdx =
|
newMatIndices.matrixIdx =
|
||||||
newMatIndices.matrixIdx - 1 < 1 ? 8 : newMatIndices.matrixIdx - 1;
|
newMatIndices.matrixIdx - 1 < 1
|
||||||
|
? 8
|
||||||
|
: newMatIndices.matrixIdx - 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
didMove ? newMatIndices.colIdx-- : newMatIndices.colIdx++;
|
didMove ? newMatIndices.colIdx-- : newMatIndices.colIdx++;
|
||||||
|
|
|
@ -33,7 +33,7 @@ const MainScene = () => {
|
||||||
return (
|
return (
|
||||||
<perspectiveCamera position-z={3}>
|
<perspectiveCamera position-z={3}>
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
<MainSceneIntro />
|
{/*<MainSceneIntro />*/}
|
||||||
<a.group>
|
<a.group>
|
||||||
<Preloader />
|
<Preloader />
|
||||||
<Site />
|
<Site />
|
||||||
|
|
|
@ -1,5 +1,10 @@
|
||||||
import React, { useCallback, useEffect, useMemo } from "react";
|
import React, { useCallback, useEffect, useMemo } from "react";
|
||||||
import { useMediaStore } from "../store";
|
import {
|
||||||
|
useLevelSelectionStore,
|
||||||
|
useLevelStore,
|
||||||
|
useMediaStore,
|
||||||
|
useNodeStore,
|
||||||
|
} from "../store";
|
||||||
import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer";
|
import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer";
|
||||||
import LeftSide from "../components/MediaScene/Selectables/LeftSide";
|
import LeftSide from "../components/MediaScene/Selectables/LeftSide";
|
||||||
import RightSide from "../components/MediaScene/Selectables/RightSide";
|
import RightSide from "../components/MediaScene/Selectables/RightSide";
|
||||||
|
@ -10,12 +15,22 @@ import Lof from "../components/MediaScene/Lof";
|
||||||
import { OrbitControls } from "@react-three/drei";
|
import { OrbitControls } from "@react-three/drei";
|
||||||
import Images from "../components/MediaScene/Images";
|
import Images from "../components/MediaScene/Images";
|
||||||
import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
|
import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
|
||||||
|
import MediumLetter from "../components/TextRenderer/MediumLetter";
|
||||||
|
import { a } from "@react-spring/three";
|
||||||
|
import site_a from "../resources/site_a.json";
|
||||||
|
import { SiteType } from "../components/MainScene/Site";
|
||||||
|
|
||||||
const MediaScene = () => {
|
const MediaScene = () => {
|
||||||
const mediaComponentMatrixIndices = useMediaStore(
|
const mediaComponentMatrixIndices = useMediaStore(
|
||||||
(state) => state.componentMatrixIndices
|
(state) => state.componentMatrixIndices
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||||
|
const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||||
|
|
||||||
|
const activeNodeName = (site_a as SiteType)[activeLevel][activeNodeId]
|
||||||
|
.node_name;
|
||||||
|
|
||||||
const activeMediaComponent = useMediaStore(
|
const activeMediaComponent = useMediaStore(
|
||||||
useCallback(
|
useCallback(
|
||||||
(state) =>
|
(state) =>
|
||||||
|
@ -45,8 +60,13 @@ const MediaScene = () => {
|
||||||
<MediaLoadingBar />
|
<MediaLoadingBar />
|
||||||
<NodeNameContainer />
|
<NodeNameContainer />
|
||||||
</group>
|
</group>
|
||||||
|
<group scale={[0.06, 0.12, 0]} position={[0.8, 1.37, 0]}>
|
||||||
|
{activeNodeName.split("").map((letter, idx) => (
|
||||||
|
<MediumLetter letter={letter} letterIdx={idx} key={idx} />
|
||||||
|
))}
|
||||||
|
</group>
|
||||||
|
|
||||||
<group position={[0, 0, 0]}>
|
<group position={[0, 0, 0]}>
|
||||||
<GreenTextRenderer />
|
|
||||||
<YellowTextRenderer />
|
<YellowTextRenderer />
|
||||||
</group>
|
</group>
|
||||||
<Lof />
|
<Lof />
|
||||||
|
|
|
@ -390,7 +390,7 @@ export const useSSknStore = create<SSknState>((set) => ({
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useSceneStore = create<SceneState>((set) => ({
|
export const useSceneStore = create<SceneState>((set) => ({
|
||||||
currentScene: "main",
|
currentScene: "media",
|
||||||
setScene: (to) => set(() => ({ currentScene: to })),
|
setScene: (to) => set(() => ({ currentScene: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue