mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
cllleanup wip
This commit is contained in:
ad044
parent
81593d4266
commit
2bde067cec
26 changed files with 773 additions and 525 deletions
|
|
@ -32,7 +32,7 @@ import leanRightSpriteSheet from "../../static/sprite/lean_right.png";
|
|||
import lookAroundSpriteSheet from "../../static/sprite/look_around.png";
|
||||
import playWithHairSpriteSheet from "../../static/sprite/play_with_hair.png";
|
||||
|
||||
import { useLainStore } from "../../store";
|
||||
import { useMainSceneStore } from "../../store";
|
||||
|
||||
type LainConstructorProps = {
|
||||
sprite: string;
|
||||
|
|
@ -353,7 +353,7 @@ type LainProps = {
|
|||
};
|
||||
|
||||
const Lain = (props: LainProps) => {
|
||||
const lainMoveState = useLainStore((state) => state.lainMoveState);
|
||||
const lainMoveState = useMainSceneStore((state) => state.lainMoveState);
|
||||
|
||||
const lainAnimationDispatch = useMemo(() => {
|
||||
const anims = {
|
||||
|
|
|
|||
|
|
@ -8,33 +8,36 @@ import longHudMirrored from "../../../static/sprite/long_hud_mirrored.png";
|
|||
import boringHud from "../../../static/sprite/long_hud_boring.png";
|
||||
import boringHudMirrored from "../../../static/sprite/long_hud_boring_mirrored.png";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import { useHudStore, useNodeStore, useSiteStore } from "../../../store";
|
||||
import node_huds from "../../../resources/node_huds.json";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import MediumLetter from "../../TextRenderer/MediumLetter";
|
||||
import site_a from "../../../resources/site_a.json";
|
||||
import site_b from "../../../resources/site_b.json";
|
||||
import { SiteType } from "./Site";
|
||||
|
||||
export type HUDType = {
|
||||
mirrored: number;
|
||||
long: {
|
||||
position: number[];
|
||||
initial_position: number[];
|
||||
};
|
||||
boring: {
|
||||
position: number[];
|
||||
initial_position: number[];
|
||||
};
|
||||
big: {
|
||||
position: number[];
|
||||
initial_position: number[];
|
||||
};
|
||||
big_text: number[];
|
||||
medium_text: {
|
||||
position: number[];
|
||||
initial_position: number[];
|
||||
};
|
||||
};
|
||||
|
||||
const HUD = () => {
|
||||
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||
const currentSite = useSiteStore((state) => state.currentSite);
|
||||
|
||||
const greenText = useMemo(() => {
|
||||
if (activeNodeId === "UNKNOWN") return "".split("");
|
||||
else {
|
||||
const siteData = currentSite === "a" ? site_a : site_b;
|
||||
const level = activeNodeId.substr(0, 2);
|
||||
|
||||
return (siteData as SiteType)[level][activeNodeId].title.split("");
|
||||
}
|
||||
}, [activeNodeId, currentSite]);
|
||||
|
||||
const active = useHudStore((state) => state.active);
|
||||
const id = useHudStore((state) => state.id);
|
||||
|
||||
const currentHud = useMemo(() => node_huds[id as keyof typeof node_huds], [
|
||||
id,
|
||||
]);
|
||||
const greenText = useMainSceneStore((state) =>
|
||||
state.activeNode.title.split("")
|
||||
);
|
||||
const active = useMainSceneStore((state) => state.hudActive);
|
||||
const currentHud = useMainSceneStore((state) => state.hud);
|
||||
|
||||
const hudElementState = useSpring({
|
||||
bigHUDPositionX: active,
|
||||
|
|
@ -145,7 +148,7 @@ const HUD = () => {
|
|||
position-z={-8.7}
|
||||
scale={[0.02, 0.035, 0.02]}
|
||||
>
|
||||
{greenText.map((letter, idx) => (
|
||||
{greenText.map((letter: string, idx: number) => (
|
||||
<MediumLetter letter={letter} letterIdx={idx} key={idx} />
|
||||
))}
|
||||
</a.group>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
import React, { Suspense, useMemo } from "react";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import {
|
||||
useLevelStore,
|
||||
useMainSceneStore,
|
||||
useNodeStore,
|
||||
useSiteStore,
|
||||
} from "../../../store";
|
||||
import { useLevelStore, useMainSceneStore, useSiteStore } from "../../../store";
|
||||
import ActiveLevelNodes from "./Site/ActiveLevelNodes";
|
||||
import InactiveLevelNodes from "./Site/InactiveLevelNodes";
|
||||
import Rings from "./Site/Rings";
|
||||
|
|
@ -69,7 +64,7 @@ const Site = (props: SiteProps) => {
|
|||
config: { duration: 3400 },
|
||||
});
|
||||
|
||||
const gameProgress = useNodeStore((state) => state.gameProgress);
|
||||
const gameProgress = useMainSceneStore((state) => state.gameProgress);
|
||||
|
||||
const currentSite = useSiteStore((state) => state.currentSite);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,26 @@
|
|||
import React, { useEffect, useMemo } from "react";
|
||||
import Node from "./Node";
|
||||
import node_positions from "../../../../resources/node_positions.json";
|
||||
import { useNodeStore } from "../../../../store";
|
||||
import { useMainSceneStore } from "../../../../store";
|
||||
import { isNodeVisible } from "../../../../core/nodeSelector";
|
||||
import { NodesProps } from "../Site";
|
||||
|
||||
const ActiveLevelNodes = (props: NodesProps) => {
|
||||
const activeNodeState = useNodeStore((state) => state.activeNodeState);
|
||||
const activeNodeId = useMainSceneStore((state) => state.activeNode.id);
|
||||
|
||||
const activeLevelNodes = useMemo(
|
||||
() => props.siteData[props.activeLevel as keyof typeof props.siteData],
|
||||
[props]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(activeNodeId);
|
||||
}, [activeNodeId]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{Object.entries(activeLevelNodes).map((node: [string, any]) => {
|
||||
if (isNodeVisible(node[0], props.gameProgress, props.currentSite)) {
|
||||
if (isNodeVisible(node[1], props.gameProgress)) {
|
||||
return (
|
||||
<Node
|
||||
nodeName={node[1].node_name}
|
||||
|
|
@ -29,7 +33,7 @@ const ActiveLevelNodes = (props: NodesProps) => {
|
|||
.rotation
|
||||
}
|
||||
key={node[1].node_name}
|
||||
active={node[0] === activeNodeState.id}
|
||||
active={node[0] === activeNodeId}
|
||||
level={node[0].substr(0, 2)}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const InactiveLevelNodes = memo((props: NodesProps) => {
|
|||
return (
|
||||
<>
|
||||
{Object.entries(visibleNodes).map((node: [string, any]) => {
|
||||
if (isNodeVisible(node[0], props.gameProgress, props.currentSite)) {
|
||||
if (isNodeVisible(node[1], props.gameProgress)) {
|
||||
return (
|
||||
<Node
|
||||
nodeName={node[1].node_name}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { memo, useEffect, useMemo, useRef } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import { a, useSpring, interpolate } from "@react-spring/three";
|
||||
import * as THREE from "three";
|
||||
import Cou from "../../../../static/sprite/Cou.png";
|
||||
import CouActive from "../../../../static/sprite/Cou_active.png";
|
||||
|
|
@ -17,7 +17,7 @@ import LdaActive from "../../../../static/sprite/Lda_active.png";
|
|||
import MULTI from "../../../../static/sprite/MULTI.png";
|
||||
import MULTIActive from "../../../../static/sprite/MULTI_active.png";
|
||||
import level_y_values from "../../../../resources/level_y_values.json";
|
||||
import { useNodeStore } from "../../../../store";
|
||||
import { useMainSceneStore } from "../../../../store";
|
||||
|
||||
type NodeContructorProps = {
|
||||
nodeName: string;
|
||||
|
|
@ -28,11 +28,6 @@ type NodeContructorProps = {
|
|||
};
|
||||
|
||||
const Node = memo((props: NodeContructorProps) => {
|
||||
// the game only has a couple of sprite that it displays in the hub
|
||||
// dynamically importnig them would be worse for performance,
|
||||
// so we import all of them here and then use this function to
|
||||
// associate a sprite with the path
|
||||
|
||||
const tex = useMemo(() => {
|
||||
if (props.nodeName.includes("S")) {
|
||||
return [SSkn, SSKnActive];
|
||||
|
|
@ -106,66 +101,29 @@ const Node = memo((props: NodeContructorProps) => {
|
|||
}
|
||||
`;
|
||||
|
||||
// these pieces of state get updated transiently rather than reactively
|
||||
// to avoid excess unnecessary renders (this is absolutely crucial for performance).
|
||||
|
||||
const [
|
||||
{
|
||||
activeNodePosX,
|
||||
activeNodePosY,
|
||||
activeNodePosZ,
|
||||
activeNodeRotZ,
|
||||
activeNodeVisible,
|
||||
activeNodeScale,
|
||||
},
|
||||
{ activeNodePos, activeNodeRot, activeNodeScale, activeNodeVisible },
|
||||
set,
|
||||
] = useSpring(() => ({
|
||||
activeNodePosX: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? useNodeStore.getState().activeNodeState.posX
|
||||
: props.position[0],
|
||||
activeNodePosY: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? level_y_values[props.level as keyof typeof level_y_values] +
|
||||
useNodeStore.getState().activeNodeState.posY
|
||||
: props.position[1],
|
||||
activeNodePosZ: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? useNodeStore.getState().activeNodeState.posZ
|
||||
: props.position[2],
|
||||
activeNodeRotZ: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? useNodeStore.getState().activeNodeState.rotZ
|
||||
: 0,
|
||||
activeNodeScale: useNodeStore.getState().activeNodeState.shrinking ? 0 : 1,
|
||||
activeNodePos: props.position,
|
||||
activeNodeRot: [0, 0, 0],
|
||||
activeNodeScale: 1,
|
||||
activeNodeVisible: true,
|
||||
config: { duration: 800 },
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
useNodeStore.subscribe(set, (state) => ({
|
||||
activeNodePosX: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? state.activeNodeState.posX
|
||||
: props.position[0],
|
||||
activeNodePosY: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? state.activeNodeState.posY
|
||||
: props.position[1],
|
||||
activeNodePosZ: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? state.activeNodeState.posZ
|
||||
: props.position[2],
|
||||
activeNodeRotZ: useNodeStore.getState().activeNodeState.interactedWith
|
||||
useMainSceneStore.subscribe(set, (state) => ({
|
||||
activeNodePos: state.activeNodeState.interactedWith
|
||||
? state.activeNodePos
|
||||
: props.position,
|
||||
activeNodeRot: state.activeNodeState.interactedWith
|
||||
? state.activeNodeState.rotZ
|
||||
: 0,
|
||||
activeNodeScale: useNodeStore.getState().activeNodeState.shrinking
|
||||
? 0
|
||||
: 1,
|
||||
activeNodeVisible: useNodeStore.getState().activeNodeState.visible,
|
||||
activeNodeScale: state.activeNodeState.shrinking ? 0 : 1,
|
||||
activeNodeVisible: state.activeNodeState.visible,
|
||||
}));
|
||||
}, [
|
||||
props.level,
|
||||
activeNodePosX,
|
||||
activeNodePosZ,
|
||||
activeNodeRotZ,
|
||||
props.position,
|
||||
set,
|
||||
props.rotation,
|
||||
]);
|
||||
}, [props.level, props.position, set, props.rotation]);
|
||||
|
||||
useFrame(() => {
|
||||
if (materialRef.current) {
|
||||
|
|
@ -189,10 +147,9 @@ const Node = memo((props: NodeContructorProps) => {
|
|||
scale-z={activeNodeScale}
|
||||
>
|
||||
<a.mesh
|
||||
position-x={activeNodePosX}
|
||||
position-y={activeNodePosY}
|
||||
position-z={activeNodePosZ}
|
||||
rotation-z={activeNodeRotZ}
|
||||
position-x={activeNodePos.interpolate((x, y, z) => x)}
|
||||
position-y={activeNodePos.interpolate((x, y, z) => y)}
|
||||
position-z={activeNodePos.interpolate((x, y, z) => z)}
|
||||
rotation-y={props.rotation[1]}
|
||||
visible={activeNodeVisible}
|
||||
scale={[0.36, 0.18, 0.36]}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import React from "react";
|
||||
import { useNodeStore } from "../../../../store";
|
||||
import { useMainSceneStore } from "../../../../store";
|
||||
import NodeExplosion from "./NodeAnimations/NodeExplosion";
|
||||
import NodeRip from "./NodeAnimations/NodeRip";
|
||||
|
||||
const NodeAnimations = () => {
|
||||
const nodeShrinking = useNodeStore(
|
||||
const nodeShrinking = useMainSceneStore(
|
||||
(state) => state.activeNodeState.shrinking
|
||||
);
|
||||
|
||||
const nodeExploding = useNodeStore(
|
||||
const nodeExploding = useMainSceneStore(
|
||||
(state) => state.activeNodeState.exploding
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{nodeExploding ? <NodeExplosion /> : <></>}
|
||||
{nodeShrinking ? <NodeRip /> : <></>}
|
||||
{nodeExploding && <NodeExplosion />}
|
||||
{nodeShrinking && <NodeRip />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ import node_explosion_line_positions from "../../../../../resources/node_explosi
|
|||
|
||||
import { useFrame } from "react-three-fiber";
|
||||
import GoldNode from "./NodeExplosion/GoldNode";
|
||||
import { useNodeStore } from "../../../../../store";
|
||||
import { useMainSceneStore } from "../../../../../store";
|
||||
|
||||
const NodeExplosion = () => {
|
||||
const explosionVisible = useNodeStore(
|
||||
const explosionVisible = useMainSceneStore(
|
||||
(state) => state.activeNodeState.exploding
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import React, { useEffect, useMemo, useRef } from "react";
|
||||
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||||
import * as THREE from "three";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
|
|
@ -16,21 +16,7 @@ import Lda from "../../../../../../static/sprite/Lda.png";
|
|||
import LdaGold from "../../../../../../static/sprite/Lda_gold.png";
|
||||
import MULTI from "../../../../../../static/sprite/MULTI.png";
|
||||
import MULTIGold from "../../../../../../static/sprite/MULTI_gold.png";
|
||||
import {
|
||||
useLevelStore,
|
||||
useNodeStore,
|
||||
useSiteStore,
|
||||
} from "../../../../../../store";
|
||||
import site_a from "../../../../../../resources/site_a.json";
|
||||
import site_b from "../../../../../../resources/site_b.json";
|
||||
import { SiteType } from "../../../Site";
|
||||
import SSKnActive from "../../../../../../static/sprite/SSkn_active.png";
|
||||
import MULTIActive from "../../../../../../static/sprite/MULTI_active.png";
|
||||
import DcActive from "../../../../../../static/sprite/Dc_active.png";
|
||||
import TdaActive from "../../../../../../static/sprite/Tda_active.png";
|
||||
import CouActive from "../../../../../../static/sprite/Cou_active.png";
|
||||
import DiaActive from "../../../../../../static/sprite/Dia_active.png";
|
||||
import LdaActive from "../../../../../../static/sprite/Lda_active.png";
|
||||
import { useMainSceneStore } from "../../../../../../store";
|
||||
|
||||
type GLTFResult = GLTF & {
|
||||
nodes: {
|
||||
|
|
@ -48,43 +34,38 @@ type GoldNodeProps = {
|
|||
|
||||
const GoldNode = (props: GoldNodeProps) => {
|
||||
const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/goldNode.glb");
|
||||
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||
const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||
|
||||
const currentSite = useSiteStore((state) => state.currentSite);
|
||||
|
||||
const siteData = currentSite === "a" ? site_a : site_b;
|
||||
|
||||
const activeNodeData = (siteData as SiteType)[activeLevel][activeNodeId];
|
||||
const activeNodeName = activeNodeData.node_name;
|
||||
const activeNodeName = useMainSceneStore(
|
||||
(state) => state.activeNode.node_name
|
||||
);
|
||||
|
||||
const tex = useMemo(() => {
|
||||
if (activeNodeName.includes("S")) {
|
||||
return [SSkn, SSKnActive];
|
||||
return [SSkn, SSKnGold];
|
||||
} else if (
|
||||
activeNodeName.startsWith("P") ||
|
||||
activeNodeName.startsWith("G") ||
|
||||
activeNodeName.includes("?")
|
||||
) {
|
||||
return [MULTI, MULTIActive];
|
||||
return [MULTI, MULTIGold];
|
||||
} else if (activeNodeName.includes("Dc")) {
|
||||
return [Dc, DcActive];
|
||||
return [Dc, DcGold];
|
||||
} else {
|
||||
switch (activeNodeName.substr(0, 3)) {
|
||||
case "Tda":
|
||||
return [Tda, TdaActive];
|
||||
return [Tda, TdaGold];
|
||||
case "Cou":
|
||||
return [Cou, CouActive];
|
||||
return [Cou, CouGold];
|
||||
case "Dia":
|
||||
return [Dia, DiaActive];
|
||||
return [Dia, DiaGold];
|
||||
case "Lda":
|
||||
return [Lda, LdaActive];
|
||||
return [Lda, LdaGold];
|
||||
case "Ere":
|
||||
case "Ekm":
|
||||
case "Eda":
|
||||
case "TaK":
|
||||
case "Env":
|
||||
return [MULTI, MULTIActive];
|
||||
return [MULTI, MULTIGold];
|
||||
}
|
||||
}
|
||||
}, [activeNodeName]);
|
||||
|
|
@ -109,7 +90,6 @@ const GoldNode = (props: GoldNodeProps) => {
|
|||
}
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<mesh
|
||||
geometry={nodes.Cube.geometry}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import React, { useEffect, useRef, useState } from "react";
|
||||
import TriangleNode from "./NodeRip/TriangleNode";
|
||||
import { useNodeStore } from "../../../../../store";
|
||||
import { useMainSceneStore } from "../../../../../store";
|
||||
import RipLine from "./NodeRip/RipLine";
|
||||
import { useFrame } from "react-three-fiber";
|
||||
|
||||
const NodeRip = () => {
|
||||
const nodeShrinking = useNodeStore(
|
||||
const nodeShrinking = useMainSceneStore(
|
||||
(state) => state.activeNodeState.shrinking
|
||||
);
|
||||
const [shouldAnimate, setShouldAnimate] = useState(false);
|
||||
|
|
|
|||
|
|
@ -1,24 +1,22 @@
|
|||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
useIdleStore,
|
||||
useLevelStore,
|
||||
useMainSceneStore,
|
||||
useMediaStore,
|
||||
useNodeStore,
|
||||
useSceneStore,
|
||||
useSiteStore,
|
||||
} from "../../store";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import { LevelType, SiteType } from "../MainScene/SyncedComponents/Site";
|
||||
import site_a from "../../resources/site_a.json";
|
||||
import site_b from "../../resources/site_b.json";
|
||||
import dummy from "../../static/sprite/dummy.png";
|
||||
import * as THREE from "three";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
|
||||
const Images = () => {
|
||||
const idleNodeImages = useIdleStore((state) => state.images);
|
||||
const nodeImages = useMainSceneStore(
|
||||
(state) => state.activeNodeState.image_table_indices
|
||||
);
|
||||
|
||||
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||
const currentScene = useSceneStore((state) => state.currentScene);
|
||||
|
||||
const [imageScaleY, setImageScaleY] = useState(3.75);
|
||||
|
|
@ -27,8 +25,6 @@ const Images = () => {
|
|||
|
||||
const currentSite = useSiteStore((state) => state.currentSite);
|
||||
|
||||
const siteData = currentSite === "a" ? site_a : site_b;
|
||||
|
||||
const dummyTex = useLoader(THREE.TextureLoader, dummy);
|
||||
|
||||
const mediaPercentageElapsed = useMediaStore(
|
||||
|
|
@ -40,17 +36,10 @@ const Images = () => {
|
|||
config: { duration: 300 },
|
||||
});
|
||||
|
||||
const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||
const activeLevelData: LevelType = useMemo(
|
||||
() => siteData[activeLevel as keyof typeof siteData],
|
||||
[activeLevel, siteData]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let images;
|
||||
if (currentScene === "media" || currentScene === "tak") {
|
||||
images = (siteData as SiteType)[activeLevel][activeNodeId]
|
||||
.image_table_indices;
|
||||
images = nodeImages;
|
||||
} else if (currentScene === "idle_media") {
|
||||
images = idleNodeImages;
|
||||
}
|
||||
|
|
@ -77,15 +66,7 @@ const Images = () => {
|
|||
}
|
||||
});
|
||||
}
|
||||
}, [
|
||||
activeLevel,
|
||||
activeLevelData,
|
||||
activeNodeId,
|
||||
currentScene,
|
||||
currentSite,
|
||||
idleNodeImages,
|
||||
siteData,
|
||||
]);
|
||||
}, [currentScene, currentSite, idleNodeImages, nodeImages]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mediaPercentageElapsed === 0 && sceneImages[0]) {
|
||||
|
|
|
|||
|
|
@ -6,19 +6,15 @@ import React, {
|
|||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import site_a from "../../resources/site_a.json";
|
||||
import site_b from "../../resources/site_b.json";
|
||||
import {
|
||||
useEndSceneStore,
|
||||
useIdleStore,
|
||||
useLevelStore,
|
||||
useMainSceneStore,
|
||||
useMediaStore,
|
||||
useNodeStore,
|
||||
useSceneStore,
|
||||
useSiteStore,
|
||||
} from "../../store";
|
||||
import t from "../../static/webvtt/test.vtt";
|
||||
import { SiteType } from "../MainScene/SyncedComponents/Site";
|
||||
import endroll from "../../static/movie/ENDROLL1.STR[0].webm";
|
||||
import xa0001 from "../../static/audio/a/Xa0001.mp4";
|
||||
import xa0006 from "../../static/audio/a/Xa0006.mp4";
|
||||
|
|
@ -34,19 +30,17 @@ const MediaPlayer = () => {
|
|||
);
|
||||
|
||||
const idleMedia = useIdleStore((state) => state.media);
|
||||
const nodeMedia = useMainSceneStore((state) => state.activeNode.media_file);
|
||||
|
||||
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||
const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||
const triggersFinalVideo = useMainSceneStore(
|
||||
(state) => state.activeNode.triggers_final_video
|
||||
);
|
||||
|
||||
const requestRef = useRef();
|
||||
const videoRef = createRef<HTMLVideoElement>();
|
||||
|
||||
const currentSite = useSiteStore((state) => state.currentSite);
|
||||
|
||||
const siteData = useMemo(() => (currentSite === "a" ? site_a : site_b), [
|
||||
currentSite,
|
||||
]);
|
||||
|
||||
// end scene specific stuff
|
||||
const endMediaPlayedCount = useEndSceneStore(
|
||||
(state) => state.mediaPlayedCount
|
||||
|
|
@ -76,10 +70,7 @@ const MediaPlayer = () => {
|
|||
if (currentScene === "end") {
|
||||
incrementEndMediaPlayedCount();
|
||||
} else {
|
||||
if (
|
||||
(siteData as SiteType)[activeLevel][activeNodeId]
|
||||
.triggers_final_video === 1
|
||||
) {
|
||||
if (triggersFinalVideo === 1) {
|
||||
resetEndMediaPlayedCount();
|
||||
setScene("end");
|
||||
} else {
|
||||
|
|
@ -91,14 +82,12 @@ const MediaPlayer = () => {
|
|||
}
|
||||
}
|
||||
}, [
|
||||
activeLevel,
|
||||
activeNodeId,
|
||||
currentScene,
|
||||
incrementEndMediaPlayedCount,
|
||||
resetEndMediaPlayedCount,
|
||||
setPercentageElapsed,
|
||||
setScene,
|
||||
siteData,
|
||||
triggersFinalVideo,
|
||||
videoRef,
|
||||
]);
|
||||
|
||||
|
|
@ -140,8 +129,6 @@ const MediaPlayer = () => {
|
|||
}
|
||||
} else {
|
||||
if (currentScene === "media" || currentScene === "tak") {
|
||||
const nodeMedia = (siteData as SiteType)[activeLevel][activeNodeId]
|
||||
.media_file;
|
||||
if (nodeMedia.includes("XA")) {
|
||||
import(
|
||||
"../../static/audio/" + currentSite + "/" + nodeMedia + ".ogg"
|
||||
|
|
@ -188,13 +175,11 @@ const MediaPlayer = () => {
|
|||
}
|
||||
}
|
||||
}, [
|
||||
activeLevel,
|
||||
activeNodeId,
|
||||
currentScene,
|
||||
currentSite,
|
||||
endMediaPlayedCount,
|
||||
idleMedia,
|
||||
siteData,
|
||||
nodeMedia,
|
||||
videoRef,
|
||||
]);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,26 +1,16 @@
|
|||
import React, { useCallback, useMemo } from "react";
|
||||
import {useLevelStore, useMediaWordStore, useNodeStore, useSiteStore} from "../../../store";
|
||||
import { useMainSceneStore, useMediaWordStore } from "../../../store";
|
||||
import Word from "./RightSide/Word";
|
||||
import { useSpring, a } from "@react-spring/three";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import word_position_states from "../../../resources/word_position_states.json";
|
||||
import * as THREE from "three";
|
||||
import site_a from "../../../resources/site_a.json";
|
||||
import { SiteType } from "../../MainScene/SyncedComponents/Site";
|
||||
import site_b from "../../../resources/site_b.json";
|
||||
|
||||
type RightSideProps = {
|
||||
activeMediaComponent: string;
|
||||
};
|
||||
|
||||
const RightSide = (props: RightSideProps) => {
|
||||
const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||
|
||||
const currentSite = useSiteStore((state) => state.currentSite);
|
||||
|
||||
const siteData = currentSite === "a" ? site_a : site_b;
|
||||
|
||||
const words = (siteData as SiteType)[activeLevel][activeNodeId].words;
|
||||
const words = useMainSceneStore((state) => state.activeNode.words);
|
||||
|
||||
const posStateIdx = useMediaWordStore(
|
||||
(state) => state.posStateIdx
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ const BigLetter = memo(
|
|||
config: { duration: 200 },
|
||||
});
|
||||
|
||||
console.log('rend')
|
||||
return (
|
||||
<a.mesh
|
||||
position-x={letterState.xOffset}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import {
|
|||
useMainSceneStore,
|
||||
useMediaStore,
|
||||
useMediaWordStore,
|
||||
useNodeStore,
|
||||
usePauseStore,
|
||||
useSceneStore,
|
||||
useSiteStore,
|
||||
|
|
@ -62,8 +61,8 @@ const EventManager = () => {
|
|||
|
||||
// main scene
|
||||
const currentSite = useSiteStore((state) => state.currentSite);
|
||||
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||
const nodeMatrixIndices = useNodeStore((state) => state.nodeMatrixIndices);
|
||||
// const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||
// const nodeMatrixIndices = useNodeStore((state) => state.nodeMatrixIndices);
|
||||
const siteTransformState = useSiteStore((state) => state.transformState);
|
||||
const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||
const mainSubscene = useMainSceneStore((state) => state.subscene);
|
||||
|
|
@ -74,7 +73,7 @@ const EventManager = () => {
|
|||
pauseMatrixIdx,
|
||||
])
|
||||
);
|
||||
const gameProgress = useNodeStore((state) => state.gameProgress);
|
||||
// const gameProgress = useNodeStore((state) => state.gameProgress);
|
||||
|
||||
// media scene
|
||||
const mediaComponentMatrixIndices = useMediaStore(
|
||||
|
|
@ -199,13 +198,13 @@ const EventManager = () => {
|
|||
mainSubscene: mainSubscene,
|
||||
keyPress: keyPress,
|
||||
siteTransformState: siteTransformState,
|
||||
activeNodeId: activeNodeId,
|
||||
nodeMatrixIndices: nodeMatrixIndices,
|
||||
// activeNodeId: activeNodeId,
|
||||
// nodeMatrixIndices: nodeMatrixIndices,
|
||||
activeLevel: activeLevel,
|
||||
selectedLevel: selectedLevel,
|
||||
pauseMatrixIdx: pauseMatrixIdx,
|
||||
activePauseComponent: activePauseComponent,
|
||||
gameProgress: gameProgress,
|
||||
// gameProgress: gameProgress,
|
||||
currentSite: currentSite,
|
||||
});
|
||||
break;
|
||||
|
|
@ -246,13 +245,10 @@ const EventManager = () => {
|
|||
currentScene,
|
||||
mainSubscene,
|
||||
siteTransformState,
|
||||
activeNodeId,
|
||||
nodeMatrixIndices,
|
||||
activeLevel,
|
||||
selectedLevel,
|
||||
pauseMatrixIdx,
|
||||
activePauseComponent,
|
||||
gameProgress,
|
||||
currentSite,
|
||||
activeMediaComponent,
|
||||
wordPosStateIdx,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import {
|
||||
useHudStore,
|
||||
useLevelStore,
|
||||
useMainSceneStore,
|
||||
useNodeStore,
|
||||
useSiteSaveStore,
|
||||
useSiteStore,
|
||||
} from "../../../store";
|
||||
|
|
@ -35,13 +33,13 @@ const GameLoader = (props: StateManagerProps) => {
|
|||
const setCurrentSite = useSiteStore((state) => state.setCurrentSite);
|
||||
|
||||
// node setter
|
||||
const setActiveNodeState = useNodeStore((state) => state.setActiveNodeState);
|
||||
const setNodeMatrixIndices = useNodeStore(
|
||||
const setActiveNode = useMainSceneStore((state) => state.setNode);
|
||||
const setNodeMatrixIndices = useMainSceneStore(
|
||||
(state) => state.setNodeMatrixIndices
|
||||
);
|
||||
|
||||
// node hud setter
|
||||
const setHudId = useHudStore((state) => state.setId);
|
||||
const setHud = useMainSceneStore((state) => state.setHud);
|
||||
|
||||
const changeSite = useCallback(
|
||||
(site: string) => {
|
||||
|
|
@ -71,19 +69,19 @@ const GameLoader = (props: StateManagerProps) => {
|
|||
setBigText(targetYellowText);
|
||||
|
||||
// load new site node
|
||||
setActiveNodeState(siteToLoad.activeNodeId, "id");
|
||||
setActiveNode(siteToLoad.activeNodeId);
|
||||
setNodeMatrixIndices(siteToLoad.nodeMatrixIndices);
|
||||
|
||||
// load new site node hud
|
||||
setHudId(siteToLoad.nodeHudId);
|
||||
setHud(siteToLoad.nodeHudId);
|
||||
},
|
||||
[
|
||||
setActiveLevel,
|
||||
setActiveNodeState,
|
||||
setActiveNode,
|
||||
setBigTexPos,
|
||||
setBigText,
|
||||
setCurrentSite,
|
||||
setHudId,
|
||||
setHud,
|
||||
setNodeMatrixIndices,
|
||||
setSiteTransformState,
|
||||
siteASaveState,
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import {
|
|||
useLevelSelectionStore,
|
||||
useLevelStore,
|
||||
useMainSceneStore,
|
||||
useNodeStore,
|
||||
usePauseStore,
|
||||
useSiteStore,
|
||||
} from "../../store";
|
||||
|
|
@ -32,8 +31,8 @@ type MainSceneEventManagerProps = {
|
|||
const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
|
||||
// all the possible context needed to calculate new state
|
||||
const currentSite = useSiteStore((state) => state.currentSite);
|
||||
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||
const nodeMatrixIndices = useNodeStore((state) => state.nodeMatrixIndices);
|
||||
const activeNodeId = useMainSceneStore((state) => state.activeNodeState.id);
|
||||
const nodeMatrixIndices = useMainSceneStore((state) => state.activeNodeMatrixIndices);
|
||||
const siteTransformState = useSiteStore((state) => state.transformState);
|
||||
const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||
const mainSubscene = useMainSceneStore((state) => state.subscene);
|
||||
|
|
@ -44,7 +43,7 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
|
|||
pauseMatrixIdx,
|
||||
])
|
||||
);
|
||||
const gameProgress = useNodeStore((state) => state.gameProgress);
|
||||
const gameProgress = useMainSceneStore((state) => state.gameProgress);
|
||||
|
||||
const timePassedSinceLastKeyPress = useRef(-1);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import node_huds from "../../../resources/node_huds.json";
|
||||
import site_a from "../../../resources/site_a.json";
|
||||
import site_b from "../../../resources/site_b.json";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { SiteType } from "../../../components/MainScene/SyncedComponents/Site";
|
||||
import { NodeDataType } from "../../../components/MainScene/SyncedComponents/Site";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { HUDType } from "../../../components/MainScene/SyncedComponents/HUD";
|
||||
|
||||
const BigTextManager = (props: StateManagerProps) => {
|
||||
const setText = useMainSceneStore((state) => state.setBigText);
|
||||
|
|
@ -13,17 +13,12 @@ const BigTextManager = (props: StateManagerProps) => {
|
|||
const setXOffset = useMainSceneStore((state) => state.setBigTextXOffset);
|
||||
const setPos = useMainSceneStore((state) => state.setBigTextPos);
|
||||
|
||||
const siteData = useMainSceneStore(
|
||||
useCallback((state) => (state.activeSite === "a" ? site_a : site_b), [])
|
||||
);
|
||||
|
||||
const animateYellowTextWithMove = useCallback(
|
||||
(
|
||||
posXOffset: number,
|
||||
posYOffset: number,
|
||||
newActiveHudId: string,
|
||||
newActiveNodeId: string,
|
||||
newLevel: string,
|
||||
hud: HUDType,
|
||||
node: NodeDataType | "UNKNOWN",
|
||||
delay: number
|
||||
) => {
|
||||
// animate the letters to match that of site's
|
||||
|
|
@ -40,12 +35,9 @@ const BigTextManager = (props: StateManagerProps) => {
|
|||
|
||||
setTimeout(() => {
|
||||
// animate it to new pos x/y
|
||||
setPos(node_huds[newActiveHudId as keyof typeof node_huds].big_text);
|
||||
setPos(hud.big_text);
|
||||
// set new text according to the node name
|
||||
const targetText =
|
||||
newActiveNodeId === "UNKNOWN"
|
||||
? "Unknown"
|
||||
: (siteData as SiteType)[newLevel][newActiveNodeId].node_name;
|
||||
const targetText = node === "UNKNOWN" ? "Unknown" : node.node_name;
|
||||
|
||||
setText(targetText);
|
||||
}, 3000);
|
||||
|
|
@ -55,22 +47,22 @@ const BigTextManager = (props: StateManagerProps) => {
|
|||
setXOffset(0);
|
||||
}, 3900);
|
||||
},
|
||||
[setPos, setText, setXOffset, siteData]
|
||||
[setPos, setText, setXOffset]
|
||||
);
|
||||
|
||||
const animateYellowTextWithoutMove = useCallback(
|
||||
(newActiveHudId: string, newActiveNodeId: string, level: string) => {
|
||||
(hud: HUDType, node: NodeDataType) => {
|
||||
// make current hud big text shrink
|
||||
setXOffset(-1);
|
||||
|
||||
setTimeout(() => {
|
||||
// animate it to new pos x/y
|
||||
setPos(node_huds[newActiveHudId as keyof typeof node_huds].big_text);
|
||||
setPos(hud.big_text);
|
||||
}, 400);
|
||||
|
||||
setTimeout(() => {
|
||||
// set new text according to the node name
|
||||
setText((siteData as SiteType)[level][newActiveNodeId].node_name);
|
||||
setText(node.node_name);
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
|
|
@ -78,7 +70,7 @@ const BigTextManager = (props: StateManagerProps) => {
|
|||
setXOffset(0);
|
||||
}, 1200);
|
||||
},
|
||||
[setPos, setText, setXOffset, siteData]
|
||||
[setPos, setText, setXOffset]
|
||||
);
|
||||
|
||||
const initializeLevelSelection = useCallback(() => {
|
||||
|
|
@ -99,36 +91,33 @@ const BigTextManager = (props: StateManagerProps) => {
|
|||
}, [setColor, setPos, setText, setXOffset]);
|
||||
|
||||
const levelSelectionBack = useCallback(
|
||||
(activeNodeId: string, activeHudId: string, level: string) => {
|
||||
(node: NodeDataType, hud: HUDType) => {
|
||||
setXOffset(-1);
|
||||
|
||||
setTimeout(() => {
|
||||
setPos(node_huds[activeHudId as keyof typeof node_huds].big_text);
|
||||
setPos(hud.big_text);
|
||||
}, 400);
|
||||
|
||||
setTimeout(() => {
|
||||
setColor("yellow");
|
||||
setText((siteData as SiteType)[level][activeNodeId].node_name);
|
||||
setText(node.node_name);
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
setXOffset(0);
|
||||
}, 1200);
|
||||
},
|
||||
[setColor, setPos, setText, setXOffset, siteData]
|
||||
[setColor, setPos, setText, setXOffset]
|
||||
);
|
||||
|
||||
const toggleVisibleAfterLevelSelect = useCallback(
|
||||
(activeNodeId: string, activeHudId: string, level: string) => {
|
||||
(node: NodeDataType | "UNKNOWN", hud: HUDType) => {
|
||||
setVisible(false);
|
||||
|
||||
setTimeout(() => {
|
||||
setPos(node_huds[activeHudId as keyof typeof node_huds].big_text[0]);
|
||||
setPos(hud.big_text[0]);
|
||||
setColor("yellow");
|
||||
const targetText =
|
||||
activeNodeId === "UNKNOWN"
|
||||
? "Unknown"
|
||||
: (siteData as SiteType)[level][activeNodeId].node_name;
|
||||
const targetText = node === "UNKNOWN" ? "Unknown" : node.node_name;
|
||||
|
||||
setText(targetText);
|
||||
}, 400);
|
||||
|
|
@ -137,82 +126,46 @@ const BigTextManager = (props: StateManagerProps) => {
|
|||
setVisible(true);
|
||||
}, 3900);
|
||||
},
|
||||
[setColor, setPos, setText, setVisible, siteData]
|
||||
[setColor, setPos, setText, setVisible]
|
||||
);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(eventState: {
|
||||
event: string;
|
||||
activeHudId: string;
|
||||
activeNodeId: string;
|
||||
hud: HUDType;
|
||||
node: NodeDataType;
|
||||
level: string;
|
||||
}) => {
|
||||
switch (eventState.event) {
|
||||
case "site_up":
|
||||
return {
|
||||
action: animateYellowTextWithMove,
|
||||
value: [
|
||||
0,
|
||||
-1.5,
|
||||
eventState.activeHudId,
|
||||
eventState.activeNodeId,
|
||||
eventState.level,
|
||||
1300,
|
||||
],
|
||||
value: [0, -1.5, eventState.hud, eventState.node, 1300],
|
||||
};
|
||||
case "site_down":
|
||||
return {
|
||||
action: animateYellowTextWithMove,
|
||||
value: [
|
||||
0,
|
||||
1.5,
|
||||
eventState.activeHudId,
|
||||
eventState.activeNodeId,
|
||||
eventState.level,
|
||||
1300,
|
||||
],
|
||||
value: [0, 1.5, eventState.hud, eventState.node, 1300],
|
||||
};
|
||||
case "site_left":
|
||||
return {
|
||||
action: animateYellowTextWithMove,
|
||||
value: [
|
||||
Math.PI / 4,
|
||||
0,
|
||||
eventState.activeHudId,
|
||||
eventState.activeNodeId,
|
||||
eventState.level,
|
||||
1100,
|
||||
],
|
||||
value: [Math.PI / 4, 0, eventState.hud, eventState.node, 1100],
|
||||
};
|
||||
case "site_right":
|
||||
return {
|
||||
action: animateYellowTextWithMove,
|
||||
value: [
|
||||
-Math.PI / 4,
|
||||
0,
|
||||
eventState.activeHudId,
|
||||
eventState.activeNodeId,
|
||||
eventState.level,
|
||||
1100,
|
||||
],
|
||||
value: [-Math.PI / 4, 0, eventState.hud, eventState.node, 1100],
|
||||
};
|
||||
case "change_node":
|
||||
return {
|
||||
action: animateYellowTextWithoutMove,
|
||||
value: [
|
||||
eventState.activeHudId,
|
||||
eventState.activeNodeId,
|
||||
eventState.level,
|
||||
],
|
||||
value: [eventState.hud, eventState.node],
|
||||
};
|
||||
case "level_selection_back":
|
||||
return {
|
||||
action: levelSelectionBack,
|
||||
value: [
|
||||
eventState.activeNodeId,
|
||||
eventState.activeHudId,
|
||||
eventState.level,
|
||||
],
|
||||
value: [eventState.node, eventState.hud],
|
||||
};
|
||||
case "toggle_level_selection":
|
||||
return {
|
||||
|
|
@ -222,11 +175,7 @@ const BigTextManager = (props: StateManagerProps) => {
|
|||
case "select_level_down":
|
||||
return {
|
||||
action: toggleVisibleAfterLevelSelect,
|
||||
value: [
|
||||
eventState.activeNodeId,
|
||||
eventState.activeHudId,
|
||||
eventState.level,
|
||||
],
|
||||
value: [eventState.node, eventState.hud],
|
||||
};
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { useLainStore } from "../../../store";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
|
||||
const LainManager = (props: StateManagerProps) => {
|
||||
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
||||
const setLainMoveState = useMainSceneStore((state) => state.setLainMoveState);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(eventState: { event: string }) => {
|
||||
|
|
|
|||
|
|
@ -1,47 +1,48 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { useHudStore } from "../../../store";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import {HUDType} from "../../../components/MainScene/SyncedComponents/HUD";
|
||||
|
||||
const NodeHUDManager = (props: StateManagerProps) => {
|
||||
const setId = useHudStore((state) => state.setId);
|
||||
const toggleActive = useHudStore((state) => state.toggleActive);
|
||||
const set = useMainSceneStore((state) => state.setHud);
|
||||
const toggleActive = useMainSceneStore((state) => state.toggleHudActive);
|
||||
|
||||
const moveAndChangeNode = useCallback(
|
||||
(targetNodeHudId: string) => {
|
||||
(hud: HUDType) => {
|
||||
toggleActive();
|
||||
|
||||
setTimeout(() => {
|
||||
setId(targetNodeHudId);
|
||||
set(hud);
|
||||
toggleActive();
|
||||
}, 3900);
|
||||
},
|
||||
[setId, toggleActive]
|
||||
[set, toggleActive]
|
||||
);
|
||||
|
||||
const changeNode = useCallback(
|
||||
(targetNodeHudId: string) => {
|
||||
(hud: HUDType) => {
|
||||
toggleActive();
|
||||
|
||||
setTimeout(() => {
|
||||
setId(targetNodeHudId);
|
||||
set(hud);
|
||||
toggleActive();
|
||||
}, 500);
|
||||
},
|
||||
[setId, toggleActive]
|
||||
[set, toggleActive]
|
||||
);
|
||||
|
||||
const selectLevelAnimation = useCallback(
|
||||
(targetNodeHudId: string) => {
|
||||
(hud: HUDType) => {
|
||||
setTimeout(() => {
|
||||
setId(targetNodeHudId);
|
||||
set(hud);
|
||||
toggleActive();
|
||||
}, 3900);
|
||||
},
|
||||
[setId, toggleActive]
|
||||
[set, toggleActive]
|
||||
);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(eventState: { event: string; activeHudId: string }) => {
|
||||
(eventState: { event: string; hud: HUDType }) => {
|
||||
switch (eventState.event) {
|
||||
case "site_up":
|
||||
case "site_down":
|
||||
|
|
@ -49,12 +50,12 @@ const NodeHUDManager = (props: StateManagerProps) => {
|
|||
case "site_right":
|
||||
return {
|
||||
action: moveAndChangeNode,
|
||||
value: [eventState.activeHudId],
|
||||
value: [eventState.hud],
|
||||
};
|
||||
case "change_node":
|
||||
return {
|
||||
action: changeNode,
|
||||
value: [eventState.activeHudId],
|
||||
value: [eventState.hud],
|
||||
};
|
||||
case "toggle_level_selection":
|
||||
case "level_selection_back":
|
||||
|
|
@ -65,7 +66,7 @@ const NodeHUDManager = (props: StateManagerProps) => {
|
|||
case "select_level_down":
|
||||
return {
|
||||
action: selectLevelAnimation,
|
||||
value: [eventState.activeHudId],
|
||||
value: [eventState.hud],
|
||||
};
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { useNodeStore } from "../../../store";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { NodeDataType } from "../../../components/MainScene/SyncedComponents/Site";
|
||||
|
||||
const NodeManager = (props: StateManagerProps) => {
|
||||
const setActiveNodeState = useNodeStore((state) => state.setActiveNodeState);
|
||||
const setNodeMatrixIndices = useNodeStore(
|
||||
const setActiveNode = useMainSceneStore((state) => state.setNode);
|
||||
const setActiveNodeState = useMainSceneStore((state) => state.setNodeState);
|
||||
const setNodeMatrixIndices = useMainSceneStore(
|
||||
(state) => state.setNodeMatrixIndices
|
||||
);
|
||||
|
||||
|
|
@ -173,7 +175,7 @@ const NodeManager = (props: StateManagerProps) => {
|
|||
|
||||
const updateActiveNode = useCallback(
|
||||
(
|
||||
newActiveNodeId: string,
|
||||
node: NodeDataType,
|
||||
newNodeMatrixIndices: {
|
||||
matrixIdx: number;
|
||||
rowIdx: number;
|
||||
|
|
@ -183,17 +185,17 @@ const NodeManager = (props: StateManagerProps) => {
|
|||
delay?: number
|
||||
) => {
|
||||
setTimeout(() => {
|
||||
setActiveNodeState(newActiveNodeId, "id");
|
||||
setActiveNode(node);
|
||||
setNodeMatrixIndices(newNodeMatrixIndices);
|
||||
}, delay);
|
||||
},
|
||||
[setActiveNodeState, setNodeMatrixIndices]
|
||||
[setActiveNode, setNodeMatrixIndices]
|
||||
);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(eventState: {
|
||||
event: string;
|
||||
activeNodeId: string;
|
||||
node: NodeDataType;
|
||||
nodeMatrixIndices: {
|
||||
matrixIdx: number;
|
||||
rowIdx: number;
|
||||
|
|
@ -202,6 +204,7 @@ const NodeManager = (props: StateManagerProps) => {
|
|||
siteRotY: number;
|
||||
idleNodeId?: string;
|
||||
}) => {
|
||||
console.log(eventState.node);
|
||||
switch (eventState.event) {
|
||||
case "site_up":
|
||||
case "site_down":
|
||||
|
|
@ -211,17 +214,12 @@ const NodeManager = (props: StateManagerProps) => {
|
|||
case "select_level_down":
|
||||
return {
|
||||
action: updateActiveNode,
|
||||
value: [
|
||||
eventState.activeNodeId,
|
||||
eventState.nodeMatrixIndices,
|
||||
true,
|
||||
3900,
|
||||
],
|
||||
value: [eventState.node, eventState.nodeMatrixIndices, true, 3900],
|
||||
};
|
||||
case "change_node":
|
||||
return {
|
||||
action: updateActiveNode,
|
||||
value: [eventState.activeNodeId, eventState.nodeMatrixIndices],
|
||||
value: [eventState.node, eventState.nodeMatrixIndices],
|
||||
};
|
||||
case "throw_node_media":
|
||||
case "throw_node_gate":
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
import site_a from "../resources/site_a.json";
|
||||
import site_b from "../resources/site_b.json";
|
||||
import nodeSelector, { getNodeHudId, getNodeId } from "./nodeSelector";
|
||||
import { SiteType } from "../components/MainScene/SyncedComponents/Site";
|
||||
import nodeSelector, { getNode, getNodeHud } from "./nodeSelector";
|
||||
|
||||
const handleMainSceneEvent = (gameContext: any) => {
|
||||
let event;
|
||||
|
|
@ -17,8 +14,8 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
const siteASaveState = gameContext.siteASaveState;
|
||||
const siteBSaveState = gameContext.siteBSaveState;
|
||||
|
||||
let activeNodeId = gameContext.activeNodeId;
|
||||
let activeHudId;
|
||||
let activeNode = gameContext.activeNode;
|
||||
let activeHud;
|
||||
let nodeMatrixIndices = gameContext.nodeMatrixIndices;
|
||||
let level = parseInt(gameContext.activeLevel);
|
||||
let siteRotY = gameContext.siteTransformState.rotY;
|
||||
|
|
@ -34,7 +31,7 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
case "UP":
|
||||
selectedNodeData = nodeSelector({
|
||||
action: `site_${keyPress.toLowerCase()}`,
|
||||
activeId: activeNodeId,
|
||||
activeId: activeNode,
|
||||
nodeMatrixIndices: nodeMatrixIndices,
|
||||
level: level,
|
||||
siteRotY: siteRotY,
|
||||
|
|
@ -45,12 +42,12 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
|
||||
if (selectedNodeData) {
|
||||
event = selectedNodeData.event;
|
||||
activeNodeId = selectedNodeData.newActiveNodeId;
|
||||
activeNode = selectedNodeData.node;
|
||||
nodeMatrixIndices = selectedNodeData.newNodeMatrixIndices;
|
||||
siteRotY = selectedNodeData.newSiteRotY;
|
||||
sitePosY = selectedNodeData.newSitePosY;
|
||||
level = selectedNodeData.newLevel;
|
||||
activeHudId = selectedNodeData.newActiveHudId;
|
||||
activeHud = selectedNodeData.newActiveHud;
|
||||
}
|
||||
|
||||
break;
|
||||
|
|
@ -58,14 +55,9 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
// 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
|
||||
// new active blue orb here.
|
||||
activeNodeId = getNodeId(level, nodeMatrixIndices);
|
||||
activeNode = getNode(level, nodeMatrixIndices, currentSite);
|
||||
|
||||
const siteData = currentSite === "a" ? site_a : site_b;
|
||||
|
||||
const nodeData = (siteData as SiteType)[gameContext.activeLevel][
|
||||
activeNodeId
|
||||
];
|
||||
const nodeType = nodeData.type;
|
||||
const nodeType = activeNode.type;
|
||||
|
||||
const eventAnimation = Math.random() < 0.4 ? "rip_node" : "throw_node";
|
||||
|
||||
|
|
@ -79,7 +71,7 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
scene = "media";
|
||||
break;
|
||||
case 6:
|
||||
if (nodeData.node_name.substr(0, 3) === "TaK") {
|
||||
if (activeNode.node_name.substr(0, 3) === "TaK") {
|
||||
event = `${eventAnimation}_tak`;
|
||||
scene = "tak";
|
||||
} else {
|
||||
|
|
@ -112,8 +104,8 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
siteRotY: siteRotY,
|
||||
level: level.toString().padStart(2, "0"),
|
||||
scene: scene,
|
||||
activeNodeId: activeNodeId,
|
||||
activeHudId: activeHudId,
|
||||
node: activeNode,
|
||||
hud: activeHud,
|
||||
};
|
||||
} else if (subscene === "level_selection") {
|
||||
switch (keyPress) {
|
||||
|
|
@ -142,14 +134,13 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
case "X":
|
||||
return {
|
||||
event: "level_selection_back",
|
||||
activeNodeId: getNodeId(level, nodeMatrixIndices),
|
||||
activeHudId: getNodeHudId(nodeMatrixIndices),
|
||||
level: level.toString().padStart(2, "0"),
|
||||
node: getNode(level, nodeMatrixIndices, currentSite),
|
||||
hud: getNodeHud(nodeMatrixIndices),
|
||||
};
|
||||
case "CIRCLE":
|
||||
const selectedNodeData = nodeSelector({
|
||||
action: "select_level",
|
||||
activeId: activeNodeId,
|
||||
activeId: activeNode,
|
||||
nodeMatrixIndices: nodeMatrixIndices,
|
||||
level: selectedLevel,
|
||||
siteRotY: siteRotY,
|
||||
|
|
@ -165,8 +156,8 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
return {
|
||||
event: event,
|
||||
level: selectedLevel.toString().padStart(2, "0"),
|
||||
activeNodeId: selectedNodeData.newActiveNodeId,
|
||||
activeHudId: selectedNodeData.newActiveHudId,
|
||||
activeNodeId: selectedNodeData.node,
|
||||
activeHud: selectedNodeData.newActiveHud,
|
||||
nodeMatrixIndices: selectedNodeData.newNodeMatrixIndices,
|
||||
sitePosY: -selectedNodeData.newSitePosY,
|
||||
};
|
||||
|
|
@ -191,9 +182,9 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
event: `pause_${activePauseComponent}_select`,
|
||||
currentSitePosY: sitePosY,
|
||||
currentSiteRotY: siteRotY,
|
||||
currentNodeId: activeNodeId,
|
||||
currentNodeId: activeNode,
|
||||
currentNodeMatrixIndices: nodeMatrixIndices,
|
||||
currentHudId: getNodeHudId(nodeMatrixIndices),
|
||||
currentHud: getNodeHud(nodeMatrixIndices),
|
||||
currentLevel: level.toString().padStart(2, "0"),
|
||||
site: currentSite === "a" ? "b" : "a",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
import node_matrices from "../resources/node_matrices.json";
|
||||
import site_a from "../resources/site_a.json";
|
||||
import site_b from "../resources/site_b.json";
|
||||
import { SiteType } from "../components/MainScene/SyncedComponents/Site";
|
||||
import {
|
||||
NodeDataType,
|
||||
SiteType,
|
||||
} from "../components/MainScene/SyncedComponents/Site";
|
||||
import unlocked_nodes from "../resources/initial_progress.json";
|
||||
import level_y_values from "../resources/level_y_values.json";
|
||||
import node_huds from "../resources/node_huds.json";
|
||||
|
||||
type NodeSelectorContext = {
|
||||
action: string;
|
||||
|
|
@ -31,41 +35,45 @@ const hudAssocs = {
|
|||
"23": "fg_hud_6",
|
||||
};
|
||||
|
||||
export const getNodeId = (
|
||||
export const getNode = (
|
||||
level: number,
|
||||
nodeMatrixIndices: {
|
||||
matrixIdx: number;
|
||||
rowIdx: number;
|
||||
colIdx: number;
|
||||
}
|
||||
},
|
||||
currentSite: string
|
||||
) => {
|
||||
return (
|
||||
level.toString().padStart(2, "0") +
|
||||
const siteData = currentSite === "a" ? site_a : site_b;
|
||||
|
||||
const formattedLevel = level.toString().padStart(2, "0");
|
||||
const nodePos =
|
||||
node_matrices[
|
||||
nodeMatrixIndices.matrixIdx.toString() as keyof typeof node_matrices
|
||||
][nodeMatrixIndices.rowIdx][nodeMatrixIndices.colIdx]
|
||||
);
|
||||
][nodeMatrixIndices.rowIdx][nodeMatrixIndices.colIdx];
|
||||
|
||||
const id = formattedLevel + nodePos;
|
||||
|
||||
return (siteData as SiteType)[formattedLevel][id];
|
||||
};
|
||||
|
||||
export const getNodeHudId = (nodeMatrixIndices: {
|
||||
export const getNodeHud = (nodeMatrixIndices: {
|
||||
matrixIdx: number;
|
||||
rowIdx: number;
|
||||
colIdx: number;
|
||||
}) =>
|
||||
hudAssocs[
|
||||
`${nodeMatrixIndices.rowIdx}${nodeMatrixIndices.colIdx}` as keyof typeof hudAssocs
|
||||
node_huds[
|
||||
hudAssocs[
|
||||
`${nodeMatrixIndices.rowIdx}${nodeMatrixIndices.colIdx}` as keyof typeof hudAssocs
|
||||
] as keyof typeof node_huds
|
||||
];
|
||||
|
||||
export const isNodeVisible = (
|
||||
nodeId: string,
|
||||
gameProgress: typeof unlocked_nodes,
|
||||
currentSite: string
|
||||
node: NodeDataType,
|
||||
gameProgress: typeof unlocked_nodes
|
||||
) => {
|
||||
const siteData = currentSite === "a" ? site_a : site_b;
|
||||
const nodeLevel = nodeId.substr(0, 2);
|
||||
const nodeData = (siteData as SiteType)[nodeLevel][nodeId];
|
||||
if (nodeData) {
|
||||
const unlockedBy = nodeData.unlocked_by;
|
||||
if (node) {
|
||||
const unlockedBy = node.unlocked_by;
|
||||
|
||||
let unlocked;
|
||||
if (unlockedBy === "") unlocked = true;
|
||||
|
|
@ -77,7 +85,7 @@ export const isNodeVisible = (
|
|||
|
||||
return (
|
||||
unlocked &&
|
||||
gameProgress[nodeData.node_name as keyof typeof gameProgress].is_visible
|
||||
gameProgress[node.node_name as keyof typeof gameProgress].is_visible
|
||||
);
|
||||
} else {
|
||||
return false;
|
||||
|
|
@ -106,9 +114,13 @@ const findNodeAfterLevelSelection = (
|
|||
|
||||
newMatIndices.rowIdx = 0;
|
||||
|
||||
let newNodeId = getNodeId(targetLevel, newMatIndices);
|
||||
let newNode: NodeDataType | "UNKNOWN" = getNode(
|
||||
targetLevel,
|
||||
newMatIndices,
|
||||
currentSite
|
||||
);
|
||||
|
||||
while (!isNodeVisible(newNodeId, gameProgress, currentSite)) {
|
||||
while (!isNodeVisible(newNode, gameProgress)) {
|
||||
if (triedCols.length < 4) {
|
||||
triedCols.push(newMatIndices.colIdx);
|
||||
const colToTry = tryCol(newMatIndices.colIdx, triedCols);
|
||||
|
|
@ -118,7 +130,7 @@ const findNodeAfterLevelSelection = (
|
|||
} else {
|
||||
if (newMatIndices.rowIdx === 2) {
|
||||
newMatIndices.colIdx = nodeMatrixIndices.colIdx;
|
||||
newNodeId = "UNKNOWN";
|
||||
newNode = "UNKNOWN";
|
||||
break;
|
||||
} else {
|
||||
newMatIndices.rowIdx++;
|
||||
|
|
@ -126,15 +138,15 @@ const findNodeAfterLevelSelection = (
|
|||
newMatIndices.colIdx = 0;
|
||||
}
|
||||
}
|
||||
newNodeId = getNodeId(targetLevel, newMatIndices);
|
||||
newNode = getNode(targetLevel, newMatIndices, currentSite);
|
||||
}
|
||||
|
||||
const newNodeHudId = getNodeHudId(newMatIndices);
|
||||
const newNodeHud = getNodeHud(newMatIndices);
|
||||
|
||||
return {
|
||||
newLevel: targetLevel,
|
||||
newNodeId: newNodeId,
|
||||
newNodeHudId: newNodeHudId,
|
||||
node: newNode,
|
||||
newNodeHud: newNodeHud,
|
||||
newNodeMatrixIndices: newMatIndices,
|
||||
newSitePosY:
|
||||
level_y_values[
|
||||
|
|
@ -150,7 +162,7 @@ const findNodeVertical = (
|
|||
nodeMatrixIndices: { matrixIdx: number; rowIdx: number; colIdx: number },
|
||||
currentSite: string
|
||||
) => {
|
||||
let newNodeId;
|
||||
let newNode: NodeDataType | "UNKNOWN";
|
||||
let newLevel = level;
|
||||
let newMatIndices = Object.assign({}, nodeMatrixIndices);
|
||||
|
||||
|
|
@ -164,9 +176,9 @@ const findNodeVertical = (
|
|||
newLevel = level - 1;
|
||||
}
|
||||
|
||||
newNodeId = getNodeId(newLevel, newMatIndices);
|
||||
newNode = getNode(newLevel, newMatIndices, currentSite);
|
||||
|
||||
while (!isNodeVisible(newNodeId, gameProgress, currentSite)) {
|
||||
while (!isNodeVisible(newNode, gameProgress)) {
|
||||
if (triedCols.length < 4) {
|
||||
triedCols.push(newMatIndices.colIdx);
|
||||
const colToTry = tryCol(newMatIndices.colIdx, triedCols);
|
||||
|
|
@ -176,7 +188,7 @@ const findNodeVertical = (
|
|||
} else {
|
||||
if (newMatIndices.rowIdx === 2) {
|
||||
if (newLevel === level - 1) {
|
||||
newNodeId = "UNKNOWN";
|
||||
newNode = "UNKNOWN";
|
||||
newMatIndices.colIdx = nodeMatrixIndices.colIdx;
|
||||
break;
|
||||
}
|
||||
|
|
@ -188,7 +200,7 @@ const findNodeVertical = (
|
|||
triedCols = [];
|
||||
}
|
||||
}
|
||||
newNodeId = getNodeId(newLevel, newMatIndices);
|
||||
newNode = getNode(newLevel, newMatIndices, currentSite);
|
||||
}
|
||||
} else if (direction === "up") {
|
||||
newMatIndices.rowIdx--;
|
||||
|
|
@ -200,9 +212,9 @@ const findNodeVertical = (
|
|||
newLevel = level + 1;
|
||||
}
|
||||
|
||||
newNodeId = getNodeId(newLevel, newMatIndices);
|
||||
newNode = getNode(newLevel, newMatIndices, currentSite);
|
||||
|
||||
while (!isNodeVisible(newNodeId, gameProgress, currentSite)) {
|
||||
while (!isNodeVisible(newNode, gameProgress)) {
|
||||
if (triedCols.length < 4) {
|
||||
triedCols.push(newMatIndices.colIdx);
|
||||
const colToTry = tryCol(newMatIndices.colIdx, triedCols);
|
||||
|
|
@ -212,7 +224,7 @@ const findNodeVertical = (
|
|||
} else {
|
||||
if (newMatIndices.rowIdx === 0) {
|
||||
if (newLevel === level + 1) {
|
||||
newNodeId = "UNKNOWN";
|
||||
newNode = "UNKNOWN";
|
||||
newMatIndices.colIdx = nodeMatrixIndices.colIdx;
|
||||
break;
|
||||
}
|
||||
|
|
@ -224,13 +236,13 @@ const findNodeVertical = (
|
|||
triedCols = [];
|
||||
}
|
||||
}
|
||||
newNodeId = getNodeId(newLevel, newMatIndices);
|
||||
newNode = getNode(newLevel, newMatIndices, currentSite);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
newNodeId: newNodeId,
|
||||
newNodeHudId: getNodeHudId(newMatIndices),
|
||||
node: newNode!,
|
||||
newNodeHud: getNodeHud(newMatIndices),
|
||||
newLevel: newLevel,
|
||||
newNodeMatrixIndices: newMatIndices,
|
||||
};
|
||||
|
|
@ -244,7 +256,7 @@ const findNodeHorizontal = (
|
|||
nodeMatrixIndices: { matrixIdx: number; rowIdx: number; colIdx: number },
|
||||
currentSite: string
|
||||
) => {
|
||||
let newNodeId;
|
||||
let newNode: NodeDataType | "UNKNOWN";
|
||||
let newMatIndices = Object.assign({}, nodeMatrixIndices);
|
||||
|
||||
let didMove = false;
|
||||
|
|
@ -261,9 +273,9 @@ const findNodeHorizontal = (
|
|||
newMatIndices.matrixIdx + 1 > 8 ? 1 : newMatIndices.matrixIdx + 1;
|
||||
}
|
||||
|
||||
newNodeId = getNodeId(level, newMatIndices);
|
||||
newNode = getNode(level, newMatIndices, currentSite);
|
||||
|
||||
while (!isNodeVisible(newNodeId, gameProgress, currentSite)) {
|
||||
while (!isNodeVisible(newNode, gameProgress)) {
|
||||
if (triedRows.length < 3) {
|
||||
triedRows.push(newMatIndices.rowIdx);
|
||||
const rowToTry = tryRow(newMatIndices.rowIdx, triedRows);
|
||||
|
|
@ -279,7 +291,7 @@ const findNodeHorizontal = (
|
|||
newMatIndices.colIdx = nodeMatrixIndices.colIdx;
|
||||
newMatIndices.matrixIdx =
|
||||
newMatIndices.matrixIdx + 1 > 8 ? 1 : newMatIndices.matrixIdx + 1;
|
||||
newNodeId = "UNKNOWN";
|
||||
newNode = "UNKNOWN";
|
||||
break;
|
||||
} else {
|
||||
didMove = true;
|
||||
|
|
@ -293,7 +305,7 @@ const findNodeHorizontal = (
|
|||
newMatIndices.rowIdx = 0;
|
||||
}
|
||||
}
|
||||
newNodeId = getNodeId(level, newMatIndices);
|
||||
newNode = getNode(level, newMatIndices, currentSite);
|
||||
}
|
||||
} else if (direction === "right") {
|
||||
newMatIndices.colIdx++;
|
||||
|
|
@ -307,9 +319,9 @@ const findNodeHorizontal = (
|
|||
newMatIndices.matrixIdx - 1 < 1 ? 8 : newMatIndices.matrixIdx - 1;
|
||||
}
|
||||
|
||||
newNodeId = getNodeId(level, newMatIndices);
|
||||
newNode = getNode(level, newMatIndices, currentSite);
|
||||
|
||||
while (!isNodeVisible(newNodeId, gameProgress, currentSite)) {
|
||||
while (!isNodeVisible(newNode, gameProgress)) {
|
||||
if (triedRows.length < 3) {
|
||||
triedRows.push(newMatIndices.rowIdx);
|
||||
const rowToTry = tryRow(newMatIndices.rowIdx, triedRows);
|
||||
|
|
@ -325,7 +337,7 @@ const findNodeHorizontal = (
|
|||
newMatIndices.colIdx = nodeMatrixIndices.colIdx;
|
||||
newMatIndices.matrixIdx =
|
||||
newMatIndices.matrixIdx - 1 < 1 ? 8 : newMatIndices.matrixIdx - 1;
|
||||
newNodeId = "UNKNOWN";
|
||||
newNode = "UNKNOWN";
|
||||
break;
|
||||
} else {
|
||||
if (didMove) return;
|
||||
|
|
@ -344,16 +356,16 @@ const findNodeHorizontal = (
|
|||
newMatIndices.rowIdx = 0;
|
||||
}
|
||||
}
|
||||
newNodeId = getNodeId(level, newMatIndices);
|
||||
newNode = getNode(level, newMatIndices, currentSite);
|
||||
}
|
||||
}
|
||||
|
||||
const newNodeHudId = getNodeHudId(newMatIndices);
|
||||
const newNodeHud = getNodeHud(newMatIndices);
|
||||
|
||||
return {
|
||||
didMove: didMove,
|
||||
newNodeId: newNodeId,
|
||||
newNodeHudId: newNodeHudId,
|
||||
node: newNode!,
|
||||
newNodeHud: newNodeHud,
|
||||
newNodeMatrixIndices: newMatIndices,
|
||||
};
|
||||
};
|
||||
|
|
@ -380,8 +392,8 @@ const nodeSelector = (context: NodeSelectorContext) => {
|
|||
|
||||
return {
|
||||
event: newNodeData.didMove ? context.action : "change_node",
|
||||
newActiveNodeId: newNodeData.newNodeId,
|
||||
newActiveHudId: newNodeData.newNodeHudId,
|
||||
node: newNodeData.node,
|
||||
newActiveHud: newNodeData.newNodeHud,
|
||||
newNodeMatrixIndices: newNodeData.newNodeMatrixIndices,
|
||||
newSiteRotY: newNodeData.didMove
|
||||
? context.siteRotY + siteRotYModifier
|
||||
|
|
@ -408,9 +420,9 @@ const nodeSelector = (context: NodeSelectorContext) => {
|
|||
const sitePosYModifier = move === "up" ? -1.5 : 1.5;
|
||||
return {
|
||||
event: didMove ? context.action : "change_node",
|
||||
newActiveNodeId: newNodeData.newNodeId,
|
||||
node: newNodeData.node,
|
||||
newNodeMatrixIndices: newNodeData.newNodeMatrixIndices,
|
||||
newActiveHudId: newNodeData.newNodeHudId,
|
||||
newActiveHud: newNodeData.newNodeHud,
|
||||
newSiteRotY: context.siteRotY,
|
||||
newSitePosY: didMove
|
||||
? context.sitePosY + sitePosYModifier
|
||||
|
|
@ -429,9 +441,9 @@ const nodeSelector = (context: NodeSelectorContext) => {
|
|||
|
||||
if (newNodeData) {
|
||||
return {
|
||||
newActiveNodeId: newNodeData.newNodeId,
|
||||
node: newNodeData.node,
|
||||
newNodeMatrixIndices: newNodeData.newNodeMatrixIndices,
|
||||
newActiveHudId: newNodeData.newNodeHudId,
|
||||
newActiveHud: newNodeData.newNodeHud,
|
||||
newSiteRotY: context.siteRotY,
|
||||
newLevel: newNodeData.newLevel,
|
||||
newSitePosY: newNodeData.newSitePosY,
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,12 +1,5 @@
|
|||
import React, { useCallback, useEffect } from "react";
|
||||
import {
|
||||
useIdleStore,
|
||||
useLevelStore,
|
||||
useMediaStore,
|
||||
useNodeStore,
|
||||
useSceneStore,
|
||||
useSiteStore,
|
||||
} from "../store";
|
||||
import { useMainSceneStore, useMediaStore } from "../store";
|
||||
import LeftSide from "../components/MediaScene/Selectables/LeftSide";
|
||||
import RightSide from "../components/MediaScene/Selectables/RightSide";
|
||||
import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisualizer";
|
||||
|
|
@ -15,29 +8,20 @@ import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
|
|||
import Lof from "../components/MediaScene/Lof";
|
||||
import Images from "../components/MediaScene/Images";
|
||||
import MediumLetter from "../components/TextRenderer/MediumLetter";
|
||||
import site_a from "../resources/site_a.json";
|
||||
import { SiteType } from "../components/MainScene/SyncedComponents/Site";
|
||||
import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextAnimator";
|
||||
import site_b from "../resources/site_b.json";
|
||||
import MediaSceneEventManager from "../core/StateManagers/MediaSceneEventManager";
|
||||
|
||||
const MediaScene = () => {
|
||||
const currentScene = useSceneStore((state) => state.currentScene);
|
||||
const mediaComponentMatrixIndices = useMediaStore(
|
||||
(state) => state.componentMatrixIndices
|
||||
);
|
||||
|
||||
const idleMedia = useIdleStore((state) => state.media);
|
||||
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||
const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||
|
||||
const currentSite = useSiteStore((state) => state.currentSite);
|
||||
|
||||
const siteData = currentSite === "a" ? site_a : site_b;
|
||||
|
||||
const activeNodeData = (siteData as SiteType)[activeLevel][activeNodeId];
|
||||
const activeNodeName = activeNodeData.node_name;
|
||||
const activeNodeMedia = activeNodeData.media_file;
|
||||
const activeNodeName = useMainSceneStore((state) =>
|
||||
state.activeNode.node_name.split("")
|
||||
);
|
||||
const activeNodeMedia = useMainSceneStore(
|
||||
(state) => state.activeNode.media_file
|
||||
);
|
||||
|
||||
const activeMediaComponent = useMediaStore(
|
||||
useCallback(
|
||||
|
|
@ -70,7 +54,7 @@ const MediaScene = () => {
|
|||
<NodeNameContainer />
|
||||
</group>
|
||||
<group scale={[0.06, 0.12, 0]} position={[0.8, 1.37, 0]}>
|
||||
{activeNodeName.split("").map((letter, idx) => (
|
||||
{activeNodeName.map((letter: string, idx: number) => (
|
||||
<MediumLetter letter={letter} letterIdx={idx} key={idx} />
|
||||
))}
|
||||
</group>
|
||||
|
|
|
|||
136
src/store.ts
136
src/store.ts
|
|
@ -5,6 +5,7 @@ import site_a from "./resources/site_a.json";
|
|||
import site_b from "./resources/site_b.json";
|
||||
import authorize_user_letters from "./resources/authorize_user_letters.json";
|
||||
import game_progress from "./resources/initial_progress.json";
|
||||
import { HUDType } from "./components/MainScene/SyncedComponents/HUD";
|
||||
|
||||
type EndState = {
|
||||
mediaPlayedCount: number;
|
||||
|
|
@ -86,15 +87,6 @@ type LainState = {
|
|||
setLainMoveState: (to: string) => void;
|
||||
};
|
||||
|
||||
type StarfieldState = {
|
||||
introStarfieldVisible: boolean;
|
||||
mainStarfieldVisible: boolean;
|
||||
mainStarfieldBoostVal: number;
|
||||
setIntroStarfieldVisible: (to: boolean) => void;
|
||||
setMainStarfieldVisible: (to: boolean) => void;
|
||||
setMainStarfieldBoostVal: (to: number) => void;
|
||||
};
|
||||
|
||||
type SiteState = {
|
||||
currentSite: "a" | "b";
|
||||
transformState: {
|
||||
|
|
@ -241,44 +233,6 @@ export const useMediaBigTextStore = create(
|
|||
)
|
||||
);
|
||||
|
||||
export const useHudStore = create<HUDState>((set) => ({
|
||||
id: "fg_hud_1",
|
||||
active: 1,
|
||||
setId: (to) => set(() => ({ id: to })),
|
||||
toggleActive: () => set((state) => ({ active: Number(!state.active) })),
|
||||
}));
|
||||
|
||||
export const useNodeStore = create(
|
||||
combine(
|
||||
{
|
||||
activeNodeState: {
|
||||
id: "0422",
|
||||
posX: 0,
|
||||
posZ: 0,
|
||||
rotZ: 0,
|
||||
posY: 0,
|
||||
interactedWith: false,
|
||||
exploding: false,
|
||||
shrinking: false,
|
||||
visible: true,
|
||||
},
|
||||
nodeMatrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },
|
||||
gameProgress: game_progress,
|
||||
} as NodeState,
|
||||
(set) => ({
|
||||
setActiveNodeState: (to: number | boolean | string, at: string) =>
|
||||
set((state) => ({
|
||||
activeNodeState: { ...state.activeNodeState, [at]: to },
|
||||
})),
|
||||
setNodeMatrixIndices: (to: {
|
||||
matrixIdx: number;
|
||||
rowIdx: number;
|
||||
colIdx: number;
|
||||
}) => set(() => ({ nodeMatrixIndices: to })),
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
export const useIdleStore = create<IdleState>((set) => ({
|
||||
media: "INS01.STR",
|
||||
// this may be undefined depending on whether or not the media is audio or not
|
||||
|
|
@ -287,20 +241,6 @@ export const useIdleStore = create<IdleState>((set) => ({
|
|||
setImages: (to) => set(() => ({ images: to })),
|
||||
}));
|
||||
|
||||
export const useLainStore = create<LainState>((set) => ({
|
||||
lainMoveState: "standing",
|
||||
setLainMoveState: (to) => set(() => ({ lainMoveState: to })),
|
||||
}));
|
||||
|
||||
export const useStarfieldStore = create<StarfieldState>((set) => ({
|
||||
introStarfieldVisible: false,
|
||||
mainStarfieldVisible: true,
|
||||
mainStarfieldBoostVal: 0.2,
|
||||
setIntroStarfieldVisible: (to) => set(() => ({ introStarfieldVisible: to })),
|
||||
setMainStarfieldVisible: (to) => set(() => ({ mainStarfieldVisible: to })),
|
||||
setMainStarfieldBoostVal: (to) => set(() => ({ mainStarfieldBoostVal: to })),
|
||||
}));
|
||||
|
||||
export const useSiteStore = create(
|
||||
combine(
|
||||
{
|
||||
|
|
@ -468,11 +408,56 @@ export const useMainSceneStore = create(
|
|||
bigTextXOffset: 0,
|
||||
|
||||
// hud
|
||||
hudId: "fg_hud_1",
|
||||
hud: {
|
||||
mirrored: 0,
|
||||
long: {
|
||||
position: [-0.45, 0.15, -8.6],
|
||||
initial_position: [-1.45, 0.15, -8.6],
|
||||
},
|
||||
boring: {
|
||||
position: [0.48, 0.174, -8.6],
|
||||
initial_position: [1.48, 0.174, -8.6],
|
||||
},
|
||||
big: {
|
||||
position: [0.36, 0.13, -8.6],
|
||||
initial_position: [1.36, 0.13, -8.6],
|
||||
},
|
||||
big_text: [-0.35, 0.23, -8.7],
|
||||
medium_text: {
|
||||
position: [0.18, 0.16, -8.7],
|
||||
initial_position: [1.18, 0.16, -8.7],
|
||||
},
|
||||
},
|
||||
hudActive: 1,
|
||||
|
||||
// nodes
|
||||
activeNodeId: "0422",
|
||||
activeNode: {
|
||||
image_table_indices: {
|
||||
"1": "93",
|
||||
"2": "356",
|
||||
"3": "562",
|
||||
},
|
||||
media_file: "LAIN08.XA[26]",
|
||||
node_name: "Tda028",
|
||||
protocol_lines: {
|
||||
"1": "TOUKO's_DIARY",
|
||||
"2": "authorized_il",
|
||||
"3": "decoded file:t",
|
||||
"4": "ftp/tl.S_server",
|
||||
},
|
||||
required_final_video_viewcount: 0,
|
||||
site: "A",
|
||||
title: "TOUKO's DIARY",
|
||||
triggers_final_video: 0,
|
||||
type: 2,
|
||||
unlocked_by: "",
|
||||
upgrade_requirement: 0,
|
||||
words: {
|
||||
"1": "eye",
|
||||
"2": "quiet",
|
||||
"3": "hallucination",
|
||||
},
|
||||
},
|
||||
activeNodeMatrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },
|
||||
activeNodePos: [0, 0, 0],
|
||||
activeNodeRot: [0, 0, 0],
|
||||
|
|
@ -486,11 +471,6 @@ export const useMainSceneStore = create(
|
|||
// lain
|
||||
lainMoveState: "standing",
|
||||
|
||||
// starfield
|
||||
mainStarfieldVisible: true,
|
||||
introStarfieldVisible: false,
|
||||
mainStarBoostVal: 0.2,
|
||||
|
||||
// site
|
||||
activeSite: "a",
|
||||
siteRot: [0, 0, 0],
|
||||
|
|
@ -535,20 +515,20 @@ export const useMainSceneStore = create(
|
|||
setBigTextXOffset: (to: number) => set(() => ({ bigTextXOffset: to })),
|
||||
|
||||
// hud setters
|
||||
setHudId: (to: string) => set(() => ({ hudId: to })),
|
||||
setHud: (to: HUDType) => set(() => ({ hud: to })),
|
||||
toggleHudActive: () =>
|
||||
set((state) => ({ hudActive: Number(!state.hudActive) })),
|
||||
|
||||
// node setters
|
||||
setActiveNodeId: (to: string) => set(() => ({ activeNodeId: to })),
|
||||
setActiveNodeMatrixIndices: (to: {
|
||||
setNode: (to: string) => set(() => ({ activeNode: to })),
|
||||
setNodeMatrixIndices: (to: {
|
||||
matrixIdx: number;
|
||||
rowIdx: number;
|
||||
colIdx: number;
|
||||
}) => set(() => ({ activeNodeMatrixIndices: to })),
|
||||
setActiveNodePos: (to: number[]) => set(() => ({ activeNodePos: to })),
|
||||
setActiveNodeRot: (to: number[]) => set(() => ({ activeNodeRot: to })),
|
||||
setActiveNodeState: (
|
||||
setNodePos: (to: number[]) => set(() => ({ activeNodePos: to })),
|
||||
setNodeRot: (to: number[]) => set(() => ({ activeNodeRot: to })),
|
||||
setNodeState: (
|
||||
to: boolean,
|
||||
at: "interactedWith" | "visible" | "exploding" | "shrinking"
|
||||
) =>
|
||||
|
|
@ -559,14 +539,6 @@ export const useMainSceneStore = create(
|
|||
// lain setters
|
||||
setLainMoveState: (to: string) => set(() => ({ lainMoveState: to })),
|
||||
|
||||
// starfield setters
|
||||
setMainStarfieldVisible: (to: boolean) =>
|
||||
set(() => ({ mainStarfieldVisible: to })),
|
||||
setMainStarBoostVal: (to: number) =>
|
||||
set(() => ({ mainStarBoostVal: to })),
|
||||
setIntroStarfieldVisible: (to: boolean) =>
|
||||
set(() => ({ introStarfieldVisible: to })),
|
||||
|
||||
// site setters
|
||||
setActiveSite: (to: "a" | "b") => set(() => ({ activeSite: to })),
|
||||
setSiteRot: (to: number[]) => set(() => ({ siteRot: to })),
|
||||
|
|
|
|||
Loading…
Reference in a new issue