fixed site intro/node title bugs, renamed nodestate to nodeattribtues

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;

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,

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 (

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);

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);
 

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;
 };

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;

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);
   };
 

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],

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);
+      }
     }
   });
 

src/scenes/MediaScene.tsx

@@ -21,6 +21,9 @@ const MediaScene = () => {
     };
   }, []);
 
+  useEffect(()=> {
+    console.log('rend')
+  }, [])
   return (
     <perspectiveCamera position-z={3}>
       <group position={[0.4, -0.3, 0]}>

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