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