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