diff --git a/src/components/MainScene/Site.tsx b/src/components/MainScene/Site.tsx index 8cbf0ec..d560072 100644 --- a/src/components/MainScene/Site.tsx +++ b/src/components/MainScene/Site.tsx @@ -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; diff --git a/src/components/MainScene/Site/Node.tsx b/src/components/MainScene/Site/Node.tsx index 7b47cbc..ce6423b 100644 --- a/src/components/MainScene/Site/Node.tsx +++ b/src/components/MainScene/Site/Node.tsx @@ -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, diff --git a/src/components/MainScene/Site/NodeAnimations.tsx b/src/components/MainScene/Site/NodeAnimations.tsx index 188a9ce..8af43b1 100644 --- a/src/components/MainScene/Site/NodeAnimations.tsx +++ b/src/components/MainScene/Site/NodeAnimations.tsx @@ -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 ( diff --git a/src/components/MainScene/Site/NodeAnimations/NodeExplosion.tsx b/src/components/MainScene/Site/NodeAnimations/NodeExplosion.tsx index 6779d72..8694b78 100644 --- a/src/components/MainScene/Site/NodeAnimations/NodeExplosion.tsx +++ b/src/components/MainScene/Site/NodeAnimations/NodeExplosion.tsx @@ -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); diff --git a/src/components/MainScene/Site/NodeAnimations/NodeRip.tsx b/src/components/MainScene/Site/NodeAnimations/NodeRip.tsx index 6dfd1c0..66ebc2d 100644 --- a/src/components/MainScene/Site/NodeAnimations/NodeRip.tsx +++ b/src/components/MainScene/Site/NodeAnimations/NodeRip.tsx @@ -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); diff --git a/src/components/Preloader.tsx b/src/components/Preloader.tsx index a8db4f1..0f79409 100644 --- a/src/components/Preloader.tsx +++ b/src/components/Preloader.tsx @@ -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; }; diff --git a/src/components/TextRenderer/GreenTextRenderer.tsx b/src/components/TextRenderer/GreenTextRenderer.tsx index f4532fc..adfe305 100644 --- a/src/components/TextRenderer/GreenTextRenderer.tsx +++ b/src/components/TextRenderer/GreenTextRenderer.tsx @@ -27,7 +27,7 @@ const GreenTextRenderer = memo(() => { let lineNum: number; if (letter === " ") { - lineNum = 5; + lineNum = 6; } else { if (lineOne.includes(letter)) { lineNum = 1; diff --git a/src/core/setters/main/site/nodeManager.ts b/src/core/setters/main/site/nodeManager.ts index cb46552..2c613d8 100644 --- a/src/core/setters/main/site/nodeManager.ts +++ b/src/core/setters/main/site/nodeManager.ts @@ -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); }; diff --git a/src/resources/font_data/medium_font.json b/src/resources/font_data/medium_font.json index acdea06..2477560 100644 --- a/src/resources/font_data/medium_font.json +++ b/src/resources/font_data/medium_font.json @@ -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], diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx index 709c752..2f693b5 100644 --- a/src/scenes/MainScene.tsx +++ b/src/scenes/MainScene.tsx @@ -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); + } } }); diff --git a/src/scenes/MediaScene.tsx b/src/scenes/MediaScene.tsx index b313952..32b478c 100644 --- a/src/scenes/MediaScene.tsx +++ b/src/scenes/MediaScene.tsx @@ -21,6 +21,9 @@ const MediaScene = () => { }; }, []); + useEffect(()=> { + console.log('rend') + }, []) return ( diff --git a/src/store.ts b/src/store.ts index 48e66fe..e021278 100644 --- a/src/store.ts +++ b/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