mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
fixed site intro/node title bugs, renamed nodestate to nodeattribtues
This commit is contained in:
parent
eabcf06cb2
commit
f6ac61ff77
12 changed files with 67 additions and 47 deletions
|
@ -9,6 +9,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 level_y_values from "../../resources/level_y_values.json";
|
import level_y_values from "../../resources/level_y_values.json";
|
||||||
import { filterInvisibleNodes } from "../../utils/node-utils";
|
import { filterInvisibleNodes } from "../../utils/node-utils";
|
||||||
|
import NodeNameContainer from "../MediaScene/NodeNameContainer";
|
||||||
|
|
||||||
export type NodeDataType = {
|
export type NodeDataType = {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
|
@ -132,20 +132,20 @@ const Node = memo((props: NodeContructorProps) => {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
useStore.subscribe(set, (state) => ({
|
useStore.subscribe(set, (state) => ({
|
||||||
activeNodePosX: state.activeNodeState.interactedWith
|
activeNodePosX: state.activeNodeAttributes.interactedWith
|
||||||
? state.activeNodePos[0]
|
? state.activeNodePos[0]
|
||||||
: props.position[0],
|
: props.position[0],
|
||||||
activeNodePosY: state.activeNodeState.interactedWith
|
activeNodePosY: state.activeNodeAttributes.interactedWith
|
||||||
? state.activeNodePos[1]
|
? state.activeNodePos[1]
|
||||||
: props.position[1],
|
: props.position[1],
|
||||||
activeNodePosZ: state.activeNodeState.interactedWith
|
activeNodePosZ: state.activeNodeAttributes.interactedWith
|
||||||
? state.activeNodePos[2]
|
? state.activeNodePos[2]
|
||||||
: props.position[2],
|
: props.position[2],
|
||||||
activeNodeRotZ: state.activeNodeState.interactedWith
|
activeNodeRotZ: state.activeNodeAttributes.interactedWith
|
||||||
? state.activeNodeRot[2]
|
? state.activeNodeRot[2]
|
||||||
: 0,
|
: 0,
|
||||||
activeNodeScale: state.activeNodeState.shrinking ? 0 : 1,
|
activeNodeScale: state.activeNodeAttributes.shrinking ? 0 : 1,
|
||||||
activeNodeVisible: state.activeNodeState.visible,
|
activeNodeVisible: state.activeNodeAttributes.visible,
|
||||||
}));
|
}));
|
||||||
}, [
|
}, [
|
||||||
props.level,
|
props.level,
|
||||||
|
|
|
@ -5,11 +5,11 @@ import NodeRip from "./NodeAnimations/NodeRip";
|
||||||
|
|
||||||
const NodeAnimations = () => {
|
const NodeAnimations = () => {
|
||||||
const nodeShrinking = useStore(
|
const nodeShrinking = useStore(
|
||||||
(state) => state.activeNodeState.shrinking
|
(state) => state.activeNodeAttributes.shrinking
|
||||||
);
|
);
|
||||||
|
|
||||||
const nodeExploding = useStore(
|
const nodeExploding = useStore(
|
||||||
(state) => state.activeNodeState.exploding
|
(state) => state.activeNodeAttributes.exploding
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -7,7 +7,7 @@ import GoldNode from "./NodeExplosion/GoldNode";
|
||||||
import { useStore } from "../../../../store";
|
import { useStore } from "../../../../store";
|
||||||
|
|
||||||
const NodeExplosion = () => {
|
const NodeExplosion = () => {
|
||||||
const explosionVisible = useStore((state) => state.activeNodeState.exploding);
|
const explosionVisible = useStore((state) => state.activeNodeAttributes.exploding);
|
||||||
|
|
||||||
const [shouldAnimate, setShouldAnimate] = useState(false);
|
const [shouldAnimate, setShouldAnimate] = useState(false);
|
||||||
const [shouldRotate, setShouldRotate] = useState(false);
|
const [shouldRotate, setShouldRotate] = useState(false);
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { useFrame } from "react-three-fiber";
|
||||||
|
|
||||||
const NodeRip = () => {
|
const NodeRip = () => {
|
||||||
const nodeShrinking = useStore(
|
const nodeShrinking = useStore(
|
||||||
(state) => state.activeNodeState.shrinking
|
(state) => state.activeNodeAttributes.shrinking
|
||||||
);
|
);
|
||||||
const [shouldAnimate, setShouldAnimate] = useState(false);
|
const [shouldAnimate, setShouldAnimate] = useState(false);
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,9 @@ import throwNodeSpriteSheet from "../static/sprite/throw_node.png";
|
||||||
import ripMiddleRingSpriteSheet from "../static/sprite/rip_middle_ring.png";
|
import ripMiddleRingSpriteSheet from "../static/sprite/rip_middle_ring.png";
|
||||||
import ripNodeSpriteSheet from "../static/sprite/rip_node.png";
|
import ripNodeSpriteSheet from "../static/sprite/rip_node.png";
|
||||||
import prayerSpriteSheet from "../static/sprite/prayer.png";
|
import prayerSpriteSheet from "../static/sprite/prayer.png";
|
||||||
|
import knockSpriteSheet from "../static/sprite/knock.png";
|
||||||
|
import knockAndFallSpriteSheet from "../static/sprite/knock_and_fall.png";
|
||||||
|
import touchAndScareSpriteSheet from "../static/sprite/touch_and_scare.png";
|
||||||
|
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useLoader, useThree } from "react-three-fiber";
|
import { useLoader, useThree } from "react-three-fiber";
|
||||||
|
@ -50,6 +53,12 @@ const Preloader = () => {
|
||||||
);
|
);
|
||||||
const ripNode = useLoader(THREE.TextureLoader, ripNodeSpriteSheet);
|
const ripNode = useLoader(THREE.TextureLoader, ripNodeSpriteSheet);
|
||||||
const prayer = useLoader(THREE.TextureLoader, prayerSpriteSheet);
|
const prayer = useLoader(THREE.TextureLoader, prayerSpriteSheet);
|
||||||
|
const knock = useLoader(THREE.TextureLoader, knockSpriteSheet);
|
||||||
|
const knockAndFall = useLoader(THREE.TextureLoader, knockAndFallSpriteSheet);
|
||||||
|
const touchAndScare = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
touchAndScareSpriteSheet
|
||||||
|
);
|
||||||
|
|
||||||
const { gl } = useThree();
|
const { gl } = useThree();
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
|
@ -69,6 +78,9 @@ const Preloader = () => {
|
||||||
gl.initTexture(ripMiddleRing);
|
gl.initTexture(ripMiddleRing);
|
||||||
gl.initTexture(ripNode);
|
gl.initTexture(ripNode);
|
||||||
gl.initTexture(prayer);
|
gl.initTexture(prayer);
|
||||||
|
gl.initTexture(touchAndScare);
|
||||||
|
gl.initTexture(knock);
|
||||||
|
gl.initTexture(knockAndFall);
|
||||||
}, [
|
}, [
|
||||||
moveDown,
|
moveDown,
|
||||||
moveUp,
|
moveUp,
|
||||||
|
@ -87,6 +99,9 @@ const Preloader = () => {
|
||||||
ripMiddleRing,
|
ripMiddleRing,
|
||||||
ripNode,
|
ripNode,
|
||||||
prayer,
|
prayer,
|
||||||
|
touchAndScare,
|
||||||
|
knock,
|
||||||
|
knockAndFall,
|
||||||
]);
|
]);
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
|
@ -27,7 +27,7 @@ const GreenTextRenderer = memo(() => {
|
||||||
|
|
||||||
let lineNum: number;
|
let lineNum: number;
|
||||||
if (letter === " ") {
|
if (letter === " ") {
|
||||||
lineNum = 5;
|
lineNum = 6;
|
||||||
} else {
|
} else {
|
||||||
if (lineOne.includes(letter)) {
|
if (lineOne.includes(letter)) {
|
||||||
lineNum = 1;
|
lineNum = 1;
|
||||||
|
|
|
@ -5,7 +5,7 @@ const nodeManager = (eventState: any) => {
|
||||||
const setActiveNode = useStore.getState().setNode;
|
const setActiveNode = useStore.getState().setNode;
|
||||||
const setActiveNodePos = useStore.getState().setNodePos;
|
const setActiveNodePos = useStore.getState().setNodePos;
|
||||||
const setActiveNodeRot = useStore.getState().setNodeRot;
|
const setActiveNodeRot = useStore.getState().setNodeRot;
|
||||||
const setActiveNodeState = useStore.getState().setNodeState;
|
const setActiveNodeAttributes = useStore.getState().setNodeAttributes;
|
||||||
|
|
||||||
const calculateCoordsBasedOnRotation = (
|
const calculateCoordsBasedOnRotation = (
|
||||||
x: number,
|
x: number,
|
||||||
|
@ -17,7 +17,7 @@ const nodeManager = (eventState: any) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const animateActiveNodeThrow = (siteRotY: number) => {
|
const animateActiveNodeThrow = (siteRotY: number) => {
|
||||||
setActiveNodeState(true, "interactedWith");
|
setActiveNodeAttributes(true, "interactedWith");
|
||||||
|
|
||||||
const fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
|
const fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
|
||||||
const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
|
const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
|
||||||
|
@ -40,70 +40,70 @@ const nodeManager = (eventState: any) => {
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveNodeRot([0, 0, 0]);
|
setActiveNodeRot([0, 0, 0]);
|
||||||
setActiveNodeState(false, "interactedWith");
|
setActiveNodeAttributes(false, "interactedWith");
|
||||||
}, 3800);
|
}, 3800);
|
||||||
};
|
};
|
||||||
|
|
||||||
const animateNodeKnock = (siteRotY: number) => {
|
const animateNodeKnock = (siteRotY: number) => {
|
||||||
setActiveNodeState(true, "interactedWith");
|
setActiveNodeAttributes(true, "interactedWith");
|
||||||
|
|
||||||
const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
|
const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
|
||||||
|
|
||||||
setActiveNodePos([fstCoordSet.x, -0.6, fstCoordSet.z]);
|
setActiveNodePos([fstCoordSet.x, -0.6, fstCoordSet.z]);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveNodeState(false, "interactedWith");
|
setActiveNodeAttributes(false, "interactedWith");
|
||||||
}, 2500);
|
}, 2500);
|
||||||
};
|
};
|
||||||
|
|
||||||
const animateNodeKnockAndFall = (siteRotY: number) => {
|
const animateNodeKnockAndFall = (siteRotY: number) => {
|
||||||
setActiveNodeState(true, "interactedWith");
|
setActiveNodeAttributes(true, "interactedWith");
|
||||||
|
|
||||||
const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
|
const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
|
||||||
|
|
||||||
setActiveNodePos([fstCoordSet.x, -0.6, fstCoordSet.z]);
|
setActiveNodePos([fstCoordSet.x, -0.6, fstCoordSet.z]);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveNodeState(false, "visible");
|
setActiveNodeAttributes(false, "visible");
|
||||||
}, 2300);
|
}, 2300);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveNodeState(false, "interactedWith");
|
setActiveNodeAttributes(false, "interactedWith");
|
||||||
}, 2500);
|
}, 2500);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveNodeState(true, "visible");
|
setActiveNodeAttributes(true, "visible");
|
||||||
}, 3200);
|
}, 3200);
|
||||||
};
|
};
|
||||||
|
|
||||||
const animateNodeTouchAndScare = (siteRotY: number) => {
|
const animateNodeTouchAndScare = (siteRotY: number) => {
|
||||||
setActiveNodeState(true, "interactedWith");
|
setActiveNodeAttributes(true, "interactedWith");
|
||||||
|
|
||||||
const fstCoordSet = calculateCoordsBasedOnRotation(-0.6, 0.2, siteRotY);
|
const fstCoordSet = calculateCoordsBasedOnRotation(-0.6, 0.2, siteRotY);
|
||||||
|
|
||||||
setActiveNodePos([fstCoordSet.x, 0, fstCoordSet.z]);
|
setActiveNodePos([fstCoordSet.x, 0, fstCoordSet.z]);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveNodeState(true, "exploding");
|
setActiveNodeAttributes(true, "exploding");
|
||||||
setActiveNodeState(false, "visible");
|
setActiveNodeAttributes(false, "visible");
|
||||||
}, 1200);
|
}, 1200);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveNodeState(false, "interactedWith");
|
setActiveNodeAttributes(false, "interactedWith");
|
||||||
setActiveNodeRot([0, 0, 0]);
|
setActiveNodeRot([0, 0, 0]);
|
||||||
}, 1400);
|
}, 1400);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveNodeState(false, "exploding");
|
setActiveNodeAttributes(false, "exploding");
|
||||||
}, 3150);
|
}, 3150);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveNodeState(true, "visible");
|
setActiveNodeAttributes(true, "visible");
|
||||||
}, 3500);
|
}, 3500);
|
||||||
};
|
};
|
||||||
|
|
||||||
const animateShrinkAndRip = (siteRotY: number) => {
|
const animateShrinkAndRip = (siteRotY: number) => {
|
||||||
setActiveNodeState(true, "interactedWith");
|
setActiveNodeAttributes(true, "interactedWith");
|
||||||
|
|
||||||
const fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
|
const fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
|
||||||
const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
|
const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
|
||||||
|
@ -120,7 +120,7 @@ const nodeManager = (eventState: any) => {
|
||||||
}, 2800);
|
}, 2800);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveNodeState(true, "shrinking");
|
setActiveNodeAttributes(true, "shrinking");
|
||||||
}, 3000);
|
}, 3000);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
@ -128,17 +128,17 @@ const nodeManager = (eventState: any) => {
|
||||||
}, 3200);
|
}, 3200);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveNodeState(false, "visible");
|
setActiveNodeAttributes(false, "visible");
|
||||||
}, 3500);
|
}, 3500);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveNodeState(false, "interactedWith");
|
setActiveNodeAttributes(false, "interactedWith");
|
||||||
setActiveNodeState(false, "shrinking");
|
setActiveNodeAttributes(false, "shrinking");
|
||||||
setActiveNodeRot([0, 0, 0]);
|
setActiveNodeRot([0, 0, 0]);
|
||||||
}, 6400);
|
}, 6400);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveNodeState(true, "visible");
|
setActiveNodeAttributes(true, "visible");
|
||||||
}, 7500);
|
}, 7500);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -75,7 +75,7 @@
|
||||||
")": [32, 104, 8, 8, 0],
|
")": [32, 104, 8, 8, 0],
|
||||||
"-": [40, 104, 8, 8, 0],
|
"-": [40, 104, 8, 8, 0],
|
||||||
"!": [48, 104, 8, 8, 0],
|
"!": [48, 104, 8, 8, 0],
|
||||||
"\\": [56, 104, 8, 8, 0],
|
"\"": [56, 104, 8, 8, 0],
|
||||||
"#": [64, 104, 8, 8, 0],
|
"#": [64, 104, 8, 8, 0],
|
||||||
"%": [72, 104, 8, 8, 0],
|
"%": [72, 104, 8, 8, 0],
|
||||||
"&": [80, 104, 8, 8, 0],
|
"&": [80, 104, 8, 8, 0],
|
||||||
|
|
|
@ -59,7 +59,7 @@ const MainScene = () => {
|
||||||
const [introFinished, setIntroFinished] = useState(false);
|
const [introFinished, setIntroFinished] = useState(false);
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (intro && introWrapperRef.current && !introFinished) {
|
if (!introFinished && intro && introWrapperRef.current) {
|
||||||
if (introWrapperRef.current.position.z === -10) playAudio(audio.sound32);
|
if (introWrapperRef.current.position.z === -10) playAudio(audio.sound32);
|
||||||
if (
|
if (
|
||||||
Math.round(introWrapperRef.current.position.z) === -3 &&
|
Math.round(introWrapperRef.current.position.z) === -3 &&
|
||||||
|
@ -74,20 +74,21 @@ const MainScene = () => {
|
||||||
setLainIntroAnim(true);
|
setLainIntroAnim(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
|
||||||
Math.round(introWrapperRef.current.position.z) === 0 &&
|
|
||||||
Math.round(introWrapperRef.current.rotation.x) === 0 &&
|
|
||||||
!introFinished
|
|
||||||
) {
|
|
||||||
setIntroFinished(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (introWrapperRef.current.position.z < 0) {
|
if (introWrapperRef.current.position.z < 0) {
|
||||||
introWrapperRef.current.position.z += 0.05;
|
introWrapperRef.current.position.z += 0.05;
|
||||||
}
|
}
|
||||||
if (introWrapperRef.current.rotation.x > 0) {
|
if (introWrapperRef.current.rotation.x > 0) {
|
||||||
introWrapperRef.current.rotation.x -= 0.008;
|
introWrapperRef.current.rotation.x -= 0.008;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
!(
|
||||||
|
introWrapperRef.current.rotation.x > 0 &&
|
||||||
|
introWrapperRef.current.position.z < 0
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
setIntroFinished(true);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -21,6 +21,9 @@ const MediaScene = () => {
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
useEffect(()=> {
|
||||||
|
console.log('rend')
|
||||||
|
}, [])
|
||||||
return (
|
return (
|
||||||
<perspectiveCamera position-z={3}>
|
<perspectiveCamera position-z={3}>
|
||||||
<group position={[0.4, -0.3, 0]}>
|
<group position={[0.4, -0.3, 0]}>
|
||||||
|
|
10
src/store.ts
10
src/store.ts
|
@ -18,7 +18,7 @@ type State = {
|
||||||
activeNode: NodeDataType;
|
activeNode: NodeDataType;
|
||||||
activeNodePos: number[];
|
activeNodePos: number[];
|
||||||
activeNodeRot: number[];
|
activeNodeRot: number[];
|
||||||
activeNodeState: {
|
activeNodeAttributes: {
|
||||||
interactedWith: boolean;
|
interactedWith: boolean;
|
||||||
exploding: boolean;
|
exploding: boolean;
|
||||||
shrinking: boolean;
|
shrinking: boolean;
|
||||||
|
@ -122,7 +122,7 @@ export const useStore = create(
|
||||||
combine(
|
combine(
|
||||||
{
|
{
|
||||||
// scene data
|
// scene data
|
||||||
currentScene: "main",
|
currentScene: "boot",
|
||||||
|
|
||||||
// game progress
|
// game progress
|
||||||
gameProgress: game_progress,
|
gameProgress: game_progress,
|
||||||
|
@ -140,7 +140,7 @@ export const useStore = create(
|
||||||
},
|
},
|
||||||
activeNodePos: [0, 0, 0],
|
activeNodePos: [0, 0, 0],
|
||||||
activeNodeRot: [0, 0, 0],
|
activeNodeRot: [0, 0, 0],
|
||||||
activeNodeState: {
|
activeNodeAttributes: {
|
||||||
interactedWith: false,
|
interactedWith: false,
|
||||||
exploding: false,
|
exploding: false,
|
||||||
shrinking: false,
|
shrinking: false,
|
||||||
|
@ -268,12 +268,12 @@ export const useStore = create(
|
||||||
setNode: (to: NodeDataType) => set(() => ({ activeNode: to })),
|
setNode: (to: NodeDataType) => set(() => ({ activeNode: to })),
|
||||||
setNodePos: (to: number[]) => set(() => ({ activeNodePos: to })),
|
setNodePos: (to: number[]) => set(() => ({ activeNodePos: to })),
|
||||||
setNodeRot: (to: number[]) => set(() => ({ activeNodeRot: to })),
|
setNodeRot: (to: number[]) => set(() => ({ activeNodeRot: to })),
|
||||||
setNodeState: (
|
setNodeAttributes: (
|
||||||
to: boolean,
|
to: boolean,
|
||||||
at: "interactedWith" | "visible" | "exploding" | "shrinking"
|
at: "interactedWith" | "visible" | "exploding" | "shrinking"
|
||||||
) =>
|
) =>
|
||||||
set((state) => ({
|
set((state) => ({
|
||||||
activeNodeState: { ...state.activeNodeState, [at]: to },
|
activeNodeAttributes: { ...state.activeNodeAttributes, [at]: to },
|
||||||
})),
|
})),
|
||||||
|
|
||||||
// lain setters
|
// lain setters
|
||||||
|
|
Loading…
Reference in a new issue